개발 블로그

SNS 앱 프로젝트를 개발하면서 매번 Postman 이나 브라우저를 열어서 API를 수동으로 테스트하는 것이 번거로웠다. 회원가입 API를 수정할 때마다 직접 폼을 채우고, 로그인을 테스트할 때마다 이메일과 비밀번호를 입력하고, 게시글 작성 API를 확인할 때마다 일일히 폼 데이터를 채우고.. 이런 반복 작업이 쌓이다 보니 아래의 몇 가지 문제들이 생겼다. 1. 시간 낭비: 작은 수정 하나에도 여러 API를 다시 테스트해야 함 2. 휴먼 에러: 수동 테스트라 놓치는 케이스가 생김 3. 회귀 버그: 새로운 기능 추가 시 기존 기능이 망가졌는지 확인하기 어려움 4. 문서화 부재: 어떤 API가 어떤 응답을 반환하는지 기억에 의존 때문에 Test 자동화가 필요하다는 생각이 들었다.처음에는 "테스트 = ..

Next.js로 SNS 앱을 개발하면서 AWS RDS를 데이터베이스로 사용하게 되었다.처음에는 "데이터만 잘 저장되고 조회되면 되지 않나?" 싶었는데, 실제로 운영하다 보니 궁금한 게 생겼다.지금 DB에 연결이 몇 개나 되어 있지? CPU 사용률은 괜찮은가? 느린 쿼리는 없나? 혹시 에러가 발생하진 않았나? 와 같은 궁금증이었다.문제가 생기고 나서야 "아, 모니터링을 해뒀어야 했는데..." 하고 후회하기 전에, CloudWatch로 RDS를 모니터링하는 방법을 정리해봤다. RDS는 기본적으로 CloudWatch에 메트릭을 자동으로 전송한다. 별도 설정 없이도 다음과 같이 확인할 수 있다!RDS 인스턴스를 들어가 모니터링 탭을 선택하면 아래와 같은 매트릭 지표들을 확인할 수 있다. (1) CPU 관련 1-..

이미지 최적화를 공부하면서 인프라를 공부해야겠다는 다짐을 했다.하지만 단순히 인프라를 공부하는 것 보단 실습을 하면서 체득하는 것이 더 좋을 것 같아.간단한 사이드 프로젝트를 만들기로 다짐했다. 이미지를 최대한 많이 다룰 수 있는 앱을 생각해보니 SNS 앱밖에 떠오르지 않아서..Next.js 로 SNS 앱을 개발하려고 한다. 동시에 데이터베이스 관리에 Drizzle ORM을 도입했다.이 글에서는 직접 SQL을 작성하는 방식과 Drizzle을 사용하는 방식을 비교하며 실제로 어떤 문제들을 해결할 수 있었는지 기록해보려고 한다.ORM이란?ORM(Object-Relational Mapping)은 객체 지향 프로그래밍 언어와 관계형 데이터베이스 사이의 데이터를 변환해주는 도구이다.쉽게 말해, SQL을 직접 작성..

이미지 최적화를 공부하다 보면 “브라우저 캐시”라는 개념을 피할 수 없다.이미 한 번 불러온 이미지를 다시 다운로드하지 않고, 브라우저가 저장해두었다가 재사용하는 방식이다.그런데 문득 이런 의문이 들었다.“이미지가 바뀌면, 브라우저는 그걸 어떻게 알아차릴까?”이 궁금증을 따라가다 보니 결국 ETag(Entity Tag) 라는 개념을 만나게 됐다.ETag는 HTTP 응답 헤더 중 하나로, 특정 버전의 리소스를 식별하는 식별자다.서버는 파일의 버전에 따라 고유한 ETag 값을 생성하고, 브라우저는 그 값을 기억해둔다. 이번에는 Etag에 대해서 공부한 내용을 정리해보려고 한다.ETag란?ETag는 서버가 응답을 보낼 때 리소스(이미지, HTML, JS, CSS 등)에 대한 고유한 식별자를 함께 전달하는 방식..

자바스크립트의 실행 컨텍스트를 공부하다 보면 콜 스택(Call Stack) 이라는 개념이 꼭 등장한다.처음엔 단순히 함수가 쌓였다가 빠진다 정도로만 이해했는데, 그 구조를 제대로 이해하려면 결국 스택(Stack) 이라는 자료구조 자체를 알아야 한다는 걸 깨달았다.이번 글에서는 실행 컨텍스트를 지탱하는 기반 구조인 스택 자료구조를 공부해보려고 한다.Stack이란?스택은 후입선출(Last In, First Out = LIFO) 구조의 자료구조다.나중에 들어온 데이터가 먼저 나가는 구조를 가진다. 스택은 보통 3 가지 핵심 연산으로 구성된다.push(item)새로운 데이터를 스택의 맨 위(top)에 추가pop()스택의 맨 위 데이터를 제거하고 반환peek()스택의 맨 위 데이터를 제거하지 않고 확인 간단한 자..

