1. 배경숫자 야구 웹 게임을 구현하던 중, 플레이어가 선택한 비밀 숫자를 어디에, 어떻게 저장할지 고민하게 되었다. 데이터베이스에 저장하는 방법도 떠올렸지만, 이 숫자는 게임이 끝나면 사라져도 되는 일시적인 데이터이고, 매번 예측 요청이 들어올 때마다 DB를 조회하는 것도 비효율적이라고 판단해 빠르게 후보에서 제외했다.그 대신,프론트엔드에서 전역 상태 관리로 들고 갈지백엔드에서 캐시를 활용해 관리할지두 가지 방식 사이에서 고민하게 되었다. 이번 글에서는 이 두 접근 방식 중 하나를 선택하기까지 어떤 기준으로 비교하고 고민했는지 정리해 보고자 한다.2. 문제 구체화 위 이미지와 같이, 게임방에 두 플레이어가 접속하고 게임을 시작하면, 각자 고유의 비밀 번호를 설정할 수 있다. 비밀 번호의 요구 사항은 다..

배경Next.js 프로젝트에서 백엔드로 API 요청을 보내기 전, Route Handler를 통해 클라이언트의 토큰 정보를 헤더에 포함하고 백엔드로 요청을 전송하는 BFF를 구축했다. 클라이언트의 쿠키를 다루기 위해 Next.js에서 제공하는 cookies 함수를 활용한 유틸 서버 액션을 구현했으며, Route Handler에서 해당 서버 액션을 활용하여 헤더를 설정하도록 했다. 하지만 이 과정에서 헤더에 토큰 정보가 undefined로 설정되는 현상이 발생하여, 원인을 분석하고 해결한 과정을 공유하고자 한다.기술 스택해당 프로젝트는 Next.js 16.0.3 버전을 기준으로 작성되었다.문제 발생문제 상황을 언급하기 전에 API 라우트와 cookies 관련 유틸 서버 액션은 다음과 같이 작성되었다.coo..

배경1편에서 Next.js와 tailwindcss 그리고 백엔드는 Nest.js로 이루어진 모노레포로 구성된 프로젝트를 진행했으며, pnpm-workspace.yaml 모노레포의 패키지 별 의존성 문제를 해결했다. 그러나 tailwindcss를 사용하는 과정에서 새로운 문제가 발생했다. 그래서 2편에서는 tailwindcss 관련해서 어떤 문제가 발생했는지, 어떻게 해결했는지를 공유하고자 한다.기술 스택기술 스택은 1편과 동일하다.프론트엔드언어: TypeScript프레임워크: Next.js v16스타일링: Tailwindcss v4패키지 매니저: pnpm백엔드언어: TypeScript프레임워크: Nest.js v11ORM: Typeorm데이터 베이스: PostgreSQL패키지 매니저: pnpm문제 발생t..

배경이번에 풀스택 개발을 진행하면서, Next.js 프론트엔드와 Nest.js 백엔드 애플리케이션을 공동으로 작업하기 위해 모노레포를 구성하였다. 모노레포를 구성하는 것도 처음이라서 혼란스러운 부분이 많았는데, 프론트엔드 애플리케이션 외부에서 tailwind css를 사용할 수 있도록 세팅하는 과정이 많이 힘들었다. 이번 글에서는 Next.js와 tailwindcss로 모노레포를 구성하는 법을 작성하고, 다음 글에서는 그 과정에서 겪은 트러블 슈팅 내용을 공유하고자 한다.기술스택이번 풀스택 프로젝트를 위해 사용한 기술스택은 아래와 같다.프론트엔드언어: TypeScript프레임워크: Next.js v16스타일링: Tailwind css v4패키지 매니저: pnpm백엔드언어: TypeScript프레임워크: ..

들어가며우아한테크코스 3주 차 과제를 무사히 완주하고, 드디어 4주 차가 되었다. 4주 차 과제는 오픈 미션으로 이번 기수에 처음으로 도입된 미션이다. 오픈 미션은 본인이 스스로 도전하고 싶은 목표를 실천하고, 그 목표를 달성하고자 노력하여 결과물을 도출해야 한다. 이번 기수의 주제가 "도전"인 만큼 문제 해결력뿐만 아니라, 주도적으로 문제를 정의하고 도전하는 정신을 보는 것 같았다. 이번 글에서는 평소에 내가 도전해보고 싶었던 것을 주제로 하여, 목표를 설정하게 된 과정을 기록하고자 한다.오픈 미션우선, 오픈 미션은 3가지의 대표적인 방식이 있다.낯선 도구 해커톤: 난이도는 평범하나 평소에 잘 사용하지 않는 개발 도구나 언어(예: Rust, Kotlin, WebAssembly, 하드웨어 보드 등)로 문..

