묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 완료용
안녕하세요!!과제 완료해서 피드백 부탁드리고자 올렸습니다!앞으로 잘 부탁 드립니당~<html><!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html><css>* { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
changer라는 컴포넌트를 사용하는 이유
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다.또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
Nextjs fetch, react-query 캐시 개념
Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요?왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요?Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요?감사합니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
컴포넌트 만들때에는 jsx를 사용하는 이유?
안녕하세요. 강의를 수강중인 수강생입니다.혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
Hot reload 오류 문의 드립니다.
안녕하세요강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다.감사합니다.수고하세요.===================================================================⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] {errno: -4094,code: 'UNKNOWN',syscall: 'open',path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js'===================================================================
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
멀티 선택 단축키
2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery vs useQueryClient
tanstack query와 next.js 를 함께 사용하면서 의문이 들어 질문합니다!강의의 코드를 보니 같이 prefetch를 해도 유저데이터는 useQueryClient를 사용해서 데이터를 재사용하는듯한데 안에 하위 컴포넌트의 경우 prefetch를하고 useQuery를 사용해서 데이터를 가져오는듯 하더라구요 이 경우도 데이터를 재사용하는건가요? 아니면 새로 가져오는건가요? 그렇다면 똑같이 데이터를 prefetch해도 useQueryClient를 사용해서 가져오는것과 useQuery를 사용해서 가져와야하는 기준이 있을까요? (저의경우 프로젝트 전체를 prefetch후 useQueryClient를해서 데이터를 가져왔더니 데이터를 가져옴과 동시에 fresh가아니라 inactive상태가 되더라구요. ) 좋은강의 감사합니다. 벚꽃같은 제로초 화이팅
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
웹사이트에서 바로 한글로 번역되는거 어떤 프로그램쓰시는건가요?
안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~
-
미해결
Next에서 자동 로그인 구현
안녕하세요 😃 현재 Next.js 사용해 프로젝트 진행중인데 한번 로그인하면 웹에 재접속 시 자동으로 로그인 처리되도록 하고 싶습니다. 현업에서는 어떤 방식으로 진행하는지 궁금합니다! 답변 주시면 정말 정말 감사합니다!!
-
해결됨Next + React Query로 SNS 서비스 만들기
개인 팀프로젝트 중에 NextJS + react-query 관련 궁금증입니다.
먼저 강의와 상관없는 질문 죄송합니다.Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다.이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다.getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다.서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다.로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데,서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다.모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다.이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
[질문X] 로컬에서 build 후 npm start 에러
[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost백엔드를 로컬에서 돌리고 Next를 build 후 npm start로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다.신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1.AUTH_TRUST_HOST=http://localhost:3000.env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071 방법 2.export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ...src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker-compose up 오류
docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not emptyinitdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
import 절대경로 설정 방법 질문 드립니다!
조은님 안녕하세요 🙂 강의 잘 보았습니다!강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?
-
해결됨손에 익는 Next.js - 마이그레이션하기
기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.
안녕하세요. 현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다.마이그레이션 도중 질문이 있어서 글 남겨봅니다.1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요.2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다.3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.
-
미해결Next + React Query로 SNS 서비스 만들기
회원가입-status 201 Ok- 리다이렉트 안되는 현상
일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4크롬브라우저로 보고있습니다.DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다.그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다.package.json 버전정보:클라이언트에서 리턴받은 값:서버에서 나오는 console:무엇이 문제일까요?
-
해결됨손에 익는 Next.js - 마이그레이션하기
Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.
Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다. $ npm installnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: react-scripts@5.0.1npm ERR! Found: typescript@5.3.3npm ERR! node_modules/typescriptnpm ERR! typescript@"^5.3.3" from the root projectnpm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3npm ERR! node_modules/fork-ts-checker-webpack-pluginnpm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1npm ERR! node_modules/react-dev-utilsnpm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR! 1 more (tsutils)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: typescript@4.9.5npm ERR! node_modules/typescriptnpm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR!npm ERR! For a full report see:npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-03-02T03_03_34_358Z-eresolve-report.txt 관련한 안내 좀 부탁합니다.
-
해결됨손에 익는 Next.js - 마이그레이션하기
Cannot find module 에러
vite 로 작성한 경우를 마이그레이션 하는데요.강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다.Require stack:\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\next.jsvite\node_modules\next\dist\server\lib\start-server.jspackage.json 은 아래와 같아요.{ "name": "next-migration-02-vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start" }, "dependencies": { "next": "^14.1.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/node": "20.11.24", "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", "vite": "^5.1.4" } } 관련해서 안내좀 부탁드립니다.좋은 주말 되세요~
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery랑 queryClient.getQueryData랑 차이점이 있을까요??
기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데, const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends});const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
react-intersection-observer 무한스크롤페이지 중복호출문제
안녕하세요 제로초님 강의 잘 보고 있습니다.다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다.0. 콘솔에 확인한 결과처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다.감사합니다
-
미해결Next + React Query로 SNS 서비스 만들기
afterlogin beforelogin 로그인 분기처리 질문
안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다. afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지??2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.
