오늘은 next.js에대해서 알아보겠습니다
vscode열고 npx create-next-app 폴더이름
예전에 react를 해봤다면 매우 비슷한 형태입니다.
이렇게 해주시면 폴더가 만들어집니다 그러 해당 폴더로 이동해서 vscode열어주세요
이렇게 되어 있을것입니다.
여기 보시면 pages index.js는 기본 화면 즉 home화면을 뜻합니다 다른 파이들은 그 파일 이름에 따라 자동으로 router 됩니다.
그럼 이해하기 위해서 pages내부에 모든 파일을 지워주세요
그리고 index.js ack.js 두개의 파일을 만들어 주세요
그리고 각 파일에
이렇게 넣어주고 저장해주세요
그리고 터미널 열어서 npm run dev 입력
localhost ctrl+클릭 하면
이런식으로 창이뜰것입니다 우리가 index.js 에 작성한 내용이 홈화면으로 지정되어있습니다 그럼 추가로 확인을위해 index2로 변겨시켜주고 확인해보겠습니다
이렇게 index.js 내용따라서 변하는게 확인이 되었고 그럼 ack은 어떻게 보는지 확인해보면
http://localhost:3000/ack 이런식으로 기본 주소뒤에 /ack를 입력하면
이런식으로 나오게 됩니다. 그럼이제 주소에 따라 내용을 어떻게 작성해야 될지 감이 오시죠??
그럼 /ack/ack 1이렇게 두개의주소는 어떻게하는지 궁금하실겁니다 바로 폴더를 만들어주시면됩니다
ack폴더를 만들고 그안에 ack1.js만들어 주세요
그리고 안에 내용을
작성하고 확인해 보시면
짠 이렇게 ack1.js가 나왔습니다. 이제 이걸활용해서 주소마다 파일을 1:1매칭 하는 법을 알아봤습니다.
그럼이제 코드를 보고 각 어떤기능을 하는지 보겠습니다.
그럼 이제 function ack() 이건 이름이 뭐라든지 상관없습니다 단지 우리가 구분할수있게 적는게 좋겠죠?
한번 상관없는지 확인해볼께요
네 상관없이 똑같이 잘나옵니다. ㅎㅎ
이제 마지막으로 return "ack1"즉 보이게 해줄 내용입니다. 여기 이상한거 적으면 이상하게 나오고 제대로 적으면 제대로 나옵니다 한번 확인을 위해 변경해보겠습니다.
이렇게 변경된 내용 대로 잘 나오게 됩니다. 즉 합쳐서 보면
export default(없으면 작동안됨) function 함수이름(뭐든지 내가 구별하면 됨)(){
return 내용(내가작성하고싶은내용 여기서 오류나면 오류 제대로 적으면 정상 작동);
}
이렇게 next.js에 대해서 알아보았습니다 내일 다시뵈요