SSAFY 16기 합격 ~ 3개월차 Journey

현재 서울에서 자취하고 있고, 그동안의 바운더리에서 크게 벗어나고 싶지 않아서 서울캠퍼스로 지원하였다.지원을 하게 된 동기는 크지 않았다. 여느 지원자처럼 매달 100만원이라는 금액을 받으며 안정적으로 취준을 할 수 있다는 점, 그리고 규칙적인 생활과 교육 환경을 제공받을 수 있다는 점에 지금이 적기라고 생각되어 지원했다.실제로 지금 받고 있는 일명 싸월급과 멀티캠퍼스 내의 환경은 취준하는데 큰 도움이 된다고 생각한다.특히 같이 준비하는 친구들이 모두 취준을 목표로 하고 있기 때문에, 주고받는 정보도 딱 내게 필요한 경우가 많고 무엇보다 혼자 준비하는 것보단 멘탈 관리에 도움이 정말 많이 된다. 물론 그렇다고 한들 싸피를 다니는 것이 내 취업 성공으로 직결되는 것은 아니라고 생각하기에, 그동안 싸피를 다..

• format_list_bulleted 기타
• · 2026. 9. 24.

[AI] RAG를 만들어보자

기획 배경19개월째 프로젝트를 이어오면서 팀 내 의사결정이나 회의 과정에서 지속적으로 발생하는 문제가 보이기 시작했다. 가장 대표적인 문제는 두 가지였다. 첫 번째는, 회의 중에 과거 회의 내용을 기억하지 못해 문제가 생기는 경우가 많아졌다는 것이다. 약 70회차가 넘는 회의록이 쌓이다 보니 팀원들 내부에서도 과거 의사 결정 내용을 기억하지 못하는 경우가 종종 발생한다. 이런 경우 다른 팀원들의 기억에 의존해야하다보니 회의 진행에 병목이 발생한다.두 번째로는, 추측성 의사 결정 문제이다. 시간이 많이 흐를수록 회의 내용은 과거의 내용을 전제로 생성된다. 그런데 과거 내용에 대한 사실 여부를 확인하기도 어렵고 회의 내용이 회차를 거듭하면서 변형되기 때문에 잘못된 시점의 내용으로 기억하고 있다면 다음 의사 ..

• format_list_bulleted 카테고리 없음
• · 2026. 9. 23.

[Next.js] 성능 개선기 (2) - 하이드레이션·서드파티 최적화로 TBT 개선하기

1부에서 폰트 최적화로 대역폭 병목을 해소하고 나서 오히려 TBT가 630ms에서 700ms로 올라갔다. 처음엔 뭔가 잘못된 줄 알았는데, 생각해보면 당연한 일이었다. 폰트 2MB가 사라지자 기존에 가려져 있던 JS 실행 비용이 더 좁은 구간에 몰려서 드러난 것이다. 결국 다음 타깃은 메인스레드를 잡아먹는 JS 자체였다. 이번 글에서는 'use client' 경계 관리와 서드파티 스크립트 정리, 두 가지 작업으로 Performance 78 → 86, TBT 700ms → 300ms를 달성한 과정을 정리해보려 한다. 목차문제 파악 - 메인스레드가 왜 이렇게 바쁜가'use client' 경계 관리 - useParams 하나가 만든 나비효과서드파티 스크립트 정리최적화 후 돌아보기문제 파악 - 메인스레드가..

• format_list_bulleted React
• · 2026. 8. 11.

[Next.js] 성능 개선기 (1) - 웹폰트 동적 서브셋으로 LCP 개선하기

지난 즐겨찾기 페이지의 렌더링 전략 개선을 진행하면서 LightHouse를 재측정해보게 되었다. 오랜만에 확인해봐서 그런건지 점수가 생각보다 많이 낮았다.Largest Contentful Paint가 3.5초라고 표시되고 있었는데, 이건 사용자가 페이지에 들어왔을 때 가장 큰 콘텐츠가 3.5초 뒤에야 렌더링된다는 뜻이다.이건 사용자 경험과 직결되는 문제이기 때문에 무시하고 넘어갈 수가 없었다.이 글은 그 과정에서 웹폰트가 LCP에 얼마나 큰 영향을 미치는지 알게 된 경험, 그리고 동적 서브셋을 통해 1st party 전송량을 2,128KB에서 119KB로 줄인 과정을 정리한 글이다.개선 전후 수치개선 결과부터 간단히 요약하면 다음과 같다.개선 전개선 후 개선 전개선 후 개선 전개선 후 전송량이 절반 ..

• format_list_bulleted React
• · 2026. 8. 11.

[Next.js] 즐겨찾기 페이지의 렌더링 전략 전환기: 하이드레이션 워터폴과 이중 요청을 React Query Prefetch로 해결하기

즐겨찾기 기능을 처음 구현할 때는 별 고민 없이 SSR로 처리했다. 어차피 서버에서 데이터를 내려주면 되는 거 아닌가 싶었기 때문이다.그런데 실제로 운영하다 보니 즐겨찾기를 추가하거나 제거해도 페이지를 새로고침하면 예전 상태가 그대로 표시되는 버그가 발생했다. 이걸 고치려고 CSR로 바꿨더니 이번엔 하이드레이션 이후 데이터 요청 워터폴과, Http-Only 쿠키 처리를 위한 프록시 이중 요청이라는 새로운 문제가 기다리고 있었다.결국 두 번의 렌더링 전략 전환을 거쳐 React Query의 prefetch 기반 SSR로 정착하게 되었는데, 그 과정을 정리해보려 한다. 목차1단계: 정적 SSR의 즐겨찾기 갱신 버그2단계: CSR 전환과 새롭게 생긴 문제들하이드레이션 워터폴이란 무엇인가Http-Only 쿠키와..

• format_list_bulleted React
• · 2026. 7. 29.

[Next.js] Next.js 프로젝트를 위한 Docker 배포 가이드

DockerDocker는 애플리케이션을 컨테이너라는 격리된 환경에 이미지로 패키징하여, 어떤 리눅스 환경에서든 동일하게 실행할 수 있도록 해주는 기술이다.Docker 이미지 안에 어떤 운영체제를 사용하고, 어떤 런타임 환경을 사용하며 그 버전은 어떠한지 등을 담아두어 어디에서 실행하든 동일하게 코드가 동작할 수 있도록 한다. Docker의 핵심 구성 요소Docker로 앱을 배포하기 위해선 세 가지 요소를 알아야한다.Dockerfile이미지를 만들기 위한 설정 파일이다. 어떤 환경을 사용할지, 어떤 명령어를 실행할지 등을 텍스트의 형태로 담아둔 파일이다.Docker ImageDockerfile을 빌드한 결과물이다. 앱 실행에 필요한 모든 것이 담긴 패키지로, 이 이미지를 이용하면 동일한 환경에서 코드를 실..

• format_list_bulleted React
• · 2026. 1. 28.