My Boundary As Much As I Experienced

오늘 pages router 강의를 들으면서 예제를 진행하다 MongoDB Atlas Driver를 설치해야되었다. 그러다가 위와 같은 에러가 났는데, 찾아보니 버전 관련 에러인거 같다.예제 파일 자체가 React17에 Next10으로 된 옛날 파일이어서 발생하는 것 같았다. 검색해보면 나오는 해결책은 주로 아래와 같다.- nvm을 깔아서 node를 최신버전으로 업데이트하기 (https://blog.naver.com/dlaxodud2388/222572943250)- npm update를 통해서 라이브러리 버전을 모두 최신버전으로 유지하기 그러나 위의 방법들이 먹히지 않았다.mongoDB Atlas의 최신버전이 돌아가지 않을 정도로 React/Next가 옛날 버전인건 맞긴 한데...npm update를 했..

getStaticPaths가 해결하려는 문제: SSG 빌드 시 동적 페이지의 구성을 파악할 수 없다.SSG에서는 빌드 시 사전에 페이지들을 미리 생성하게 된다.그런데 SSG 방식으로 사이트에서 동적 페이지를 만들 때, Next.js는 [id].js에 속하는 동적 페이지가 뭔지 다 알지 못한다.그래서 SSG + 동적 라우팅을 쓰면서 getStaticPaths를 쓰지 않으면 아래와 같은 에러를 볼 수 있는 것이다. 뭔지 모른다는 말!  그렇기 때문에 발생할 수 있는 모든 패러미터들을 정리해서 Next.js에 제공하는 것이 getStaticPaths의 역할이다.Got it? 사실 이게 다다. 나도 처음 들을 때 여기까지는 이해가 얼추 되긴 했지만, 개인적으로 든 의문점이 하나 있긴 했었다. Next.js 팀은..

지금까지 나는 React을 활용하면서 배포과정이라던가 캐싱 같은 부분을 vercel같은 편리한 배포툴에 의존하는 편이었다.그래서 Next.js 등을 배우면서 SSR, SSG의 개념을 처음 접하게 되었고, getStaticProps, getServerSideProps, getStaticPath들의 사용법도 처음 알게되었다. 이게 이론적인 설명만 들을 땐 '아하 그런거구나' 싶더라도 '결국 코드로 구현했을때는 어떻게 되는건데?', "왜 이렇게 설계되어있는거지?" 등의 의문이 계속 있게 되었다. 그러나 Udemy React/Next 강의를 들으며 조금 더 제대로 정리하게 되었고 이를 적어보려한다.  getStaticProps란?정적 페이지(Static Site Generation)를 빌드할 때 사용한다.이름 ..

나는 새로운 기술을 읽을 때 공식문서를 읽는 것도 좋지만 처음엔 관련 강의를 들어 이 기술이 어떻게 돌아가는지 기본 개념을 챙기는걸 좋아한다. 한 번 수강 이후 궁금한 것이 생길 때 비로소 공식문서를 보는 편이다. 그래서 이번에 Next.js를 새로 배우며 새로운 강의를 여럿 시도했는데, 괜찮은 강의들은 모두 pages router에서 app router 내용으로 리뉴얼이 됐거나, 처음부터 app router를 다루는 강의들이 많더라. 그러나 현재 회사에선 pages router를 사용하기 때문에 최대한 pages router를 다루는 Next.js강의를 찾아보려고 노력했다.  국내 강의 page router 강의는 진짜 많이 없다.사실 부트캠프 수료 리워드로 받은 모 플랫폼의 꽁짜강의에 page rou..

URL 마스킹이란?URL 마스킹은 사용자에게 보여지는 URL을 실제 페이지 구조와는 다르게 표시하고자 할 때 사용되는 기술이다.(router.push 또는 router.replace 메소드를 사용할 때 쓸 수 있는 'as 파라미터'가 URL 마스킹에 사용된다.)url 파라미터: 실제로 라우팅되는 페이지의 경로as 파라미터: 브라우저의 주소 표시줄에 표시되는 경로 왜 쓰는데?사용자 경험 향상: 사용자에게 더 읽기 쉽고 이해하기 쉬운 URL을 제공함으로써 사이트의 전반적인 사용자 경험을 개선할 수 있다.보안 강화: 사용자가 URL을 통해 어떤 정보를 추측하는 것을 방지할 수 있다. UseRouter를 쓸 때 URL 마스킹하기 (예시)예를 들어, 사용자가 /products/1 페이지에 있고, 이 상품의 이름이..

이 일련의 과정을 진행해본 이유사수님께서 네트워크 기반 지식의 중요성을 매우 강조하시는 분이었다. 나도 네트워크와 배포 과정에 대해서 궁금한게 꽤 있어서 물어봤다가 한바탕 네트워크 강의가 펼쳐졌고, 그 강의의 과제로 AWS EC2 배포를 한 번 진행해볼 것을 권장하셨다.  Apache서버를 설치한 이유사수님이 원래는 Nginx를 세팅해볼 것을 권장하셨다. 그런데 Nginx는 설정하면서 config 파일들도 설정할게 많더라. 특정 블로그 보면서 Nginx 설치를 시도했었는데 모든 과정을 다 적으시지 않은건지, 혹은 내 컴퓨터 환경이 필자와 뭔가 다른건지, 원하는 결과를 내기 힘들었다. 그래서 다른 유튜브나 문서들을 보며 설치를 시도하다가, 어떤 영상에서 상대적으로 설치가 쉬운 Apache서버를 세팅하길래 ..

예전 프로젝트에서 github action을 사용할 때 yaml 스크립트를 다룬 적이 있다. 배포 시 작동하며 환경 변수를 firebase hosting에 제공하는 용도로 YAML을 썼던 기억이 있는데.. 그땐 그냥 YAML이라는 생소한 포맷의 스크립트는 뭔가 파이썬 처럼 들여쓰기로 문법 구분하구나. 라고만 생각하고 넘어갔다. 그런데 node.js 파일 모듈을 다루면서 gray-matter라는 라이브러리를 사용하는데 yaml 파일에서 메타데이터를 뽑는 예제를 보고 한 번 정리해야겠다 싶어서 정리한다. YAML의 역사 YAML은 2001년에 Clark Evans, Ingy döt Net, 그리고 Oren Ben-Kiki에 의해 만들어졌다. 이들은 데이터를 직렬화하는 방법으로 XML의 복잡성을 단순화하고자 ..

부정확함 주의! 막 네트워크 공부 시작한 신입 프론트엔드 개발자가 chatGPT와 여러 블로그들을 탐색하며 정리한 글이다. 자의적인 해석이 들어가 있을 수 있으며, 혹여 틀린 부분이 있다면 댓글로 알려주면 감사드리겠다. 웹서버와 프론트 서버가 다른건가? 웹어플리케이션서버(WAS)는 또 뭔데? 웹서버, 프론트 서버, 웹어플리케이션 서버... 사실 알다가도 모르겠는 개념들이다. 지금까지 프론트엔드 배포란 Vercel이나 Netlify, firebase hosting 등을 통해 앗싸리 해왔고 이걸로도 충분하다고 생각했었는데, 그러나 사수님께서 실제로 자신이 ec2 등의 클라우드 서버를 빌려 배포파일을 업로드 하는 경험을 해보란 조언을 해주셨 해보니 쉬울거라고 생각은 안 했지만, 훨씬 어려웠고, 알아야하는 개념..

Next.js에서 파일이나 폴더 이름 앞에 언더스코어(_)가 붙는 것은 특별한 의미를 지니며, 주로 Next.js 프레임워크의 내부적인 또는 시스템에 의해 특별하게 처리되는 요소들을 나타낸다. '_'가 앞에 붙는 특수 파일1. _app.js 또는 _app.tsx이 파일은 Next.js 애플리케이션의 루트 컴포넌트를 정의하며, 모든 페이지에 공통적으로 적용되는 레이아웃이나 상태를 설정하는 데 사용된다. _app.js는 페이지 전환 시 상태를 유지하고, 전역 CSS를 추가하는 등의 기능을 수행할 수 있다.2. _document.js 또는 _document.tsx_document.js는 서버에서만 렌더링되며, 초기 서버 사이드 렌더링 시 HTML 문서의 구조를 구성한다. 이 파일을 통해 , 태그와 같은 HT..

_app.js란? Next.js에서 보면 _app.tsx파일을 활용한 경우가 종종 존재한다. 이것은 어디다 쓰는 파일일까? 리액트를 사용해봤으면 app.tsx파일에서 각종 전역상태관리 provider, 레이아웃용 컴포넌트 등을 관리해본 경험이 있을것이다. _app.tsx는 바로 그 용도로 사용된다. (사실 _app.js는 Page Router에서 주로 쓰이는 파일이다. App Router 구조에서도 쓰일수는 있지만 _App.js의 역할을 쪼개어 분리한 다른 파일 컨벤션을 사용한다.본문 아래에 정리되어있다.) _app.js의 역할 말했다시피 리액트 앱의 app.tsx 혹은 main.tsx의 역할과 거의 동일하다고 보면 된다. 전역 상태 관리 설정 (예: Redux, Context API) 페이지 전환시 레..