https://nextjs.org/docs/app/building-your-application/routing/route-groups 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-07으로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. 역자의 개인적인 의견에 대한 내용은 이 안에서 이루어집니다. app folder의 계층 구조는 url 경로에 직접 매핑됩니다. 하지만 routes groups을 생성하여 이 패턴에서 벗어날 수 있습니다. - URL 구조에 영향을 주지 않고 경로를 구성합..
👱♂️간헐적 회고 나오늘 뭐했냐 꽤 간만에 회고를 작성하는데 최근에 너무 바쁘기도하고 머리깨질일이 많아서 자연스럽게 회고를 미뤘다. 굵직굵직한 일만 나열하자면 다음과 같다. 1. next.js docs를 번역하는 프로젝트를 만들었다. 근데... 대충 일주일정도 진행하는 중에 betadocs가 정식 docs로 편입되면서 stable은 사라지고 문서구조가 완전히 달라지게 되었다.. ㅎㅎ... 그래서 어쩔수없이 레포지토리도 대대적으로 개편이 필요했다. 시간을 생각보다 많이 잡아먹어서 걱정이다. 2. 2인 프로젝트를 구상중이다. 아직 시작은 안했지만 피그마로 간단하게 와이어프레임은 작성했고 프로젝트 스택은 어느정도 구상해두었다. 3. 다음주엔 todolist를 만드는 간단한 프로젝트를 한다. 그래서 이것에 대..
🐕 환경변수를 사용해야하는 이유 API key 노출되면 다른 사람에게 한무 즐기기를 당할 수도 있습니다. 굉장히 불쾌하고 API의 플랜에 따라서는 통장잔고가 남아나지 않을 수도 있겠죠..? 따라서 github에 API Key를 고대로 올려버리면 안됩니다. 잘 숨겨줘야 하는데 주로 환경변수를 많이 이용합니다. 물론 이러한 용도로만 사용되는 것은 아니고 개발, 테스트, 실제 서비스 등 여러 환경에서 애플리케이션을 배포하게 되기 때문에 각 환경에 따라서 다르게 설정해야하는 항목들을 환경변수로 관리합니다. 👻환경 변수를 등록하는 방법 root 디렉토리에 .env 혹은 .env.local 파일을 생성해줍니다. 이 안에는 키밸류 쌍의 형태로 값을 저장해줄 수 있습니다. 루트디렉토리에 생성한 .env.local 파일..
🐕 install npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 자바스크립트를 사용하고자하는 경우엔 다음과 같이 명령어를 입력한다. project 이름을 입력하지 않는 이유는 입력하면 대충 앎 npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 타입스크립트를 사용하고싶다면 --typescript를 붙여주면 된다. 👻라이브러리 설치 npm install react-icons --save $ npm install next-themes # or $ yarn a..
https://beta.nextjs.org/docs/routing/loading-ui 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-03으로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. 역자의 개인적인 의견에 대한 내용은 이 안에서 이루어집니다. error.js 파일 컨벤션을 사용하면 중첩된 경로에서 런타임 에러를 우아하게 처리할 수 있습니다. - 경로 세그먼트와 그 중첩된 자식들을 react 에러 바운더리에서 자동으로 래핑합니다. - 파일 시스템 계층 구조를 사용하여 특정 세그먼트..
https://beta.nextjs.org/docs/routing/loading-ui 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-02로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. 역자의 개인적인 의견에 대한 내용은 이 안에서 이루어집니다. Loading UI Nextjs 13은 새로운 파일 컨벤션을 도입했습니다. loading.js가 바로 그것입니다. loading.js는 React Suspense로 의미있는 loading ui를 만들 수 있도록 지원해줍니다. 이 컨벤션을 사용..
🐕 easy to start https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually Dark Mode - Tailwind CSS Using Tailwind CSS to style your site in dark mode. tailwindcss.com tailwind 공식 문서를 참고하면서 작성합니다. 로컬스토리지를 활용한 state 작성 및 기본적인 활용을 실습해보겠습니다. 공식문서 쪽의 설명이 더 좋으신 분들은 그 쪽을 참고해주시면 될 것 같습니다. 본 포스트는 타입스크립트 , 리액트를 동시에 사용하는 환경을 초점으로 작성되었습니다. 하지만 실제로 타입을 많이 사용하진 않으니 그대로 js 환경에 적용해도 크게 무리는 없습니다.. 👻dark..
ReduxToolkit Query에 대해서 잘 정리된 문서 / 영상을 찾아보기가 굉장히 힘들었고 특히 한국어로 되어있는 양질의 문서는 거의 전멸에 가까운 수준이었습니다. 그나마.. 영미권 유튜브로 눈길을 돌려보면 좋은 자료들이 있었지만 그럴바에는 그냥 잘 정리된 공식문서를 보면서 해나가는 게 낫겠다.라는 결론을 내렸습니다. 제목이 Slow Start인 이유는 공식문서를 따라가며 천천히 각 기능들을 파악하는 시간을 가지면서 시작을 하고 싶은 사람(저같은 사람)들을 위해 작성했기 때문입니다. 🐕 공식문서를 따라서. https://redux-toolkit.js.org/tutorials/rtk-query RTK Query | Redux Toolkit redux-toolkit.js.org RTK Query를 사용..
https://beta.nextjs.org/docs/routing/linking-and-navigating 위 문서에 대한 번역을 진행합니다. 번역시점은 2023-05-01로 공식문서의 추가적인 업데이트가 있을 수 있습니다. 번역기와 챗지피티에 의존해서 번역하고있습니다. 번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다. 한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다. 역자의 개인적인 의견에 대한 내용은 이 안에서 이루어집니다. Linking and Navigating Next.js 라우터는 클라이언트 측 탐색과 서버 중심 라우팅을 사용합니다. instant(즉각적인)한 로딩 상태와 concurrent rendering(동시 렌더링)을 지원합니다..
