✍ 공부

[ 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으..

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

내가 공부하다가 궁금해서 정리해본 차이점 react는 알다시피 SPA(single page application)에 최적화 되어있다. 그 이유 중 하나가 바로 router. 1. react-router-dom을 설치해서 이용하며 2. a 태그를 이용할 때 생기는 무의미한 재랜더링을 예방 => 속도가 빠르다 router에는 우리가 익히 아는 BrowserRouter HashRouter 외에도 StaticRouter MemoryRouter NativeRouter 이 있다. 🤷‍♀️ BrowserRouter과 HashRouter의 차이는? BrowserRouter www.123123/post 1. HTML5의 history API를 이용해 UI를 업데이트 2. 동적인 페이지에 적합 3. 새로 고침 / 경로를 ..