웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
강의
로드맵
전체 1수강평
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
- 한 입 크기로 잘라먹는 타입스크립트(TypeScript)
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
게시글
질문&답변
startTransition used in error.tsx
안녕하세요 이정환입니다.어떻게 이런 경우에 startTransition을 사용할 생각을 떠올렸냐고 질문 주신게 맞을까요? 질문이 정확히 이해되지 않아 우선 이렇게 가정하고 답변드리겠습니다. (만약 아니라면 답글로 남겨주세요)React19의 startTransition 메소드는 콜백함수 안에 묶인 전체의 과정을 하나의 단위로 관리합니다. 따라서 startTransition을 사용하면 다음 두 과정을 일괄적으로 진행시킬 수 있습니다.router.refresh()를 통해 서버 컴포넌트의 실행 결과를 다시 불러오는 과정reset()을 통해 UI를 다시 렌더링 시키는 과정추가로 Next.js의 router.refresh()가 비동기로 동작한다는 것에 대한 링크를 요청하셨는데요 공식 문서에는 해당하는 내용이 명확히 나와있지는 않습니다. 그러나 본 링크의 아래 캡쳐한 부분을 읽어보시면 router.refresh() 메서드는 Making a new request to the server 라고 하여 서버에게 새로운 요청을 발송한다고 나와 있습니다. 기본적으로 웹 브라우저가 서버에게 보내는 요청은 모두 비동기로 동작하기 때문에 이를 통해 비동기적으로 동작한다고 유추할 수 있습니다. (사진)
- 0
- 2
- 16
질문&답변
Image 컴포넌트에 cdn 경로를 작성할 경우 최적화 가능한가요?
안녕하세요 이정환입니다.S3에 업로드 된 이미지 역시 next/Image 컴포넌트를 이용해 최적화 가능합니다. 사용 방법은 본 강의에서 안내드린 방법과 동일합니다.해당 강의의 11분 41초에 안내드리고 있듯이 next.config.js 파일에 들어가셔서 domains 속성에 s3 도메인 주소를 넣어주시면 됩니다.
- 0
- 2
- 14
질문&답변
usecallback과 usememo를 중복해서 쓰는 이유(context 분리하기 챕터)
안녕하세요 이정환입니다.3번 -> 2번 -> 1번 요 순서대로 답변드릴게요! 3) useEffect vs useMemo두 Hooks 모두 의존성 배열에 담긴 값이 변화했을때 콜백함수를 실행시키는 것은 동일하나, useMemo는 콜백함수의 값을 반환하는 반면 useEffect는 결과를 반환하지 않습니다. 이런 차이점으로 인해 useEffect는 보통 특정 시점에 값을 반환할 필요 없는 동작을 정의할때 사용되고, useMemo는 특정 시점에 계산해야 할(계산해 반환해야 할 값)을 정의할 때 사용합니다.이에 대한 설명은 우리 강의의 10.2 챕터를 다시 참고하시면 좋을듯 합니다. 2) Provider 컴포넌트에게 value Props를 전달할 때Provider 컴포넌트에게 value Props로 전달되는 값 역시 Props이므로 객체 형태로 전달됩니다. 다만 Context의 Provider 컴포넌트는 우리가 직접 구현하는게 아닌, React에서 자체적으로 제공하는 내장 컴포넌트이므로 전달한 Props에 대한 구조 분해 할당을 직접 구현하실 필요는 없습니다. Context의 Provider는 그저 Props로 전달받은 객체를 그대로 하위 컴포넌트들에게 공급하는 역할만 딱 깔끔하게 수행합니다. 1) useMemo를 사용해야 하는 이유이유는 간단합니다. 그렇지 않으면 함수들을 감싸고 있는 객체가 리렌더링 되기 때문입니다. 우선 onCreate, onUpdate, onDelete 함수들 자체는 각각 useCallback으로 감싸져서 컴포넌트가 리렌더링 되어도 다시 생성되지 않습니다. 그러나 이 세 함수를 감싼{ onCreate, onUpdate, onDelete } 객체 자체는 컴포넌트 리렌더링시 다시 생성됩니다. 그리고 우리가 Provider 컴포넌트에게 Props로 전달해야 하는 값은 이 객체입니다. 따라서 { onCreate, onUpdate, onDelete } 객체가 다시 생성되지 않도록 useMemo를 활용해야합니다.
- 0
- 2
- 38
질문&답변
이벤트 선언 관련 질문입니다.
안녕하세요 이정환입니다.AI 인턴이 완벽한 답을주었네요! 추가적으로 궁금하신 부분이 있다면 답글 남겨주세요PS. 해당 내용은 우리 강의의 5.5) 이벤트 처리하기 3분 30초 경에 설명해드리고 있습니다. 해당 부분을 참고하시면 좋겠습니다 😀
- 0
- 2
- 21
질문&답변
복합 대입 연산자
안녕하세요 김정현님 이정환입니다.num7 += 20을 한 시점에서, num7 변수에 저장된 값에 20이 더해집니다.따라서 num7+=20 까지 수행했을때 num7 변수의 값은 30이 됩니다.여기서 num7-= 20을 수행하면 30 - 20이 되어 값이 10이 됩니다. 추가로 num7 -=20; 에서 20;이 앞에 오게 되는 이유가 무엇이냐고 질문 주셨는데요,죄송하지만 이에 대해서는 질문의 의미를 정확히 파악하지 못했습니다 ㅠㅠ더 구체적으로 말씀해주시면 다시 답변 드리겠습니다
- 0
- 1
- 22
질문&답변
사전렌더링과 데이터페칭 수업 질문
안녕하세요 이정환입니다.우선 한입 Next.js 강의를 들으시는 대부분의 수강생 분들께서는 이미 리액트로 최소 1~2개의 개인 프로젝트를 진행해보신 경험이 있으시리라 예상했기에 이와같이 안내드리고 있습니다.그러나! 프로젝트 경험이 없으신 분들께서도 수강하시는데에는 아무런 문제가 생기지 않을 수 있도록 "복습" 이라는 키워드와 함께 리액트에서의 데이터 페칭 방법도 아주 자세히 안내해드리고 있으니, 해당 내용을 참고하시면 본 강의의 수강에는 전혀 문제 없으실겁니다. 생각해보니 한입 리액트 수강 이후 즉시 한입 Next.js를 수강하시는 분들께는 그렇게 느껴지실 수 있겠군요 ... 😓 이 부분은 한입 리액트 강의에 데이터 페칭 관련된 내용을 추가하는 식으로 개선해보도록 하겠습니다 감사합니다.
- 0
- 2
- 30
질문&답변
콜백함수-호출 시 인수 값을 안 넣어도 되는건지 궁금합
안녕하세요 zip님 이정환입니다. 결과적으로 아래 코드처럼, 두번째 인수로 전달되는 콜백함수에 매개변수 idx를 선언하지 않으면 오류가 발생합니다.function repeat(count, callback) { for (idx = 0; idx 오류가 발생하는 이유는 너무나 명확합니다. 콜백함수 내부에서는 idx라는 변수에 접근할 수 없기 때문입니다. idx 변수는 repeat 함수 본문에 선언되어 있고, 콜백함수에는 인수로 전달되고 있으므로 이를 이용하시려면 아래와 같이 콜백함수에 idx라는 매개변수를 선언해주셔야 합니다.repeat(4, (idx) => { console.log(idx * 4); }); PS. 죄송하지만 질문을 정확히 이해했는지 잘 모르겠습니다 ㅠㅠ 혹시 헷갈리는 부분이 있으시다면 조금 더 구체적으로 추가 질문 주시면 답변드리겠습니다.
- 0
- 2
- 33
질문&답변
컴파일 실패 원인은?
안녕하세요 진진님 이정환입니다.오류 메세지를 읽어보시면params 라는 Props의 타입 정의가 잘못되었다고 나와 있습니다.이런 오류가 발생하는 이유는 우리 강의의 3.2) 페이지 라우팅 설정하기 의 6분 21초 경에 설명 드리고 있듯이 Next.js 15.1 버전부터는 searchParams와 params의 타입이 모두 Promise로 래핑되어 제공되기 때문입니다. (자세한 내용은 앞서 언급해드린 챕터를 참고하세요!)이에 해당 내용을 참고하셔서 코드 상에 serachParams와 params의 타입을 모두 Promise로 변경하시면 되겠습니다!
- 0
- 2
- 27
질문&답변
마지막 프로젝트 수정 코드 - 커밋
안녕하세요 진진님 이정환입니다.구체적으로 어떤 챕터의 코드가 커밋이 안되어 있다고 말씀해주신 걸까요? 페이지 라우터 버전의 한입 로그 프로젝트 코드를 말씀하신건지, 앱 라우터 버전의 한입 로그 프로젝트 코드를 말씀하신 건지 알려주시면 확인해보겠습니다.가능하다면 챕터명으로 말씀해주시면 더 빠르고 정확하게 확인이 가능할 것 같습니다.
- 0
- 3
- 33
질문&답변
함수- return으로 결과값 반환
안녕하세요 zip님 이정환입니다.네 맞습니다. getArea(40, 200000)의 결과는 area 변수의 값이 됩니다. 그러나 무조건 변수에 담아서 출력하실 필요는 없습니다. console.log(getArea(20, 30)) 처럼 getArea 함수 호출 결과를 즉시 콘솔에 출력하도록 설정하는 것 또한 가능합니다.
- 0
- 1
- 24
블로그
전체 52025. 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.
7
한입 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