✍ 공부/NextJS

[ TIL ] Next.js에서 Link 사용하기

✍ React와 Next.js에서 란? React에서 react-router-dom을 이용할 때도 Link 태그를 사용했었다. : react-router-dom About 익숙한 모습이다. : Next.js Home {post.title} Blog Post . . . 다른 점이 몇 개 있다. 그 중 하나가 바로 a 태그이다. react에서는 페이지를 전환하는 과정에서 페이지를 불러오지 않고 페이지의 주소만 변경해야 하기 때문에 a 태그를 쓰지 않는다. 반면에 Next.js는 페이지 전환을 방지하는 Link 내에서 a 태그를 사용한다. Home Next.js Link 태그 안에 a 태그를 따로 쓰지 않더라도 HTML 마크업은 a 태그 안에 Home이 쌓여져 나온다 => a 태그를 Link 안에 넣지 않아도..

[ TIL ] Next.js 동적 라우팅 ( Dynamic Routing )

✍ Next.js에서의 라우팅 Next에서는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)을 지원한다. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Next.js는 파일 시스템 기반의 라우팅을 해준다 pages 경로에 파일을 추가하면 자동적으로 route할 수 있다 => Next.js 프로젝트..

[ TIL ] Next.js redirects와 rewrites로 API key 숨기기

✍ API KEY 개요 API 키(KEY) 는 인증(Authentication) 방식의 한 종류이다. API 키 이외의 인증방식으로는 API 토큰(Token) 방식이 있다. 특징 API 키는 특정 사용자만 알 수 있는 문자열이다. 개발자는 API 제공사의 페이지에서 키를 발급받아 호출 시 API 키를 이용하여 호출한다. 단점 모든 클라이언트가 같은 API 키를 공유하기 때문에 보안에 취약할 수 있다. ✍ next.config.js redirects와 rewrites는 둘 다 루트 디렉토리에 있는 next.config.js에서 사용할 수 있는 함수이다. next.config.js는 설정 파일로 클라이언트의 접근 경로를 우회하여 전송해주는 방법을 명시 / 설정하는 파일이다. 📌 redirects 다른 페이지..

Next.js에서 .env 사용하기

🙆‍♀️ .env 생성하기 react에서 했던 것처럼 .env를 최상단 루트에 만들어주고 .gitignore에 .env를 등록해준다. 🙆‍♀️ .env 작성하기 REACT_APP_API_KEY=1234567890 NEXT_PUBLIC_API_KEY=1234567890 🙆‍♀️ .env 이용하기 const API_KEY = process.env.REACT_APP_API_KEY; const API_KEY = process.env.NEXT_PUBLIC_API_KEY;

[ Next.js ] SSR , CSR 그리고 SEO

🤷‍♀️ Next.js ? react에서 SSR(Server Side Rendering)을 가능하게 하는 react 프레임워크 Next.js 공식문서 중 Data Fetching Overview를 가져와보았다. Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. These include pre-rendering with Server-side Rendering or Static Generation , and updating or creating content at runtime with Incremental Static Regeneration N..

[ TIL ] 노마드코더 NextJS #2.0 - #2.1

사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴 _app.js 즉 custom app component를 사용할 때 쓰는 것 : layout 패턴 Layout 패턴 사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴 _app.js 즉 custom app component를 사용할 때 쓰는 것 : layout 패턴 components 안에 js 파일을 만들고 import NavBar from "./Navbar"; export default function Layout({ children }) { // children은 react.js가 제공하는 prop // 하나의 component를 또 다른 comonent 안에 넣어줄 수 있다 return ( { children } ); } children이라는 p..

[ NextJS ] styled jsx ( 노마드코더 NextJS )

return ( Home About ); return 안에 을 해줘야함 그리고 중괄호를 열고 안에 백틱 그 안에 css를 써주면 됨. 각각의 componts들의 style들은 독립적으로 존재한다. return ( Home About ); 그냥 css를 써주는 것과 똑같이 쓰면 된다 * 스타일은 그 컴포넌트 내에 한정되기 때문에 재사용이 불가능하다. * 하지만 ``백틱을 이용한 문자열 삽입이기 때문에 props를 사용할 수 있다 ex) color: ${props.color} 전역 스타일을 사용하고 싶을 때는? 전역 스타일을 사용하고 싶을 때는? style jsx에 global을 추가하기만 하면 된다 하지만 문제가 있다. global로 사용했지만 통하지 않는 요소가 있다 이건 create react app으..