개발자일지

S3에서 파일 재배포하기S3에서 버킷을 선택한다. 업로드 버튼을 선택한다. npm run build를 통해 얻은 /dist 포더에 있는 파일을 루트에 업로드 한다.(dist 폴더 통째를 업로드하고, 안의 파일을 루트 폴더로 이동시켜도 된다) CloudFront 캐시 무효화하기[ 무효화를 해야하는 이유 ]CloudFront는 전 세계 엣지 서버에 파일을 캐시해 두고 그걸 계속 내보낸다. 그래서 S3에 새 파일을 올려도 엣지에 남아 있는 예전 사본을 TTL(유효시간) 동안 계속 전달한다. 무효화(invalidation)는 “그 캐시 지워! 다음 요청은 원본(S3)에서 새로 가져와!” 라는 지시라서, 배포 직후 변경사항을 즉시 반영하려면 필요한 과정이다. 특히 SPA의 index.html은 파일명이 고정..

퍼블릭 액세스 차단이 되어있지 않다면 다시 차단한다. S3 > 버킷 > 버킷 선택 후 퍼블릭 엑세스 차단 편집에서 다시 차단하면 된다. 콘솔의 검색창에서 cloudFront를 검색하여 이동한 뒤 CloudFront 배포 생성을 클릭한다. Distribution options > Distribution name에 배포 이름을 입력하고, Custom domain에는 Route 53을 통해 등록했던 도메인을 입력한다. Amazon S3를 선택하고, Origin > S3 origin에 방금 전 생성한 S3를 입력한다. 아래 이미지와 같이 설정한 뒤 Next 버튼을 클릭한다. 보안 보호 활성화를 선택한 뒤 Next를 클릭한다.1천만 건에 14 달러 정도의 요금이 부과된다고 한다. Next 버튼을 클..

S3이해하기Amazon S3(Simple Storage Service) 는 AWS의 객체 스토리지이다. “버킷(bucket)”이라는 폴더 비슷한 공간을 만들고, 그 안에 파일(객체: HTML, JS, 이미지, 동영상 등)을 키(key)로 넣고 꺼내는 서비스이다. 내구성, 확장성, 비용 효율이 좋아서 정적 웹사이트, 백업, 로그 보관, 이미지/첨부 저장소로 가장 많이 사용한다. AWS S3로 리액트 빌드 파일 정적 웹호팅을 통해 배포하기AWS 콘솔 검색에서 S3를 검색하여 클릭한다. 버킷을 만들어야 한다. 버킷은 S3에서 파일(=객체)를 담아두는 최상위 컨테이너라고 할 수 있다. 프로젝트별 "최상위 폴더"같은 개념이다. 버킷 만들기 버튼을 클릭해서 버킷을 만든다. 버킷 유형은 범용을 선택하고, 버킷..

Route 53도메인을 구매하면, 결국 DNS로 특정 서버를 가리켜야 한다. 이 때 필요한 것이 네임서버이고 이걸 AWS에서 관리해주는 시스템이 Route 53이다. Amazon Route 53은 AWS에서 제공하는 도메인 네임 시스템 서비스로, 사용자가 구매한 도메인을 인터넷 상의 웹사이트나 애플리케이션과 연결할 수 있도록 네임서버를 관리한다. 단순히 example.com 같은 주소를 서버의 IP로 변환해주는 기능뿐 아니라, AWS의 다른 서비스(S3, CloudFront, Load Balancer 등)와 긴밀히 연동되어 별도의 복잡한 설정 없이도 도메인을 매끄럽게 연결할 수 있다. 즉, AWS에서 도메인의 모든 레코드(A, CNAME, MX, TXT 등)를 직접 설정할 수 있다. Route 53으로..

새롭게 시작하는 'AI가 해주는 코드 리뷰' 카테고리의 첫 글이 공간을 만들기로 결심한 배경에는 두가지 큰 이유가 있다.첫 째는 모든 개발자들이 체감하고 있는 AI의 기술의 폭발적인 발전과, 두번째는 나의 지극히 개인적이고 특별한 업무 환경 때문이다. 최근 몇 년간 코로나 등으로 인해 개발자 시장은 전에 없이 뜨거웠다. 하지만 이제는 상황이 조금 달라졌다. AI 기술의 급속한 발전 덕분에 기본적인 코드 작성의 허들이 낮아지면서, 역설적으로 개발자의 수가 폭발적으로 증가하고 있다. 특히 코딩 교육을 받은 비전공자나 부트캠프 수료생까지 시장으로 쏟아져 나오면서, 프런트엔드와 같은 진입 장벽이 비교적 낮은 분야는 '레드 오션'이 되었다는 평가를 받고 있다.이런 상황에서 프런트엔드 개발자로서 살아남고 성장하기 ..

