결론 Next.js13 버전에서 SSG를 하려면 미리 랜더링 할 경로를 리턴하는 generateStaticParams API를 사용하세요. 마주한 에러 next.js로 블로그를 만드는 중입니다. contentlayer를 통해 mdx로 작성한 파일을 파싱하고 콘텐츠를 생성합니다. 개발 모드에서는 잘되는 랜더링이 vercel을 통한 배포 모드에서는 404 에러가 발생했습니다. 해당 경로의 페이지나 파일을 찾을 수 없다는 뜻입니다. 왜그럴까? Next.js에서는 폴더구조 기반으로 라우팅이 됩니다. 그중 [대괄호] 폴더 내의 파일들은 dynamic routes로 정확한 segment(url 경로)를 알지 못하고 동적 데이터로 경로를 생성하려는 경우 요청 시 혹은 빌드타임에 미리 랜더링 할 때 사용할 수 있습니다..
최근에 Next.js 프로젝트를 만들어보면서 CSR, SSR의 뿐만 아니라 React Server Component(이하 RSC) 개념과도 깊은 연관이 있음을 알게 되었다. 리액트가 서버 컴포넌트를 제공해 주지 않았을 때를 생각해 본 적이 없어서 (무려 2년도 안 된 일) 그저 Next.js가 React 앱을 SSR해주는 프레임워크정도로만 알고 있었기에 RSC를 공부하면서 Next.js를 이해하는데 도움이 되어 학습한 내용을 기록한다. RSC란? 말 그대로 서버에서 실행되는 리액트 컴포넌트이다. 이 단순한 개념이 뭐가 그렇게 특별해서 하나의 주제로 선정했냐 하면 바로 '컴포넌트'라는데 있다. 컴포넌트는 내부로직과 함께 UI를 그려주는 단위지만 다른 말로 하면 jsx를 반환하는 함수다. 이 함수는 CSR에..
결론 server action을 사용해 해당 경로를 revalidation해주세요. 상황 - 서버컴포넌트에서 route handler를 통해 json-server로 요청을 보낸다. (원래는 서버컴포넌트에서 route handler를 사용할 필요 없이 바로 요청을 보내도 된다.) - 게시글을 수정하고 추가했을 때 해당 게시물 페이지로 라우팅 된다. - 라우팅 된 게시물 페이지에서 get요청으로 받은 수정된 게시글 내용이 업데이트되지 않는다. - 게시글 목록페이지로 넘어가도 추가된 게시물을 볼 수 없다. - 새로고침을 해야만 변경된 데이터가 모두 로드된다. post, patch요청한 데이터는 정상적으로 업데이트 되었고 route handler로 호출한 get요청도 정상적으로 되는것을 network 탭에서 확..
바쁜 연말과 연초를 보내고 드디어 한 해를 돌아볼 여유가 생겼다. 2023년은 여러가지 변화가 많았다. 새해에 맞추어 한국에 돌아왔고 2월부터 시작한 부트캠프를 8월에 수료했다. 6개월 동안 흘러내리던 지식을 막느라 하반기를 당장의 취업보다는 모두 학습에 쏟아부었다. 메인 프로젝트 리팩토링과 최적화를 진행했고 우테코 프리코스에 4주간 매달려도 봤으며 원티드 프리온보딩 챌린지에 참가하여 캡슐단(ㅎㅎ)에 들기도 했다. 최적화 작업을 하면서 내가 작성한 코드가 웹에 어떻게 그려지는지 어떻게 하면 더 가볍고 빠르게 그릴 수 있는지 학습하는 계기가 되었다. 메인 프로젝트에서 만난 팀원들과 종종 연락하면서 지내고 있고 언젠간 토이프로젝트도 같이 진행해보고 싶다. 우테코 프리코스에서는 메인 코드를 고치면서 여기저기 ..
📌 비즈니스로직이 뭘까? 우테코 프리코스 과제였던 로또게임을 예로 들어보자. 당첨번호와 입력번호를 받아서 당첨내역과 수익률을 출력하는 게임이었다. 한줄로 설명할 수 있는 간단한 게임이지만 '1~45 사이의 숫자 입력' '1000원 단위 숫자 입력' '5개 번호 일치 + 보너스번호 일치시 보너스당첨' 등 요구사항들을 모두 접목하다 보면 복잡해진다. 로또 게임에서의 입력을 버튼으로 가정하고 로직을 작성해 본다면 아래와 같다. 1. 구매금액 입력버튼 - 1000원 단위인지 숫자인지 유효성 검사를 한다. - 로또 구매 가능 개수를 계산한다. - '3장의 로또를 구매했습니다.' 와 같은 안내 문구를 출력한다. - 구매 개수에 따라 당첨 번호를 만들어서 출력한다. 2. 사용자 당첨번호 입력버튼 - 6개의 숫자로 이..
✅ 코드가 복잡해지는 이유 강의에 따르면 개발자들의 고민 중 하나는 기존의 코드를 고치느라 시간을 많이 쓴다. 였다. 작은 기능을 위해 큰 비용을 지출해야 하는 것은 개발자 본인에게도 기업의 입장에서도 손해가 아닐 리 없다. “프로그램이 동작하도록 만드는 데 엄청난 수준의 지식과 기술이 필요하지는 않다. 언제든 어린 고등학생이라도 할 수 있는 일이다. (...) 전 세계의 수많은 초급 프로그래머가 칸막이로 나뉜 작은 사무실에서 이슈 추적 시스템에 등록된 거대한 요구사항 문서들을 순전히 강인한 정신력만으로 힘겹게 해결해 내면서 시스템을 '동작'하도록 만든다. 이들이 작성한 코드는 그다지 깔끔하지 않을 순 있지만, 동작은 한다. 프로그램을 동작하게 만들기는 그리 어려운 일이 아니기 때문이다.” - 클린 아키..
지난 4주 차 회고에서 다음 단계로 집중해야 할 것으로 1. 미션 다시 구현해 보기 2. 동료이용하기 가 있었다. 혼자 미션들을 다시 구현해 보면서 코드리뷰를 받을 생각을 가지고 있었는데 감사하게도 나에게 맞는 조건 아래 동기분이 스터디를 열어 주셔서 참가했다. 스터디는 미션 다시 풀기와 코드리뷰를 중점적으로 진행했다. 어려웠던 미션(로또, 크리스마스)과 작년 최종 코딩테스트 문제를 실전 코딩테스트처럼 5시간 내로 각자 구현하고 다음 이틀 동안 코드리뷰를 하는 방식으로 진행했다. 프리코스기간 동안 조금 바빴어서 이번에는 소수의 인원이 약속한 만큼 진정한 몰입을 하고 싶었다. 미션들을 다시 구현해 보며 가장 중점적으로 신경 썼던 점은 피드백 적용하기이다. 본 프리코스를 진행하면서 읽어도 이해되지 않은 점도..
📌 4주 차 미션: 크리스마스 프로모션 드디어 마지막 미션을 받았습니다. 많이 복잡해진 요구사항을 보고 망했다 싶었지만 매주 같은 반응이었기 때문에 지난 미션들을 해낸 제 자신을 믿고 성실히 과제를 수행하였습니다. ✅ 4주 차 목표 클래스(객체)를 분리하는 연습 미션 내내 지속적으로 역할과 책임을 분리하도록 강조하고 있었고 이번 미션에서는 추가적인 학습 목표 없이 더 심도 있게 클래스를 분리하는 연습을 하도록 되어있었습니다. ✅ 추가된 프로그래밍 요구사항 제공되는 InputView, OutputView 객체를 활용해 구현한다. const InputView = { async readDate() { const input = await Console.readLineAsync("12월 중 식당 예상 방문 날짜는..
📌 3주 차 미션: 로또 5기 프리코스 후기에서도 어렵다고 들었던 로또가 이번 주의 미션이었습니다. 구현해야 하는 기능 자체의 난이도도 올라갔지만 과제 요구사항에 맞추어 코드를 작성하는 것이 쉽지 않았습니다.🧐 ✅ 3주 차 학습 목표 클래스(객체)를 분리하는 연습. 도메인 로직에 대한 단위 테스트를 작성하는 연습 ✅ 추가된 프로그래밍 요구사항 1. 함수의 길이가 15라인을 넘어가지 않도록 구현한다. - 함수가 한 가지 일만 잘 하도록 구현한다. 2. else를 지양한다. - 힌트: if 조건절에서 값을 return하는 방식으로 구현하면 else를 사용하지 않아도 된다. - if/else, switch문을 사용하는것이 더 깔끔할 때가 있다. 이 부분은 스스로 고민해 본다. 3. 도메인 로직에 단위 테스트를..
📌 2주 차 미션 : 레이싱 카 게임 레이싱 카 게임은 자동차 이름 목록과 경주할 횟수를 사용자에게서 입력받고 가장 많이 전진한 자동차 이름을 출력하는 게임입니다. 요구사항들을 읽어보면서 1주 차와 달리 오 이번 과제 조금 복잡하겠는데?라는 생각이 들었습니다. (3주 차 과제를 받은 지금 레이싱카 게임이 그립네요..) 입력을 받은 값을 하나씩 검사해야 하고 개별로 점수를 매기며 우승자가 2명 이상 일 수 있다는 점에 난이도가 상승한 느낌이 들었거든요 🥹 👩🏻💻 커밋주기는 얼마가 적당할까? 과제 요구 사항에 기능 단위 커밋을 한다고 적혀있는데 작성한 기능 목록 단위로 작성을 해야 할지 각 기능 안의 세분화된 기능들 단위로 작성을 해야 할지 스스로도 기준이 명확하지 않았습니다. 때마침 디스코드에서 커밋 단..
