섹션4 2번째 강의 내용입니다. 회원가입 진행시에 home으로 redirect 되지 않아 문제를 파악중에 네트워크탭에서 대기중인 상태가 지속되는 것을 확인했습니다. db에는 user data가 정상적으로 들어온 것을 확인했습니다. 어디 잘못된 부분이 있나 싶어 강사님 코드를 그대로 복사해서 다시 실행 해 보았지만 안되고 있는데 혹시 짐작 가시는 부분 잇으실까요. 회원가입 버튼을 누른후에 x 버튼도 되지 않고 있습니다.
안녕하세요 제로초님 소중한 강의 감사히 보고있습니다. 다름이 아니라 강의를 잘 이해하다가 Server action 부터 잘 와닿지가 않아서 질문드립니다. SignupModal.tsx 를 server component로 변경하는 과정을 보고있는데요. 리액트에서는 input 태그의 입력값을 useState와 onChange로 관리하지 하지 않으면, "A component is changing an uncontrolled input to be controlled" 와 같은 에러를 띄웠기 때문에 모든 input 값은 useState를 통해 관리하는게 바람직하다고 생각해왔습니다. 리액트 기반으로 동작하는 next도 당연히 그럴 줄 알았습니다. 그런데 센세이셔널하게 server action에서 그게 통째로 사라져 버리니 매우 혼란스럽습니다. 단지 서버 컴포넌트로 바뀌었기 때문에 없어져도 상관없는건가요? input태그 입력은 데이터가 실시간으로 입력되는 과정이니까 클라이언트 컴포넌트에서 이루어지는게 맞다고 생각을 해와서그런지 쉽게 받아들여지지 않습니다. 또한 말씀하신 방법을 사용했을 때, 만약 입력값 유효성 검사에 있어서 단순히 입력 유무를 확인하는 required 속성 말고도, 입력값을 실시간으로 체크해 유효성 검사 결과를 로직(ex) '사용할 수 있는/없는 비밀번호입니다'를 실시간으로 보여주는 helperText )같은 경우는 구현이 불가능한게 되는 것인지 궁금합니다. 모든 컴포넌트를 다 sever action을 활용하는 방식으로 바꾼다면, useState는 사용될 일이 거의 없어지는 건가요..?
강의 듣기전부터 프리티어는 사용하고 있었는데 yarn add --dev eslint-config-prettier 이걸 입력한이후 저장시 프리티어 간격조정이 자동으로 안됩니다 format on save 다 체크 되있는 상태이고 다른폴더에선 프리티어가 되지만 yarn add --dev eslint-config-prettier 이걸 입력한 폴더만 간격 조정이 안먹는 데 이유가 뭘까요
브라우저 콘솔에 Image with src "/_next/static/media/zlogo.f72788b6.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority 와 같은 warning이 뜨길래 공식문서와 블로그 글을 참고해 봤는데 이미지 로딩의 우선권을 주는 기능인 것 같던데요 그냥 유저가 이미지가 들어가 있는 페이지에 접속했을때, 빠른 로딩 우선권을 주는 거라고 생각하면 되는 걸까요?
안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..! server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요? 강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost , 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.
제로초님은 항상 _component 폴더를 만드시는데 이런 폴더를 만들지 않고 그냥 컴포넌트를 만드는건 어떻게 생각하시나요?? 어차피 폴더내에서는 page라는 파일만 페이지로 라우팅이 되기 때문에 별 상관없을 것 같습니다. 단순히 취향차이로 보면 될까요?? ex) as is src/app/search/_component/Tab.tsx to be src/app/search/Tab.tsx
안녕하세요! mac에서 백엔드 서버 세팅 중 에러가 발생해 해결했던 방법을 남깁니다. 강의 수강 중 섹션 4 [백엔드 서버 세팅하기] 강의에 맞춰 아래와 같이 진행하였습니다. postgresql 설치 pgAdimin 세팅 github nest-prisma repository 클론 nest-prisma 디렉토리에서 npm i && npm run migrate:dev npm run start:dev 실행 시 아래 에러 발생 Error: connect ECONNREFUSED 127.0.0.1:6379 구글링을 해보니 redis 설치 및 redis-server 명령어를 실행하라고 해 따라했더니 에러가 사라졌습니다. 제가 중간에 세팅 과정을 잘못 했거나 위 해결 방법이 틀린건지도 모르겠지만 혹시 도움이 될까 해서 남깁니다.
[제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 페러렐 라우트용 @modal 페이지를 메인 page.tsx ( src/app/page.tsx ) 에서 사용하기위해 (beforeLogin) 경로로 이동시켰는데, Next.js 가 어떻게 메인페이지를 인식하고 표시하는지가 궁금합니다. Next.js 프로젝트 폴더구조에서 가장 app 폴더와 근접해있는 page.tsx 파일이 메인으로 인식되는건가요.. ㅠㅠ? 현재 app 폴더에 layout.tsx(RootLayout) 밖에 없는데 그 파일에서 children 으로 받아지는 page.tsx 가 어떻게 결정되는지가 궁금합니다.
https://github.com/ZeroCho/next-app-router-z/blob/master/ch3-1/src/app/(afterLogin)/compose/tweet/page.tsx 3-1 보면서 학습 중입니다. /compose/tweet 새로고침 시에도 모달이 보여야하는데 안 되길래.. /compose/tweet/page.tsx에 <TweetModal /> 이 빠져있어서 안 됐어요 혹시나 저같은 초보자들은 헤매실까봐.. 글 남겨둡니다~
안녕하세요, 제로초님 이전 노드버드 강의부터 z.com 까지 강의 유익하게 잘 보고 있습니다. 섹션3 [react-query를 쓰는 이유와 fresh, stale, inactive] 강의 수강 중 궁금한 부분이 있어서 문의드립니다. 강의에서 react-query의 데이터가 inactive 상태가 아니더라도 gcTime이 경과되면 gc가 이뤄진다고 말씀해주셨습니다. 그래서 staleTime을 gcTime보다 길게 설정하더라도 실제론 gcTime을 넘을 수 없다고도 연이어 설명해주시는 내용이 나옵니다. 제가 이전에 react query 블로그에서 본 gcTime 관련 설명에는 ' The duration until inactive queries will be removed from the cache.' 라고 적혀있었는데요, 이 내용을 보고선 inactive된 데이터만 gc가 이뤄지는 걸로 알고 있었는데... 혼란스러워 문의드립니다. ㅠㅠ gcTime 관련 내용은 아래 링크에서 읽어봤습니다. https://tkdodo.eu/blog/practical-react-query 미리 답변 감사드립니다.
<Link href="/login"> 클릭을 통해서 (beforeLogin)/login/page.tsx 로 이동 여기서는 replace('i/flow/login') 으로 리다이렉트 어쨋거나 <Link> 를 통해 이동 -> 리다이렉트 됐으니 인터셉팅 라우팅한 (.i)/flow/login/page.tsx 로 이동 i/flow/login/page.tsx 는 새로고침 시 이동 할 때 보여줌 이 맞나요?.? 넥스트 처음이라 너무 어렵네요.. 눈물이 앞을 가립니다.. 제대로 이해한건지 모르겠어서 확인하고자 질문 드려봅니다.
안녕하세요 연구실에서 자체적으로 실험기기와 컴퓨터랑 통신을 진행하는 중인데, 하나가 해결이 안 되어서 너무 답답해서 고수님들께 자문을 구하려고 합니다. Rs232 rtu 모드를 지원한다고 한 OS-20 overhead stirrer과 통신을 진행 중 입니다. 이 친구의 통신 규격과 방식은 아래 그림 3개와 같습니다. 이중 stirrer control 부분을 제가 참조해서 저 command를 hex 방식으로 입력하였는데 도무지 안되는 겁니다. 그런데 웃긴게 이 회사에서 지원하는 공식 통신프로그램을 사용하면 작동이 잘 되더군요. Instruction overview에서 나온 규칙은 다음과 같습니다. Command 구조는 Prefix Instruction_code Data_frame Checksum로 되어 있고 입력의 prefix는 0xfe로 시작하며 responce는 0xfd로 시작합니다. 모든 바이트 사이에는 50ms delay가 존재해야하며 Dataframe은 큰 수 자리부터 전송합니다. ex) 1000rpm을 data frame에 입력하려고 할 시 Hex값이 03E8이니까 앞에 두 자리를 0x03에 해당하고 뒤에 두 자리를 0xE8로 해당시킵니다. Null은 0x00입니다. Checksum 방식은 0xfe,0xfd인 prefix를 제외하고 나머지를 전부 더한 값으로 0xnn 이런식으로 표현됩니다. 신기하게도 16진수의 2자리를 넘어가도 뒤에 2 자리만 붙이면 된다고 하더군요. ex) 0xfe 0xb1 0x03 0xe8 0x00 checksum인데 0xfe를 제외하고 다 더하면 019c이지만 0x9c만 입력하면 되는 형식입니다. 그래서 이 규칙대로 코드를 짜서 통신을 해 보았는데, 아무리 해도 안되어서 너무 답답합니다. 심지어 제가 잘못했는지 확인하려고 시리얼 통신 sniffer을 사용하여서 공식 프로그램에서는 어떻게 통신이 되나 뜯어보았습니다. 결과는 아래 사진과 같습니다. 제가 python으로 작성한 코드는 아래와 같습니다. import serial import time ser = serial.Serial( port='COM7', # Update with your actual port baudrate=9600, parity=serial.PARITY_NONE, # No parity stopbits=serial.STOPBITS_ONE, # 1 stop bit bytesize=serial.EIGHTBITS # 8 data bits ) def send_hex_string(hex_string): # Convert the hex string to bytes byte_data = bytes.fromhex(hex_string) # Send the bytes over the serial port ser.write(byte_data) def send_hex_string_with_delay(hex_string, delay_ms=50): for i in range(0, len(hex_string), 2): # Extract each pair of characters and convert to bytes hex_pair = hex_string[i:i + 2] byte_data = bytes.fromhex(hex_pair) # Send the bytes over the serial port ser.write(byte_data) # Wait for the specified delay time.sleep(delay_ms / 1000.0) command = 'feb103e8009c' send_hex_string_with_delay(command) ser.close() 또한 파이썬에서의 결과를 시리얼 전송으로 보면 다음과 같습니다. 입력은 제대로 되는데 기기에는 반응이 제대로 나오지 않네요... 제가 잘못하고 빠뜨린 점이 있을까요? 읽어주셔서 정말 감사드립니다.
안녕하세요 제로초님. 리액트 쿼리를 도입해보려고 할 때 마침 제로초님 강좌가 올라와서 참고하고 있습니다! 근데 제 Nextjs 프로젝트의 데이터가 대부분 ssr이나 ssg로 데이터를 가져오게끔 하려고 하고 있거든요 강의에서 ssr로 데이터를 가져오는데 그전에 RQProvider로 리액트 쿼리를 쓸 범위를 지정해주셨잖아요? 근데 useState를 사용하고 있고, "use client";가 선언되어있는데 그 밑으로 담기는 페이지나 컴포넌트들에 ssr, ssg 적용이 잘 되는지에 대해 궁금해져서 질문을 남기게 되었습니다!! (제로초님 강의와 비슷하게 ssr로 데이터 가져오게 작업해봤을때 csr이 아니라 ssr로 잘 가져오는 거 같기는 한데 어떻게 되는거지?! 계속 궁금하네요..!)