AWS IAM 계정을 생성해야하는 이유AWS를 가입할 때 만든 기본 계정은 모든 권한을 가진 Root 계정이다. 이 계정으로 Access Key를 발급하거나, 개발자가 직접 쓰면 보안사고로 이어질 위험이 크다. 이게 만약 유출되면 AWS 전체 계정이 털리는 것이라고 생각하면 된다. IAM 계정을 사용하면 필요한 권한만 제한적으로 줄 수 있다. 예를 들어 어떤 사람은 EC2만 관리하고, 어떤 사람은 S3만 접근하게 할 수 있다. 만약 키가 유출되더라도 Root 처럼 전체 계정이 털리는게 아니라 주어진 권한 범위에만 영향을 주게 된다. 또한 IAM으로 발급된 계정은 누가 언제 무슨 API를 호출했는지 CouldTrail에서 추적이 가능해서 사고 대응이나 감사에 유리하다. 실제 운영 환경에서는 무조건 IAM ..

AWS 시작하기AWS는 Amazon Web Services의 약자로, 아마존이 제공하는 클라우드 컴퓨팅 서비스이다. 쉽게 말해, 인터넷을 통해 서버, 스토리지, 데이터베이스 같은 IT 자원을 빌려 쓰는 서비스이다. AWS의 주요 특징 중 하나는 사용한 만큼만 비용을 지불한다는 것이다. 갑자기 트래픽이 늘어나면 서버를 추가했다가, 다시 줄어들면 서버를 삭제할 수 있어 효율적으로 사용할 수 있다. 또한 서버(EC2), 파일 저장(S3), 데이터베이스(RDS), 인공지능(SageMaker) 등 200개가 넘는 다양한 서비스를 제공한다. AWS는 전 세계 여러 지역에 데이터 센터를 두고 있어, 사용자와 가까운 곳에서 서비스를 제공해 지연 시간을 줄일 수 있고, 비즈니스 성장에 맞춰 IT 자원을 손쉽게 늘리고 ..

제어흐름분석(CFA)란?타입스크립트의 제어흐름분석(Control Flow Analysis)은 코드의 실행 흐름을 추적하여 특정 시점의 변수 타입을 더 좁고 정확하게 추론하는 기능이다. 이 기능을 통해 typeof, instanceof, in 연산자 같은 타입 가드(Type Guard)를 사용하면, 컴파일러가 코드가 실행되는 특정 경로에서 변수의 타입을 제한하여 더 안전한 코드를 작성할 수 있도록 한다. 쉽게 말해 TypeScript 컴파일러가 if, else, switch, try-catch 같은 제어문 흐름을 따라가면서 변수의 가능한 타입을 점점 더 정확하게 추적하는 기능이며, 이 기능으로 인해 개발자가 직접 타입을 지정하지 않아도, 컴파일러가 알아서 "여기서는 이 타입만 가능하다"라고 이해한다. ..

리액트 프로젝트에 타입스크립트를 추가하는 가장 일반적인 방법은 프로젝트를 처음 만들 때부터 타입스크립트 템플릿을 사용하는 것이다. 만약 이미 자바스크립트로 된 프로젝트가 있다면, 필요한 패키지를 설치하고 파일 확장자를 변경하는 과정을 거쳐야 한다. 새 프로젝트에 타입스크립트 적용하기새 리액트 프로젝트를 시작할 때, 가장 쉬운 방법은 create-react-app 이나 Vite 같은 도구를 사용해 타입스크립트 템플릿으로 시작하는 것이다. npx create-react-app 명령어는 my-app 이라는 새 리액트 앱을 만들면서, 기본적인 타입스크립트 설정과 함께 필요한 패키지들을 자동으로 설치해 준다.npx create-react-app my-app --template typescriptnpm cre..

블로그를 티스토리에서 워드프레스로 이전하는 과정에서는 다양한 기술적 문제와 관리상의 고민이 발생할 수 있다. 특히 글 콘텐츠 자체를 이전하는 과정은 비교적 단순하지만, 게시글 주소(URL)의 구조와 대소문자 처리 방식은 검색엔진 최적화(SEO)와 사용자 접근성에 직접적인 영향을 미치기 때문에 주의가 필요하다. 티스토리에서는 대문자와 소문자가 혼합된 URL도 각각 별개의 주소로 인식되지만, 워드프레스는 기본적으로 슬러그를 소문자로 통일하여 저장하므로 기존의 URL 구조를 그대로 유지하기 어렵다. 이로 인해 단순히 글을 이전하는 것만으로는 SEO 손실이나 중복 콘텐츠 문제를 예방할 수 없으며, 주소 체계와 리디렉션 전략을 함께 고려해야 한다. 티스토리 vs 워드프레스: URL 대소문자 차이티스토리는 U..