무엇이든 쉽게 설명할 방법은 있다!
📚 도서
🏆 어워드
2025 인프런 연말어워드 베스트셀러 수상
2024 인프런 연말어워드 수강생 PICK 수상
2023 인프런 연말어워드 수강생 PICK 수상
📹 강의
한 입 크기로 잘라먹는 바이브코딩
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
강의
로드맵
전체 2수강평
- 한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)
- 한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
- 한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
게시글
질문&답변
파일로 웹에 드레그하여 결과가 나타나지 않음
안녕하세요 이정환입니다.혹시 아래 그림과 같이 크롬의 빈 탭에 드래그 & 드랍 해주셨을까요? 강의에서는 빈 탭에 드래그&드랍 방식으로 안내드리고 있는데 혹시 다른 페이지가 열려있는 상황이라거나 탭 자체가 실행되어 있지 않은경우 동일하게 동작하지 않을 수 있습니다.(사진)만약 빈 탭에 잘 드래그&드랍 하셨음에도 페이지가 나타나지 않는다면 사용하시는 브라우저가 크롬이 아니거나, 크롬이라도 버전이 달라서 생기는 문제일 수 있습니다. 하지만 이걸 해결하겠다고 굳이 브라우저를 새로 깔거나 버전을 업그레이드하실 필요는 없습니다. 이럴 땐 임시 방편으로 이렇게 열어보세요. 1. VS Code에서 해당 파일을 우클릭한 뒤 경로 복사(Copy Path) 를 선택합니다. (사진)2. 복사된 경로를 크롬 주소창에 붙여넣고 엔터를 누릅니다. (사진)이렇게 하면 드래그가 안 되던 환경에서도 페이지가 정상적으로 열립니다. 사실 이 드래그 방식은 지금 잠깐 결과를 확인하기 위한 방법일 뿐입니다. 다음 섹션부터는 실제로 서버를 직접 가동해서 페이지를 여는 방식으로 넘어가기 때문에, 이 방법은 더 이상 쓰지 않게 됩니다. 그러니 지금 여기서 막히시더라도 전혀 걱정하지 않으셔도 됩니다.
- 좋아요수
- 0
- 댓글수
- 3
- 조회수
- 40
질문&답변
Claude Code Git 설치순서2
안녕하세요 이정환입니다.이미 Claude Code를 설치하신 상태라면 이후에 Git을 설치하셔도 큰 문제가 발생할 것으로 보이지는 않습니다. 이후 과정이 잘 진행된다면 그대로 수강하시면됩니다
- 좋아요수
- 0
- 댓글수
- 3
- 조회수
- 44
질문&답변
Claude Code , Git 설치순서
안녕하세요 이정환입니다.이미 Claude Code를 설치하신 상태라면 이후에 Git을 설치하셔도 큰 문제가 발생할 것으로 보이지는 않습니다. 이후 과정이 잘 진행된다면 그대로 수강하시면됩니다
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 28
질문&답변
강의자료는 어떻게 제작하시나요?
안녕하세요 아리마님 이정환입니다.우선 칭찬 감사합니다. 모든 강의 자료는 Keynote를 이용해 제작되고 있습니다 그 외의 다른 툴은 전혀 사용하지 않고 있어요 😀제작 방법은 ... 음 특별한 방법이 없어서 뭐라고 말씀드려야 할 지는 잘 모르겠네요 ㅠㅠ 애니메이션을 최대한 적절히 활용하려고 노력하고 있습니다!
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 38
질문&답변
클로드가 제대로 실행이 안됩니다.
안녕하세요 남승원님 이정환입니다.현재 터미널의 사이즈가 너무 작아서 그런것 같은데 끌어올려 사이즈를 좀 키워보시겠어요?! 경계 부분을 클릭한채로 끌어올리시면 됩니다 그래도 안되면 답글부탁드립니다
- 좋아요수
- 0
- 댓글수
- 3
- 조회수
- 45
질문&답변
비밀번호 재설정 1회용 이메일 링크
안녕하세요 이정환입니다결론부터 말씀드리면, 재설정 링크 자체는 이미 1회용으로 정상 소모되고 있습니다. 같은 링크로 계속 비밀번호가 변경되는 것처럼 보이는 건, 링크가 재사용되는 게 아니라 첫 클릭 때 발급된 로그인 세션이 브라우저에 그대로 남아있기 때문이에요.Supabase 비밀번호 재설정 흐름을 단계별로 보면 이렇습니다.1. resetPasswordForEmail() 호출 → 이메일 링크 발송2. 링크 클릭 → Supabase가 토큰을 1회 검증하고 소모한 뒤, 그 대가로 세션(access / refresh token)을 발급해 브라우저(localStorage)에 저장3. 앱에서 updateUser({ password }) 호출 → 이때 사용하는 건 링크가 아니라 "방금 발급된 세션"즉, 비밀번호 변경은 링크가 아니라 로그인된 세션으로 처리됩니다. 그래서- 링크의 토큰은 사실 이미 1회용으로 소모된 상태입니다 (재검증하면 만료/에러가 납니다)- 그런데 첫 클릭으로 만들어진 세션은 브라우저에 계속 살아있습니다 (refresh token이 자동 갱신됨)- 그 상태로 페이지에 다시 들어가면 "이미 로그인된 상태"라 updateUser가 또 동작 → 마치 "링크가 계속 통하는" 것처럼 보이는 거예요 만약 이 동작이 부자연스럽다고 느껴지신다면 비밀번호 변경 이후 강제로 SignOut 하는 동작을 만들어주시면 됩니다
- 좋아요수
- 0
- 댓글수
- 1
- 조회수
- 35
질문&답변
클로드 코드설치가 안됩니다.
안녕하세요 남승원님, 이정환입니다. 가장 유력한 원인으로는 네트워크/방화벽 차단이 의심됩니다. 집 노트북에서는 잘 설치되셨다고 하셨는데, 지금 안 되는 PC가 혹시 회사나 학교, 공용 네트워크에 연결되어 있지 않으신가요? 보안 정책이 걸려 있는 네트워크에서는 claude.ai 접속이나 설치 스크립트 다운로드가 막혀서, 명령어를 입력하고 엔터를 쳐도 아무 반응 없이 멈춰버리는 경우가 종종 있습니다. 먼저 어느 단계에서 막힌 건지부터 확인 해 보겠습니다.터미널에 아래의 명령어를 다시 입력해주세요irm https://claude.ai/install.ps1 스크립트 내용이 화면에 주르륵 출력된다면, 다운로드는 정상이고, 실행 단계 문제입니다. 에러가 나거나 여전히 아무것도 안 나온다면, 네트워크 차단일 가능성이 높습니다. 만약 회사·학교 PC라서 네트워크가 막힌 경우라면, 그건 보안 정책으로 의도적으로 막아둔 것일 수 있습니다. 이럴 땐 억지로 우회하지 마시고, 집에 있는 개인 노트북처럼 자유로운 환경에서 설치해 진행하시는 걸 권장드립니다. (이미 집 노트북에는 설치가 되어 있으니 거기서 실습하셔도 전혀 문제없습니다!) 꼭 그 PC에서 써야 한다면 회사 IT 담당자분께 한번 문의해 보시는 게 안전합니다. 개인 PC인데도 안 되는 경우라면, PowerShell 자체 보안 설정 때문일 수 있어요. 아래 명령어를 한 줄로 입력해 보세요. [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; Set-ExecutionPolicy Bypass -Scope Process -Force; irm https://claude.ai/install.ps1 | iex 복잡해 보이지만, 맨 뒤는 처음에 입력하셨던 설치 명령어 그대로이고 앞부분은 보안을 더 강한 방식(TLS 1.2)으로 연결하게 해주고 윈도우가 외부 스크립트 실행을 차단하는 걸 잠깐 풀어주는 안전장치예요. 이 설정은 지금 열려 있는 PowerShell 창에서만 잠깐 적용되고 창을 닫으면 자동으로 원래대로 돌아오기 때문에, 개인 PC에서는 안심하고 실행하셔도 됩니다.
- 좋아요수
- 0
- 댓글수
- 3
- 조회수
- 48
질문&답변
컴포넌트와 레이아웃
안녕하세요 eojine294님 이정환입니다.좋은 질문 감사합니다. 비슷한 질문이 이전에 들어와 답변을 드린적이 있는데 한번 참고해보시고 추가로 궁금하시거나 의문이 드는 점 답글 남겨주시면 감사하겠습니다 😀https://inf.run/giZUn
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 34
질문&답변
강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.
안녕하세요 imhj11777님 이정환입니다. 순서대로 답변드리겠습니다.1) 프로젝트의 주제나 소재는 불법적인게 아니라면 전혀 아무런 문제도 되지 않는다고 생각합니다. 물론 향후에 입사 지원하실 회사의 서비스와 유사한 주제라면 아주 조금은 득점 포인트가 될 수 있겠지만 주요한 포인트는 아니라고 생각합니다.2) 1번에서 말씀드린대로 주제는 별로 중요하지 않다고 생각합니다. 주제보다는 실제 운영 여부와 운영 과정에서 발생한 이슈 트래킹 기록이 훨씬 중요할 것 같습니다. 따라서 한명이라도 실제 유저를 받아볼 수 있는 주제를 골라 서비스를 만들어보시면 좋을 것 같습니다.3) 개인적으로 React, TypeScript, Next의 지식은 기본으로 깔리고 그 위에 서비스 운영 경험이 함께 녹아있어야 경쟁력 있는 포트폴리오 구성이 가능하다고 생각합니다. 과거에 시장이 많이 좋았을 당시에는 특정 라이브러리나 프레임워크의 학습 정도가 높다는 이유 만으로 메리트가 되었던 적도 있었으나 AI가 많이 발전한 지금으로써는 단순 학습의 양이 큰 메리트가 되지는 못할 것 같습니다. 따라서 지금까지 배워오신 지식들을 기반으로 꼭 실제 서비스를 운영하시면서 운영 과정에서 기술적으로 어떤 챌린지가 있었고, 어떻게 해결해 나갔는지 잘 기록해두시는 걸 추천드립니다.4) 1번에서 말씀드렸듯 주제를 추천해드리는건 큰 의미가 없는 것 같습니다. 질문자님께서 실제로 운영하실 프로젝트이니 만큼 질문자님께서 관심있는 주제의 프로젝트를 선정하시는게 좋을 것 같습니다.5) 개인, AI, 팀 다 제치고 실제 운영이 되는 프로젝트가 가장 중요합니다. 어떤 프로젝트이던 유저가 없고 운영 과정에서 직접 부딪히며 배운 점이 없다면 차별점이 되지는 못할 것 같습니다. 개인적으로는 AI를 사용하지 않을 이유는 없다고 생각합니다. AI를 활용하셔서 프론트엔드뿐만 아니라 백엔드나 인프라 관련된 부분까지도 모두 아우르는 프로젝트를 꼭 경험해보셨으면 좋겠습니다 !_!
- 좋아요수
- 2
- 댓글수
- 1
- 조회수
- 56
질문&답변
@/styles/globals.css'
안녕하세요 이루빠님 이정환입니다.해당 경로에 globals.css 파일이 잘 존재하는데도 불러오기가 잘 안된다면, 아마 타입스크립트 baseUrl 또는 path 설정과 관련된 문제로 보입니다. 정확한 원인 파악을 위해서는 질문 가이드라인에 남겨드린대로 전체 프로젝트 코드를 깃허브 링크 형태로 전달해 주셔야 합니다. 링크 형태로 답글 남겨주시면 직접 살펴보고 회신드리겠습니다.
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 39