이미지 최적화 공부를 하다가 문득 ‘데이터를 효율적으로 저장하고 꺼내는 방법’이 얼마나 중요한지 깨달았다.특히, 브라우저 캐시나 CDN이 내부적으로 어떻게 이미지를 빠르게 찾아내는지를 이해하려면 자료구조의 기본 원리를 알아야 했다.그중에서도 해시 테이블(Hash Table) 은 데이터를 ‘빠르게 찾는 구조’의 대표적인 예라서, 이번엔 그 원리를 정리해보기로 했다.1. 해시 테이블 이란?해시 테이블(Hash Table) 은 데이터를 (Key, Value) 형태로 저장하는 자료구조이다.핵심 원리는 다음과 같다.데이터를 단순히 순서대로 저장하는 대신, Key 값을 해시 함수(Hash Function) 에 넣어배열의 인덱스(Index) 로 변환하고, 그 인덱스 위치(=버킷, 슬롯 이라고 부른다.)에 값을 저장한..

웹 개발을 하면서 이미지들을 자주 다루게 되는데 그 이미지들은 포맷이 정말 다양하다.시간이 흐르고 기술이 고도화되면서 새로운 이미지 포맷들도 생기곤 한다.그런 흐름 속에서 유저가 사용하는 브라우저가 가장 최신 포맷의 이미지를 로드할 수 없는 이전 버전의 브라우저 일수도 있고혹은 가장 최신 버전의 브라우저일수도 있다. 그럼 이런 상황에서 다양한 포맷 그리고 브라우저에 따라 알맞게 이미지를 보여줄 수 있는 방법이 무엇이 있을까 찾아보니 태그를 알게 되었다. 이번 게시글에서는 태그에 대해서 알게된 내용들을 기록해보려고 한다!우선 태그는 무엇일까? 태그는 한마디로 “상황에 따라 다른 이미지를 보여줄 수 있게 해주는” html 태그이다.안에는 여러 개의 태그랑, 마지막에 기본 이미지를 담고 있는 태그 하나..

웹 서비스에서 이미지가 차지하는 비중은 정말 큰 것 같다.현재 회사에서 참여하고 있는 프로젝트만 해도 이미지를 정말 많이 다루고 있기 때문에 이미지 관련 고민들을 항상 개발하면서 하는 것 같다.아무리 코드 로직을 최적화 하려고 해도 이미지 하나가 수 MB만 되도 로딩 속도가 급격히 느려진다.한창 프로젝트 개발 테스트를 하면서 5~11MB 의 이미지들 10개를 한번에 로드하려고하니 로딩 속도가 엄청 느려졌었다. 그때 개발하면서 이거 바쁘다바빠 현대사회에 사는 유저들이 이 로딩속도를 참을 수 있을까? 하는 걱정이 됐다. 그래서 이런 문제를 해결하기 위해 Next.js에서 Image 컴포넌트를 제공하는데 평소 나는 개발하면서 이 Image 컴포넌트에 대해 잘 알지 못한채 사용하는 것 같아. 이번 기회에 Ima..

이전 글에서는 개발자 도구를 통해 웹 브라우저 내부에서 어떤 일이 일어나는지를 살펴봤다.그때 ‘렌더링, 네트워크, 메인 스레드’ 같은 단어들을 보면서결국 사용자에게 콘텐츠가 얼마나 빠르게 도달하느냐가 핵심이라는 생각이 들었다. 이번엔 콘텐츠가 전 세계 사용자에게 어떻게 전달되는지,그리고 이 과정에서 핵심 역할을 하는 CDN(Content Delivery Network) 개념을 정리해보려고 한다. 먼저 CDN 이란 무엇일까?CDN은 Content Delivery Network의 줄임말로 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크이다. 말그대로 콘텐츠를 더 빠르게 전달하기 위한 네트워크 이다.사용자가 웹 사이트를 방문할 때 웹사이트 서버 데이터는 사용자의 ..

최근 개발자 도구 의 성능 탭을 분석하다가 Flame chart 를 보다가 도대체 '자바 스크립트 실행' 이라는 건 내부적으로 어떻게 돌아가는 걸까? 라는 생각이 들었다. 자바 스크립트를 활용하다 보면, 코드가 잘 돌아가는지 " 표면적인 결과 " 만 보게 되는 경우가 많은 것 같다.하지만 성능을 분석하거나 예상치 못한 버그를 디버깅 하려고 하면 그 밑바닥에서 엔진이 어떻게 실행하는지 인지하고 있어야 디버깅 시간이 효율적으로 단축되지 않을까 하는 생각이 들었다. 바로 그 핵심이 실행 컨텍스트 와 스코프 인 것 같다. Flame chart에서 노란색 Scripting 구간은 JS가 " 현재 어떤 실행 컨텍스트 위에서 동작 중인지" 를 시각화한 것이다.즉, 실행 컨텍스트의 원리를 이해해야 Flame char..