본문 바로가기
카테고리 없음

next에 대해서 알아봅시다

by 멈추지않아 2022. 3. 24.

오늘은  next.js에대해서 알아보겠습니다 

vscode열고 npx create-next-app 폴더이름

예전에 react를 해봤다면 매우 비슷한 형태입니다.

이렇게 해주시면  폴더가 만들어집니다 그러 해당 폴더로 이동해서 vscode열어주세요

이렇게 되어 있을것입니다.

여기 보시면 pages index.js는 기본 화면 즉 home화면을 뜻합니다 다른 파이들은 그 파일 이름에 따라 자동으로 router 됩니다.

그럼 이해하기 위해서 pages내부에 모든 파일을 지워주세요

그리고 index.js ack.js 두개의 파일을 만들어 주세요

그리고 각 파일에 

이렇게 넣어주고 저장해주세요

 

그리고  터미널 열어서 npm run dev 입력

localhost클릭

localhost ctrl+클릭 하면 

이런식으로 창이뜰것입니다 우리가 index.js 에 작성한 내용이 홈화면으로 지정되어있습니다 그럼 추가로 확인을위해 index2로 변겨시켜주고 확인해보겠습니다

이렇게 index.js 내용따라서 변하는게 확인이 되었고 그럼 ack은 어떻게 보는지 확인해보면

http://localhost:3000/ack 이런식으로 기본 주소뒤에 /ack를 입력하면

이런식으로 나오게 됩니다. 그럼이제 주소에 따라 내용을 어떻게 작성해야 될지 감이 오시죠??

그럼 /ack/ack 1이렇게 두개의주소는 어떻게하는지 궁금하실겁니다  바로 폴더를 만들어주시면됩니다

ack폴더를 만들고 그안에 ack1.js만들어 주세요

그리고 안에 내용을 

작성하고 확인해 보시면

짠 이렇게 ack1.js가  나왔습니다. 이제  이걸활용해서 주소마다 파일을 1:1매칭 하는 법을 알아봤습니다. 

그럼이제 코드를 보고 각 어떤기능을 하는지 보겠습니다.

export default function ack() {
  return "ack1";
}
 
여기서 보시면 export default 외부에서 import 할수 있도록 하는 것입니다. 만약 이게 없으면 외부로 못보내서 next.js에서 자동으로 페이지에 보여줄수 없어요 즉 해당 js파일내부에서만 사용할수잇게되어서 next.js가 주소랑 연결이 안되게 됩니다. 그럼 한번 지워보고 어떻게 되는지 알아보겠습니다.
이런식으로 에러가 나오는것을 볼수 있습니다.

그럼 이제 function ack() 이건 이름이 뭐라든지 상관없습니다 단지 우리가 구분할수있게 적는게 좋겠죠?

한번 상관없는지 확인해볼께요

네 상관없이 똑같이 잘나옵니다. ㅎㅎ

이제 마지막으로 return "ack1"즉 보이게 해줄 내용입니다. 여기 이상한거 적으면 이상하게 나오고 제대로 적으면 제대로 나옵니다 한번 확인을 위해 변경해보겠습니다.

이렇게 변경된 내용 대로 잘 나오게 됩니다. 즉 합쳐서 보면

export default(없으면 작동안됨) function 함수이름(뭐든지 내가 구별하면 됨)(){
return 내용(내가작성하고싶은내용 여기서 오류나면 오류 제대로 적으면 정상 작동);

}

이렇게 next.js에 대해서 알아보았습니다 내일 다시뵈요