173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next + React Query로 SNS 서비스 만들기
기존의 모달 방식(제 기준) 은 Context나 recoil과 같은 상태관리 모달로 Provider를 만들어서 isOpen setIsOpen과 같이 사용했는데 이번에 배운 방식도 좋은 방법인 것 같지만, 폴더 구조가 엉망이 되서 가독성이 떨어지는 것 같다는 생각이 들어서 강사님 생각에는 어떤 방식이 어느 상황에서 더 좋을 것 같은지 궁금해서 질문 드려 봅니다.
해결됨
Next + React Query로 SNS 서비스 만들기
저는 여기서 파일을 zip으로 다운받아서 복사하려고 했는데 https://github.com/ZeroCho/next-app-router-z module.css파일을 찾을 수가 없어서 혹시 어디서 찾아야 할까요?
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
동적 메타데이터를 적용하려고 합니다. 메타데이터가 위치해야하는곳에 대해서 궁금한데요 generateMetadata 함수는 layout 혹은 page.tsx 에만 위치해야 하나요? page.tsx 안에서 import 한 컴포넌트안에 넣었더니 적용이 안되길래 여쭤봅니다
미해결
Next + React Query로 SNS 서비스 만들기
useFormState initialState부분 타입스크립트 에러 질문입니다. message에 string이 와야한다고 에러가 뜨는데 이거를 string | null로 해주는 방법을 잘 모르겠습니다! const initialState: { message: string | null; } = { message: null, }; export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, initialState); const { pending } = useFormStatus(); 일단 이런식으로 빼서 에러 없애긴하였는데 인라인으로는 못하나요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요! 제로초님! 항상 강의를 감사히 잘 보고있습니다! 다름이 아니라, 세션에 대한 질문이 있어 글을 올립니다. 첫번째 질문입니다! 현재 클라이언트(브라우저)에서 로그인 요청 시, auth.js를 사용해서 프론트측 세션을 생성하고, 그것을 통해서 클라이언트의 로그인 상태에 대한 분기 기준으로 사용하고 있고, 백엔드에서도 API 허가를 위한 세션을 받아 connect.sid 라는 쿠키를 생성하여 총 2개의 쿠키를 이용하고 있습니다. 제가 궁금한 것은 현재 2개로 나누어진 세션을 백엔드에서 주는 세션으로 생성한 쿠키 1개만 사용해도 되지 않을까? 라는 생각이 들었는데, 각각 따로따로 세션을 생성해서 처리하는 이유가 궁금합니다. 혹시 프론트엔드 입장에서 next-auth (auth.js)가 제공해주는 기능(CSRF, useSession, signin 등의 메서드... )들이 편리해서, 이것을 사용하신것이고 강의에서 언급하신대로 백엔드 세션과 통합하는 과정이 아직 불완전하여 따로 둔 상태로 둔 것이며, 만약 next-auth가 주는 장점이 굳이 없었다면 처음부터 백엔드 세션 1개를 이용해서 로그인 과정을 구현했을 것 이다. 라고 제가 감히 예상을 해도 될까요.. ? 🤔 두번째 질문입니다. [재게시, 답글기능 zustand로 만들어보기] 강의 17분 40초 부근에서 queryClient.getQueryData 보다 getQueryCache를 사용하는게 더 정확하다라고 말씀하셨는데 그 이유가 궁금합니다!
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
선생님처럼 깔끔하게 괄호 안에 있는 부분만 뜨는 게 아니라 저 파란 줄로 길게 뜨는 건 왜 그런 건가요? 어떻게 하면 없앨 수 있나요?
해결됨
Next + React Query로 SNS 서비스 만들기
로그인모달을 패러랠 라우트 방식으로 구현하는 과정에서 default.tsx 강의 타임라인 0:34에서 app/(beforeLogin)/@modal 폴더에 있던 page.tsx와 login.module.css파일을 복사해서 app/(beforeLogin)/i/flow/login로 디렉터리를 만들어서 거기에다가 page.tsx와 login.module.css파일로 넣으셨는데요. URL이 http://localhost:3000/i/flow/login이면 @modal 하위에도 그 url 경로대로 폴더 구조를 맞춰서 넣어줘야 하는 것이죠? 패러랠방식에 대해서 아직 감이 안잡힙니다. (beforeLogin)폴더 자식으로 @modal폴더와 layout.tsx에 가 있고 laytout.tsx에서 modal을 props로 가져옵니다. 그럼 그 modal이라고 이름지은 것은 같은 뎁스에 있는 "@자기이름"인 @modal을 탐색해서 가져오는건가요? import { ReactNode } from "react"; import styles from "@/app/page.module.css"; type Props = { children: ReactNode; modal: ReactNode; }; export default async function BeforeLoginLayout({ children, modal }: Props) { return ( <div> <div className={styles.container}> {children} {modal} </div> </div> ); }
해결됨
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요. 현재 섹션 3 수강 중인 수강생입니다. todo App을 만들고 있는데, X 버튼 구현하는 부분에서 onClick 이벤트 발생 시 작동하는 함수를 삽입해주는 부분인데요. onClick => {handleClick(data.id)} 이렇게 입력하니 웹페이지가 제대로 동작하지 않고, 아래처럼 화살표 함수로 바꿔주니 정상적으로 동작합니다. <button onClick={() => handleClick(data.id)}> x </button> 찾아보니 함수명으로 넣어주는 경우는 렌더링 시 함수가 바로 실행되고 click 이벤트 발생 시엔 함수의 반환값이 중괄호 안에 들어간다고 하고, 화살표 함수로 넣어줄 경우 의도한대로 click이벤트 발생 시에 함수가 실행된다는 걸 알게됐는데요, 이런 부분은 리액트 동작 원리 상 이렇게 되는거니 그냥 받아들이면 될까요? 아니면 제가 js 문법에 대해 이해가 부족해서 이해가 안가는 걸까요...? 추가적으로, 그렇다면 리액트에서 이벤트리스너 함수를 넣을 때는 무조건 화살표 함수로 넣는게 맞는건가요?
미해결
Next + React Query로 SNS 서비스 만들기
게시하기 버튼 클릭하면 인터셉팅 라우트가 되지 않네요 ㅜ 회원가입, 로그인에서는 인터셉팅 라우트가 잘 됬었는데 왜이러는걸까요?.. 아직 넥스트가 불안정 한건지.. 검색해도 잘 안나오네요..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 수업 잘 듣고 있습니다. 79번째 줄 weatherSearch라는 function에 postion이 매개변수로 들어가는 이유가 잘 이해가 안 됩니다. 만약, postion 대신 87번째 줄의 positionObj가 매개변수로 들어 가면 어떻게 되나요? 아직 매개변수 자체의 개념이 약한 것 같은데 좀 더 이해할 수 있게 도와주시면 감사하겠습니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://www.inflearn.com/questions/1092347/types-ts-%ED%8C%8C%EC%9D%BC%EC%9D%B4-%EC%95%88%EC%83%9D%EA%B9%81%EB%8B%88%EB%8B%A4%E3%85%A0%E3%85%9C-ai-%EB%8B%B5%EB%B3%80%EC%97%90%EB%8F%84-%EB%AF%B8%ED%95%B4%EA%B2%B0-%EC%A4%91%EC%9E%85%EB%8B%88%EB%8B%A4%E3%85%A0%E3%85%A0%E3%85%A0 위의 글을 올렸었는데 해결이 아직 안되어 차라리 건너뛰고 마이웨이를 해야 하는 부분인지 여쭤봅니다... 거의 일주일 째 진도를 못나가고 있습니다ㅠㅜ
미해결
Next + React Query로 SNS 서비스 만들기
섹션1까지 들은 수강생입니다 🙂 프로젝트 실행시 아래와같은 에러가 나오는데요.. 어떻게 해결해야할지 ㅠㅠ FetchError: request to https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2 failed, reason: self-signed certificate in certificate chain at ClientRequest.<anonymous> (C:\simjieun\study\next.js\twitter_clone_nextjs\node_modules\next\dist\compiled\node-fetch\index.js:1:65756) at ClientRequest.emit (node:events:514:28) at TLSSocket.socketErrorListener (node:_http_client:501:9) at TLSSocket.emit (node:events:514:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN' } ⨯ Failed to download `Inter` from Google Fonts. Using fallback font instead. Failed to fetch `Inter` from Google Fonts.} FetchError: request to https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2 failed, reason: self-signed certificate in certificate chain at ClientRequest.<anonymous> (C:\simjieun\study\next.js\twitter_clone_nextjs\node_modules\next\dist\compiled\node-fetch\index.js:1:65756) at ClientRequest.emit (node:events:514:28) at TLSSocket.socketErrorListener (node:_http_client:501:9) at TLSSocket.emit (node:events:514:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { type: 'system', errno: 'SELF_SIGNED_CERT_IN_CHAIN', code: 'SELF_SIGNED_CERT_IN_CHAIN' } ....
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS 가입시 신용카드가 필수로 필요한것 같은데 가입이안되면 다른 배포방법이 있을까요? 지금 닷홈에 호스팅 결제되있고 파일질라로 HTML파일 배포중인데 리액트도 빌드해서 파일질라 올리면 배포가 가능할까요?
해결됨
Next + React Query로 SNS 서비스 만들기
섹션 1의 template.tsx, Link, Image, redirect 강의를 따라하던 도중 에러가 발생한 부분이 있어서 질문드립니다. 현재 src\app\page.tsx 의 코드는 다음과 같습니다 이렇게 작성하고 계정 만들기를 클릭해 보았더니 http://localhost:3000/i/flow/signup 으로 이동은 하지만, 다음과 같은 에러가 발생했습니다 Unhandled Runtime Error Error: The default export is not a React Component in page: "/i/flow/signup" Call Stack re file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7243) async file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7935) async re file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7704) async file:///C:/Users/rubic/Desktop/records/VSCode/zerochonextapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:18470) 에러 메세지를 보면 async 관련 에러인가 싶어서 봤는데 현재 async 는 사용된 부분이 없었고, The default export is not a React Component in page라는 문구 자체가 export 관련 문제인 것 같아서 찾아보니 export default를 하지 않아서 그렇다는 글이 많았는데 현재 코드에서는 export default가 제대로 작성되어 있어서 원인을 모르겠네요ㅠ 현재 제 폴더구조와 src\app\(beforeLogin)\i\flow\signup\page.tsx의 컴포넌트는 다음과 같습니다 📦(beforeLogin) ┣ 📂i ┃ ┗ 📂flow ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┗ 📂signup ┃ ┃ ┃ ┗ 📜page.tsx ┣ 📂login ┃ ┗ 📜page.tsx ┗ 📜layout.tsx import Link from 'next/link'; export default function Signup() { return <div></div>; } 혹시 몰라서 버전 정보도 같이 첨부합니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요~ 터미널에서 auto suggestion 처럼 코드 제안하는 회색 글씨가 보이던데 어떻게 하셨는지 알 수 있을까요?
해결됨
Next + React Query로 SNS 서비스 만들기
'Next프로젝트 시작하기' 6:50 초에 현재는 npx create-next-app@latest 명령시 14버전이 설치되는데 상관이 없는건가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. nginx에 배포를해서 실행을하니 실행은되는데 antd 가 적용이 안되는데 왜그런지 모르겠습니다. nginx.conf파일에 아래처럼 구성했고요(docker이용해서 .next 폴더 /usr/share/nginx/html/_next 에 복사했음) location / { root /usr/share/nginx/html; index /_next/server/pages/index.html; } .next 폴더 하위에 server/pages 폴더 아래에 index.html이 있어 index부분을 해당 파일로 지정하였는대 antd가 적용이 안됩니다. 왜그런걸까요 ㅠ? (npm run dev로 실행시에는 적용됩니다.)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰보고 똑같이작성해도 에러가나고, 깃허브에서 자료받아서 복붙해도 똑같은 에러가나네요 ,ㅠ 오타는 절대아니고 무슨 원인일까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! 제로초님! 섹션 4. 백엔드 노드 서버 구축하기 credentials로 쿠키 공유하기 강의까지 수강한 수강생입니다! 작업물을 git clone하고 모듈 설치 후 npm run dev 하는 과정에서 문제가 발생했습니다! (프론트는 front 폴더 내에서 npm install 로 node_modules 를 생성하였습니다.) 회원가입 구현하기 강의 영상과 똑같이 백엔드 터미널에 npm i express@4.17.1 를 입력해 back 폴더 내에 node_modules 폴더를 생성하고 백엔드에서 npm run dev 를 하면 아래 사진과 같은 에러가 나타납니다! 이유가 무엇인지 궁금합니다! ++ MySQL 환경 변수 설정은 미리 path로 설정하여 MySQL이 정상 작동됨을 확인하였습니다! ++ vsCode 파워셀 터미널에서 작업하였습니다! 항상 강의 영상 잘 보고 있습니다! 감사합니다 제로초님!
해결됨
Next + React Query로 SNS 서비스 만들기
windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086 해당 이슈가 맞는지 궁금합니다!
