묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
react-query와 nextjs에서 둘 다 cache 처리 해주는 건가요?
next: { tags: {'posts', id} }nextjs에서의 위의 코드는 nextjs의 캐시를 하는거라면 nextjs는 서버캐시를 하고 react-query는 클라이언트 캐시를 해주는건가요? 둘 다 중복적으로 캐시를 지원해주거 맞죠? 헷갈리네요
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
ubuntu안에 있는 mysql db데이터
안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요?데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자바스크립트 배열 email split 콘솔 내용 복사 후 주석처리
안녕하세요 자바스크립트 배열 중에 email split 따라하면서 콘솔에 있는 내용 복사해서 vb Code에 붙혀 넣고 주석처리 했습니다.근데 주석 뒤에 "codecamp": Unknown word. 라고 나타납니다. 이건 왜 그런가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
error.tsx를 활용한 에러 처리 관련 질문입니다.
안녕하세요 해당 영상을 통해 학습하고 따로 프로젝트를 진행하는 중에 서버 컴포넌트에서 data를 fetch하고 api 상태코드에 따라서 next에서 제공하는 error.tsx에서 해당 에러 상태에 따라 모달에 메세지를 띄우는 작업을 하고 있습니다.로컬 환경에서 실행시켰을때는 정상적으로 error status가 523이 발생했을때 정상적인 메세지를 받아서 error.tsx 화면에서 해당 에러 메세지를 모달에 띄우나 빌드 후 실행시켰을 때에는 An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.모달안의 메세지에 이러한 문구가 뜹니다. 아무리 찾아봐도 정확한 원인을 모르겠는데 혹시 해결방법을 아실까요?다국어 처리 라이브러리는 next-intl를 사용하였습니다./note/page.tsxasync function fetchSharedNote(guid: string) { try { const res = await fetch( `${process.env.API_SERVER_URL}/v1/...`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(guid), } ); if (res.ok) { return res.json(); } else { const errorData = await res.json(); throw errorData; } } catch (err: any) { const t = await getTranslations("Index"); if (err.status === RestApiErrorType.notExistResourceException) { throw new Error(t("error523")); } throw new Error(err.message); } } /note/error.tsx "use client"; // Error components must be Client Components import CommonDialog from "@/app/_components/CommonDialog/index"; import { useState } from "react"; export default function Error({ error, }: { error: Error & { digest?: string }; reset: () => void; }) { const [showDialog, setShowDialog] = useState(!!error.message); return ( <CommonDialog isShow={showDialog} contents={error.message} onClick={() => { setShowDialog(false); }} /> ); }
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
git push -> git pull 후에 build 문의
안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요?그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?
-
미해결Next + React Query로 SNS 서비스 만들기
AuthProvider 사용 시 서버 컴포넌트가 궁금합니다.(+ API 관련)
안녕하세요. 항상 강의 잘 보고 있습니다! return ( <html lang="en"> <body className={inter.className}> <MSWComponent /> <AuthSession> {children} </AuthSession> </body> </html> )next-auth 강의 내용 중 최상위 layout.tsx에서 위 코드와 같이 AuthSession 감싸주신 걸 볼 수 있는데 이는 next-auth에서 제공하는 SesisonProvider를 통해 감싸진 자식 컴포넌트들에서 session 데이터를 공유하기 위함으로 이해하였습니다. 그런데 SessionProvider는 useSession 훅을 사용하는 컴포넌트에 대해 session 데이터를 공유하는 것이기에 "use client"가 사용되는데 최상위 layout 파일에 AuthSession으로 그것의 children을 감싸게 되면 그 아래에 포함된 모든 컴포넌트들이 전부 클라이언트 컴포넌트가 되기 때문에 이렇게 되었을 때 계층 아래의 서버컴포넌트들이 제대로 서버 컴포넌트로써 작동할 수 있는지가 궁금합니다. 그래서 useSession을 사용해야 하는 컴포넌트의 상위에서만 해당 provider로 감싸주고 서버 컴포넌트에서 session이 필요한 경우 해당 provider로 감싸지 않아도 session을 가져올 수 있지 않나 궁금증이 들어 질문드립니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
로그인시 오류페이지로 이동됩니다
해당 영상에서 질문들을 참고해봐서 그나마 재영님 질문과 비슷해서 버전 문제일 수 있을 것 같아 버전도 낮춰보고 했음에도 해결이 되지 않아 새로 질문 올립니다.. [[[ 문제점 ]]]아이디와 패스워드를 치고 로그인을 눌렀을 때 오류페이지로 이동됩니다.정상적일때 경로 => [ localhost:3000/home ]현재 이동되는 경로 => [ localhost:3000/api/auth/error ][ 해당 사진 ][ 적용했었던 버전 내역 ]next-auth@5.0.0-beta.3next-auth@5.0.0-beta.4next-auth@5.0.0-beta.11@auth/core@0.19@auth/core@0.27 [ 디렉토리 구조 ] [ 코드 ]envNEXT_PUBLIC_BASE_URL=http://localhost:9090 AUTH_SECRET=testtestauth.tsimport 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({ 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 user; }, }), ] });mocks/handlers.tsimport {http, HttpResponse, StrictResponse} from 'msw'; export const handlers = [ http.post('/api/login', () => { console.log('로그인'); return HttpResponse.json({ userId: 1, nickname: '프림입니다만', id: 'pream', image: '/5Udwvqim.jpg' }, { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' } }); }), http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }); }), http.post('/api/signup', async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0' } }) }), ];@/app/(beforeLogin)/_components/LoginModal.tsx"use client"; import { ChangeEventHandler, FormEventHandler, useState } from "react" import style from "@/app/(beforeLogin)/_components/login.module.css"; import { signIn } from "next-auth/react"; 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: FormEventHandler<HTMLFormElement> = async (e) => { e.preventDefault(); setMessage(''); window.alert('aaa'); try { await signIn("credentials", { username: id, password, redirect: false, }); window.alert('bbb'); router.replace('/home'); } catch (err) { console.error(err); setMessage('아이디와 비밀번호가 일치하지 않습니다.'); } }; const onClickClose = () => { router.back(); }; const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => { setId(e.target.value); }; const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => { setPassword(e.target.value); }; 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> ) }여기서 onSumbit 함수 부분에서 alert를 중간에 넣었는데window.alert('aaa')은 떴고,확인 버튼 누르고, 다음 window.alert('bbb')가 뜨자마자 바로 에러 페이지로 이동됩니다. ( 확인 버튼 조차 못누르고 바로 이동됩니다 ) 그리고 auth.ts 에서는 재영님 질문처럼 터미널 로그들이 안찍힙니다... 9090 서버는 잘 띄워놨었구요.회원가입 로그는 잘 나오는데 로그인 로그는 안뜹니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.아래는 제 package.json 인데, 특정 버전으로 진행해야 하나요? "dependencies": { "axios": "^0.26.1", "classnames": "^2.3.1", "dayjs": "^1.11.4", "env-cmd": "^10.1.0", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0", "react-icons": "^4.4.0", "sharp": "^0.30.7", "swr": "^1.3.0" }, "devDependencies": { "@types/node": "17.0.23", "@types/react": "17.0.43", "@types/react-dom": "17.0.14", "eslint": "8.12.0", "eslint-config-next": "12.1.4", "postcss-preset-env": "^7.4.3", "tailwindcss": "^3.0.23", "typescript": "4.6.3" }
-
해결됨Next + React Query로 SNS 서비스 만들기
MSW response가 안 보이면?
안녕하세요 제로초님.3-1 부분에서 client 컴포넌트에서 서버액션 사용하기로 msw를 처음으로 사용하려고 시도중입니다.와중에 브라우저 네트워크 탭 response에 아무것도 나오지 않고 있어 해결법을 찾지못해 질문드립니다.저랑 비슷한 오류 생기신 분들 질문을 다 본 거 같은데, 해결이 되진 않네요.우선, handlers 코드입니다.Mock server 터미널에는 "회원가입" 콘솔이 잘 나오고 있습니다.다음은, client component에서 서버액션을 위한 signup.ts입니다.이 또한 터미널에서 base url경로와 "success!"와 200이 잘 나오고 있습니다.다음은 네트워크 탭에 정보입니다.생년월일 정보는 제가 추가한 정보입니다.response 탭에 아무것도 나오지 않습니다. 실제 모달을 띄우는 컴포넌트는 onSubmit 함수 import와 이 부분 이외에 아무것도 추가하지 않았습니다..env파일 및 .env.local 입니다. package.json입니다.어떤 부분을 추가로 해보면 좋을까요??
-
해결됨Next + React Query로 SNS 서비스 만들기
session error/쿠키 정보가 저장 안됐을 때
mook 새롭게 실행 시켜봤는데도 세션이 에러가 계속 뜹니다.로그인창에 선생님처럼 정보가 저장 안되있고 handlers-> User정보를 입력하면 패이지가 이동 되는데localhost:3000/api/auth/error 이동되고 /home는 안가네요회원가입 id,name,비번,사진 입력해서 만들고 /home이동 되었는데 로그아웃 버튼이나 추천컨텐츠는 안 나와요localhost:9090 치면이렇게 나오네요 .회원가입(localhost:3000/i/flow/signup)->/home->잘 가기는 하는데 네트워크에서는 세션 에러가 됩니다. 무든 코드 선생님꺼로 바꿔봤는데 해결 방법 찾지 못해서 3-1코드 부분에서 멈쳐있습니다. 감사합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트 ip로 들어갈때 연결이 안됩니다....
지금 빌드까지 마친 상황이고 sudo npx pm2 start npm -- start 이후 sudo npx pm2 monit을 하엿는데 이러한 에러가 나옵니다.https://github.com/jinhwansong/blog 다른 분들의 이야기를 보면 비슷한 에러가 나는거 같기는 한데 답을 모르겟어요 ㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 프론트서버를 배포하려는데 문제가....
지금 계속 프론트서버에서 npm run build를 하려는데 왠지는 모르겟는데 빌드가 되다가 멈추는 현상이 생깁니다. 여기서 멈추고 30분째 가만히 있는데 이유가 따로 있을까요? 우분투 서버는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type 이거를 사용했고 인스턴스 유형은 t2.micro입니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
05-03-static-routing-board-query
데이터가 사라진건가요 .. null 떠서 강의을 맞춰 가기가 힘들어요 ㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?
tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?백엔드 서버의 경우 nodemon으로 자동으로 수정사항 발생 시 서버 재시작 해주던데, 리액트 서버의 경우 어떻게 하는게 좋은가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?
useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이
리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이가 무엇인지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그래프QL의 _id값을 반환받을수가 없습니다.
import { gql } from "@apollo/client"; export const FETCH_BOARDS = gql` query fetchBoards { fetchBoards { _id writer title createdAt } } `;import { useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import BoardListUI from "./BoardList.presenter"; import { FETCH_BOARDS } from "./BoardList.queries"; export default function BoardList() { const { data } = useQuery(FETCH_BOARDS); //쿼리문을 실행하면 데이터에 값 넣어주기 return ( <BoardListUI data = {data} /> ); } 강사님 하고 똑같이 했는데 제것만 에러가 나네요 강사님껄로 하면 실행이 됩니다 _id 받질 못해서 안되는데 왜이럴까요 ㅠㅠ { "errors": [ { "message": "Cannot query field \"_id\" on type \"BoardReturn\".", "locations": [ { "line": 3, "column": 5 }
-
미해결Next + React Query로 SNS 서비스 만들기
fresh에 대하여 질문있습니다.
안녕하세요. 제로초님 좋은 강의 감사합니다. 해당 강의에서 fresh 상태일 때는 새로고침을 해도 서버에서 데이터를 가져오지 않고 캐시된 데이터를 사용한다고 하셨습니다. 그래서 fresh 상태일 때 새로고침을 하여 FollowRecommendSection를 트리거 하였고 해당 API가 요청이 되는지 보았습니다.export default function FollowRecommendSection() { const { data } = useQuery<User[]>({ queryKey: ['users', 'followRecommends'], queryFn: getFollowRecommends, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); return data?.map((user) => <FollowRecommend user={user} key={user.id} />); } export async function getFollowRecommends() { const res = await fetch(`http://localhost:9090/api/followRecommends`, { next: { tags: ['users', 'followRecommends'], }, cache: 'no-store', }); ... } 그런데 개발자도구 네트워크 탭에서는 밑에 사진과 같이해당 API가 다시 요청되는것을 확인할 수 있었습니다.fresh라 할지라도 API 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다. 감사합니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
마이너스버튼 테스트
test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); })on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?
-
미해결Next + React Query로 SNS 서비스 만들기
/i/flow/login 으로 리다이렉트하는 이유?
안녕하세요 섹션 1 듣고 혼자 해보다가 궁금한 게 생겨서 질문드립니다.기존 사이트는 왜 "/login"으로 진입하면 "/i/flow/login"로 리다이렉트하게 했을까요?단순하게 생각하면 그냥 "/login", "/signup"에 페이지를 두던가 아니면 "/i/flow/login", "/i/flow/signup"만 사용하도록 하면 리다이렉트 로직 필요없이 더 깔끔할 것 같은데 말이죠.또 의아한 것은 기존 사이트에서 '/signup' url로 진입하면 '/i/flow/signup'으로 리다이렉트하는데 계정 만들기 버튼은 로그인과 다르게 href를 /i/flow/signup'으로 해두었네요. 실수인가..물론 제로초님은 기존 사이트를 최대한 그대로 구현하려고 하신 것 뿐이니까 당연히 정확한 의도를 알 수 없으시겠지만 현업자 입장에서 추측이 가는 부분이 있으신가 싶어 질문드립니다!
