묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
재게시 관련 궁금한 사항
재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데 재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ?인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?
-
미해결Next + React Query로 SNS 서비스 만들기
app/api/auth/[...nextauth].ts 는 next-auth를 사용하려면 무조건 저 경로여야할까요??
안녕하세요! 강의 잘 듣고 있습니다!다름이 아니라, 수강 중 여쭤볼게 있어 질문 드립니다..!5:44초쯤에 app/api/auth/[...nextauth].ts 의 이 경로 폴더명들은 next-auth를 사용하려면 무조건 저 경로여야할까요?예를들어, app/api/login/[...nextauth].ts 등 다른 경로는 불가능한가요?꼭 /api/auth/[...nextauth]의 경로를 바라보도록 설계해야 하는지 궁금합니다!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
시뮬레이터는 열리는데 앱 실행이 안되고 그냥 핸드폰이 켜집니다
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 안녕하세요!프로젝트 생성하고 yarn start -> i 해서 실행을 했는데, 강의 상에는 시뮬레이터가 켜지면서 자동으로 맛집 앱이 켜지게 되는데, 저는 그냥 하나의 아이폰 핸드폰 화면만 보여집니다. m1 macnode 22.13react-native 0.76.0
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
조건부 렌더링에서 로직 처리 차이
export default function CourseItem({title, description, thumbnail, isFavorite}) { let defaultIconTag = "/img/heart/heart-icon.svg" if (isFavorite) { defaultIconTag = "/img/heart/heart-fill-icon.svg" } return ( <article className="course"> <img className="course__img" src={thumbnail} alt="강의 이미지"/> <div className="course__body"> <div className="course__title">{title}</div> <div className="course__description">{description}</div> </div> <div className="course__icons"> <button className="btn"> <img className="icon-heart" src={defaultIconTag} /> </button> </div> </article> ); }저는 기존 CourseItem메서드 내에서 변수를 생성해서 만들었는데 강의에서는 새로운 메서드를 생성해서 진행하더라고요.메서드를 따로 생성해서 버튼 태그랑 묶어서 같이 넘기신 이유가 있나요? 현업에서 어떤 방식을 더 선호할까요?
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[3-5] ref 오류
에뮬 실행시 정상적으로 작동은 되나 저 에러가 꼐속 떠있어서 이유가 궁금해 여쭤봅니다!
-
미해결Next + React Query로 SNS 서비스 만들기
params 질문
[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠencodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다
-
미해결Next + React Query로 SNS 서비스 만들기
트렌드섹션 질문
회원가입 후 바로 로그인 된 상태에서 home으로 가면 트렌드를 가져올 수 없다고 뜨는데 혹시 로그인 후 로그아웃버튼이 뜨지 않았던 상황과 비슷한 상황인가요 ? 로그아웃 버튼처럼 prop으로 session정보를 넘겨줘야 하는건지 궁금합니다
-
미해결Next + React Query로 SNS 서비스 만들기
middleware 관련 질문입니다
해당 코드를 수정했던 강의가 어디였는지 기억이 안나 여기에 글 남깁니다.아래는 auth.ts의 코드이고 callbacks 부분을 작성하셨다가 나중에 없애는 걸로 수정하셨는데 이 코드의 역할을 middleware에서 대신한다고 생각하면 될까요 ? export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect('http://localhost:3000/i/flow/login'); } } // callbacks: { // async authorized({ request, auth }) { // if (!auth) { // return NextResponse.redirect('http://localhost:3000/i/flow/login'); // } // return true; // }, // },
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
newPost 'unknown' 형식에 'id' 속성이 없습니다.ts(2339)
안녕하세요 강사님 강의수강 중에 궁금한 점이 있어 문의드립니다. 강사님 PC에서는 해당 오류가 안나는데 저 소스에선 해당 에러가 뜨네요. 1.update response = newPost.id관련해서 타입을 지정하지 않는건 의도 한부분인지 궁금합니다. 2.eslint 설정이 안뜨는 rule 설정이 궁금합니다. 'unknown' 형식에 'id' 속성이 없습니다.ts(2339) ❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
axios post 사용할때 페이지 새로고침 문제
Home.jsx이렇게 하고 import { useEffect, useState } from 'react'; import HomeDataLength from '../components/HomeDataLength.jsx'; import HomeSearch from '../components/HomeSearch.jsx'; import CanvasItemList from '../components/CanvasItemList.jsx'; import SearchBar from '../components/SearchBar.jsx'; import GridFlexBTN from '../components/GridFlexBTN.jsx'; import { deleteHome, createHome, getHome } from '../api/home.js'; import { v4 as uuid } from 'uuid'; import dayjs from 'dayjs'; export default function Home() { const [isGrid, setIsGrid] = useState(true); const [search, setSearch] = useState(''); const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false); useEffect(() => { const api = async () => { setIsLoading(true); setError(false); try { const response = await getHome(''); setData(response.data); } catch (err) { setError(err); } finally { setIsLoading(false); } }; api(); }, []); const [isLoadingCreate, setIsLoadingCreate] = useState(false); const [createError, setCreateError] = useState(false); // 등록버튼 누르면 새로운 데이터 저장 const handleNewCreate = async () => { // setIsLoadingCreate(true); // setCreateError(false); // try { const id = uuid(); const newCreate = { id, date: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: `${id.substring(0, 4)}-테스트`, category: '테스트', }; await createHome(newCreate); console.log(123); // const res = await getHome(); // setData(res.data); // } catch (err) { // setCreateError(err); // console.log(createError, 'createError'); // } finally { // setIsLoadingCreate(false); // } }; const handleText = text => { const searchData = data.filter(d => d.text.toLowerCase().includes(text.toLowerCase()), ); if (searchData.length === 0) { setSearch(null); } else { setSearch(searchData); } }; const handleDelete = async id => { // const newData = data.filter(d => d.id !== id); // setData(newData); await deleteHome(id); }; return ( <> <> <div className="flex flex-col md:flex-row justify-between items-center"> <button className="hover:bg-blue-400 bg-blue-500 text-white rounded-md text-bold p-3" onClick={handleNewCreate} > 등록하기 </button> {isLoadingCreate && <p>등록중</p>} {createError && <p>{createError}</p>} <SearchBar handleText={handleText} /> <GridFlexBTN setIsGrid={setIsGrid} isGrid={isGrid} /> </div> <HomeDataLength data={data} error={error} isLoading={isLoading} /> <HomeSearch search={search} /> {!isLoading && !error && ( <CanvasItemList data={data || []} search={search} isGrid={isGrid} handleDelete={handleDelete} /> )} </> </> ); } home.js 파일은 아래와 같은 상태이면 import { home } from './http'; // 목록 조회 export const getHome = () => { return home.get('/'); }; // 등록 export const createHome = newCreate => { try { console.log('ㅅㅣ작'); } catch (error) { console.log('에러'); } finally { console.log('종료'); } // debugger; return home.post('/', newCreate); }; // 수정 // 삭제 export const deleteHome = id => { return home.post('/', id); }; db는 server-json을 사용하고 있습니다.그런데 get 요청을 할때는 잘 작동하는데post로 등록하거나 삭제할때는 db에 정상 등록, 삭제되는데 화면이 새로고침이 되버리는 상태입니다. Home.jsx 화면이 리렌더링이 되도록 하고싶은데 새로고침은 왜 그런지 모르겠습니다. postman으로도 post로 db에 저장했는데 리액트 화면이 자동으로 새로고침 되버립니다. 구글링도 해봤는데 해결이 안되서 문의드립니다.혹시나 해서 db.json이 변경되면 화면도 변경될까 싶어서 을 db.json --watch로만 해보고 --watch도 없애봤는데 안됩니다. const handleNewCreate = async () => { console.log('시작1'); const id = uuid(); const newCreate = { id, date: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: `${id.substring(0, 4)}-테스트`, category: '테스트', }; const data = await createHome(newCreate); console.log(data, 'data'); console.log('시작2'); debugger; };debugger를 사용했을때이렇게 데이터 나오는데 디버거 끄는 순간 바로 화면이 새로고침 되고 있습니다. 그리고 콘솔창도 새창으로 이전 내역이 다 사라지는 상태입니다.
-
미해결Next + React Query로 SNS 서비스 만들기
서버 액션에서 msw의 핸들러를 호출하는 이유?
제가 알기로는 서버 액션은 현재 url, 강의 기준 /i/flow/signup으로 네트워크 요청이 일어나는거로 알고 있는데 msw의 핸들러로 fetch를 하신 이유가 궁금합니다. 작동하는 코드인가요?const onSubmit = async (formData: FormData) => { "use server"; let shouldRedirect = false; try { const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", credentials: "include", body: formData, }); console.log(res.status); console.log(await res.json()); shouldRedirect = true; } catch (error) { console.error(error); } if (shouldRedirect) { redirect("/home"); } console.log("실행됨"); };위 코드는 SignupModal에서 msw의 핸들러로 form 제출 요청을 보내는 코드이고,http.post(`${baseUrl}/api/users`, () => { console.log("로그인 성공"); return HttpResponse.json({ message: "msw 성공", }); }),이 코드는 핸들러 코드입니다. 요청 url인 http://localhost:3000/api/users로 폼 제출이 정상적으로 이루어지는지 궁금합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
react-native-safe-area-context & react-native-screens 에러
이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-3]에뮬레이터 실행 오류
질문을 계속해서 죄송합니다네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-0] front파일로 옮길떄 에러
말씀드린대로 front파일을 만들고 그 안에 전부 프로그램을 옮겻을떄Parsing error: No Babel config file detected for C:\Users\user\Documents\react native-study\MatzipApp\front\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강사님의 계획?
선생님 준비중인 강의가 혹시 있으실까요?선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다.만족도가 이렇게 높은 강의는 첨음이거든요그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다.계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
iTerm으로 폴더 만드는 부분에 대해 질문이 있습니다.
안녕하세요 현재 맥북을 사용중이고 강의영상처럼 iTerm으로 명령어를 작성해서 폴더를 만들고 비주얼스튜디오까지 열기부분에서 저는 외장하드를 연결해서 배경화면에 있는 외장하드폴더 안에 짐코딩강의라는 폴더 안에 react-test 라는 폴더를 만들어 사용할려고 하는데 이렇게 되면 명령어를 어떻게 작성하면 되는지 궁금합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
오류ㅠㅠ
윈도우-안드로이드로 수강하는 중인데 이전 강의까지 잘 되다가 navigation 설치하고나서 이런 오류가 떠서 구글링도 해봤는데 해결이 잘 안되네요(yarn이 잘 안돼서 npm 설치과정 따라서 설치했습니다.)이런 오류가 뜨길래 구글링을 통해android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_11 targetCompatibility JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 이렇게 해보라길래 해봐도 오류가 뜨네요 ㅠㅠnode -v : v20.18.1java --version : openjdk 11.0.25
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
npm start (android) 에러
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.IOS는 잘 동작합니다.android 에뮬레이터 실행을 위해 'a'를 누르면 아래와 같은 에러가 발생합니다. .android studio에서 gradle 버전을 8.9로 올리라고 해서 올린후 실행한 결과입니다.
-
미해결Next + React Query로 SNS 서비스 만들기
SessionProvider을 사용해도 하위 컴포넌트가 서버 컴포넌트로 유지되는 것 같은데 이유가 궁금합니다.
SessoinProvider을 사용할 경우 SessionProvider로 감싼 하위 컴포넌트는 모두 클라이언트 컴포넌트가 되는 걸로 알고 있고 클라이너트 컴포넌트의 자식으로써는 서버 컴포넌트가 올 수 없다고 본 것 같은데 코드를 보니까 SessionProvider의 하위 컴포넌트도 서버 컴포넌트로 잘 작동 되는 컴포넌트가 있는 것 같아요.혹시 제가 잘못알고 있는지 궁금합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
yarn start 오류
제가 윈도우라서 열심히 1-5과정 따라가고 있는데 밑에 과정까지는 완료했는데 yarn start부분에서 오류가 뜨네요(안드로이드,ios 다 오류떠요) 정말 죄송하지만 해결법을 알려주실 수 있으실까요?yarn start - a눌렀을때yarn start - i 눌렀을때 doctor2가지 문제가 있는 것 같네요..