
쏟아지는 지식을 내 것으로 만드는 법
무료
입문 / 자기계발
4.9
(19)
<2025 지피지기 릴레이 라이브 캠페인>의 일환으로 1월 16일 진행했던 이정환님의 라이브 영상입니다.
입문
자기계발
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
강의) 한 입 크기로 잘라먹는 Next.js
강의) 한 입 크기로 잘라먹는 타입스크립트
강의) 한 입 크기로 잘라먹는 리액트
쏟아지는 지식을 내 것으로 만드는 법
무료
입문 / 자기계발
4.9
(19)
<2025 지피지기 릴레이 라이브 캠페인>의 일환으로 1월 16일 진행했던 이정환님의 라이브 영상입니다.
입문
자기계발
모집마감
쏟아지는 지식을 내 것으로 만드는 방법 (선택, 학습, 체득 가이드) [이정환]
무료
입문 / 자기계발
신청
25. 01. 08 ~ 25. 01. 15
일정
25. 01. 16 ~ 25. 01. 16
입문
자기계발
한 입 크기로 잘라먹는 Next.js(v15)
₩48,400
14시간만
25%
₩36,300
초급 / Next.js, React, TypeScript
5.0
(304)
한입 시리즈의 3번째 작품! 세상에서 가장 친절하고 디테일 한 Next.js(15+)강의 입니다. App Router 뿐만 아니라 Page Router까지 프로젝트를 통해 살펴봅니다.
초급
Next.js, React, TypeScript
한 입 크기로 잘라먹는 타입스크립트(TypeScript)
₩48,400
14시간만
25%
₩36,300
초급 / TypeScript
5.0
(341)
문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻♀️로 만들어드립니다.
초급
TypeScript
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
₩48,400
14시간만
25%
₩36,300
초급 / JavaScript, React, Node.js
4.9
(788)
개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!
초급
JavaScript, React, Node.js
질문&답변
revalidateTag
안녕하세요 이정환입니다.네 tanstackQuery의 invalidateQueries와 유사하게 동작한다고 이해하시면 됩니다.그러나 AI 인턴의 답변대로 revalidateTag는 서버측의 캐시를 무효화 하는 기능이지만, invalidateQueries는 클라이언트 사이드에 보관되는 tanstackQuery의 캐시를 무효화 하는 기능이라는 차이점이 있습니다.
질문&답변
사전렌더링에서 서버가 렌더링하는방법
안녕하세요 이정환입니다.네 말씀하신대로 서버에서 직접 DOM Tree를 그려내는것이 맞습니다. 리액트 컴포넌트들을 HTML로 변환하기 위함입니다.그리고 브라우저에서도 동일하게 DOM Tree를 한번 더 그려냅니다. 서버로부터 전달받은 HTML과 React 코드를 연결하는 하이드레이션 과정을 위해서입니다.
질문&답변
Todo 할 일 앱에서 투두 추가하기를 하면 이상하게 나와요.
안녕하세요 이정환입니다.첨부 파일을 확인하지 못했습니다 ㅠㅠ 혹시 어디로 보내주셨을까요?
질문&답변
never 형 문의
안녕하세요 민경언님 이정환입니다.never 타입의 필요성에 대해 질문주신걸까요? 아니면 never 타입으로 정의된 변수 a의 필요성에 대해 질문 주신걸까요? "이런 변수를 뭐하러 작성을 하나요?" 라는 말씀으로 미루어보아 a 변수의 필요성에 대해 질문하신 걸로 이해하고 답변을 드리자면 ... 해당 변수는 never 타입의 특징(never에는 아무런 값도 포함되지 않는다)을 이해시켜드리기 위해 실습 예제에서 준비한 변수일 뿐 입니다. 따라서 말씀하신 것 처럼 실제 개발을 진행하는 상황에서는 사용할 일은 없습니다. 만약 never 타입 자체의 필요성에 대해 궁금하신거라면 해당 챕터에서 소개해드리는 것 처럼 아무런 값도 반환할 수 없는 함수 (무한루프 or 오류 발생) 등의 반환값 타입으로 활용하거나, 이후에 9섹션에서 다룰 조건부 타입에서 매우 유용하게 활용됩니다.
질문&답변
localhost:12345/book 접속 시, 500 에러
안녕하세요 이정환입니다.혹시 Supabase 프로젝트 가동이 중단되어 있지 않은지 확인 해 보시겠어요? 강의에서 안내드리고 있듯 약 7일 동안 서버에 접근이 없을 경우 프로젝트가 자동 중단되어 이런 현상이 발생할 수 있습니다 😭
질문&답변
nestJs를 위한 타입스크립트
안녕하세요 이정환입니다.본 강의는 최종 보너스 챕터만을 제외하고는 프론트엔드 백엔드 무관하게 타입스크립트라는 언어에 대해서만 다룹니다. 강의에서 다루는 내용에 어노테이션 문법 정도만 추가로 더 학습하시면 Nest.js 학습에는 큰 지장이 없는 정도로 다양한 내용을 다루고 있습니다.다만 백엔드에 더 집중된 타입스크립트 강의가 필요하시다면 본 강의를 권장드리지는 않습니다.
질문&답변
8.5) Read -투두리스트 렌더링하기 강의 내용 중 질문드립니다!
안녕하세요 이정환입니다.이 todo는 어디선가 별도로 선언된 변수가 아니라 이 map 메서드의 콜백 함수에 전달되는 매개변수입니다. 자바스크립트의 배열 메서드인 map은 배열 안에 들어있는 각 요소를 하나씩 꺼내서 콜백 함수에 전달해주고, 그 콜백 함수의 리턴값들을 모아서 새로운 배열을 만들어주는 그런 메서드인데요 따라서 여기서의 todos.map((todo)=>...)) 에서의 todo는 todos 배열의 하나의 요소를 의미합니다.map은 정말 자주 쓰이는 자바스크립트의 핵심 메서드 중 하나이기 때문에, 혹시라도 사용 방법이 아직 익숙하지 않으시다면! 우리 강의의 2.9 배열 메서드 - 3. 배열 변형 챕터를 다시 복습해보시는 걸 추천드립니다. 약 3분경에 다루고 있습니다.
질문&답변
섹션 8 모달 관련 질문
안녕하세요 이정환입니다.결론부터 말씀드리자면 createPortal을 사용하면 실제 DOM 상의 렌더링 위치만 바뀔 뿐, React의 컴포넌트 트리 상에서의 위치는 그대로 유지됩니다. 따라서 컴포넌트 계층 구조 상에서는 모달 컴포넌트가 루트 레이아웃 컴포넌트 아래에 배치되지만, 실제 DOM 에서만 modal-root id를 갖는 요소 아래에 렌더링 된다고 이해하시면 됩니다!
질문&답변
콜백함수 호출시 인자 개수 체크
안녕하세요 이정환입니다.네 이럴 경우 함수 내부에서 오류가 발생할 수 있어요! 예를 들어 매개변수로 2개의 값을 받을 거라고 예상했지만 1개만 전달될 경우 두번째 매개변수에 접근하는 코드에서 충분히 오류가 발생할 수 있죠 ... 특히 전달되는 값이 함수나 객체, 배열일 경우 더 그렇구요그래서 이런 문제를 해결하기 위해서는 타입스크립트를 사용하셔야 해요! 타입스크립트에서는 함수 선언시 설정해둔 매개변수가 충족되지 않거나, 넘치면 오류로 표시하여 프로그램 실행 전에 알려주거든요!혹시 타입스크립트에 관련해 궁금하시다면 제 이후 강의인 한입 TS도 수강해보시는걸 추천드려요!
질문&답변
컴포넌트 리렌더링 관련 질문
안녕하세요 이정환입니다.아! 요거 굉장히 이상한 문제인데요 말씀하신 것 처럼 저도 테스트해보니 형제가 함께 렌더링 되는 것 처럼 표시되더라구요그런데 실제로 console.log로 확인해보시면(컴포넌트 내부에 그냥 console.log로 호출시 or 렌더링시 메세지를 출력하도록) 그렇지 않습니다... 뭔가 React Developer Tools의 동작에 문제가 있는걸로 보여요 ㅠㅠㅠ자세한 정보는 저도 좀 더 확인해봐야 할 것 같아요 추가적으로 확인되는 부분이 있으면 업데이트 드릴게요!
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