이정환 Winterlood
@winterlood
수강생
39,775
수강평
3,076
강의 평점
5.0
무엇이든 쉽게 설명할 방법은 있다!
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
강의
로드맵
전체 2수강평
- 한 입 크기로 잘라먹는 바이브코딩 (with Claude Code)
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
게시글
질문&답변
새 링크 버튼이 안 보여요
안녕하세요 이정환입니다아이고 이런 이슈가 있으셨군요 버튼이 있던 위치를 클릭했을때 새 링크 페이지로 이동 되었다면 아마 스타일 설정과정에서 클로드가 버튼의 스타일을 실수로 보이지않게(흰색 배경에 흰색 글자 등으로) 설정한 것으로 보입니다 🥲AI는 확률적으로 동작하다보니 간혹 이렇게 사소한 실수를 할 수 있는데요 이럴때에는 말씀하신 것 처럼 실수한 부분이 포함된 커밋을 취소하시는 등으로 대처하고 작업을 다시 지시하시거나, 혹은 수정을 요청하신다음 수정된 내용을 추가로 커밋하시면 됩니다.이미 실수한 부분의 커밋을 취소해 해결하셨다니 멋지네요 👍👍 버전관리를 제대로 이용하고 계신 것 같습니다!!PS. 만약 이러한 실수를 클로드가 계속 반복한다면, 클로드에게 직접 해당 실수를 다시는 하지 않을 수 있도록 스킬로 등록해 달라고 하시면됩니다. (또는 이미 존재하는 디자인 스킬에 추가해 달라고 해도 됩니다)
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 20
질문&답변
회원가입 구현 (구현 후 최종 화면 출력 X)
안녕하세요 이정환입니다env 파일의 이름이 .env가 아닌 env로 설정되어 있네요 😀강의에서 안내드리는대로 .env로 설정해주시면 정상적으로 작동할 것 같습니다!(사진)혹시 그래도 안된다면 답글 부탁드립니다
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 32
질문&답변
질문있어요!
안녕하세요 푸루미님 이정환입니다.우선 심도있는 질문주셔서 감사합니다 😀 사용하시는 용어도 그렇고 개발 지식 습득에 매우 진심이신 것 같네요!! (아니면 혹시 이미 개발자로 근무하고 계실지도 모르겠다는 생각이 들어요!!) 질문주신 내용을 정리하면 대략적으로 아래 3가지 사항을 질문해 주신 것 같습니다.1) 대규모 프로젝트를 바이브코딩 만으로 지속할 수 있는가? (코드 구조, 이슈 해결, 보안 관련 문제)2) 본 강의에서 Claude Code 대신 Codex CLI를 사용해도 되는가?3) 강의내용 중 보안관련된 내용이 포함되어 있는가? 순서대로 답변 드릴게요! 혹시 제가 누락한 부분이 있다면 답글로 다시 알려주세요 1) 대규모 프로젝트를 바이브코딩 만으로 지속할 수 있는가? (코드 구조, 이슈 해결, 보안 관련 문제)굉장히 어려운 질문인 것 같습니다 ㅎㅎ 현재 개발 커뮤니티에서도 이 주제로 여러 의견이 충돌하고 있는 상황이라 아직 정확한 정답은 없다고 생각하는데요 개인적인 제 의견으로 답변 드릴게요 우선 AI가 생성한 코드가 구조적으로 괜찮은지 판단하는 것은 당연 코드를 이해할 수 있는 사람만이 가능하다고 생각합니다. 코드 구조에 대한 개념 습득 없이 바이브코딩만으로 시작하시는 경우에는 아무래도 불가능할 수 밖에 없는 것 같아요 그런데 저는 앞으로 이런 일이 꼭 필요할지는 잘 모르겠습니다. AI는 이미 너무 훌륭하고, 또 계속해서 발전할텐데 앞으로도 사람이 매번 코드의 구조를 직접 검토해야 하는 일이 얼마나 많을지는 잘 모르겠어요개인적으로 저는 코드의 구조를 검토하느 것 보다는 기능의 흐름과 설계 방향을 감독하는데에 우리가 더 노력해야 된다고 생각합니다 😀 lint/typecheck는 통과해도 production build에서 터지는 경우가 있다고 말씀하셨는데요 이런 경우는 사실 AI를 사용하지 않던 시대에도 매우 많았던 것 같습니다 ㅋㅋ 그래도 빌드 과정에서 오류가 발생하는게 운영 단계에서 사용자가 오류를 실제로 마주하는 것 보다는 훨씬 나은 상황인 것 같아요 빌드 오류는 고치고 새롭게 빌드하면 되니까요! 만약 너무 빌드 오류가 잦다면 테스트코드를 도입해보시는 것 도 좋은 선택지가 될 것 같습니다. 테스트코드와 관련해서는 아래의 아티클을 참고해보시길 추천드립니다https://app-place-tech.com/post/c8616c79-9e66-46bd-b010-3a4a30d6f158 보안과 인프라 부분은 확실히 사람의 지식이 가장 중요한 영역이라고 생각합니다. 그래서 이런 설계와 보안, 인프라 같은 부분이야 말로 AI 시대의 우리가 가장 주의깊게 들여다봐야 하는 영역이라고 생각해요 본 강의에서도 이런 부분에 포커스를 맞춰 개념들을 설명하고 있답니다 😀 결론적으로 1번 질문에 답변을 드리자면, 코드의 구조는 이제 사람의 손을 떠났지만 그 밖의 문제(보안, 인프라, 설계)는 아직 우리 손에 남아있다고 생각합니다. 그리고 이 부분을 잘 이해하고 있다면 AI를 활용해 아주 대규모 프로덕션도 거뜬히 만들어낼 수 있다고 생각해요 2) 본 강의에서 Claude Code 대신 Codex CLI를 사용해도 되는가?네! 가능합니다 😀그런데 강의 도중 Claude Code의 스킬이나 MCP, 권한을 설정하는 챕터가 있는데요 이 부분은 개인적으로 Codex 만의 방법을 활용해 진행하셔야 합니다 ㅠㅠ (향후 Codex 사용자 분들께서도 이용 가능하시도록 내용을 보강 할 예정이에요!!) 3) 강의내용 중 보안관련된 내용이 포함되어 있는가?네! 포함되어 있습니다 😀구체적으로는 인증, 인가에 대한 기초적인 개념부터 Access, Refresh Token 방식의 인증 그리고 RLS 기반의 인가에 대해 애니메이션 시각자료와 함께 아주 구체적으로 살펴 볼 예정입니다!
- 좋아요수
- 2
- 댓글수
- 2
- 조회수
- 51
질문&답변
테마 적용 관련 질문
안녕하세요 현석님 이정환입니다.넵! SKILL.md 파일에 작성되어 있는 내용은 지침일 뿐이라서 Claude Code가 그때 그때 조금씩은 다르게 해석할 수 있습니다. 디자인의 경우 아무래도 더 해석의 다양성이 있는 분야이다보니 올려주신 사진처럼 조금씩 달라질 수 있어요 😀 전혀 아무런 문제는 없으니 그대로 진행하셔도 괜찮습니다.혹시 디자인이 쪼끔 맘에 안드신다면 원하시는 스타일을 설명하신 다음 해당 내용을 스킬로 보관해달라고 말씀해보시면 더 좋을 것 같아요!! 그럼 Claude Code가 알아서 SKILL.md 파일의 지침을 말씀하신 내용으로 수정합니다 😀
- 좋아요수
- 1
- 댓글수
- 1
- 조회수
- 48
질문&답변
(macOS) themes.zip 압축 해제가 되지 않습니다.
교체 완료했습니다! macOS 버전에서 다시 압축해 정상적으로 압축 해제되는것까지 확인 완료했습니다수강에 불편함드려 죄송합니다 🥲
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 47
질문&답변
(macOS) themes.zip 압축 해제가 되지 않습니다.
안녕하세요 알리오올리오님 잠시만 기다려주세요! 바로 확인해보겠습니다
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 47
질문&답변
VSCode 설정 문의
안녕하세요 이정환입니다.스크린샷에 보이는 빨간 줄은 실제로 코드가 동작하지 않아서 발생하는 오류가 아니라, VS Code가 JavaScript 파일(.jsx 포함)에 대해서도 TypeScript 수준의 타입 검사를 수행해서 보여주는 에디터 경고로 보입니다.올려주신 settings.json 파일에 아래와 같이 js validate 속성이 true로 설정되어 있는데요 이를 false로 바꿔주시면 해결 될 것으로 보입니다."js/ts.validate.enabled": true //
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 38
질문&답변
(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의
안녕하세요 이민진님 이정환입니다.결론부터 말씀드리면, useEffect를 useProfileData보다 위에 두든 아래에 두던 동작에는 전혀 차이가 없습니다. useEffect는 코드 위치가 아니라 라이프사이클에 맞춰 동작합니다. 따라서 어떤 위치에 작성되어 있던, 다음과 같이 의존성 배열(deps)가 빈 배열로 설정되어 있다면 이 컴포넌트가 마운트 된 이후에 실행됩니다.PS. 이 내용은 선수 강의인 한 입 크기로 잘라먹는 리액트에서 다룹니다. useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); useProfileData 역시 코드 위치가 아니라 React의 렌더링 사이클에 맞춰 동작합니다. 컴포넌트가 렌더링될 때마다 호출되긴 하지만, 내부적으로는 React Query(TanStack Query)의 enabled 옵션을 활용해 인자로 전달된 userId 값이 유효할 때에만 실제 데이터 fetching이 일어나도록 구현되어 있습니다. PS. 이 내용은 이전 섹션인 Tanstack Query 섹션에서 다룹니다// (... 중략) export function useProfileData(userId?: string) { const session = useSession(); const isMine = userId === session?.user.id; return useQuery({ queryKey: QUERY_KEYS.profile.byId(userId!), queryFn: async () => { // (... 중략) }, enabled: !!userId, // 따라서 실행 순서는 이렇게 됩니다1. 첫 렌더 → session이 아직 null이므로 useProfileData(undefined)로 호출됨 → 그러나 enabled: !!userId가 false이기 때문에 실제 fetch는 일어나지 않음2. 렌더링이 끝난 직후 useEffect의 콜백이 실행되어 onAuthStateChange 리스너가 등록됨3. Supabase가 세션을 복구해 콜백을 호출 → setSession이 실행되어 세션 상태가 갱신됨4. 세션 갱신으로 SessionProvider가 리렌더 → 이번엔 유효한 id로 useProfileData(session.user.id)가 호출됨5. enabled가 true가 되면서 그제서야 React Query가 실제 프로필 데이터를 fetch 하기 시작함
- 좋아요수
- 0
- 댓글수
- 1
- 조회수
- 31
질문&답변
PPT 코드 관련 질문
안녕하세요 이정환입니다.앗 말씀해 주신 내용을 살펴보니 그렇네요 🥲 단순한 예시라고 봐 주시면 감사하겠습니다.
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 33
질문&답변
핸드북 light/dark mode 관련 이슈가 있는 것 같습니다.
안녕하세요 이지민님 이정환입니다아이고..! 이런 실수가 있었군요 수정 마쳤습니다 ㅠㅠ 감사합니다(사진)
- 좋아요수
- 0
- 댓글수
- 1
- 조회수
- 34