3주차 소감3주차 과제는 일정 관리를 잘 못한 것 같다. 꿈에 그리던 기업의 신입 채용 공고가 떠서, 자기소개서를 작성하는 데 일주일을 쏟아 부운 것 같다. 자기소개서를 적어본 경험도 거의 없기에 다른 지원자들 보다 많은 어려움이 있었고, 많은 시간이 들었다. 일요일에 호다닥 제출하고 나니 남은 기간은 이틀밖에 없었다. 남은 이틀동안 과제를 완료할 수 있을까?에 대한 걱정이 생겼다. 완료할 수는 있지만 고민하는 시간도 짧기에 구조적으로 퀄리티가 높지 않을 것이다. 만약 프리코스 이전의 나였다면, 완성에 급급하여 저퀄리티의 코드를 작성했을지도 모른다. 하지만 프리코스에서 만난 스터디원들은 우아한테크코스에 진심으로 몰두하고 있으며, 모두가 합격하기를 바라는 마음으로 서로를 응원해주고 있다. 나 또한 응원으로..

2주차 KPT 회고Keep(유지할 점)1. "왜?"라는 질문 자주하기2주차에는 특히 어떤 설계가 좋은 설계인가?를 고민하며 진행하였다. 좋은 설계를 하기 위해서는 왜 이렇게 하는게 좋은지를 알아야 하기에 "왜?"라는 질문을 계속 던지며 과제를 진행했던 것 같다. 1주차에서는 객체지향에 도전해보고자 객체지향 프로그래밍을 도입하였다. 하지만 무턱대고 도입하기 보다는 왜 사용하는지 알아야 앞으로 개발하는 데 있어 의사 결정력을 키우기 좋을 것이라 판단했다. 그래서 가장 처음으로 "이번 과제는 객체지향을 적용해야 하는 것인가?", "적용한다면 왜 해야 되는거지?"라는 고민을 시작했다. 이번에는 전진 동작을 수행하고 이름과 위치 정보를 가지는 "자동차"라는 명확한 객체가 있었으며, 해당 객체를 다루며 경주를 진행..

첫 번째 미션1주차 과제는 문자열 덧셈 계산기를 구현하는 것이다.문자열 덧셈 계산기는 사용자의 입력이 주어지면 구분자를 통해 문자열을 분리한 후 숫자를 모두 합산하여 출력하는 프로그램이다. 구분자가 ','인 경우는 아래와 같이 동작한다.Input: "1,2,3"Output: 6 프로그램에는 기본 구분자가 정해져 있으며 특수한 조건을 통해 사용자가 직접 커스텀 구분자를 설정할 수 있다. 특수한 조건은 문자열에 포함해야 하고 프로그램은 이를 인식하여 커스텀 구분자를 통해 문자열을 분리할 수 있어야 한다. 1주차는 우아한 테크코스의 컨벤션과 개발 환경에 적응하는 주차라서 비교적 쉬운 문제가 출제되었다. 난이도가 쉬웠던 만큼 요구사항 분석, 설계, 구현 과정이 그렇게 오래 걸리지 않았던 것 같다.스스로 해석하기..

배경팀원들과 진행하던 프로젝트에서 인증 방식을 AccessToken과 RefreshToken을 사용하는 JWT 토큰으로 채택하였다.로그인 시 AccessToken을 발급 받고 인증이 필요한 요청에서 AccessToken을 사용하는 방식이었다. 만약, AccessToken이 만료되면 RefreshToken을 통해 재발급 받는 요청을 서버에 보내게 되는데, Axios interceptor를 활용하여 재발급 로직을 처리하고 있다.하지만 불필요한 API 요청이 발생하여 서버에 부담이 생기는 현상이 발생하였다.이러한 현상이 발생하는 이유와 해결한 과정을 공유하고자 한다.문제 상황현재 발생하고 있는 문제는 아래의 과정을 거친다. 이 과정으로 인해, 불필요한 API 요청이 발생하여 서버에 부담이 발생하게 된다. 또한..

배경우리는 많은 웹사이트에서 Multi Step Form을 본 적이 있다. 여러 UI에 걸쳐서 폼을 작성하기보다는 Single Step Form으로 한 번에 작성하도록 구현하는 것이 개발하기 쉬울텐데 왜 Multi Step Form으로 만드는 걸까? 하는 생각이 들었다. 그래서 Single Step Form과 Multi Step Form의 차이점 및 장단점을 살펴보고 나만의 기준을 정하고자 한다. 각 장단점은 나의 주관적인 생각으로 작성되었다.Single Step FormSingle Step Form은 한 페이지에 모든 내용을 표시하는 일반적인 문서와 같은 Form이다.아래 이미지와 같이 플랫폼이 요구하는 내용을 한 페이지에 모두 표시한 경우, 이는 Single Step Form에 해당된다.Single ..