무엇이든 쉽게 설명할 방법은 있다!
📚 도서
🏆 어워드
2025 인프런 연말어워드 베스트셀러 수상
2024 인프런 연말어워드 수강생 PICK 수상
2023 인프런 연말어워드 수강생 PICK 수상
📹 강의
한 입 크기로 잘라먹는 바이브코딩
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
講義
受講レビュー
- 【無料Live】バイブコーディングは学びたいけれど、上辺だけなのは嫌なあなたへ - 第3次アンコールライブ
- 一口サイズに切って食べるバイブコーディング ― 基礎から実践デプロイまで(クロード&コーデックス)
- 一口サイズに切って食べるTypeScript (TypeScript)
- 一口サイズに切って食べるバイブコーディング ― 基礎から実践デプロイまで(クロード&コーデックス)
投稿
Q&A
인덱스드 엑세스타입 실무질문
안녕하세요 나마스테님 이정환입니다.실무에서는 팀별로 또는 개인별로 다른 기준을 선택하기 때문에 딱 어떤것이 정답이다 정해드리기는 어려운데요, 보통은 AI 인턴의 답변대로 Author 타입이 다른 곳에서도 자주 사용된다면 분리하는게 좋다고 생각합니다.그런데 만약 Comment 라는 타입이 추가로 있고, 해당 타입 내에도 별도의 Author 타입(Post의 Author와 프로퍼티가 다름)이 존재할 경우 이럴때에는 또 Author 타입을 분리해 사용하기 애매해 질 수 있습니다!PS. AI 인턴이 완벽한 답변을 적어주어 제가 딱히 코멘트를 덧 붙일 점이 없네요 ㅠㅠㅠ
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 10
Q&A
문제점
안녕하세요 서준민님 이정환입니다.네! Success 문구가 정상적으로 출력된걸 보니 아무런 문제 없이 Next.js 앱이 잘 생성되었네요! 그대로 이어 진행하시면 됩니다 😀
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 15
Q&A
npm 설치가 잘 안됐습니다. 보안 이슈인 것 같은데, 어떻게 해야 하나요?
안녕하세요 서주희님 이정환입니다권한 관련 오류로 보이네요!해당 문제를 해결하시려면 우선 파워쉘을 관리자 권한으로 실행해 주세요(사진)그런 다음 아래의 명령어를 터미널에 입력해주세요// 현재 실행 정책 확인하기 Get-ExecutionPolicy위 명령어는 현재 PC의 실행 정책을 확인 하는 명령어로 Restricted 또는 RemoteSigned 라는 결과를 출력합니다.만약 다음 그림처럼 Restricted 라는 결과가 출력될 경우 스크립트 파일을 읽어 실행할 수 없기에 문제가 발생할 수 있습니다.(사진)이럴 경우 다음 명령어를 입력해 권한 설정을 Restricted가 아닌 RemoteSigned로 바꿔주셔야 합니다.// 실행 정책을 RemoteSigned로 변경하기 Set-ExecutionPolicy RemoteSigned
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 32
Q&A
VS CODE 설치 시 관리자 권한으로 해야하는지
안녕하세요 남승원님 이정환입니다.그냥 확인 버튼을 눌러서 설치하시면 됩니다. 해당 안내 메세지는 오류가 아니라 단순 안내로 지금처럼 설치 할 경우 현재 로그인된 윈도우 계정에서만 VSCode가 설치되어 실행됨을 알리는 메세지입니다. 확인을 눌러 설치하셔도 VSCode 사용에는 전혀 문제가 없으니 그대로 진행하시면 됩니다.
- いいね数
- 0
- コメント数
- 1
- 閲覧数
- 26
Q&A
Editor Component의 최적화 불가능 이슈
안녕하세요 이정환입니다.AI 인턴의 답변대로 ContextProvider가 제공하는 value의 값이 변경된다면 memo를 적용한 컴포넌트이더라도 리렌더링이 발생할 수 있습니다. 정확한 문제의 원인을 파악하려면 전체 프로젝트 코드가 필요한데요 깃허브나 구글드라이브 링크 형태로 올려주시면 더 자세히 분석해 원인과 해결 방안을 공유해드리겠습니다.
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 37
Q&A
Git 버젼 상이
안녕하세요 에이님 이정환입니다.버전은 시간에 따라 변경될 수 있으며, 달라지더라도 강의에서 안내드리는 사용법이 변하는 것은 아니기에 문제가 발생하지 않습니다. 그대로 이후의 과정을 진행하시면 됩니다.
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 35
Q&A
에러핸들링- rootlayout에 관하여
안녕하세요 박혜원님 이정환입니다.아마 force-cache로 변경하시기 전에 캐시 데이터가 삭제되어서 발생하는 문제이지 않을까 싶습니다 ㅠㅠ 이 부분은 error.tsx 파일 실습 동안 만큼만 Footer 컴포넌트를 주석처리하시면 해결하실 수 있습니다!
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 29
Q&A
useCallback ⊂ useMemo
안녕하세요 ikv님 이정환입니다.네 말씀하신대로 useMemo를 통해 useCallback을 대체할 수 있습니다. React.js 공식 문서에서도 아래 그림과 같이 useMemo를 통해 useCallback의 기능을 재현할 수 있다는 내용을 찾아보실 수 있습니다.(사진)https://ko.react.dev/reference/react/useCallback#how-is-usecallback-related-to-usememo그럼 굳이 왜 useMemo와 useCallback을 나눠쓰느냐 물으신다면 코드의 가독성 때문입니다.useMemo로 함수를 메모이제이션하려면 아래처럼 화살표 함수를 두 번 써야 합니다.const onClick = useMemo(() => () => { console.log("클릭!"); }, []);바깥쪽 화살표 함수는 useMemo가 실행할 "계산" 이고, 안쪽 화살표 함수가 우리가 진짜로 메모이제이션 하고 싶은 값입니다. 문법적으로는 문제가 없지만 한눈에 잘 읽히지는 않죠.반면 useCallback을 이용하면 아래처럼 화살표 함수를 한 번만 쓰면 됩니다.const onClick = useCallback(() => { console.log("클릭!"); }, []);동작은 위 코드와 완전히 동일하지만, 코드를 읽는 사람 입장에서는 "아 이 함수 자체를 메모이제이션 하려는 거구나" 라는 의도가 훨씬 잘 드러납니다. 정리하자면 useCallback은 useMemo가 할 수 없는 새로운 기능을 제공하는 Hook이 아니라, 함수를 메모이제이션 한다는 아주 흔한 상황을 더 간결하고 명확하게 표현하기 위해 React가 따로 마련해 둔 Hook이라고 이해하시면 됩니다.
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 34
Q&A
코드 줄바꿈
안녕하세요 박재은님 이정환입니다.우선 줄바꿈을 자동으로 적용하시려면 4.2 챕터의 3분 20초경 소개해드리는 ESLint 플러그인을 설치하고 설정까지 마쳐주셔야 합니다. 잘 설정되었다면 Ctrl + S를 눌러 파일을 저장할 때 마다 코드가 자동으로 정렬됩니다.비주얼 스튜디오 코드는 별도의 로그인이 필요하지 않습니다. 깃허브 계정 연동은 향후 버전관리 챕터에서 진행하니 그때 참고해주시면 되겠습니다.
- いいね数
- 0
- コメント数
- 2
- 閲覧数
- 40
Q&A
vs code 프로그램 동기화 가능여부
안녕하세요 하태석님 이정환입니다.결론부터 말씀드리자면 VSCode 자체로는 여러 컴퓨터간의 연동은 어렵습니다. 그러나 이후 섹션에서 배우는 버전관리 Git & GitHub를 배우시게 되면 여러 컴퓨터에서 동일한 소스코드 파일을 공유하며 작업을 이어 진행할 수 있습니다.
- いいね数
- 0
- コメント数
- 1
- 閲覧数
- 44




