개발자일지

Vim을 처음 접하면 “왜 아무것도 입력되지 않는 것인가?”라는 당황스러운 상황을 마주하게 된다. 일반적인 에디터와 달리 Vim은 실행하자마자 바로 글을 입력할 수 있는 구조가 아니라, ‘모드’라는 개념을 기반으로 동작하기 때문이다. 이 차이를 이해하지 못하면 키를 눌러도 반응이 없는 것처럼 느껴지고, 오히려 더 복잡하고 어렵게 느껴질 수 있다. 하지만 Vim의 핵심은 생각보다 단순하다. 입력 모드와 명령 모드라는 기본 개념만 이해하고, 자주 사용하는 최소한의 명령어 몇 가지만 익히면 Git 커밋 메시지 작성, 서버 환경에서의 파일 수정, CLI 기반 작업 등 다양한 개발 상황에서 막힘 없이 사용할 수 있게 된다. 결국 Vim은 어려운 도구가 아니라, 사용 방식이 조금 다를 뿐인 효율적인 에디터이다. [..

Google Search Console TXT 인증 오류 해결 방법Google Search Console에서 도메인을 인증하려고 할 때 아래와 같은 오류가 발생하는 경우가 있다.확인 방법:도메인 이름 공급업체실패 이유:도메인의 TXT 레코드에서 인증 토큰을 찾을 수 없습니다. 변경된 DNS가 표시되는 데는 시간이 소요될 수 있습니다. 몇 시간 정도 기다린 후 Search Console에서 속성을 다시 열어 보세요. 인증에 다시 실패하면 다른 DNS TXT 레코드를 추가해 보시기 바랍니다. 이 오류는 Search Console이 도메인 DNS에 등록된 TXT 레코드를 아직 찾지 못했을 때 발생하는 일반적인 현상이다. 아래는 이 오류가 발생하는 이유와 해결 방법이다. TXT 레코드가 루트 도메인에 추가..

회원가입과 로그인 기능을 구현하다 보면 한 번쯤 고민하게 되는 문제가 있다.이메일은 대소문자를 구분해야 할까? 결론부터 말하면, 프론트엔드에서는 이메일을 항상 소문자로 통일해서 처리하는 것이 실무적으로 가장 안전한 선택이다. 이 글에서는 그 이유와 프론트엔드에서의 올바른 처리 방법을 정리해보겠다. 이메일 대소문자에 대한 이론적 기준이메일 주소는 RFC 표준에 따라 @ 기호를 기준으로 두 부분으로 나뉜다. 앞부분인 local-part는 이론적으로 대소문자를 구분할 수 있도록 정의되어 있으며, 뒷부분인 domain-part는 대소문자를 구분하지 않는 것이 원칙이다. 즉, 표준 문서만 놓고 보면 이메일 주소의 구조상 대소문자 구분 가능성이 일부 존재한다. 이러한 규칙에 따르면 Test@Example.co..

구글 관리 콘솔 도구 상자란?구글 관리 콘솔 도구 상자(Google Admin Toolbox)는 Google에서 제공하는 네트워크·DNS·메일·도메인 관련 문제를 진단하기 위한 공식 기술 도구 모음이다. 개발자나 서버 관리자가 DNS 오류, 메일 전송 문제, SPF/DKIM/DMARC 설정, 도메인 소유권 문제 등을 해결할 때 아주 자주 사용하는 툴이다. DIG, DNS 상태를 확인하는 도구DIG는 Google DNS 서버(8.8.8.8)를 기준으로 도메인의 DNS 정보를 실시간으로 조회할 수 있는 도구이다. DNS 관련 문제를 해결할 때 가장 많이 사용되는 핵심 도구이다. DIG로 확인할 수 있는 정보A / AAAA 레코드CNAME 레코드TXT 레코드MX 레코드NS, SOA 정보DNS 전파 여부 ..

2025년 12월, React 생태계에 큰 영향을 미치는 중대 보안 취약점이 공개되었다. 특히 React Server Components(RSC)를 사용하는 프로젝트에서 인증 없이 원격 코드 실행(Remote Code Execution, RCE)이 가능해질 수 있는 치명적인 문제였다. React 팀은 즉시 패치를 배포했고, 전 세계 개발자들에게 빠른 업데이트를 권고하고 있다. 이 글에서는 해당 취약점의 원인, 영향 범위, 해결 방법을 쉽게 이해할 수 있도록 정리해보았다. RSC에서 어떤 취약점이 발생했나?문제는 RSC가 서버와 클라이언트 사이에서 데이터를 교환할 때 사용하는 “Flight 프로토콜”의 페이로드 검증 부족이 원인이었다.그 결과 인증 없이도 공격자가 서버에 악의적인 요청을 보낼 수 있고..

Presigned URL을 사용하는 이유일반적인 파일 업로드 방식은 프론트에서 백엔드로 파일을 보내고, 백엔드가 다시 S3로 업로드하는 구조라서 파일이 클수록 서버 부하가 커지고, 다중 파일 업로드에서는 백엔드가 모든 스트림을 처리해야 해 비효율적이다. 반면 Presigned URL 방식은 프론트가 백엔드에 업로드용 URL 생성만 요청하고, 백엔드는 이를 반환한 뒤 파일 데이터는 전혀 받지 않으며, 프론트가 해당 URL로 직접 S3에 업로드하기 때문에 백엔드 부하 없이 더 빠르고 안정적인 업로드가 가능해진다.일반적인 업로드 방식Presigned URL1. 프론트가 백엔드로 파일 전송2. 백엔드가 S3로 파일 어볼드3. 업로드 성공 후 URL 반환1. 프론트가 백엔드에 업로드 URL 생성 요청2. 백엔드가..

프론트엔드 개발을 하다 보면 수많은 내장 함수를 마주하게 된다.그중에서도 업무에서 자주 쓰이고, 꼭 알아두면 유용한 함수 10가지를 정리해보았다.이 함수들은 React, Vue, 바닐라 JS 어디에서든 자주 등장한다. console.log()가장 기본적이지만, 가장 많이 쓰이는 함수이다.디버깅을 하거나 값이 제대로 들어왔는지 확인할 때 사용한다.console.log('현재 상태:', state); 코드 중간중간에 로그를 찍어두면 문제를 찾기 훨씬 쉽다. document.querySelector()HTML 요소를 선택할 때 사용하는 함수이다.CSS 선택자 문법을 그대로 쓸 수 있어서 직관적이다.const button = document.querySelector('#submitBtn');button.ad..

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에서 파일(=객체)를 담아두는 최상위 컨테이너라고 할 수 있다. 프로젝트별 "최상위 폴더"같은 개념이다. 버킷 만들기 버튼을 클릭해서 버킷을 만든다. 버킷 유형은 범용을 선택하고, 버킷..