본문 바로가기

전체 글

 (33)
GSAP 리사이징 이슈 해결 GSAP 리사이징 이슈GSAP 스크롤 이벤트 관련 이슈 1탄 (디자인 가이드에 맞추기 위해 부모 전체에 pin을 잡고 중간 자식 섹션의 가로 스크롤로 인해 그 이후의 섹션들의 start 값이 오락가락)에 연관된 이슈로 리사이징을 하게 되면 스크롤 시작 위치를 인지 못하는 이슈가 발생하였다.이건 리사이징 하게 되면 바로 생기는 이슈이기도 했지만, 나는 pin + 가로 스크롤로 인해 간헐적으로 start 값이 변화되는 경우도 발생하였다. 이슈 배경첫 로딩시에는 문제가 없었지만, 새로고침 / 리사이징이 되는 경우 스크롤 start/end 의 위치가 어긋나게 됨특히 pin이 되는 섹션이 존재하게 되면서, ScrollTrigger의 시작 시점이 일관되지 않음 해결 방안1. ScrollTrigger를 함수로 분리하..
GSAP + Nuxt.js - pin + 스크롤 이벤트 처리 사이트 개편 프로젝트를 진행하면서 애니메이션이 들어가게 된 페이지를 맡게 되었습니다.애니메이션 자체는 디자인상 많이 복잡하지는 않았지만, GSAP를 사용하여 pin 고정과 가로로 이동하는 애니메이션 효과를 주면서 이슈가 발생하였는데요.이 문제만 거의 일주일동안 머리를 싸매며 고민하고, 수정하고 또 삽질만 열심히 하면서 깨달았습니다...원하는 구현 작업section2에 진입하게 되면 현재 화면을 고정을 시키고, 스크롤에 따른 section2내의 컴포넌트 요소들을 가로로 이동을 시키게 하는 애니메이션을 구현을 해야 한다.하지만 상단에 각각의 섹션의 이동을 위해 sticky menu 작업이 추가로 필요했다. section1 .... ... ... ... ... ... ... 이슈 배경..
[AWS] EC2: Virtual Machines EC2: Virtual MachinesEC2는 기본적으로 AWS 내부 네트워크용 프라이빗 IP, 전 세계 웹(WWW)용 퍼블릭 IP를 제공한다.EC2 User Data인스턴스를 EC2 사용자 데이터 스크립트를 사용하여 부트스트랩 할 수 있습니다.부트스트래핑이란 머신이 시작될 때 명령을 실행하는 것을 의미합니다.해당 스크립트는 인스턴스가 처음 시작될 때 한번만 실행됩니다.목적업데이트 설치소프트웨어 설치인터넷에서 공용 파일 다운로드EC2 사용자 데이터 스크립트는 루트 사용자 권한으로 실행됩니다.EC2 Meta DataEC2 인스턴스에 대한 정보IAM 역할을 사용하지 않고도 EC2 인스턴스가 스스로에 대해 “학습” 할 수 있도록 합니다.강력하지만 개발자들에게는 거의 알려지지 않은 기능중 하나입니다.메타데이터에..
[AWS] IAM IAMAWS 접근할때는 루트 계정을 절대 사용해서는 안된다. 적절한 권한을 가진 사용자를 생성하여야 한다.사용자 : 실자 사람그룹 : 기능(관리자, 데브옵스) 팀(엔지니어링, 디자인)으로 사용자 그룹을 포함역할 : AWS 리소스 내에서 내부적으로 사용정책(JSON 문서) : 위의 각 항목이 수행 할 수 있는 작업과 수행 할 수 없는 작업을 정의정책IAM 정책은 작업을 수행하는 방법에 관계없이 작업에 대한 권한을 정의합니다.정책 타입Identity-based 정책 : 관리형 및 인라인 정책을 IAM ID(사용자, 그룹, 역할)에 연결. Identity-based 정책은 ID에 권한을 부여합니다.Resource-based 정책 : 가장 일반적인 예는 Amazon S3 버킷 정책 및 IAM 역할 신뢰 정책입니..
[AWS] AWS CloudFormation AWS CloudFormationAWS CloudFormation을 활용하면 인프라를 손쉬운 방법으로 처리할 수 있음 (인프라 관리 및 자동화)템플릿을 활용하여 하나의 스택으로 구성할 수 있음리소스를 개별적으로 관리하는 대신 템플릿을 통해 전체 스택을 단일 단위로 처리하여 필요한 만큼 자주 생성 및 업데이트하고 삭제할 수 있음스택은 여러 AWS 계정 및 리전에 걸져 관리 및 프로비저닝 할 수 있음작동원리YAML 또는 JSON 포맷으로 CloudFormation 템플릿을 작성하거나, 샘플 템플릿을 사용하여 인프라 코드로 작성로컬의 템플릿 코드를 체크아웃 하거나, S3 버킷에 템플릿 업로드AWS 콘솔, 명령줄 도구(CLI) 또는 API를 통해서 AWS CloudFormation을 사용하여 템플릿 코드를 기반..
[AWS] AWS Lambda AWS Lambda란 🤔서버를 관리하지 않고도 코드를 실행할 수 있게 해주는 컴퓨팅 서비스함수Lambda에서 코드를 실행하기 위해 호출할 수 있는 리소스함수에는 사용자가 함수에 전달하거나 다른 AWS 서비스가 함수에 보내는 이벤트를 처리하는 코드가 있음이벤트처리할 Lambda 함수에 대한 데이터가 포함된 JSON 형식 문서런타임은 이벤트를 객체로 변환한 후 함수 코드에 전달배포 패키지함수 코드 및 종속 항목이 포함된 .zip 파일 아카이브런타임런타임은 실행 환경에서 실행되는 언어별 환경을 제공Lambda와 함수 간의 호출 이벤트, 컨텍스트 정보 및 응답을 전달코드를 .zip 파일 아카이브로 패키징하는 경우 프로그래밍 언어와 일치하는 런타임을 사용하도록 함수를 구성컨테이너 이미지의 경우 이미지를 빌드할 ..
[AWS] 용어 정리 AWS Key Management Service (AWS KMS) 고객 관리형 키데이터를 보호하는 데 사용되는 암호화 키를 쉽게 만들고 제어할 수 있게 해주는 관리형 서비스키 관리 및 암호화 기능을 애플리케이션에서 직접 사용하거나 통합된 AWS서비스를 통해 사용할 수 있음AWS KMS 지정된 Amazon S3 버킷으로 AWS CloudTrail로그 파일을 전송하는 서비스와 통합됨 → CloudTrail을 사용하면 KMS키가 언제 어떻게 사용되었고 누가 사용했는지 모니터링 할 수 있음AWS Secret Manager수명주기 전반에 걸쳐 데이터베이스 자격 증명, 애플리케이션 자격 증명, OAuth토큰, API 키 및 기타 비밀을 관리, 검색 및 교체할 수 있도록 지원하드 코딩된 보안 인증 정보가 필요하지 않..
[끄적끄적] 2023년도 ~ 2024년 현재까지의 일상 정말 오랜만에 게시물을 작성해보는 듯 하다. 2022년도 하반기에 N사 프론트엔드 개발자로 이직하게 되면서 정신없이 하루하루 보내며 다양한 프로젝트들을 작업 할 수 있었다.물론, 모든 프로젝트가 완벽하지는 않았다. 시간에 쫓겨 (?가 아니라 내 실력이 아직 그정도였을 수도..?) 허겁지겁 작업 된 프로젝트도 있었다..그 프로젝트는 QA 단계에서 QA 담당자분들이 고생 많이 하셨... ㅠ_ㅠ 죄송해서 간식도 가져다 드린적 있다..그래도 그 후론 앞으로 좀 더 꼼꼼하게 개발하게 되었다고 한다....   그리고 그 사이에 조직 개편이 되어서 팀이 다른 조직으로 흡수가 되면서 이래저래 적응도 필요했다.적응이라고 쓰고 자리이동을 3번...(프로 봇짐러 수준..흑흑) 사실 사람들이 3, 6, 9 단위의 시기마다 현..

티스토리툴바