Project 생성 명령어
layout.tsx: root 페이지url은 app 아래에 폴더 이름으로 생성 가능public 폴더 아래에 넣고 '/'로 접근ex)
CRS에서 useState를 사용하면 개발자 도구에서 요청 url이 그대로 노출되기 때문에 보안적 문제 때문에 데이터베이스는 client가 아닌 server쪽에서 접근해야했다. (중간 매개체가 필요했다.)↔️ 하지만 최신 버전의 NextJS와 server compone
JS 파일처럼 import 하면, CSS가 적용된다.클래스 내부에 요소에 css를 적용하기 위해서는, 요소 앞에 반드시 클래스 명을 써 주어야 한다.styles라는 폴더 안에 모두 모아도 되고, component 양이 많다면 폴더별로 따로 구성해도 좋다.css 파일명은
id 폴더 내의 페이지에서 파라미터를 설정한 후 title을 설정한다.여기서 generateMetadata 함수는 fetching 할 수 있게하는 함수이다. 동적인 제목을 갖고 있는 페이지를 위해 존재한다. \-> Hoem의 page는 정적이지만, id page의 me
Link 태그에 prefetch 속성을 넣어주면 유저가 클릭하지 않더라도 NestJS가 미리 해당 페이지를 마치 클릭한 것처럼 로딩해 놓는다.따라서 유저가 실제로 해당 페이지로 접속할 때는 이미 로딩된 상태이므로 유저는 빠르게 페이지의 데이터를 확인할 수 있게 된다.
개발 중 저장되는 코드는 자동으로 새로고침 된다.NextJS에서는 app 폴더 하단에 폴더만 만들어주면 된다!app > page folder > page.tsx file여러 폴더가 중첩되면 url이 길어진다.style.jsx 를 사용함으로써 컴포넌트 내부에 해당 컴포넌
폴더 명: (movies) > id > page.tsx폴더 명: components > movie.tsx
Layout.tsx 는 매 페이지에 존재할 수 있다.main Layout.tsx다른페이지 Layout.tsx
main Metadata다른 Metadata 사용 예시들
TypeScript 사용이 처음이라 사용방법이 꽤나 어렵다,,,ㅍㅁㅍ
Attribute 가져와서 적용시키기
getStyle 이라는 변수를 만들고 이를 style 안에 넣어주는 방식이다.
React에서 state는 데이터를 보관하며, component는 사용자에게 보관된 데이터를 Render한다.또한 state는 action 및 event 에 의해 변경될 수 있다.전형적인 자바스크립트 애플리케이션은 state로 채워져있다.사용자에게 보여지는 데이터외부에
리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.리액트 초기에는 일반적으로 함수형 컴포넌트를 사용했으나, state나 생명주기를 사용해야할 때는 클래스형 컴포넌트를 사용했다.그러나 클래스 형 컴포넌트 사용에는 단점이 있었기에, 이를 보완하여 함수형 컴포