![[LIVE] 쏟아지는 지식을 내 것으로 만드는 법강의 썸네일](https://cdn.inflearn.com/public/courses/336420/cover/0aa31301-3aad-4d13-bb51-bd6790dc4eea/336420.png?w=420)
[LIVE] 쏟아지는 지식을 내 것으로 만드는 법
무료
입문 / 자기계발
5.0
(7)
<2025 지피지기 릴레이 라이브 캠페인>의 일환으로 1월 16일 진행했던 이정환님의 라이브 영상입니다.
입문
자기계발
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
강의) 한 입 크기로 잘라먹는 Next.js
강의) 한 입 크기로 잘라먹는 타입스크립트
강의) 한 입 크기로 잘라먹는 리액트
[LIVE] 쏟아지는 지식을 내 것으로 만드는 법
무료
입문 / 자기계발
5.0
(7)
<2025 지피지기 릴레이 라이브 캠페인>의 일환으로 1월 16일 진행했던 이정환님의 라이브 영상입니다.
입문
자기계발
모집마감
쏟아지는 지식을 내 것으로 만드는 방법 (선택, 학습, 체득 가이드) [이정환]
무료
입문 / 자기계발
신청
25. 01. 08 ~ 25. 01. 15
일정
25. 01. 16 ~ 25. 01. 16
입문
자기계발
한 입 크기로 잘라먹는 Next.js(v15)
₩48,400
초급 / Next.js, React, TypeScript
4.9
(176)
한입 시리즈의 3번째 작품! 세상에서 가장 친절하고 디테일 한 Next.js(15+)강의 입니다. App Router 뿐만 아니라 Page Router까지 프로젝트를 통해 살펴봅니다.
초급
Next.js, React, TypeScript
한 입 크기로 잘라먹는 타입스크립트(TypeScript)
₩48,400
초급 / TypeScript
5.0
(180)
문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻♀️로 만들어드립니다.
초급
TypeScript
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
₩48,400
초급 / React, JavaScript, Node.js
4.9
(562)
개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!
초급
React, JavaScript, Node.js
질문&답변
클라이언트 라우터 캐시에 레이아웃 말고 JS Bundle은 캐싱이 안될까요?
안녕하세요 이정환입니다.네 클라이언트 라우터 캐시에는 강의에서 말씀드린대로 RSC Payload만 캐싱할 뿐, JS Bundle은 캐싱되지 않습니다. 이때 말씀하신대로 RSC Payload가 수시로 바뀔 수 있기 때문에 클라이언트 라우터 캐시 역시 강의에서 안내드린대로 네비게이션 도중에만 사용됩니다.JS Bundle의 경우에는 자바스크립트이기 때문에 한번 불러오면 다시 불러올 필요가 없습니다. 따라서 브라우저가 자체적으로 추가적인 JS Bundle을 불러오지 않는 방식으로 별도의 캐싱이 적용됩니다!
질문&답변
풀 라우트 캐시 이후 JS Bundle, RSC Payload도 불러오는지 궁금합니다.
안녕하세요 이정환입니다.네 두 경우 모두 RSC Payload와 JS Bundle을 함께 불러오게 됩니다. 그래야 클라이언트 측에서 리액트 트리를 만들 수 있기 때문이죠! 리액트 트리를 만들어야 하는 이유는 이후의 페이지 이동이나 DOM 교체등을 리액트의 기능을 이용해 진행하기 위함입니다.다만 첫 접속시에 RSC Payload는 HTML과 결합된 상태로 전달되는데 이는 개발자 도구의 Response를 통해 확인하실 수도 있습니다.
질문&답변
build할 때 type오류에 대한 질문이 있습니다.
안녕하세요 이정환입니다.오류 메세지를 읽어보시면 searchParams 라는 Props의 타입 정의가 잘못되었다고 나와 있습니다.이런 오류가 발생하는 이유는 우리 강의의 3.2) 페이지 라우팅 설정하기 의 6분 21초 경에 설명 드리고 있듯이 Next.js 15.1 버전부터는 searchParams와 params의 타입이 모두 Promise로 래핑되어 제공되기 때문입니다. (자세한 내용은 앞서 언급해드린 챕터를 참고하세요!)이에 해당 내용을 참고하셔서 코드 상에 serachParams와 params의 타입을 모두 Promise로 변경하시면 되겠습니다!
질문&답변
블로그 작성
안녕하세요 이정환입니다.넵! 강의 출처만 링크로 남겨주시면 가능합니다 감사합니다 🙇♂
질문&답변
npm 오류
안녕하세요 gangsugi님 이정환입니다.질문자님 PC의 파워쉘 스크립트 권한 문제로 보이네요해당 문제를 해결하시려면 우선 파워쉘을 관리자 권한으로 실행하신 다음 아래의 명령어를 터미널에 입력해주세요// 현재 실행 정책 확인하기 Get-ExecutionPolicy위 명령어는 현재 PC의 실행 정책을 확인 하는 명령어로 Restricted 또는 RemoteSigned 라는 결과를 출력합니다. 이때 다음 그림처럼 Restricted 라는 결과가 출력될 경우 스크립트 파일을 읽어 실행할 수 없기에 문제가 발생할 수 있습니다.(사진)이럴 경우 다음 명령어를 입력해 권한 설정을 Restricted가 아닌 RemoteSigned로 바꿔주셔야 합니다.// 실행 정책을 RemoteSigned로 변경하기 Set-ExecutionPolicy RemoteSigned
질문&답변
SSR은 언제 사용될까요??
안녕하세요 이정환입니다.실제로 페이지 라우터 버전의 SSR은 그닥 자주 활용되지는 않는걸로 알고 있습니다. 말씀하신대로 동적인 데이터 반영이 필요할 경우 ISR로 처리하면 되고, 그렇지 않다면 SSG로 처리하는게 훨씬 깔끔할테니까요만약 현재 사용자 정보를 페이지에 많이 보여줘야 하는 상황이라면 SSR을 고려 해 볼 수도 있겠습니다. 쿠키를 통해 요청과 함께 실시간으로 전달된 데이터를 바로 화면에 렌더링하려면 SSR을 사용해야 할 것 같습니다. 그러나 이 역시 SEO가 주요한 상황이 아니라면 ... CSR을 통해 가볍게 해결할 수 있기도 합니다. 참고로 이런 SSR은 이후 앱 라우터에서는 Dynamic 페이지 라는 이름으로 비슷하게 제공되는데요, 앱 라우터에서는 스트리밍 등의 추가적인 기능을 통해 SSR 방식도 꽤나 쓸만하도록 제공하고 있으니 참고하시면 더 좋겠습니다 😃
질문&답변
사전 렌더링시 브라우저 네트워크 탭에 로그가 남지 않는데 이에 대한 디버깅 방법이 있을까요??
안녕하세요 이정환입니다.네 맞습니다. 서버측에서 호출되는 API의 디버깅은 클라이언트 측에서는 알 수 없기에 별도의 방법을 이용해 디버깅 하셔야 합니다. 다행히 API Request와 Response는 전송 및 응답 객체의 값 만으로도 충분히 문제 발생시 원인을 파악할 수 있으니 고렇게 작업하시는걸 권장드립니다
질문&답변
fetchOneBook API 사용하는거 대신 fetchBooks API 호출한 데이터를 props로 전달하는 방식으로 대체하기
안녕하세요 이정환입니다.말씀하신대로 구현할 경우 book/[id] 페이지로 바로 접속했을 때에는 데이터를 불러오는 작업이 불가능하게 됩니다. 만약 전역적으로 모든 도서의 정보를 불러온 다음 하나의 도서 정보를 추려 보여주는 방법으로 우회한다면 해결은 가능하겠지만 그만큼 많은 데이터를 백엔드 서버에게 요청하고 받아와야 한다는 점이 단점이 될 수 있습니다. 따라서 데이터의 개수가 가변적인 경우 보통은 요렇게 처리하게 됩니다 😃
질문&답변
Next.js에서 페이지별 JS가 스플리팅되듯, CSS Modules도 페이지별로 스플리팅되나요?
안녕하세요 이정환입니다.네 CSS Module로 작성한 CSS 역시 페이지 별로 스플리팅 됩니다. .dist > static 폴더 아래에서 스플리팅 된 CSS 파일을 직접 확인하실 수도 있습니다.(사진)tailwind의 경우 컴파일 이후 최적화된 CSS 코드만 사용할 뿐 스플리팅까지 제공되지는 않는걸로 알고 있습니다. 이는 정확하지는 않으니 추가 조사를 권장드립니다.
질문&답변
1-3 백엔드 서버 실습 중 "npx prisma db push 명령어에서 schema.prisma 파일을 인식하지 못합니다 (VSCode에는 보이는데 CLI에서는 못 찾음)"
안녕하세요 이정환입니다.캡쳐해주신 사진을 보니 src 폴더 안에 package.json / .eslintrc.js / .gitignore 등의 루트 아래에 있어야 할 파일들을 옮기신 것 같습니다. 아래 그림을 참고해보세요! (사진)파일의 위치를 임의로 옮길 경우(특히 package.json 파일을 옮길 경우) prisma 등의 도구가 스키마 파일을 읽지 못할 수 있으니 가급적 원 상태로 사용 하시는 걸 권장드립니다.
2025. 01. 06.
2
한입 챌린지 3기를 모집합니다. (~01.11 일요일 자정까지)
한입 FE 챌린지가 3기로 다시 돌아왔습니다!신청 기간 : 01.06(월) ~ 01.11(토) 자정 까지 입니다.참가 비용 : 무료 (강의만 별도 구매)참가 링크 : https://link.onebitefe.com/r/0tgrtp한입 FE 챌린지한입 챌린지는 미션과 진도표를 통해 진행되는 완강 챌린지입니다.많은 분들께서 완강에 도달하기 어려워 하신다는 점을 바탕으로 기획되었으며강의 제작자로써 끝까지 책임지는 마음으로 수강생 분들이 외롭지 않게!끝까지 즐겁게 완강 하시길 바라는 목적으로 진행하고 있습니다. 어디서 진행되나요?3기 부터는 한입 커뮤니티(네이버 카페)에서 진행 됩니다.어떻게 진행되나요?매일 진도표에 따라 50분 ~ 60분 분량의 강의를 수강합니다.매일 제출되는 간단한 퀴즈나 과제를 통해 배운 내용을 복습합니다.커뮤니티를 통해 함께 공부하며 동기부여를 주고 받습니다. 어떤 강의로 진행되나요?위 2개의 강의로 진행됩니다.React.js라니 🥲 저는 Next.js 또는 TypeScript 챌린지를 원해요!3기 진행 이후 거의 곧바로(약 1주의 휴식만 취하고) 4기가 진행될 예정입니다.4기는 TS, 5기는 Next.js로 진행될 예정이니 한달만 기다려주세요..! 마무리 요약!신청 기간 : 01.06(월) ~ 01.11(토) 자정 까지 입니다.참가 비용 : 무료 (강의만 별도 구매)참가 링크 : https://link.onebitefe.com/r/0tgrtp 올해 좋은 일만 가득하시길 바랍니다.새해 복 많이 받으세요 🙇♂
프론트엔드
・
완강
・
챌린지
・
한입시리즈
2024. 09. 01.
6
한입 FE 완강 챌린지 2기를 모집합니다
🏃 시작부터 완강까지! 함께합니다.한입 FE 챌린지는 수강생 여러분들의 완강을 도와드리고자 하는 목적으로 기획되었습니다.매일 매일(일요일 및 공휴일 제외) 조금씩 강의를 완강하실 수 있도록 진도표를 제공해드리며당일 배운 내용을 바로 복습하실 수 있도록 매일 미션도 함께 제공해 드립니다.미션 검사도 당연히 제공됩니다 🫡 챌린지 강의 목록한입 FE 챌린지 2기는 다음 2개의 강의로 진행됩니다.한 입 크기로 잘라먹는 Next.js 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지자바스크립트 학습을 염두에 두셨던 분들이라면 “한 번에 끝내는 자바스크립트” 챌린지에Next.js 학습을 염두에 두셨던 분들이라면 “한 입 크기로 잘라먹는 Next.js”에 참여하시는걸 추천드립니다. 상세 안내참여 혜택참여 리워드참가하시기만 해도 받으실 수 있는 리워드입니다.완강 의지를 불태우기 위한 특별 강의 할인 쿠폰을 제공합니다. (미 구매자 한정)완주 리워드모든 미션을 완료해야 받을 수 있는 리워드입니다.한입 FE 멘토들의 다른 강의 할인 쿠폰을 제공합니다.향후 챌린지 개설시 프리패스로 참여하실 수 있습니다.기간 및 일정모집 기간 :09월 1일 ~ 09월 07일(토) 자정까지활동 기간 :한 번에 끝내는 자바스크립트 : 09.09(월) ~ 09.27(금), 전체 기간 3주, 미션 수행일 14일한 입 크기로 잘라먹는 Next.js : 09.09(월) ~ 10.05(토), 전체 기간 4주, 미션 수행일 20일매주 일요일, 공휴일(추석 연휴 기간 포함)에는 쉽니다 😴활동 내용진도표에 맞춰 강의 수강하기하나의 강의를 선택해 완강합니다.매일 매일 체계적으로 수강하실 수 있도록 강의별 진도표를 제공합니다.커뮤니티를 통해 매일 인증합니다.퀴즈 및 과제 수행하기당일 배운 내용을 복습할 수 있는 퀴즈(or 과제)를 매일 제공합니다.커뮤니티를 통해 매일 인증합니다.커뮤니티에서 지식&경험 공유하기챌린지 참여자분들과 함께 한입 FE Discord 채널에서 소통합니다.미션 제출, 수강 인증, 스몰톡 등의 활동을 진행합니다.접수 방법https://bit.ly/4cJqGgZ위 링크로 신청해주세요 문의onebite.fe@gmail.com
프론트엔드
・
챌린지
・
스터디
・
완강
・
JS
・
Next.js
・
JavaScript
・
Nextjs
・
Next
2024. 08. 12.
8
한 입 크기로 잘라먹는 Next.js 사전 등록 이벤트
안녕하세요 이정환입니다 😃오늘은 돌아오는 월요일인 8월 19일(월) 출시되는 제 신규 강의한 입 크기로 잘라먹는 Next.js(15+)를 여러분께 소개 드림과 동시에오픈 직전 진행하는 사전 등록 이벤트를 안내드리려고 이렇게 글을 쓰게 되었습니다.간략하게 이벤트 부터 안내 드리고 그 이후에 강의를 소개하는 순서로 진행하겠습니다이벤트 안내사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js8월 18일(일) 자정까지 신청하실 수 있습니다.신청해 주신 모든 분들에게 50%(반값) 할인 쿠폰을 지급해드립니다.추첨을 통해 50분께는 100%(무료) 쿠폰을 지급해드립니다.히든 이벤트 참가 방법을 안내해드립니다. 강의 소개한입 시리즈의 3번째 강의 한 입 크기로 잘라먹는 Next.js는약 15시간의 분량으로 Page Router부터 App Router 버전까지 Next.js의 모든 개념을 자세히 살펴보는 강의입니다.강의 특징특징 1. 직관적인 애니메이션 시각자료!Next.js는 복잡한 매커니즘을 갖는 기능이 많은 편입니다.따라서 쉬운 이해를 위해 애니메이션을 활용한 직관적인 시각자료를 준비했습니다!특징 2. 2배속으로 들어도 다 들리는 딕션과 발성!오랜 시간 제 목소리를 들으셔야 하는 만큼 좋은 발성과 딕션을 위해 항상 노력하고 있습니다.이를 위해 2배속으로 재생해도 다 알아 들으실 수 있게끔 강의를 제작했습니다.한번 들어보세요! 아래는 2배속으로 재생되는 한입 Next 소개 영상입니다.https://www.youtube.com/watch?v=bOpc-HU-v3Y커리큘럼 소개🌱 Section 1. Next.js를 소개합니다기술을 잘 이해하려면 그것이 어떤 배경에서 탄생했는지 알 필요가 있습니다.1섹션에서는 본격적인 학습에 앞서 Next.js라는 기술은 무엇인지오늘날 왜 이렇게 많은 관심을 받고 있는지 살펴봅니다.🌱 Section2. Page Router 핵심 정리(선택 수강) 프로젝트와 함께 Next.js 출시 초기부터 제공된 Page Router에 대해 빠르게 살펴봅니다.동시에 Page Router에 어떠한 불편함과 기술적 한계점 들이 있는지도 함께 살펴봅니다.🌱 Section 3. App Router 시작하기화제의 중심! App Router에 대해 살펴봅니다.App Router란 무엇인지, 어떤 기술적 차이가 있는지 알아보며 기본적인 사용법에 대해서도 함께 살펴봅니다.🌱 Section 4. 데이터 페칭서버 컴포넌트를 활용한 데이터 페칭에 대해 살펴봅니다.더불어 Next에서 제공하는 다양한 캐싱(데이터 캐시, 리퀘스트 메모이제이션)에 대해서도 함께 살펴봅니다.🌱 Section 5. 페이지 캐싱App Router 버전의 페이지 캐싱인 풀 라우트 캐시와 클라이언트 라우터 캐시에 대해 자세히 살펴봅니다.더불어 페이지의 캐싱 옵션을 강제로 설정하는 라우트 세그먼트 옵션에 대해서도 추가로 살펴봅니다🌱 Section 6. 스트리밍 & 에러 핸들링페이지에서 빠르게 준비되는 부분부터 바로 렌더링 하도록 도와주는 스트리밍에 대해 살펴봅니다.Loading 파일을 이용한 방식과 Suspense를 이용한 두가지 방식을 모두 살펴봅니다.또한 Error 파일을 이용한 에러 핸들링 및 페이지 복구 방법에 대해서도 살펴봅니다.🌱 Section 7. 서버 액션공개당시 뜨거운 반응을 불러일으킨 서버액션에 대해 살펴봅니다.서버액션을 이용해 데이터를 추가하거나 삭제하며 로딩 상태와 에러 상태를 처리하는 방법까지 살펴봅니다.🌱 Section 8. 고급 라우팅 패턴(패럴랠, 인터셉팅)App Router에서 새롭게 제공되는 패럴랠(병렬) 라우트와 인터셉팅(가로채기) 라우트에 대해 살펴봅니다.이를 통해 페이지 이동시에 사용자의 탐색을 방해하지 않도록 특정 페이지를 모달로 보여주는 기능을 구현합니다.🌱 Section 9. 최적화와 배포이미지, 메타데이터, 페이지, 리전 등의 최적화 방법을 살펴봅니다.최적화 된 프로젝트를 Vercel에 배포하고 한번 더 성능을 개선하는 작업을 진행합니다.닫는 말마지막으로 신규 강의를 끝까지 마무리 할 수 있도록 계속해서 응원해주신제 기존 강의의 수강생 분들 그리고 주변 지인 분들께 모두 감사드립니다.또 이 글을 보고 관심을 가져주신 모든 벨로그 여러분께도 감사드립니다.사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js
프론트엔드
・
Nextjs
・
넥스트
・
Next
・
AppRouter
・
Next13
2023. 11. 27.
5
한입 FE 완강 챌린지 0기를 모집합니다
한입 FE 완강 챌린지 0기를 모집합니다 😃한입 FE 챌린지는 강의를 100% 완주하실 수 있도록 도와 드리는 프로그램입니다.인프런 강의 한 입 크기로 잘라먹는 타입스크립트, 웹 프론트엔드를 위한 자바스크립트 첫 걸음 으로 진행됩니다.2주간 함께 강의를 완강하는 챌린지 입니다.일 별로 나뉘어 있는 진도표를 제공합니다.매일 진도에 맞는 퀴즈를 제공합니다.커뮤니티를 통해 함께 공부하며 동기부여를 주고 받습니다.신청 기간 : 2023-11-27(월) ~ 2023-12-03(일)신청 링크 : https://bit.ly/46BO0dg
웹 개발
・
챌린지
・
스터디
2023. 05. 17.
17
[마감되었습니다] 한 입 크기로 잘라먹는 타입스크립트 사전 등록 이벤트
안녕하세요 이정환입니다 😃강의 출시와 함께 이벤트가 마감되었습니다.관심가져주시고 신청해주신 800여분의 여러분께 진심으로 감사드립니다.강의는 아래 링크로 보러가실 수 있습니다(현재 얼리버드 30% 할인 중입니다)https://inf.run/9ZRN 강의 소개유튜브 영상으로 보기한 입 크기로 잘라먹는 시리즈의 2번째 강의 한 입 크기로 잘라먹는 타입스크립트는배워도 배워도 자꾸만 헷갈리는 타입스크립트를 개념 이해와 함께 제대로 배워보는 강의입니다.복습을 위한 핸드북 제공강의를 들으면서 함께 보시거나, 강의 수강 이후 복습하시기 용이하도록강의 내용과 100% 일치하는 핸드북을 제공합니다.커리큘럼 소개🌱 Section 1. 타입스크립트 개론기술을 잘 이해하려면 그것이 어떤 배경에서 탄생했는지 알 필요가 있습니다.1섹션 에서는 타입스크립트의 탄생 배경을 살펴보며 타입스크립트가 해결하고자 했던 문제가 무엇이고 타입스크립트가 어떤 특징을 가지고 있는지 자세히 살펴봅니다.🌱 Section 2 ~ 3. 타입스크립트 기초 다지기가장 기본적인 타입스크립트의 문법을 살펴봅니다.동시에 타입스크립트가 말하는 타입이란 정확히 무엇인지그리고 타입들이 서로 어떤 관계를 맺고 어떻게 상호작용하는지 살펴봅니다.🌱 Section 4 ~ 6. 다양한 타입스크립트 문법 살펴보기함수 타입 정의, 함수 오버로딩, 인터페이스, 클래스 등타입스크립트의 다양한 기능과 문법을 살펴봅니다.🌱 Section 7 ~ 9. 마법사 처럼 타입을 직접 조작하기타입스크립트의 가장 독특하면서도 강력한 기능인 타입 조작 기능에 대해 살펴봅니다.제네릭, 인덱스드 엑세스 타입, 맵드 타입, Keyof 연산자, 조건부 타입 등아주 다양한 타입스크립트의 타입 조작 문법을 살펴봅니다.🌱 Section 10. 유틸리티 타입 이용하기타입스크립트가 기본적으로 제공하는 여러가지 유틸리티 타입들에 대해 살펴봅니다.유틸리티 타입을 지금까지 배운 지식을 이용해 직접 구현 해봅니다.🌱 Section 11. 리액트에서 타입스크립트 사용하기(보너스)이대로 끝나면 아쉽죠? 그래서 보너스 섹션으로 준비했습니다.아주 간단한 투두 리스트를 함께 만들어보며리액트 프로젝트에 타입스크립트를 적용하는 방법에 대해 살펴봅니다.닫는 말마지막으로 신규 강의를 끝까지 마무리할 수 있도록 계속해서 응원해주신기존 수강생 분들과 독자 분들 그리고 주변 지인 분들께 모두 감사드립니다.또 이 글을 보고 관심을 가져주신 모든 인프런 유저 여러분께도 감사드립니다.
프론트엔드
・
타입스크립트
・
프론트엔드
・
자바스크립트
・
typescript
・
javascript