css 코드 작성 영상은 어디에 있나요?

안녕하세요 jwh님 🙂 질문 감사합니다.자바스크립트 강의임에도 불구하고, 생각보다 css 영상의 비중이 많아질 것 같아현재 css 코드는 github로 제공해드리고 있습니다. 프로젝트 개발에 사용되면서 알아두면 좋을 몇 가지 css 문법들은, 강의에서 중간에 별도로 설명해드리고 있습니다. 참고해주시면 감사할 것 같습니다. 감사합니다 😊

api폴더 하위의 api.ts들은 언제사용하나요?

안녕하세요!! 정환님이 휴가를 가셔서, 제가 대신 답변드립니다.Next의 page router에서 pages/api 폴더는 API 라우트를 정의하는 특별한 폴더인데요, 강의에서 사용되는 api 들은 별도로 만들어 놓으셨기 때문에 '백엔드 API 서버' 역할을 하는 해당 폴더는 테스트용으로 사용하신 것 같습니다.강의에서 사용되는 api들은 components 폴더의 lib 폴더 내부에 fetch-books.ts, fetch-onet-book.ts 등의 별도 파일로 api를 호출하고 있는 것 같네요!!이윤재입니다님처럼, service 폴더를 만들고 하위에 api 정리를 하는 것도 좋은 방법인 것 같습니다 🙂

질문있습니다.

별다방님! 질문 감사합니다.Tab 키를 누르면 커서가 닫는 괄호 바깥으로 이동하는 기능을 말씀하시는걸까요?해당 기능은 VSCode의 기본설정인데요, 혹시라도 설정값이 변경되어있는지 확인을 해보려면,setting.json(Cmd or Ctrl + Shift + P)을 열어 Preferences: Open Setting (JSON)에 "editor.tabCompletetion" : "on" 항목이 있는지 확인해보시면 됩니다!!단축키는 별도로 설정해두지 않고, VSCode가 제공하는 기본 단축키만 사용하고 있고, extension들은 상황에따라, 그리고 사용하는 사람에 따라 다르겠지만, 에러를 바로바로 확인할 수 있는 Error Lens, 폴더나 파일 아이콘을 설정할 수 있는 material icon theme, 이미지를 바로 확인할 수 있는 image preview 등이 있을 수 있겠네요 🙂(+ 질문을 올리실 때에는 질문 작성 안내 문구는 삭제해주세요!!)

Vercel 배포 후 revalidate

안녕하세요 🙂 정환님이 휴가를 가셔서, 제가 대신 답변드립니다!!여러가지 방법이 있는데요, 말씀하신대로 revalidate 옵션을 사용해서 시간 단위로 자동 업데이트 하는 방식으로 변경 후 재배포하는것도 좋은 방법이 될 수 있고,혹은 배포한 사이트 주소의 뒤에 /api/revalidate를 붙여 요청을 보내 추천 도서 목록을 갱신할 수 있습니다. 쉽게 말해보면, 기존에는 localhost:3000/api/revalidate 로 요청을 보내 목록을 새로 불러왔지만, 배포 후에는 배포한사이트주소/api/revalidate 에 요청을 보내면 목록을 새로고침하실 수 있습니다!!

Context 분리하기 강의 내용 중에 궁금한 것이 있습니다!

안녕하세요 🙂 정환님이 휴가를 가셔서, 제가 대신 답변드립니다!!React에서 'StateContext.Provider'와 'DispatchContext.Provider'가 무조건 부모-자식 관계일 필요는 없습니다. 일반적으로는 StateContext.Provider가 바깥에, 그리고 그 안에 DispatchContext.Provider를 중첩해서 사용하는데요, 형제 위치에 배치하고 싶다면 다음과 같이 작성해보시면 될 것 같습니다! 다만, 위와 같이 작성하게 되면 ComponentUsingState 컴포넌트는 DispatchContextProvider에 접근할 수 없고, ComponentUsingDispatch 컴포넌트는 StateContextProvider에 접근할 수 없다는 단점이 있으니, 프로젝트에 알맞게 작성해주시면 될 것 같습니다 🙂

4:00 let c에 할당되는 type이 다르게 나옵니다.

안녕하세요 🙂 정환 강사님이 휴가중이셔서, 제가 대신 답변드립니다.let c: StringNumberSwitch;이 코드를 보면, StringNumberSwtich, StringNumberSwtich순서로 동작해서 결국 변수 c의 타입은 number | string이 되야 할 것처럼 보이는데요,아무리 순서를 바꿔봐도 변수 c의 타입이 string | number로 나오는 이유는, 타입스크립트에서 number | string과 string | number는 결국 같은 타입이고, 타입스크립트나 에디터가 타입을 표시할 때 내부적으로 정해진 순서를 따라 표시해주기 때문입니다.

tsx 설치 후 버전이 뜨지 않습니다.

안녕하세요 꼬약지님 🙂 정환님이 휴가 중이셔서 대신 답변드립니다.올려주신 이미지의 오류 메세지를 읽어보니, PowerShell의 실행 정책 때문에 발생한 오류인것으로 보입니다. 아래의 명령어를 입력하면, 현재 세션에서만 실행 정책이 변경되어 tsx를 실행할 수 있다고 하네요!!Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process실행해보시고, 그럼에도 오류가 발생한다면 다시 질문 올려주세요. 감사합니다.

git 주소

안녕하세요 🙂 링크 전달드립니다.https://github.com/hbin12212/animal-albumhttps://github.com/hbin12212/trip-wiki

4:45 부터 무한로딩되어 재생이 안됩니다ㅠ

안녕하세요 🙂 질문 감사합니다.확인해보니, 영상에는 문제가 없는 것 같습니다 🥲가끔 영상이 무한로딩이 된다는 질문이 들어오는데요,새로고침하거나 인프런에 다시 접속을 하면 해결이 된다고 하시더라구요..!그럼에도 계속 오류가 발생하신다면, 제가 문의를 넣어보도록 하겠습니다.시도해보시고, 다시 알려주세요!! 감사합니다.

섹션 8. 상태 관리와 API - 2.동물 앨범 만들기-2-2

안녕하세요 ReKoding님, 질문 감사합니다 🙂강의에서 'init' 함수는 웹 페이지의 초기 상태에서 필요한 데이터를 가져와 저장하는 역할을 합니다.이 함수는 컴포넌트가 처음 생성될 때 한 번만 실행되며, 외부에서 직접 호출되거나 다른 컴포넌트가 접근할 필요가 없습니다. 따라서 메서드로 만들기보다는, 내부 함수로 작성하는 것이 자연스럽다고 할 수 있습니다.