@layer components { .btn { @apply h-10 w-36 rounded-md bg-[#f8f9fa] text-sm text-gray-800 transition-shadow hover:shadow-md hover:ring-1 hover:ring-gray-200 focus:outline-none active:ring-gray-300; } .link { @apply cursor-pointer hover:underline; } .header-icon { @apply cursor-pointer rounded-full bg-transparent p-2 text-4xl hover:bg-gray-200; } } 이런 형식으로 작성하면 btn이라는 클래스를 적용했을때 btn {} 안에 있는 모든 클..
🐕 환경변수를 사용해야하는 이유 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(동시 렌더링)을 지원합니다..
