172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
로그인 페이지 설정 다음에 나온 저 두 가지 강의는 어떤 내용인걸까요?? 해당 수업 두 개 때문에 수료기준 미달로 떠서요 ㅠㅠ 확인 부탁드립니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 내용을 바탕으로 프로젝트를 하나 만들다 안되는 부분이 있어 질문드립니다. 제가 axios를 이용해서 데이터를 받는 함수를 만들었는데요 const [posts, setPosts] = useState(); const getAllPosts = async () => { try{ const {data} = await axios.get("/api/posts"); console.log("axios - getAllPosts: ", data); setPosts(data); } catch(error){ console.log("getAllPosts 에러: ",error); } } getAllPosts(); 이런 코드를 작성했을때 렌더링할때 axios를 이용해서 받은 데이터를 posts란 state에 저장하고 이를 리스트 형태로 렌더링하려고 하는데 저기서 그냥 getAllPosts(); 를 해버리면 콘솔창에 무한하게 posts 값이 찍히고 화면에는 렌더링이 되지 않더라고요 ㅠ 콘솔창에는 그래도 데이터가 찍히긴 하는데 말이죠..ㅠ getAllPosts메서드는 비동기 함수니깐 컴포넌트들이 렌더링되기 전에 실행되고 컴포넌트들이 렌더링되는거 아닌가요? 그럼 저 메서드를 호출하면 잘 렌더링이 되야하는거 아닌가요??ㅠㅠ 왜 저렇게 콘솔창에는 무한하게 데이터값이 찍히고 컴포넌트에는 왜 렌더링이 되지 않는건가요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
function App () { const [ count , setCount ] = useState ( 0 ); const [ input , setInput ] = useState ( "" ); const isMount = useRef ( false ); // 1. 마운트 : 탄생 useEffect (() => { console . log ( "mount" ); }, []); // 2. 업데이트 : 변화, 리렌더링 useEffect (() => { if ( ! isMount . current ) { isMount . current = true ; return ; } console . log ( "update" ); }); // 3. 언마운트 죽음 const onClickButton = ( value ) => { setCount ( count + value ); // console.log(count + value); }; return ( ... ); } 위 코드를 작성하고 새로고침을 하면 위 처럼 콘솔에 모든 mount, unmount, update가 뜹니다....코드상 update도 안떠야하는데 왜 뜨는걸까요?
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
스크립트 문자 그대로 form 썼는데 서버에 새로고침해도 영상과 달리 검색어가 안내려옵니당 그리고 저도 진석님처럼 코드가 색깔별로 나오게끔 하고싶은데 그건 어떻게 하신건가요..? 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
Next + React Query로 SNS 서비스 만들기
// auth.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ credentials: { username: { label: "Username", type: "text", placeholder: "jsmith" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); // route.ts export { GET, POST } from "@/auth"; 각종 커뮤니티 글을 보긴했지만,, 해당 에러는 보이지 않아서 문의 남깁니다. 서버쪽 에러는 [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.authorize (webpack-internal:///(rsc)/./src/auth.ts:31:38) at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:241:39) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:66:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:127:34) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55759 at async eO.execute (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:46527) at async eO.handle (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57093) at async doRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1345:42) at async cacheEntry.responseCache.get.routeKind (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1555:40) at async DevServer.renderToResponseWithComponentsImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1901:24) at async DevServer.renderToResponseImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1939:32) at async DevServer.pipeImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:914:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/next-server.js:272:17) at async DevServer.handleRequestImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:810:17) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:339:20 at async Span.traceAsyncFn (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/trace/trace.js:154:20) at async DevServer.handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:336:24) at async invokeRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:173:21) at async handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:350:24) at async requestHandlerImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:374:13) at async Server.requestListener (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/start-server.js:141:13) [auth][details]: { "code": "ECONNREFUSED", "provider": "credentials" } 이렇게 발생하고 있습니다. 신 버전인 만큼 .env AUTH_SECRET=woong 작성 해놨고 .env local 같은 경우는 NEXT_PUBLIC_API_MOCKING = enabled NEXT_PUBLIC_BASE_URL = http://localhost:9090 작성해놨습니다. 잘 해결이 안되서 글 남깁니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. NextJS 14 App Router로 개발중인 프로젝트가 있습니다. 사용자 편의성을 위해 페이지네이션 관련 상태값이나 사용자가 검색한 값을 쿼리스트링에 저장하는 훅을 만들어서 훅 내부에서 상태값을 받아 URLSearchParams로 쿼리스트링을 세팅해서 router push를 하거나 usePathname이나 useSearchParmas를 사용해서 쿼리스트링 값을 읽어서 상태값으로 업데이트하고 데이터 페칭을 하고 있습니다. 메인 메뉴들 전반적으로 이 훅을 사용중이여서 페이지 컴포넌트에 'use client'를 입력해줘야 하는 상황인데, 그러면 제가 사용자 편의성을 위해 쿼리스트링에 값을 저장하는 방식 때문에 SSR을 사용할 수 없는 상황인지 궁금합니다. 그리고 이런 편의성을 제공하면서 SSR을 하려면 다른 방법이 있을까요?
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
7.4 PlayListCarousel - 1 강의의 6분 15초를 보시면, <div className="relative left-[-45px]"> 부분이 있는데요. left-[-45px]을 해야 화살표가 보이게 되는데, 이게 왜 그런질 모르겠습니다. 근데 제가 질문 드리고싶은 것은, 저 코드가 어떤 원리로 작동되는지가 아닙니다. 이럴때는 스스로 그냥 계속 문서를 참고하든 개발자도구를 참고하든 이해 될때까지 파고드는게 맞는 방법인지 여쭤보고 싶습니다. 이것 말고도 제가 어려웠던 부분에 대한 예시를 들자면, 1) components 폴더에 저장되는 것들과 components/elements 폴더에 저장되는 것들의 차이를 정확히 모르겠음. 2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음. 3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음. 4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음. 이런 어려움이 있었습니다. 혹시 공부법 조언 부탁드려도 될까요?
미해결
한 입 크기로 잘라먹는 Next.js
완강 후 Next로 프로젝트를 만들어 보며 질문 드립니다. 제가 쿠키를 활용할 일이 있어 Nest api 요청에 쿠키를 담아 보냈었습니다. 쿠키가 잘 도착 하는 상황은 postman요청, 브라우저에서 nest api 직접 요청 Next 페이지 에서는 쿠키가 도착하지 않았습니다. 완강 후 Next에서는 최대한 static하게 만들면서도 동적으로는 소통할 수 있도록 만드는 것이 Next가 추구하는 방향이라 이해 하였고, 최대한 static하게 만들었습니다. 쿠키가 도착하지 않아 한참을 실랑이를 하였는데 생각을 해 보니 서버컴포넌트에서 client로 cookie를 저장 한 다는 것이 말이 되지 않다는 것을 알았습니다. 찾아 보니 미들웨어라는 것이 있었고, 서버에서 쿠키를 내리는 것이 아니라 api응답을 받기 전 미들웨어에서 client에 쿠키를 심는 방법이 있더라구요. 근데 client에서 쿠키를 심더라도 static한 페이지로 만들어진 페이지에서 다음 요청에 쿠키를 서버로 전송하지 않기 때문에 쿠키를 활용해 서버와 뭔가의 소통이 불가능 하다고 느껴졌습니다. 제 질문이 이해가 가실지 모르겠지만..Next에서 보통 서버와 쿠키를 활용한 상호작용을 할때 어떤 방식을 통해 하는지궁금합니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
이렇게 작성하고 엔터 눌러도 html 파일 생성이 되지 않습니다. 그리고 강의 여기까지 듣고있긴한데 속도를 몇으로 해두고 봐야할지 모르겠어요.. 뭔가 너무 빠른 느낌 ㅠㅠ.. 혹시 오픈채팅 파이썬 사랑방 비밀번호도 알수있을까요 ㅠㅠ 모르면 거기에다가 또 물어볼까해서 ..
해결됨
한 입 크기로 잘라먹는 Next.js
라이트하우스 tbt가 늠어요 fcp와 tti의 사이 시간이라는데 client 컴포넌트도 몇개없는데 왜이럴까요 ? 만약 해결하려면 어떻게해야하나요
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
인텔리제이 파이참은 어느정도 다룰잘아는데 VSCode는 다룰줄 모릅니당.. 환경설정 vscode까지는 해보긴했는데 혹시 파이참으로 이 강의 쭈욱 들으면서 해도 상관이 없을까요? 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 작년에 구매하여 section 10 정도 까지 듣다가 중단했었는데요,, 그땐 싸이월드만들기 이런 강의가 없던거같은데 강의가 개정된걸까요..? 어디서부터 다시 들어야할지 모르겠네요 ..
미해결
이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
안녕하세요 강사님, proxy 설정을 하면 이렇게 오류가 뜨면서 서버 시작이 안돼요. 프록시 부분을 지우면 잘 작동하는데 어디가 잘못된걸까요?
미해결
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
지금 여기까지 구현 했는데 이렇게 순서 바꾸기를 해야 되는데 잘안됩니다 혹시 원인이나 해결 방법 아시나요? https://okky.kr/questions/1516211 그리고 이렇게 데이터가 복잡할 경우 프론트에서 데이터 가공해서 디비로 보내는게 어쩔수 없다고 보시나요 아니면 조금 과잉이라고 보시나요? 그점도 궁금합니다
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
도커 설치 베타버전으로 다운받아야하는걸까요? 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의를 다 듣고 뭔가 아직 useEffect의 개념이 명확히 잡히지 않았는데요.. 바뀐 state 값을 바로 이용하려고 할때, 컴포넌트가 렌더링된 후에 사용한다고 하셨는데 그럼 만약 컴포넌트를 렌더링할때 바뀐 state값을 같이 렌더링해줘야 하는 경우에는 useEffect는 컴포넌트가 렌더링 된 이후에 사용하니깐 useEffect를 못쓰는건가요?? 여기서 useEffect가 컴포넌트가 렌더링 된 이후에 사용한다는게 모든 컴포넌트가 완전히 화면에 그려지고 나서 사용된다는 의미 맞나요??
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 CSR 경험만 있다보니, 프론트 서버에 로그인한다는 개념이 뭔가 와닿지가 않아서요 백엔드 서버에 쿠키로 인증이 되는데, 왜 프론트 서버에 로그인하는게 필요할까요? 클라이언트 사이드만 있을 때랑 뭔가 다른 느낌이네요..ㅠ
미해결
Next + React Query로 SNS 서비스 만들기
login버튼을 클릭했을 때 처음에 login페이지에 갔다가 replace로 인해서 i/flow/login으로 갈 때 인터셉팅 라우팅이 적용되어 페러렐 라우트를 사용한 (.)i/flow/login으로 이동하게 되는것 까지 이해하고 적용을 시켰고 이동은 잘 하지만 아래와 같은 에러가 발생합니다. 아래는 저의 LoginModal.tsx 코드입니다. "use client"; import { useState } from "react"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(); const [password, setPassword] = useState(); const [message, setMessage] = useState(); const router = useRouter(); const onSubmit = () => {}; const onClickClose = () => { router.back(); }; const onChangeId = () => {}; const onChangePassword = () => {}; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 저의 폴더 구조는 아래와 같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
AWS에 정적페이지 동적페이지 분리해서 배포했는데 https://backendonline.codebootcamp.co.kr/graphql 이주소로 API 요청하면은 CORS 에러납니다. 해당 주소로 API 요청하는게 잘못된걸까요 본강의에서 ??
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 먼저 좋은 Next.js 강의 해주셔서 정말 감사합니다. 덕분에 개념을 잘 이해할 수 있었습니다. Next.js에서 자체적으로 제공해주는, fetch 메소드의 다양한 캐싱 기능에 대해 매우 강력하다고 느꼈습니다. 실제로, 현재 리액트 생태계에서, 캐싱 기능을 제공해주는 Tanstack-Query를 상당히 많이 사용하는 것으로 알고 있는데, Next.js와 캐싱 기능이 겹쳐 잘 활용하지 않은지 궁금합니다. 1. Tanstack Query를 만약 사용한다면, InfiniteScroll 이나, 자체적으로, 제공해주는 로딩, 에러처리 mutation과 같은 강력한 기능을 활용할 수 있다고 보는데, Next.js의 캐싱과, Tanstack Query의 캐싱 기능이 겹쳐, 이 경우에는 어떤 식으로 합리적으로, 판단하고 실제 현업에서는 둘이 같이 사용하는 경우가 많은지 궁금합니다! 2. axios.create을 통해, 자체적으로 헤더나 baseUrl를 구성하거나, interceptor를 통해, refreshToken을 관리하는등 유용한 기능을 활용했는데, Next.js Fetch에도 이러한 기능을 제공하는지 궁금합니다! 3. fetch와, tanstackQuery를 둘다 활용한다면, 어떠한 기준으로 구분하여, 활용하는지 상당히 궁금합니다, tanstack-query 하나로만, 활용하는게 더 좋은 방식인지도 궁금합니다!!!
