인프런 커뮤니티 질문&답변
작성한 질문수
강의 들으면서 궁금한 부분 질문드립니다.
작성
·
14
0
여기에 질문드리면 되는걸까요?
아니면 다른 곳에 따로 질문드리는걸까요?
질문 1.
꼭 하나의 폴더를 먼저 만들어서 열어준 다음
'npx create-next-app@14 프로젝트 이름'
이렇게 폴더 내에 폴더를 만들어서 새로 만든 폴더를 열어서 작업해야 하나요?
아니면 그냥 vs code켜서
'npx create-next-app@14 프로젝트 이름' 바로 쳐서 그 프로젝트에서 바로 시작하면 되나요?
질문 2.
꼭 const router, const {q}로 해야 하나요?, 그 이유도 궁금합니다.
방금 let으로 {q} 선언하니까 오류가 발생했어서 질문드립니다.
질문 3.
[[...id]].tsx 에러를 방지하기 위해 기본적으로 대괄호 두번 쓰는게 일반적인가요?
질문 4.
search안에 index.tsx라고 파일명을 지었는데, 일반적으로 pages 폴더 하위 폴더를 만들면 그 안에는 무조건 index.tsx라고 파일명을 설정하나요?
그리고 쿼리 파라미터를 받는 동적 url인 경우에만 해당 쿼리 파라미터 이름을 대괄호 안에 적는건가요?
그리고 다중으로 쿼리 파라미터 설정을 할 것을 대비해서
일반적으로 ... 설정을 하는지도 궁금합니다.
질문 5. 404페이지는 보통 이미지로 많이 설정하는데 그럼 export default하고 그 안에 이미지 url을 불러오는건가요?
이미지는 어느 폴더에 보관하는건지 궁금합니다.
질문 6. export default function Page() {}에서 Page는 Pages 안에 들어있는
Page니까 관용적으로 Page를 사용하는건가요?
질문 7. 보통 export default 이렇게 다 작성하는지 아님 자동완성 템플릿을 설정해놓고 사용하는지도 궁금합니다.
답변 1
0
안녕하세요 혜빈님 이정환입니다.
순서대로 답변 드리겠습니다.
1) 무조건 이렇게 하실 필요는 없습니다. 말씀하신대로 프로젝트를 생성해 시작하셔도 됩니다. 대신 macOS 기준으로 프로젝트가 생성되는 경로가 Documents로 고정됩니다. 직접 해보시면 차이를 느끼실 수 있을겁니다.
2) 자바스크립트에서는 보통 불변하는 값을 담는 변수를 선언할 때 let 대신 const를 사용합니다. router 객체나 쿼리스트링 q 같은 값들은 불변하기에 let 대신 const를 이용하는게 좋습니다. 그러나 이는 어디까지나 컨벤션일 뿐 기능적인 오류까지 발생하지는 않습니다. 따라서 현재 발생하는 오류는 ESLint의 문법 검사 기능에서 발생하는 오류인 것 같습니다.
3) 구체적으로 어떤 에러를 말씀하시는건지 모르겠습니다 🥲 구체적으로 말씀해주시면 다시 답변드리겠습니다. 참고로 이처럼 대괄호를 두번 사용하는 경로 설정 방법인 옵셔널 캐치 올 세그먼트에 대해서는 해당 강의의 19분에 설명해드리고 있습니다.
4) 페이지 라우팅 설정을 위해서는 index.js 라는 이름의 파일을 생성해야 합니다. 페이지 라우팅 설정이 필요하지 않다면 안하셔도 됩니다.
참고로 이 부분에 대해서는 아래 그림처럼 2.1 챕터 2분 15초 경에 설명해드리고 있습니다. 해당 챕터를 처음부터 다시 수강하시는걸 권장드립니다.
이어서 쿼리 파라미터를 받는 동적 URL인 경우에만 해당 쿼리 파라미터 이름을 대괄호에 적는것이냐 질문 주셨는데요 우선 말씀하시는게 쿼리 스트링인지, 혹은 URL 파라미터인지 정확히 구분할 필요가 있을 것 같습니다. 쿼리 스트링과 URL 파라미터의 차이를 잘 모르신다면 아래의 링크를 먼저 참고해주세요
URL 파라미터의 경우 아래 그림처럼 2.1 챕터의 4분 51초 경에 설명해드리고 있듯, 파일명에 대괄호를 통해 URL 파라미터의 이름을 명시해 주시면 됩니다. 예를 들어 [id].jsx라면 URL 파라미터를 id라는 이름으로 전달 받도록 설정하는 것이죠
이어서 다중 쿼리 파라미터 설정을 할 것을 대비해서 일반적으로 ... 설정을 하는지도 궁금하다고 질문주셨는데요. "일반적으로 ... 설정" 이 무엇을 말씀하시는건지 잘 모르겠습니다. 구체적으로 다시 질문주시면 답변드리겠습니다. 다중 URL 파라미터 역시 [id].jsx 와 같은 형식으로 대응 가능합니다.
5) 404 페이지를 이미지로 설정하고 싶으시다면 404 페이지 컴포넌트에 return <img/> 형태로 <img> 태그를 렌더링 하시면 됩니다. 404 페이지 컴포넌트 또한 리액트 컴포넌트이기에 리액트에서 하시던 그대로 하시면 되겠습니다. 이미지를 보관하는 폴더는 public 폴더에 하셔도 되고 src 폴더 내에 하셔도 됩니다.
6) 네 맞습니다.
7) 작업 스타일은 사람에 따라 다를 것 같습니다. 저는 보통 직접 작성하는 편 입니다.