174만명의 커뮤니티!! 함께 토론해봐요.
해결됨
딸깍, 바이브코딩 - 12개의 앱을 만들며 배우는, 진짜 일반인을 위한 유용한 실무 활용 이론&실습
처음 설치 이후에 항상 묻는 방식으로 설정한 경우 이를 알아서 자동으로 설정하도록 앱 내에서 변경하는 방법이 궁금합니다.
미해결
AI활용 디지털 콘텐츠 제작
내용도 없고 자료도 없어요
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
next-themes 문서를 읽어보고 다른 분들 사용방법을 읽어봤는데, 따로 NextThemeProvier를 생성하지 않고 next-themes의 ThemeProvider를 layout.tsx에 바로 적용하는데 강의에서는 따로 provider를 생성해서 적용하고 있습니다. 혹시 유지보수를 좀 더 원활하게 하기 위함일까요?
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
post를 렌더링 하려고 코드 작성을 다 했는데 에러가 뜨길래 잘못된 코드는 없나 다 확인을 해도 별 다른 이상한점이 없어서 직접 localhost:4000/posts로 접근해보니 아예 데이터가 안넘어오고 있어요 확인해주시면 감사하겠습니다.
해결됨
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 접근 제어와 실제 서버의 인증/인가를 어느 계층에서 담당할 것인지 를 먼저 결정하는 것이 맞는지도 궁금합니다. 추가적으로 실무 관점에서의 예시도 궁금합니다. 가능하시다면 위 질문들에 대해 개념적인 기준뿐만 아니라, 강사님께서 실제 프로젝트를 설계하신다면 각각 어떤 방식을 선택하실지도 궁금합니다. 뿐만 아니라 실무에서 일반적으로 많이 사용하는 패턴이 있는지, 또는 정해진 표준이 없다면 강사님의 실무 경험에서는 어떤 구조를 주로 선택하셨고, 그렇게 선택하신 이유가 무엇인지도 함께 설명해주시면 정말 도움이 될 것 같습니다. 가능하다면 단순한 개념 설명뿐만 아니라 간단한 프로젝트 구조나 코드 예시도 함께 보고 싶습니다.
해결됨
React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계
강의 예제에서 add(2,3) -> 항상 5 (순수) getTime() -> 실행 시점마다 달라짐 (순수 아님) "실행 시점 마다 달라진다 또는 전역 변수를 수정하는 함수는 같은 입력을 넣어도 실행 시점에 따라 결과가 달라지기 때문에 순수하지 않습니다. "라고 하셨고, 이와 마찬가지로 "순수 컴포넌트는 동일한 props와 state가 주어졌을 때 항상 동일한 UI를 반환하는 컴포넌트 (외부 변수를 수정하거나, props를 직접 변경하지 않음)" 라고 했는데 제 머릿속에서는 state는 언제든지 변경될 수 있고 props가 어떤 특정한 state값 ( 서버에서 받아온 상품 목록 리스트)이면 결국 해당 props도 변경 될 수 있다라고 생각이 들어서 좀 많이 자세하게 설명을 듣고 이해 하고, 코드를 작성할 때 적용하기 위해 질문을 올립니다. 추가 ctx) 현재 프론트엔드 개발자입니다. 프론트 개발을 하고 있습니다. 언제나 순수 함수 / 순수 컴포넌트 말로 만 듣고 "이런 거겠지" 라고 하며 어물쩡 넘어갔었는데 요번에 확실하게 개념과 이해 그리고 체화 하고 싶어서 질문 남깁니다.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요! 열심히 잘 듣고 있는데 궁굼한게 있어서요! css > "box-sizing: border-box;"를 reset.css에 주지 않고 각각 필요할 때만 쓰는 이유가 있나요? 예를 들면 , html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;} 여기에 주지 않고 .work ul{display: flex; padding: 3% 30%; box-sizing: border-box;} 이렇게 따로 주는데 혹시 이유가 있나해서요!
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
제공해주신 스니펫을 적용해 nlayout 을 쳤는데 맥북 최상위루트부터 아예 싹다 파일경로가 입력되고있어요 export default function ~/Documents/.../section04/04-04/src/app/(auth)({ children }: Readonly<{ children: React.ReactNode }>) { return <>{children}</>; }
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! context 분리하기 수업을 듣다가 궁금한 점이 있어서 질문 드리려고 합니다. 8분 경에 Editor Component에서 useContext(TodoDispatchContext)를 사용하도록 하셨는데요. 여기에서 추가로 이전에 배운 memo()라는 HOC를 적용하면 Editor Component도 마찬가지로 최적화가 가능할 것이라고 생각하여 테스트 해보았습니다. 코드는 강사님과 동일하게 작성하였고, Editor.jsx 파일의 마지막 라인만 export default memo(Editor);로 바꿔줬는데요. 이렇게 하고나서 특정 Todo의 체크박스를 계속 눌러보았는데, Editor Component가 여전히 최적화 되지 않고 Highlight되는 것이 이해가 가지 않아서 질문 드립니다..
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. useMemo와 useCallback이라는 리액트 훅을 함께 공부하다 보니 궁금한 점이 생겨서 질문하려고 합니다. useMemo()의 아규먼트로 전달한 콜백함수의 반환값이, useCallback()의 첫 번째 아규먼트로 전달하려는 콜백함수가 된다면 useMemo()가 useCallback()을 완전히 대체할 수 있는 것 아닌가요? 2-1. 위의 예측이 아니라면 useCallback()만의 독자적인 기능이 존재하는지 그리고 그것이 무엇인지 궁금합니다. 2-2. 위의 예측이 맞다면 굳이 useCallback()과 useMemo()를 나눈 이유가 무엇인지 궁금합니다. (콜백함수 내부에서 새로운 함수를 정의하고 반환하는 더러운 구조를 용납(?)하지 않기 위해서인가요..?)
미해결
프론트엔드 시스템 설계: 분산시스템으로서의 프론트엔드
깃허브 기반으로 실습예제를 진행한다면서요. 어디에 공개되어있나요?
해결됨
"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part 2 - 스트림 아키텍처와 하드웨어 통제기
안녕하세요 강의 잘듣고있습니다! 풀스택 개발자를 목표로 하고있고, 원리를 배우는게 너무 즐겁고 큰 도움이 되고있습니다. 그런데 당장 nestjs 및 리액트 등으로 웹서비스 개발업무도 할예정인데 nestjs 는 어떻게 공부를하면좋을까요? T 자형 인재가 되고싶습니다! 그리고 강의듣는 순서도 궁금합니다!! 현재 NODE 듣고있고, 유닉스도 결제했습니다..! NESTJS 도 공부빨리해야하는 상황이네요..
미해결
프론트엔드 시스템 설계: 분산시스템으로서의 프론트엔드
스타터 저장소가 있는듯 한데 누락된 것 같아요
미해결
얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX
What is Rxjs
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
4.2) 강의에서 package.json파일 기반으로 라이브러리를 설치해야 한다고 하셨는데 이미 node_modules파일과 package-lock.json파일이 설치되어 있다면 터미널에서 npm install을 할 필요는 없는 건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Oxlint와 ESLint차이점이 궁금합니다. 둘 중 어느 것을 설치하는 것이 맞나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
https://one-go-js.hyobb.com/ 위 링크 접속했는데 404 에러뜨고 있어 확인이 불가합니다 ㅠ
미해결
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
아래와 같이 코드를 작성했습니다. 렌더링은 잘되며, 에러코드도 안 뜨는데 클릭 이벤트에 응답이 없습니다. import { useLoader, useThree } from '@react-three/fiber'; // import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/Addons.js'; export default function ShowRoom() { const gltf = useLoader(GLTFLoader, './models/custom.glb'); const { raycaster } = useThree(); // console.log(gltf); console.log(raycaster); const handleClick = () => { console.log('click'); const intersects = raycaster.intersectObjects(gltf.scene.children, true); console.log(intersects); }; return ( <primitive object={gltf.scene} onClick={handleClick} /> // <mesh // rotation={[THREE.MathUtils.degToRad(45), THREE.MathUtils.degToRad(45), 0]} // > // <boxGeometry /> // <meshStandardMaterial /> // </mesh> ); }
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 길고긴 강의를 끝내며 배포에 성공했습니다! 🎉 뿌듯하네요~ 질 좋은 강의 진행해주셔서 감사합니다. 배포 이후 페이지 확인하면서 한가지 문의드릴 부분이 있습니다. 사이트에 접속해서 일기 하나를 열고(/diary/1 같은 주소) 새로고침(F5)을 하면 404페이지가 뜨는데 이 부분은 어떻게 수정해야하는지 문의드립니다.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
선생님 자료실이 어디있는지 못찾겠어요
