ㄱ 부터 ㅎ 까지

Suspense란? React 문서에 따르면 Suspense를 사용하면 컴포넌트가 렌더링되기 전까지 기다렸다가 해당 컴포넌트에서 데이터를 불러오게 되면 로딩상태였던 컴포넌트를 렌더링합니다. 쉽게말해 로딩상태 처리를 쉽게해주는 리엑트 컴포넌트입니다. 기존 접근 방식 vs Suspense 기존의 데이터 불러오는 방식과 Suspense를 사용하여 처리하는 방식을 비교해보겠습니다. 접근방식 1. 렌더링 직후 불러오기 리엑트에서 흔히들 사용하는 데이터를 불러오는 방식으로는 useEffect, useState, fetch를 활용해 처리하게 됩니다. 코드로 보면 다음과 같습니다. ( 스타일링은 styled-components 를 사용하였습니다. ) function ProfileRenderingThenGetData()..

Next js 에서의 스타일링은 리엑트에서와 같이 jsx 태그에 style={{ color:"#000000" }} 과 같이 작성을 할 수 있지만, module이라는 것을 사용할 수 있습니다. CSS Module 파일 생성 다음과 같이 NavBar.module.css라는 파일을 생성해주고 css를 작성합니다. 이때 앞의 NavBar의 이름은 중요하지 않지만 뒤의 .module.css는 Next js에서 css 모듈을 만들때엔 고정 패턴입니다. CSS Module 사용 그리고 css 모듈을 사용할 컴포넌트에서 다음과 같이 사용합니다. 먼저 생성한 module 파일을 styles로 import 해옵니다. nav에 className에 .nav로 css를 작성했으니 styles.nav를 작성합니다. import ..

Next js 에서의 라우팅은 리엑트와 거의 유사합니다. 우선 components라는 폴더를 생성하고 그안에 라우팅을 할 네비게이션 바를 만들기 위해 NavBar.js라는 파일을 생성해주었습니다. 코드를 살펴보면 1. next/link로부터 Link를 import해옵니다. 2. a태그를 Link태그로 감싸고 href안에 url 주소를 작성했습니다. // next/link로 부터 Link를 받아옵니다 import Link from "next/link"; export default function NavBar(){ return ( Home About ) } 화면에는 다음과 같이 태그에 태그에 작성했던 href가 그대로 들어가서 렌더링 되게 됩니다. Link태그 안에 a태그를 작성하지 않아도 잘 동작은 하지만..

Static Pre Rendering react는 CSR(Client Side Rendering)으로 렌더링을 하게 되는데 이는 클라이언트측에서 javascript를 통해서 동적으로 렌더링을 하게되는 방식을 말합니다. 반면 Next는 SSR(Server Side Rendering)을 지원해주는데 서버사이드 렌더링이라고 서버측에서 HTML파일을 미리 만들어서 보내주는 방식입니다. Next js의 강점은 이 SSR과 같은 사전 렌더링 방식이라고 합니다. React Rendering vs Next Rendering react의 소스코드를 살펴보면 html 파일을 받아오고 안에 리엑트 자바스크립트 파일을 받아온 후에 렌더링을 해줍니다. 그 시간동안 브라우저의 화면은 하얀색 화면으로 깜빡할 때가 있게 됩니다. 반..

pages 파일명과 URL pages 폴더안에 index.js파일을 만들고 다음과 같이 작성해봅니다. 저장하고 index 페이지인 localhost:3000을 보면 다음과 같이 화면이 보이게됩니다. next js 는 index.js를 메인페이지로 인식을 해서 url을 결정해줍니다. 두번째로, pages폴더에 about.js 파일을 생성하고 다음과 같은 코드를 넣고 주소에 /about을 붙이면 작성했던 about us라는 글씨가 보이게됩니다. 여기서 해당 파일을 페이지로 쓰고 싶다면 react에서 컴포넌트를 만들때처럼 함수로 컴포넌트를 만들고 보여주고 싶은 내용을 return 문에 작성하고 export default로 내보내줍니다. // About이라는 컴포넌트를 함수형으로 작성하고 export defau..

노마드코더님의 강의로 공부를 시작했습니다. 전체적인 next js의 원리와 사용법을 익힌후 심화해서 공부할 계획입니다. next js 설치 설치하고 싶은 폴더에서 터미널 또는 cmd 창을 열어 다음 명령어를 입력해줍니다. 뒤에 --typescript를 붙이면 타입스크립트 프로젝트로 설치할 수 있습니다. // 1. 최신 버전 설치 npx create-next-app@latest // 타입스크립트와 함께 설치시 npx create-next-app@latest --typescript // 2. 프로젝트 이름 설정 What is your project named? 내 프로젝트 이름입력 next js 실행 성공적으로 설치가 되면 위와같이 해당경로의 폴더를 코드 에디터를 통해서 열어주고 package.json의 s..