Front-end/Nextjs

[Nextjs] Nextjs 시작하기 - (3) css 스타일링 하는 법, Link 스타일링 하는 법

nextjs에서 css 스타일링을 하는 방법은 크게 3가지가 있다. global css 사용 module.css styled jsx global css는 우리가 일반적으로 import로 css 파일을 가져오는 방식이니 넘어가고, nextjs에서 사용하는 module.css와 styled jsx 방식이 뭔지 알아보겠다. css module 방식 일반 css 파일을 import 해오는 방식의 문제점은, css 스타일이 전역적으로 적용된다는 것이다. 그 문제점을 해결해 줄 수 있는게 바로 css module이다. 이 css module은 Nextjs 뿐만 아니라 React에서도 사용할 수 있는 방법이다. css module을 적용해 스타일링을 하고 화면을 개발자도구로 검사했을 때, 내가 작성한 classNam..

[Nextjs] Nextjs 시작하기 - (2) Link 설정하는 법, Navbar 만들기

1. Link 컴포넌트란 React에서의 Link 컴포넌트나 useNavigate처럼 페이지 간의 이동을 CRA 방식으로 부드럽게 전환할 수 있도록 도와주는 태그이다. 'next/link'로부터 import 해온다. React에서는 react-router-dom 패키지를 따로 설치해야 했지만, nextjs는 편리하게도 자체에 이런 패키지를 내장하고 있다. 💡 내부 라우팅을 부드럽게 해주는 용도이기 때문에, 외부 링크로 이동할 때에는 a 태그를 이용하자! Link 설정하는 법 LInk에 이동할 주소, className 등을 작성하면 된다. target="_blank"와 같이 보통 a 링크에 작성하는 속성이 필요하다면 그대로 Link에 넣으면 된다. import Link from 'next/link'; fu..

[Nextjs] Nextjs 시작하기 - (1) 설치, 디렉토리 구조

1. 설치 npx create-next-app 명령어를 입력해 설치를 하면 prompt에 다음과 같은 질문들이 나온다. 대부분의 질문들은 기본값대로 엔터만 치면 된다. ESLint와 Tailwind는 나중에 따로 설치하려면 귀찮으므로 웬만하면 그냥 Yes를 하는 편이다. 그런데 아래 질문들은 Nextjs의 설정에 큰 영향을 주므로 취향에 따라 잘 선택해야 한다. 일단 나는 튜토리얼을 학습하는 입장에서 다음 같은 선택을 했다. Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias..