안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다.Header쪽에 <DrawerClose><Logo/></DrawerClose>이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요.혹시 useState를 사용하신 이유가 있을까요?

문제)의존성 설치 후 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스크립트에서 작은 따옴표를 큰 따옴표로 수정해서 최종적으로 해결되었습니다... 허무하네용ㅋㅋㅋ ㅠ

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'}설치할 때 터미널에서 이런 메세지가 나오네요 ㅠㅠ 권한 문제인거 같아서 구글링 계속 해보면서 해봤는데 안되서 글 남깁니다 ㅠㅠ 

안녕하세요 재남님 강의 너무 잘듣고 있습니다이번 강의 듣고 생각이 드는게 저는 지금까지 모달을 만들때 각각의 모달을 완성본으로 만들고 모달을 부르는 트리거버튼이나 그,런것에 상태를 주고 상태의 변경에따라 그 아래에 그리는 방식으로 모달을 구현했습니다이번강의도 보면 비슷하긴한데 모달을 만드는곳에서 모든것을 만드는것이 아니라 모달이라는(컴파운드 패턴..? 사실 이건 처음봐서 혼란스럽네요...ㅎㅎ)컴포넌트에서 기본 적인 css와 칠드런등을 만들어놓고 모달에서는 이것들을 가져와서 완성본 모달을 만드는것으로 이해를 했습니다 제가 궁금한것은실무에서는 보통 이렇게 만드는지 궁금합니다이렇게 만드는것의 장점이 있을까요?(찾아보니 재사용성이 좋다고 하는데 이부분이 크게 와닿지가 않네요..)

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"를 사용하여 클라이언트 컴포넌트가 되는것으로 알고있는데이렇게 한다면 그 하위 컴포넌트들은 전부 클라이언트 컴포넌트가되는게 아닌가요?어떻게 서버컴포넌트를 사용할 수 있는건지 궁금합니다.

안녕하세요 선생님완강하고 채팅을 구현해보려고 합니다.그런데 강의와 깃헙을 보면soket으로 보내는 내용,쿼리에 데이터 추가하는 내용은 있는데소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요,클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?

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.js1 info using npm@10.7.02 info using node@v20.15.03 silly config:load:file:C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\npmrc4 silly config:load:file:C:\Users\USER\reactAPI_workSpace\.npmrc5 silly config:load:file:C:\Users\USER\.npmrc6 silly config:load:file:C:\Users\USER\AppData\Roaming\npm\etc\npmrc7 verbose title npm exec create-react-app mall8 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.log11 verbose stack TypeError: LRUCache is not a constructor11 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_workSpace13 verbose Windows_NT 10.0.1904514 verbose node v20.15.015 verbose npm v10.7.016 error LRUCache is not a constructor17 verbose exit 118 verbose code 119 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.lognode 와 npm 버전은 이렇게 깔려있습니다. 재설치 해도 여전히 오류가 발생합니다 ㅜㅠ 어떻게 해결해야 할까요?

안녕하세요. 선생님. todolist를 따라하며 완성하였는데요.todolist의 list들이 많아지면 페이징 처리를 통해 나누어 봐야 할 거 같은데 이 기능은 어떻게 구현하면 좋을까요??(RESTFUL API로 개발하면 프론트, 백엔드 양쪽에서 페이징 처리를 해야 하는지,, )

선생님 안녕하세요선생님 안녕하세요 강의에 나온 내용은 아니지만실습 중에 문법 경고가 안 떠있는데제 의도대로 작동 되지 않은 코드가 있어서이러면 안된다고 부연 설명해주셨지만제가 강의 안보고 혼자 실습하다가 그 안 되는걸 해버렸는데이유가 너무 궁금해서 질문 드립니당심플 카운터 실습 중에 App 컴포넌트에서Count 스태이트를 함수로 만들어서 Controller 컴포넌트에 넘기고컨트롤러 컴포넌트에서 이렇게함수를 호출 했더니버튼 누르지도 않았는데혼자 무한루프 도는걸 봤는데왜 이런건지 궁금해요

안녕하세요 재남님 강의 너무 잘듣고 있습니다제가 지금 캐러셀 공부하면서 궁금한것이캐러셀 각 이미지에 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] );

로그인 후에도 로딩 애니메이션만 계속 돌아요.새로 고침을 눌러야만 todo list 가 보입니다.뭐가 잘못 된걸까요

처음부터 쭉 강의를 따라하고 있습니다.9.3 장에서갑자기 serverComponent 라는게 생겼어요.무슨 용도일까요?

안녕하세요, 수업 중 이해가 되지 않는 부분이 있어 질문 드립니다.훈훈한 JS>섹션7>함수,변수의 호이스팅 강의에서 17:43에서 newLi에 complete 클래스를 추가해주는 기능을 설명에 이해가 되지 않습니다.위에 content는 부분에서는 전체 todoInput.value를 가져와서 덮어씌우는 것으로 이해했는데, 아래 클래스를 추가하는 부분에 정의된 newLi는 엔터로 인해 함수 실행될 때마다 새로운 createElment("li") 값을 가진 변수인데, 여기에 어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는걸까요?

안녕하세요 강의 잘 수강하고 있습니다. django_components를 사용할 때template 에서 {% component_js_dependencies %}로 js 로드시 해당 script를 async, defer로 로드할 수 있는 방법이 있을까요?

안녕하세요! 리액트랑 타입스크립트 강의 완강하고 강사님께 더 배우고 싶어서 찾아보다가 타사에 리액트 + next.js 강의가 있더라구요. 그런데 커리큘럼을 보니 리액트 부분은 제가 수강한 리액트 강의랑 거의 흡사한 것 같고 거기에 추가로 next.js 부분만 공부하고 싶은데 강사님이 7월 ~8월 중에 next.js 강의를 낸다고 하신 게 있어서요 ㅠ혹시 next.js 강의가 늦게 나올까요 ㅠ? 미리 강사님의 리액트 + next.js 강의를 들어도 되나요? (현재 리액트 강의나 추후 나올 next.js 강의와 겹치는 부분은 없는지...등)

'Generating TypeScript Types' 강의에서 supabase.ts 생성할 때 나오는 코드 색상이 영상에서 나오는 색상하고 달라요.저는 모두 흰색으로 나와서 가독성이 떨어지더라구요.익스텐션이라던지 테마라던지 등등 구글링해서 나오는건 모두 건드려봤는데 바뀌지 않았습니다.이건 어떻게 하면 되나요?

git username을 먼저 정하고 gitHub에 가서 계정을 만들었는데 유저네임 작명 규정때문에 같은 유저네임을 사용하지 못했습니다. 이게 혹시 문제가 될까요?이미 커밋에 작성자 정보를 입력하고 저장한 상태인데 어떻게 하면 좋을까요?

저는 책이 없이 강의만을 통해 학습중입니다. 강의 중간중간 코드를 복사해서 오시더라구요 ~ js같은 경우는 따라치는것에 대해 어려운 부분이 있는데 혹시 어쩔 수 없는 부분인 걸까요 ?

안녕하세요 제로초님강의 잘 듣고 있습니다. 사실 이 문제가 몇개월동안 계속 해결이 안되어서 강의를 수강한거나 마찬가지인데요. 아무리 스택오버플로우나, next.js issue에 직접 글을 올려도 해결이 안되어서 이렇게 질문 글 올립니다.일단 Next.js 14 + Express 조합으로 배포를 한 상황이고 jwt 토큰을 쿠키에 담아서 로그인 기능을 구현했습니다.또한 next.js Middleware 내부에서 액세스토큰을 재발급 받아주고 있습니다.순서는 이렇습니다. 로그인 시에 사용자가 아이디 + 비밀번호를 입력해서 서버에게 요청한다.서버에서 해당 아이디 값을 받아서 조회 후, 새로운 리프레시 토큰 + 액세스 토큰을 클라이언트로 보내준다.백엔드 내부 코드는 다음과 같습니다.  const newAccessToken = createNewAccessToken(existingUser); const newRefreshToken = createNewRefreshToken(existingUser); const hashedToken = await hashValue(newRefreshToken); await deleteRefreshTokenData(existingUser.id); await createRefreshTokenData(hashedToken, existingUser.id); return res.json({ success: true, accessTokenValue: newAccessToken, refreshTokenValue: newRefreshToken, }); Next.js 측에서 액세스 토큰과 리프레시 토큰을 받아서 API ROUTE로 POST 요청을 날려서 set cookie를 해준다.const sendTokenCookieToHandler = async (accessTokenValue: string, refreshTokenValue: string) => { await fetch('/api/token', { method: 'POST', body: JSON.stringify({ accessTokenValue, refreshTokenValue }), headers: new Headers({ 'Content-Type': 'application/json', }), cache: 'no-store', }); }; export default sendTokenCookieToHandler; ```그 후 액세스 토큰이 만료 되면, Next.js 미들웨어 단에서 리프레시 토큰을 다시 백엔드로 보내서 새로운 액세스 토큰을 받아온다.Next.js 미들웨어 코드는 이렇습니다. export async function middleware(request: NextRequest) { const { accessToken, refreshToken } = getTokenValues(request); if (!accessToken && refreshToken) { const res = await getNewAccessToken(refreshToken); if (res && res.newAccessToken) { const response = NextResponse.next(); const { newAccessToken } = res; response.cookies.set('accessToken', newAccessToken, { expires: new Date(Date.now() + 24 * 60 * 60 * 1000), }); return response; } } return NextResponse.next(); } ``` 받아온 액세스 토큰 값을 아예 middleware 단에서 set cookie 를 통해 쿠키로 설정해준다.근데 여기서 문제는 초기에는 정상적으로 잘 작동합니다.액세스 토큰이 만료 된 후에도 정상적으로 새로운 액세스토큰을 받아오기도 하고요근데 문제는 일정 시간 후에(제가 생각했을때 리프레시토큰이 만료 된 후, 다시 로그인 요청을 보냈을때 같습니다.) 아예 새로운 리프레시 토큰과 액세스 토큰을 제대로 받아오지 못하는거 같습니다.근데 F12 를 켜서 확인해보면 백엔드로 api 콜은 정상적으로 가고 있습니다..  그래서 현재 다시 재배포를 할때마다 초기 상태로 돌아가서 로그인이 정상적으로 작동 하게 되는데요.어디가 문제인걸까요 ? 여러 오픈톡이나 커뮤니티에 물어봤지만, 어떤분은 Next.js 내부에서 같은 라우트 그룹이면 미들웨어를 거치지 않아서 발생하는 문제라고도 하시는데 초기 배포 당시에, 리프레시 토큰을 처음에 잘 받았을때 일부러 액세스 토큰을 삭제하고 다시 새로고침하면 액세스 토큰을 제대로 잘 받아오고 있습니다.. 도저히 아무리 이리저리 수정해봐도 몇개월 동안 고치지 못해서 이렇게 글 남깁니다.  읽어주셔서 감사합니다.

해결되었습니다