웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
강의) 한 입 크기로 잘라먹는 Next.js
강의) 한 입 크기로 잘라먹는 타입스크립트
강의) 한 입 크기로 잘라먹는 리액트
講義
受講レビュー
- 一口サイズに切って食べるReact.js:基礎から実戦まで
- 一口サイズで食べるNext.js(v15)
投稿
Q&A
9.1 이미지 최적화(13:36)에서 webp로 바뀌지 않습니다.
안녕하세요 ssi02014님 이정환입니다.BookItem 컴포넌트의 이미지가 webp로 변환되지 않는다고 질문을 올려주셨는데요 BookItem 컴포넌트의 이미지 태그가 Image로 변환되지 않았네요 아래는 질문자님께서 올려주신 깃허브 소스코드입니다.(사진)이미지를 webp 확장자로 변환하거나 레이지 로딩을 적용하는 등의 최적화는 강의에서 알려드리고 있듯 next/Image 컴포넌트를 사용할 경우에만 적용됩니다.우리 강의 9.1 챕터의 8분 20초 경을 참고하셔서 BookItem 컴포넌트의 (사진) 태그를 next/Image 컴포넌트로 변환하시길 바랍니다.
- 0
- 3
- 34
Q&A
섹션 6. 페이지 캐싱 - 동일한 fetch 요청을 다른 cache 옵션으로 데이터 패칭 하는 경우
안녕하세요 이정환입니다. 순서대로 답변드리겠습니다.1) 리퀘스트 메모이제이션은 캐시 옵션까지 같아야 중복된 요청으로 취급합니다. 따라서 데이터 캐시 옵션이 force-cache로 설정된 요청과 no-store로 설정된 요청은 다른 것으로 간주됩니다.2) 빌드가 정상적으로 완료되지 않은 문제는, 오류 메세지를 파악하지 않고서는 정확한 원인을 말씀드리기 어렵습니다. 그러나 데이터 캐시 옵션 설정 때문에 빌드 오류가 발생하는 일은 거의 없기 때문에 아마 다른 이슈가 있을 것으로 예상됩니다.3) 강의에서 설명드렸듯이 dynamicParams가 true일 경우 런타임에 페이지를 동적으로 생성하고, 그렇지 않다면 404로 처리합니다.
- 0
- 1
- 15
Q&A
React 컴포넌트 생성 시 속성 할당 필요 문제
안녕하세요 kmh880507님 이정환입니다.return 뒤에는 중괄호가 아닌 소괄호가 위치해야 합니다. return {} : Xreturn () : O
- 0
- 2
- 83
Q&A
9.1 이미지 최적화(13:36)에서 webp로 바뀌지 않습니다.
안녕하세요 ssi02014님 이정환입니다.아마 캐싱 관련된 문제로 보이는데 캡쳐해서 올려주신 브라우저의 스크린샷이 잘려 정확히 확인하기 어렵네요, 강한 새로고침 이후에도 동일한 문제가 발생한다면 전체 프로젝트를 실행해봐야 문제의 정확한 원인을 파악할 수 있을듯 합니다. 질문 가이드라인을 확인하셔서 전체 프로젝트 코드를 링크 형태(깃허브 or 구글드라이브)로 올려주세요(사진)
- 0
- 3
- 34
Q&A
vscode 확장 vscode-stlyedcomponent 적용 안되는 오류
안녕하세요 hiiiiiiiii2696님본 강의에서는 vscode-stlyedcomponent 확장 프로그램을 사용하지 않고 있는데 ... 혹시 요 강의로 주신 질문이 맞을까요?추가로 Styled Component 라는 기술은 CSS 코드를 JS 파일 안에 작성하는 CSS 프레임워크로 말씀하신 CSS 코드를 자동으로 완성하는 기능과는 거리가 있습니다.Next.js 환경에서 Styled Component를 활용하시려면 서버와 클라이언트 측 간의 렌더링 불일치를 해결하기 위한 별도의 작업을 진행해주셔야 합니다. 사용하시는 라이브러리의 문서를 참고하셔서 설정을 진행하셔야 할 듯 합니다.
- 0
- 1
- 18
Q&A
"Create-투두 추가하기" 강의에서 onKeyDown에 관련된 질문
안녕하세요 박예진님 이정환입니다.확인해보니 macos에서 영어 입력 모드에 있는 경우 연속 입력이 발생하지 않는 걸로 보입니다. onKeydown 이벤트 핸들러의 유무와는 관련이 없는것 같아요! 다시 확인해보시면 감사하겠습니다.
- 0
- 2
- 20
Q&A
5.8) State로 사용자 입력 관리하기 1
안녕하세요 이정환입니다.단순히 State의 기본값을 태그에 설정하기 위함입니다. State의 기본값이 ""로 빈 문자열 일때에는 기본값이랄게 딱히 없기 때문에 태그가 비워져 있는채로 렌더링 되어도 문제가 되지 않았지만, "이름"과 같이 특정 문자열로 설정되면 태그가 처음 렌더링 될 떄 부터 해당 값을 화면에 렌더링 하도록 설정해줘야 합니다. 따라서 value 속성의 값으로 State의 값을 설정해주는 것 입니다.
- 0
- 2
- 26
Q&A
npm init이 안됩니다 ㅠ
안녕하세요 이정환입니다.캡쳐해주신 사진으로 보니 PowerShell을 관리자 권한으로 실행하지 않은 걸로 보입니다. 관리자 권한으로 실행하셔서 다시 Policy 설정을 진행해보시기 바랍니다.그래도 안된다면 VSCode 터미널상에 설정이 반영되지 않는 이슈일 수 있으니 VSCode를 아예 종료하였다가 다시 가동해보시기 바랍니다.그래도 안되면 답글 주세요!
- 0
- 2
- 20
Q&A
vercel 배포중 문제가 생겼습니다
안녕하세요 이정환입니다오류 메세지를 읽어보시면 params 라는 Props의 타입 정의가 잘못되었다고 나와 있습니다.이런 오류가 발생하는 이유는 우리 강의의 3.2) 페이지 라우팅 설정하기 의 6분 21초 경에 설명 드리고 있듯이 Next.js 15.1 버전부터는 searchParams와 params의 타입이 모두 Promise로 래핑되어 제공되기 때문입니다. (자세한 내용은 앞서 언급해드린 챕터를 참고하세요!)이에 해당 내용을 참고하셔서 코드 상에 serachParams와 params의 타입을 모두 Promise로 변경하시면 되겠습니다!async function Page ({params}:{params:Promise}) {... } 요런식으로 바꿔주셔야 합니다.
- 0
- 2
- 25
Q&A
맥북 코드 에디터(vscode 또는 cursor)에서의 한글 입력 씹힘 오류
안녕하세요 이정환입니다.음..!? 고런 문제는 겪어본 적 없는것 같은데 이상하네요 🤔구글링해보니 확장 프로그램 관련해서 이슈가 생길수도 있다고 하는데 한번 확인해보셔야 할 것 같습니다 ..! 저도 더 찾아보고 혹시 도움드릴 수 있을만한 정보 생기면 바로 공유드릴게요!
- 0
- 2
- 30