173만명의 커뮤니티!! 함께 토론해봐요.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
.claude\output-styles 라고 폴더가 생성되는거 보니 먼가 문제가 발생한거 같습니다. 맨처음에는 bucket-list-main루트파일에서 같이해보다가 루트파일이 잘못된거같아 새롭게 claude-code-mastery파일로 열어서 진행하고 있는데 폴더명이 저렇게 표출됩니다. 강의내용처럼 beginner.md를 작성하고 /config outputStyle을 입력해도 beginner가 표출되지않고있습니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
별다른 질문없이 삭제가 바로 진행되었습니다. 클로드 업데이트가 있어서 이런 것인지 아니면 무엇때문인지 알고 싶습니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
소리만 나와요. 비슷한 상황이 많은 것 같은데 확인해주실 수 있나요? 사파리, 크롬 모두 영상 안열립니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
강의교환 링크가 안열려요.....ㅠㅠ
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
영상 4번 / 26번강의 재생오류로 재생이 안되요.... 다른강의는 나오는데 어제부터 계속 오류에요!! 확인 좀 해주세요!! ㅠㅠㅠㅠㅠㅠ
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요. 현재 클로드 채팅을 사용해서 법률 구조 검토, 문서 생성 등 업무와 관련된 작업을 하고 있습니다. 뭔가 채팅으로 하기엔 한계가 있는 것 같고 , 본격적으로 저희 업무 관련한 툴들을 계속 만들려고 해서 cowork 나 클로드 코드를 사용하려고 합니다. 프로젝트를 생성해서 지침 및 파일들을 넣고 계속해서 작업하고 있는데요, 이대로 cowork나 코드로 넘어가서 작업해도 괜찮을까요? 아니면 이러한 단순 문서 생성 같은 경우 클로드 채팅으로 계속해도 되는 걸까요? 그리고 혹시 모델은 어떤걸로 하면 좋을까요?
해결됨
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
안녕하세요. Context API의 대안으로 Zustand를 사용할 때의 장점과 함께, Zustand가 반드시 Context API를 대체하는 것이 아니라 상태의 특성에 따라 전략적으로 선택해야 한다고 설명해주셨습니다. 예를 들어 다크 모드나 다국어 설정처럼 변경 빈도가 낮으면서 여러 컴포넌트에서 공유해야 하는 상태의 경우 Context API도 충분히 적합할 수 있다고 이해했습니다. 제가 이해한 바로는 Context API가 적합한 경우를 크게 다음과 같이 생각해볼 수 있을 것 같습니다. 특정 컴포넌트와 그 하위 컴포넌트에서만 공유해야 하는 상태 Provider의 범위를 해당 컴포넌트 트리로 제한하여 사용하는 경우 애플리케이션 전역에서 공유하지만 변경 빈도가 낮은 상태 다크 모드 다국어 설정 전역 configuration 등 반면, 전역에서 사용하면서 변경이 빈번하거나 여러 상태를 세분화하여 구독해야 하는 경우에는 Zustand와 같은 외부 상태 관리 라이브러리가 더 적합할 수 있다고 이해했습니다. 1. Context API에 대한 제 이해가 맞을까요? Context API와 Zustand를 선택할 때 단순히 Local vs Global만으로 구분하기보다는, 상태의 변경 빈도 해당 상태를 구독하는 컴포넌트의 범위 상태 변경으로 인한 리렌더링의 영향 등을 함께 고려해야 한다고 이해했는데, 이 방향이 맞는지 궁금합니다. 혹시 이 외에도 Context API와 Zustand를 선택할 때 중요하게 봐야 하는 기준이 있을까요? 2. 그렇다면 Auth 상태는 어디에서 관리하는 것이 좋을까요? Auth의 경우에는 실무, 프로젝트 작업을 할 때 상태 관리를 어떻게 해야할지 판단이 어렵고 로직을 짜는데 항상 이게 맞나? 괜찮나? 라는 고민을 가졌습니다. 예를 들어 서버에서 현재 로그인한 사용자 정보를 받아온다고 했을 때 다음과 같은 방법들을 생각해볼 수 있을 것 같습니다. TanStack Query로 auth/user 데이터를 가져오고 Query Cache 자체를 상태로 활용 TanStack Query로 데이터를 가져온 뒤 Context API를 통해 공유 TanStack Query로 데이터를 가져온 뒤 Zustand Store에 저장하여 사용 여기서 궁금한 점은 서버에서 가져온 auth/user 정보가 본질적으로 server state라면 TanStack Query의 cache를 그대로 single source of truth로 사용하는 것이 더 적절한지, 아니면 Context나 Zustand에 별도로 저장하여 client state로 관리하는 것이 적절한 경우도 있는지입니다. 특히 TanStack Query에서 가져온 데이터를 다시 Context나 Zustand에 저장하면 동일한 데이터가 두 곳에 존재하게 되는데, 이런 형태는 가급적 피해야 하는지도 궁금합니다. 3. React / Next.js와 인증 방식에 따라 기준이 어떻게 달라질까요? Auth 상태 관리는 프레임워크와 인증 방식에 따라서도 달라질 것 같습니다. 예를 들어 다음 네 가지 경우를 생각해봤습니다. React + 클라이언트에서 JWT 관리 React + 서버 Session 기반 인증 Next.js + 클라이언트에서 JWT 관리 Next.js + 서버 Session 기반 인증 각각의 경우에 인증의 source of truth를 어디에 두고, Context API / Zustand / TanStack Query 중 어떤 역할을 맡기는 것이 적절한지 궁금합니다. 단순히 “Auth는 Context”, “전역 상태는 Zustand”처럼 정해진 기준보다는, 인증 정보의 source of truth가 어디에 있는지, server state와 client state 중 어디에 해당하는지, 그리고 해당 상태를 어떤 범위에서 소비하고 변경하는지 를 기준으로 판단해야 할 것 같은데, 이 관점이 맞는지도 궁금합니다. 4. Route 접근 제한은 어느 계층에서 처리하는 것이 적절할까요? Auth 상태 관리와 함께 궁금한 부분이 인증 여부에 따른 route 접근 제한입니다. 예를 들어 로그인한 사용자만 /dashboard , /mypage 등에 접근할 수 있도록 제한한다고 했을 때, React와 Next.js에서는 접근 방식이 다를 수 있다고 생각했습니다. React + React Router v7 React SPA에서는 서버가 아닌 클라이언트에서 routing이 이루어지기 때문에 다음과 같은 방법들을 생각해볼 수 있을 것 같습니다. Context/Zustand의 auth 상태를 확인한 뒤 컴포넌트에서 redirect React Router의 loader에서 인증 상태를 확인하고 redirect 서버 API 요청 시에도 별도로 인증/인가 검증 이 경우 UI 레벨에서의 route protection과 실제 보안을 위한 서버의 인증/인가를 어떻게 구분해야 하는지 궁금합니다. 또한 Context나 Zustand의 isAuthenticated 같은 client state를 기준으로 route 접근을 제한하는 것이 적절한지, 아니면 서버의 session/token 검증 결과를 기준으로 접근 여부를 판단하는 것이 더 적절한지도 궁금합니다. Next.js Next.js에서는 React SPA와 달리 서버에서 인증 정보를 확인할 수 있기 때문에, Server Component에서 session/cookie를 확인 Middleware 또는 Proxy를 통한 route 단위의 사전 처리 Client Component에서 Context/Zustand의 auth 상태를 확인하고 redirect 실제 Server Action/API에서도 인증 및 권한 검증 등 여러 계층에서 접근 제한을 처리할 수 있다고 알고 있습니다. 이때 궁금한 점은 어느 계층에서 route 접근을 제한하는 것이 가장 적절한지, 그리고 각각의 역할을 어떻게 구분해야 하는지입니다. 예를 들어, “로그인하지 않은 사용자에게 페이지 자체를 보여주지 않는 것”과 “해당 사용자가 실제 데이터나 API에 접근하지 못하도록 보안을 적용하는 것”은 별개의 문제로 보고 각각 처리해야 하는지 궁금합니다. 결국 route protection 역시 Context API / Zustand 중 무엇을 사용하느냐보다, 인증의 Source of Truth가 어디에 있는지 → 어느 시점에 인증 여부를 확인할 수 있는지 → UI 접근 제어와 실제 서버의 인증/인가를 어느 계층에서 담당할 것인지 를 먼저 결정하는 것이 맞는지도 궁금합니다. 추가적으로 실무 관점에서의 예시도 궁금합니다. 가능하시다면 위 질문들에 대해 개념적인 기준뿐만 아니라, 강사님께서 실제 프로젝트를 설계하신다면 각각 어떤 방식을 선택하실지도 궁금합니다. 뿐만 아니라 실무에서 일반적으로 많이 사용하는 패턴이 있는지, 또는 정해진 표준이 없다면 강사님의 실무 경험에서는 어떤 구조를 주로 선택하셨고, 그렇게 선택하신 이유가 무엇인지도 함께 설명해주시면 정말 도움이 될 것 같습니다. 가능하다면 단순한 개념 설명뿐만 아니라 간단한 프로젝트 구조나 코드 예시도 함께 보고 싶습니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요 클로드 코드 ai 를 학습하고 있는 학생입니다. 근데 처음에는 힘들어도 어찌저찌 따라하겠는데 후반으로 갈수록 이것저것 영상과는 완전 다른 결과물들이 만들어지고 있어서 혼란스럽습니다. 특히 ai 에 응답 속도나, 결과물 추출 내용 이 달라 강의 중간중간에 알려주시는 내용들을 이해하기가 어렵습니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요 커서에서 붙여넣기하면 전체내용이 안보이고 이렇게 축약되서 나옵니다 왜그런건가요?
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요 수업 잘 듣고있습니다. 작업사항 을 깃에 커밋하는거는 이해가 정말잘 되는데요 전에 1번폴더 내용을 깃에 커밋하고 브랜치들을 만들어 둿는데요 새로운 프로젝트를 진행하려고 2번폴더를 만들고 커밋 및 브랜치를 만드려고하니 2번경로로 커서를 실행했음에도 1번의 내용이 들어있는데 이거 원래 구분없이 저장되는건가요?
해결됨
React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처
미션 5 중급을 진행하면서 폴더 구조와 depth에 대해 궁금한 점이 생겨 Q&A를 남깁니다. 강의에서는 reducer를 기능별로 분리하여 대략 아래와 같이 2개의 depth로 구성한 것으로 이해했습니다. reducers/ ├── cafeteria/ ├── ... 진행하다 보니 한 가지 궁금한 점이 생겼습니다. 현재는 cafeteria 라는 하나의 범위 안에서 rice , refill , side 와 같은 기능들을 충분히 관리할 수 있지만, 추후 각각의 기능이 커지고 관련 파일이 많아진다면 아래처럼 한 단계 더 나누어도 괜찮을까요? reducers/ └── cafeteria/ ├── rice/ ├── refill/ └── side/ 실무에서 폴더 구조를 잡을 때도 이 부분에 대한 고민이 많았습니다. 처음에는 하나의 폴더에 관련 파일과 기능을 모아두었다가 규모가 커지면서 다시 분리하기도 하고, 반대로 너무 세분화되어 다시 합치는 경우도 있었습니다. 특히 처음 정한 폴더의 네이밍이나 분류 기준에 맞추다 보니 depth가 계속 깊어지고, 어느 순간부터는 폴더명만 보고 전체적인 구조나 각 기능의 관계를 파악하기 어려워지는 경험도 있었습니다. 그래서 항상 “어떤 기준으로 폴더를 분리해야 하는가?”, “어느 정도의 depth까지 가져가는 것이 적절한가?” 에 대한 고민이 있었습니다. 이번 reducer 미션을 진행하면서 이 부분이 다시 궁금해졌습니다. 기능의 규모가 커지는 경우 reducers/cafeteria/rice 처럼 depth를 추가하여 세분화하는 것이 괜찮은지, 아니면 단순히 기능의 크기나 파일 개수를 기준으로 나누기보다 역할, 책임, 변경되는 이유, 기능 간의 의존 관계 등 다른 관점에서 구조를 바라보는 것이 더 좋은지 궁금합니다. 또 강사님께서 실제 프로젝트에서 이런 상황을 마주하신다면, 어떤 기준과 관점으로 폴더 구조를 잡고 기능을 분리하시는지도 궁금합니다. 프로젝트 규모가 커졌을 때 처음부터 일정한 구조나 규칙을 정해두고 확장해 나가시는 편인지, 아니면 처음에는 최대한 단순하게 가져가면서 필요해지는 시점에 구조를 변경하시는지도 궁금합니다. 마지막으로 폴더 구조나 기능 분리, 모듈 간의 경계를 정할 때 “이런 관점이나 개념을 알고 있으면 구조를 설계하는 데 도움이 된다” 라고 생각하시는 것이 있다면 함께 추천해주시면 감사하겠습니다. 단순히 “depth는 몇 단계가 적절하다”라는 정답보다는, 실무에서 구조를 나누고 변경할 때 어떤 기준으로 판단하면 좋은지 에 대한 강사님의 경험과 생각을 들어보고 싶습니다.
해결됨
React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계
강의 예제에서 add(2,3) -> 항상 5 (순수) getTime() -> 실행 시점마다 달라짐 (순수 아님) "실행 시점 마다 달라진다 또는 전역 변수를 수정하는 함수는 같은 입력을 넣어도 실행 시점에 따라 결과가 달라지기 때문에 순수하지 않습니다. "라고 하셨고, 이와 마찬가지로 "순수 컴포넌트는 동일한 props와 state가 주어졌을 때 항상 동일한 UI를 반환하는 컴포넌트 (외부 변수를 수정하거나, props를 직접 변경하지 않음)" 라고 했는데 제 머릿속에서는 state는 언제든지 변경될 수 있고 props가 어떤 특정한 state값 ( 서버에서 받아온 상품 목록 리스트)이면 결국 해당 props도 변경 될 수 있다라고 생각이 들어서 좀 많이 자세하게 설명을 듣고 이해 하고, 코드를 작성할 때 적용하기 위해 질문을 올립니다. 추가 ctx) 현재 프론트엔드 개발자입니다. 프론트 개발을 하고 있습니다. 언제나 순수 함수 / 순수 컴포넌트 말로 만 듣고 "이런 거겠지" 라고 하며 어물쩡 넘어갔었는데 요번에 확실하게 개념과 이해 그리고 체화 하고 싶어서 질문 남깁니다.
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
제공해주신 스니펫을 적용해 nlayout 을 쳤는데 맥북 최상위루트부터 아예 싹다 파일경로가 입력되고있어요 export default function ~/Documents/.../section04/04-04/src/app/(auth)({ children }: Readonly<{ children: React.ReactNode }>) { return <>{children}</>; }
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
● /output-style 명령어는 폐기(deprecated)되었습니다. - v2.1.73에서 deprecated → v2.1.91에서 완전히 제거됨 - 지금은 /config 로 들어가서 "Output style" 메뉴에서 선택하면 됩니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요! 혹시, 프롬프트 작성시 html, css, javascript를 쓰는 이유가 혹시 있나요? 강의에 사용된 프롬프트 예시 투두리스트 개발 계획해줘 (Plan mode) -html, css, javascript
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! context 분리하기 수업을 듣다가 궁금한 점이 있어서 질문 드리려고 합니다. 8분 경에 Editor Component에서 useContext(TodoDispatchContext)를 사용하도록 하셨는데요. 여기에서 추가로 이전에 배운 memo()라는 HOC를 적용하면 Editor Component도 마찬가지로 최적화가 가능할 것이라고 생각하여 테스트 해보았습니다. 코드는 강사님과 동일하게 작성하였고, Editor.jsx 파일의 마지막 라인만 export default memo(Editor);로 바꿔줬는데요. 이렇게 하고나서 특정 Todo의 체크박스를 계속 눌러보았는데, Editor Component가 여전히 최적화 되지 않고 Highlight되는 것이 이해가 가지 않아서 질문 드립니다..
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
Cursor 창이 수업 내용과 달라요. 스크린 샷 확인해주세요. 수업 내용이 안들어와서 답답합니다 ㅠ ㅠ
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
공식 문서에서, Supabase MCP를 실제 운영 환경이 아닌 개발 환경에서만 사용하라는 내용을 읽어주셨는데 혹시 그렇게 해야 하는 이유가 있는 것일까요? 실제 운영하는 백엔드 프로젝트에 Supabase MCP를 활용하면 안되는 것일까요(?)
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 에러핸들링 강의에서 error.tsx를 (with-searchbar) group 폴더 안에 배치했을때, root layout의 footer의 에러가 나서 화면에 아예 next 오류가 나는 거 같습니다. 이전의 비슷한 질문에서 footer의 fetch 의 cache를 'force-cache'로 설정하였기때문에 오류가 잡히지 않는다라는 글을 본적이 있어서 확인해본 결과, force-cache로 설정해도 next.js 화면 오류로 인해 렌더링이 되지 않는 것을 확인했습니다. 근데 이 Rootlayout 에서 footer를 삭제하면 화면이 뜨고, error.tsx 가 그려지는 것을 확인할 수 있었습니다. 혹시 global-error를 설정하면 동작하지 않을까 하여 해봤지만, next.js 화면 오류만 보여지는 상황입니다. 요약하자면, global-error.tsx를 설정하든 안하든 rootlayout의 footer 에러로 인해 next.js 화면 오류로 덮여지는 상황입니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. useMemo와 useCallback이라는 리액트 훅을 함께 공부하다 보니 궁금한 점이 생겨서 질문하려고 합니다. useMemo()의 아규먼트로 전달한 콜백함수의 반환값이, useCallback()의 첫 번째 아규먼트로 전달하려는 콜백함수가 된다면 useMemo()가 useCallback()을 완전히 대체할 수 있는 것 아닌가요? 2-1. 위의 예측이 아니라면 useCallback()만의 독자적인 기능이 존재하는지 그리고 그것이 무엇인지 궁금합니다. 2-2. 위의 예측이 맞다면 굳이 useCallback()과 useMemo()를 나눈 이유가 무엇인지 궁금합니다. (콜백함수 내부에서 새로운 함수를 정의하고 반환하는 더러운 구조를 용납(?)하지 않기 위해서인가요..?)
