172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 ㅎㅎ 강의 너무 잘 듣고있습니다. use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ 설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 , 그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 내에서 mockData 를 id: 3 까지 만들고, useRef 초기값을 3 으로 주었는데, 이렇게되면 onCreat 가 처음으로 호출됐을 때 최초 생성된 일기가 id를 3으로 가지게되고(후위증감연산자로 그 다음 생성된 일기부터 id가 4로 생성됨), 이미 만들어져있는 3번일기랑 id값이 같아지게 됩니다. 그래서 최조 생성된 일기를 onUpdate 해주었을때 수정내용으로 바뀐 최초 생성된 일기, 수정내용으로 바뀐 3번일기 이렇게 똑같은 내용 으로 2개가 생기는 상황이 발생합니다. 따라서 useRef 초기값을 4 로 주는게 맞지않나 문의드립니다.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다. 다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ 이렇게해서 생성을 진행했구요. 잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요 npm error code EACCES 그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?
해결됨
React 기반 Gatsby로 기술 블로그 개발하기 v2
안녕하세요 저번 개츠비 강의 너무 맘에 들어서 후속 강의도 거의 나오자마자 지른 수강생입니다! 열심히 따라하면서 강의 진행하던 와중에 "게시글 렌더링 커스터마이징하기(2)" 강의 안 코드 블럭 메타데이터 파싱 기능 개발하기 파트에서 CODE_METADATA_REGEX 부분 정규표현식에 대해서 질문드립니다 본문에 const CODE_METADATA_REGEX = /^language::(\\w+)/ 이런 식으로 정규표현식이 작성되어서 따라 진행했는데 자꾸 정규표현식을 인식 못하는거 같아 /^language::(\w+)/ 위와 같이 문법을 고쳐 사용했는데 오타인가 여쭤봅니다
미해결
코드로 배우는 React 19 with 스프링부트 API서버
리액트랑 부트 연결하는 방법 axios까지 코드입력했는데 cmd라던지 연동하는 방법은 안알려주시나요?
미해결
React & Express 를 이용한 웹 어플리케이션 개발하기
상위로부터 값을 가져올때 name="velopert"라고하다가 number={5} 이렇게 중괄호는 뭔가요? 갑자기 설명도 없이 ㅠㅠ
미해결
React & Express 를 이용한 웹 어플리케이션 개발하기
codepen.io 에서 Add External Scripts/Pens 에서 react로 검색해서 https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js 이거랑 https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js 이렇게 두가지가 나오고 save and close도 아니고 close만 있구요 close만 해도 상태는 유 지되는건지 모르겠네요 ..그래서인지 몰라도 코드넣고 실행해보면 에러납니다. class CodeLab extends React.Component { render() { return ( <div>CodeLab</div> ); } } class App extends React.Component { render() { return ( <CodeLab /> ); } } ReactDOM.render(<App />, document.getElementById('root')) Uncaught ReferenceError: React is not defined 에러나고 그래서 강좌에 없는 import React from 'react' 넣고 나면 Uncaught ReferenceError: require is not defined 이 에러가 납니다. 도무지 진행이 안되네요 ㅠ Uncaught ReferenceError: React is not defined Uncaught ReferenceError: React is not defined
해결됨
Next.js 시작하기
const response = await axios.get(`http://localhost:4000/products/${id}`); 로 호출할때 클라이언트에서는 별다른 에러 메시지가 나오지 않으나 npm run dev로 실행한 서버 터미널에서는 GET /products/backendManager.js.map 500 in 9ms ⨯ AxiosError: Request failed with status code 404 GET /products/react_devtools_backend_compact.js.map 500 in 16ms 이라는 에러가 나옵니다. 이 파일들을 호출하는 이유가 무엇인가요..?
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 몇가지 의문이 있어 질문 드립니다. 올바른 테스트 작성 규칙에서 내부 구현에 대한 테스트, 단순한 UI렌더링 관련 테스트는 하지 않는것이 좋다고 하셨는데, className prop이 css class에 적용되는지, placeholder설정, focus 시 border 스타일이 변경되는지 테스트하는건 단순히 UI와 관련된 테스트가 아닌가요? getByPlaceholder API는 만약 구현코드에서 placeholder 내용이 달라지면 테스트 코드도 모두 수정해야 하는데 종속성이 있다고 볼 수 있지 않나요? 아직 테스트가 익숙하지 않아 그런지 이런 부분이 많이 헷갈립니다ㅜㅜ
미해결
React & Express 를 이용한 웹 어플리케이션 개발하기
혹시 초급버전의 유료버전이 있던에 이 강좌랑 무슨 차이가 있나요? 배우는 범위가 다른건지요??
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다. Header쪽에 <DrawerClose> <Logo/> </DrawerClose> 이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요. 혹시 useState를 사용하신 이유가 있을까요?
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
문제) 의존성 설치 후 npm run dev를 기동하면 $ npm run dev > test-example-shopping-mall@0.0.0 dev > concurrently --kill-others 'npm run dev:server' 'npm run dev:ui' [0] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ� [0] ��ġ ������ �ƴմϴ�. [1] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ� [1] ��ġ ������ �ƴմϴ�. [2] ���� �̸�, ���� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�. [3] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ� [3] ��ġ ������ �ƴմϴ�. [4] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ� [4] ��ġ ������ �ƴմϴ�. [4] run exited with code 1 --> Sending SIGTERM to other processes.. [3] 'npm exited with code 1 --> Sending SIGTERM to other processes.. --> Sending SIGTERM to other processes.. [1] run exited with code 1 --> Sending SIGTERM to other processes.. [0] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [5] ���� �̸�, ���� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�. [5] dev:ui' exited with code 1 이런 콘솔이 찍히며 테스트 서버가 실행되지 않습니다. 인코딩이 깨져서 뭐가 문젠지 추적을 못하겠어요ㅠㅠ node 버전은 강의와 동일하게 19.9.0으로 맞춰두었습니다. +) 인코딩이 깨지는 문제는 vscode터미널 말고 다른 커맨드창을 이용하니 해결 되었습니다. > test-example-shopping-mall@0.0.0 dev > concurrently --kill-others 'npm run dev:server' 'npm run dev:ui' [0] ''npm' is not recognized as an internal or external command, [0] operable program or batch file. [1] 'run' is not recognized as an internal or external command, [1] operable program or batch file. [2] The filename, directory name, or volume label syntax is incorrect. [3] ''npm' is not recognized as an internal or external command, [3] operable program or batch file. [4] 'run' is not recognized as an internal or external command, [4] operable program or batch file. [4] run exited with code 1 --> Sending SIGTERM to other processes.. [3] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [2] dev:server' exited with code 1 --> Sending SIGTERM to other processes.. [1] run exited with code 1 --> Sending SIGTERM to other processes.. [0] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [5] The filename, directory name, or volume label syntax is incorrect. [5] dev:ui' exited with code 1 그런데 여전히 실행이 안됩니다ㅜㅜ npm을 못찾는거 같은데 환경변수에 따로 등록을 해야하나요? npm -v하면 버전은 잘 나오는데 원인을 모르겠습니다... 현재 환경변수와 버전정보 추가합니다. +) package.json스크립트에서 작은 따옴표를 큰 따옴표로 수정해서 최종적으로 해결되었습니다... 허무하네용ㅋㅋㅋ ㅠ
해결됨
Next.js 시작하기
Aborting installation. Unexpected error. Please report it as a bug: Error: EACCES: permission denied, open '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022' at openSync (node:fs:581:18) at attempt (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:43165) at Object.writeFileSync (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:38664) at Conf._write (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:74912) at set store [as store] (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:73358) at Conf.set (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:71962) at run (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:74:51291) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -13, code: 'EACCES', syscall: 'open', path: '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022' } 설치할 때 터미널에서 이런 메세지가 나오네요 ㅠㅠ 권한 문제인거 같아서 구글링 계속 해보면서 해봤는데 안되서 글 남깁니다 ㅠㅠ
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 2
안녕하세요 재남님 강의 너무 잘듣고 있습니다 이번 강의 듣고 생각이 드는게 저는 지금까지 모달을 만들때 각각의 모달을 완성본으로 만들고 모달을 부르는 트리거버튼이나 그,런것에 상태를 주고 상태의 변경에따라 그 아래에 그리는 방식으로 모달을 구현했습니다 이번강의도 보면 비슷하긴한데 모달을 만드는곳에서 모든것을 만드는것이 아니라 모달이라는(컴파운드 패턴..? 사실 이건 처음봐서 혼란스럽네요...ㅎㅎ)컴포넌트에서 기본 적인 css와 칠드런등을 만들어놓고 모달에서는 이것들을 가져와서 완성본 모달을 만드는것으로 이해를 했습니다 제가 궁금한것은 실무에서는 보통 이렇게 만드는지 궁금합니다 이렇게 만드는것의 장점이 있을까요?(찾아보니 재사용성이 좋다고 하는데 이부분이 크게 와닿지가 않네요..)
해결됨
Next + React Query로 SNS 서비스 만들기
https://github.com/ZeroCho/next-app-router-z/blob/master/lecture/src/app/(afterLogin)/layout.tsx 제로초님 강의를 다 듣고 코드를 살펴보던 중 의문이 있어 질문 드립니다. 해당 코드를 보면 lecture/src/app/(afterLogin)/layout.tsx 파일에서 거의 최고 부모컴포넌트인 <RQProvider>가 "use client"를 사용하여 클라이언트 컴포넌트가 되는것으로 알고있는데 이렇게 한다면 그 하위 컴포넌트들은 전부 클라이언트 컴포넌트가되는게 아닌가요? 어떻게 서버컴포넌트를 사용할 수 있는건지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 완강하고 채팅을 구현해보려고 합니다. 그런데 강의와 깃헙을 보면 soket으로 보내는 내용, 쿼리에 데이터 추가하는 내용은 있는데 소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요, 클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
npx create-react-app mall 명령어 입력시 해당 오류가 발생합니다. log의 내용은 다음과 같습니다. 0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin\npm-cli.js 1 info using npm@10.7.0 2 info using node@v20.15.0 3 silly config:load:file:C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\npmrc 4 silly config:load:file:C:\Users\USER\reactAPI_workSpace\.npmrc 5 silly config:load:file:C:\Users\USER\.npmrc 6 silly config:load:file:C:\Users\USER\AppData\Roaming\npm\etc\npmrc 7 verbose title npm exec create-react-app mall 8 verbose argv "exec" "--" "create-react-app" "mall" 9 verbose logfile logs-max:10 dir:C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z- 10 verbose logfile C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-debug-0.log 11 verbose stack TypeError: LRUCache is not a constructor 11 verbose stack at Object.<anonymous> (C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\node_modules\cacache\lib\memoization.js:5:18) 11 verbose stack at Module._compile (node:internal/modules/cjs/loader:1358:14) 11 verbose stack at Module._extensions..js (node:internal/modules/cjs/loader:1416:10) 11 verbose stack at Module.load (node:internal/modules/cjs/loader:1208:32) 11 verbose stack at Module._load (node:internal/modules/cjs/loader:1024:12) 11 verbose stack at Module.require (node:internal/modules/cjs/loader:1233:19) 11 verbose stack at require (node:internal/modules/helpers:179:18) 11 verbose stack at Object.<anonymous> (C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\node_modules\cacache\lib\get.js:8:14) 11 verbose stack at Module._compile (node:internal/modules/cjs/loader:1358:14) 11 verbose stack at Module._extensions..js (node:internal/modules/cjs/loader:1416:10) 12 verbose cwd C:\Users\USER\reactAPI_workSpace 13 verbose Windows_NT 10.0.19045 14 verbose node v20.15.0 15 verbose npm v10.7.0 16 error LRUCache is not a constructor 17 verbose exit 1 18 verbose code 1 19 error A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-debug-0.log node 와 npm 버전은 이렇게 깔려있습니다. 재설치 해도 여전히 오류가 발생합니다 ㅜㅠ 어떻게 해결해야 할까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 선생님. todolist를 따라하며 완성하였는데요. todolist의 list들이 많아지면 페이징 처리를 통해 나누어 봐야 할 거 같은데 이 기능은 어떻게 구현하면 좋을까요?? (RESTFUL API로 개발하면 프론트, 백엔드 양쪽에서 페이징 처리를 해야 하는지,, )
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
선생님 안녕하세요 선생님 안녕하세요 강의에 나온 내용은 아니지만 실습 중에 문법 경고가 안 떠있는데 제 의도대로 작동 되지 않은 코드가 있어서 이러면 안된다고 부연 설명해주셨지만 제가 강의 안보고 혼자 실습하다가 그 안 되는걸 해버렸는데 이유가 너무 궁금해서 질문 드립니당 심플 카운터 실습 중에 App 컴포넌트에서 Count 스태이트를 함수로 만들어서 Controller 컴포넌트에 넘기고 컨트롤러 컴포넌트에서 이렇게 함수를 호출 했더니 버튼 누르지도 않았는데 혼자 무한루프 도는걸 봤는데 왜 이런건지 궁금해요
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 2
안녕하세요 재남님 강의 너무 잘듣고 있습니다 제가 지금 캐러셀 공부하면서 궁금한것이 캐러셀 각 이미지에 ref를 다 할당한다 슬라이드 이벤트 화살표 클릭시 이동할 인덱스를 계산하고 인덱스를 기준으로 current와 next의 ref를 가져온다 그럼 가져온 ref에 각각 애니메이션 클래스네임을 할당한다 애니메이션에 따라 translateX만큼 이동 , 마지막으로 이동한 인덱스 상태변화 이렇게 동작원리를 이해를 하였습니다 그래서 일단 animationend는 없어도 될거 같아서 일단 없애고 코드를 작성하니 화면 전환은 되는데 자연스러운 슬라이드가 아니라 그냥 뚝뚝끊기는 이미지 전환이 되고있습니다.. 제 생각엔 handleAnimationEnd함수는 애니메이션 동작완료후 동작하는것이라고 알고있는데 애니메이션이 동작을 안하는 이유를 모르겠습니다 const moveTo = useCallback( (nextIndex: number, direction?: Direction) => { const $current = itemsRef.current![currentIndex] as HTMLLIElement; const $next = itemsRef.current![nextIndex] as HTMLLIElement; if (nextIndex === currentIndex) return; const dir = direction || (nextIndex > currentIndex ? "right" : "left"); // const handleAnimationEnd = () => { // $current.className = cx("item"); // $next.className = cx("item", "current"); // $current.removeEventListener("animationend", handleAnimationEnd); // setCurrentIndex(nextIndex); // }; // $current.addEventListener("animationend", handleAnimationEnd); $current.classList.add(cx(`${dir}_current`)); $next.classList.add(cx(`${dir}_next`)); setCurrentIndex(nextIndex); }, [currentIndex] );
