# nextjs
🎁 Gift MBTI - 2. Result 페이지 시작(Emotion theme 적용, SEO 최적화 )
이번 프로젝트에선 emotion으로 스타일링을 하기로 했는데 특별한 이유가 있던 것은 아니고 그냥 다들 많이 쓰길래 사용해봤다.한 번도 사용해본적 없는 라이브러리라 걱정했는데 웬걸 그냥 문법이 styled-components랑 똑같았다!찾아보니 둘 다 CSS-in-JS
Next.js 시작하기 - 소개 및 환경설정
Next.js 소개 https://nextjs.org/에 가보면 대표문구로 "The React Framework for Production"라고 쓰여 있다. react는 어떨까? https://reactjs.org/ 여기에는 "A JavaScript library f
Next 초기 설정
Next.js: The React Framework Next.js는 리엑트 어플리케이션에서 SSR을 쉽게 구현해주는 프레임워크이다. 기능 직관적인 페이지 기반의 라우팅 시스템(다이나믹 라우팅도 지원) , 과 둘 다 페이지 기반 단위에서 지원해준다. 자동 으로 빠른
Next.JS config 다뤄보기
NextJS에서 커스텀 설정을 하기 위해선 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있다.이는 JSON 파일이 아닌 Node.js 모듈이다.NextJS 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함
next.js, typescript, eslint, airbnb, prettier 로 프로젝트 설정하기
typescript를 사용하는 next.js 프로젝트 설치eslint 설정을 위한 eslintrc 파일 자동으로 만들기typescript 파서 설정nextjs 규칙 추가기타 next와 충돌하는 룰 삭제airbnb 규칙 설치airbnb 규칙 추가prettier 설치esl
Notion Project 마지막
오늘로써 노션 프로젝트가 마무리되었다. 마무리 단계에선 특별한 문제가 없을줄 알았지만 아니었다. 오늘 발생한 엽기적인 에러에 대해 적어보겠다. > 에러문 : Hydration failed because the initial UI does not match what was rendered on the server. 초기 UI가 서버에서 렌더링된 UI와...
NextJS - page rendering(SSR,SSG)
✅ 기본 React 방식index 렌더링, 빈배열 > useEffect실행, http호출 후 데이터 배열에 할당 > index 재 렌더링해당 컴포넌트는 2번 렌더링이 됨두번의 렌더링 때문에 검색 엔진 최적화에 문제가 생김useEffect작업은 서버가 아닌 브라우저에서
NextJS란
React기반의 풀스택 프레임워크사전 렌더링 기능을 내장하기 때문에 NextJS는 싱글 페이지 애플리케이션을 제공하여 서버에 요청이 오면, 이 싱글 페이지에 동적으로 사전 렌더링을 거쳐 컨텐츠를 포함한 초기 페이지를 보여준다.✅ npm run build: 프러덕션 빌드
🎁 Gift MBTI - 1. Next.js 프로젝트 세팅, ESLint(airbnb), Prettier 설정
오늘부터 약 3주간 웹 디자이너와 협업으로 작은 토이 프로젝트를 진행하게 되었다프로젝트 규모가 작아서 그 동안 사용해보고 싶던 next.js와 redux-toolkit을 연습해보는 좋은 기회가 될 것 같다 👍: Next.js, Typescript, redux-tool
NextJS + React Query (with SSR)
React Query는 서버 사이드에서 prefecth한 데이터를 queryClient에 전달하는 2가지 방법을 지원한다. Using "initialData" getStaticProps나 getServerSideProps 함수와 useQuery 옵션 중 initalD
nextjs 설치
NEXT.JS 공식문서https://nextjs.org/docs/api-reference/create-next-appMSOffice문서https://learn.microsoft.com/ko-kr/windows/dev-environment/javascr
귤마켓 UI 구성(Feat. Tailwind) (2)
모든 소스는 깃허브에 있다.https://github.com/wannabeing/gyul-marketEDIT 2022.09.17📂 pages┣ 📂 chats (채팅 페이지)┃┣ 📜 id.tsx┃┗ 📜 index.tsx┣ 📂 community (동네생활
Next.js 프로젝트에 분석 툴 도입하기(Google Analytics, Hotjar)
Google Analytics와 Hotjar! ⚠️호이짜 아님 주의