173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 추가 질문 달았는데 답변이 안 달려서 따로 올립니다. 섹션 7 학습 중 React dom 설치하고 로컬 서버 열었더니 이런 오류 메시지가 뜹니다. 대강 버전이 안 맞는다는 것 같은데 해결 방법을 모르겠습니다. 이거 답변 기다리느라 일주일 넘게 진도를 나가지 못하고 있습니다. 조속한 해결 부탁 드립니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다. saga에서 이런식으로 호출을 해주면 action 데이터도 잘 찍힙니다. function* login(action) { try { console.log("saga login"); console.log(action); // const result = yield call(loginAPI, action.data); yield delay(1000); yield put({ type: loginSuccessAction, payload: action.payload, }); } catch (err) { yield put({ type: loginFailureAction, // data: err.response.data, }); } } 그다음 리듀서에서 const userSlice = createSlice({ name: "user", initialState, reducers: { logIn: (state, action) => { state.isLoggedIn = true; state.me = action.payload; }, logOut: (state) => { state.isLoggedIn = false; state.me = null; }, loginRequestAction: (state) => { console.log("state", state); state.isLoggingIn = true; }, loginSuccessAction: (state, action) => { console.log("reducer login"); console.log("state", state); state.isLoggingIn = false; state.isLoggedIn = false; state.me = action.payload; state.me.nickname = "zzimzzim"; }, loginFailureAction: (state) => { state.isLoggingIn = false; state.isLoggedIn = false; }, logoutRequestAction: (state) => { state.isLoggingOut = true; }, logoutSuccessAction: (state) => { state.isLoggingOut = false; state.isLoggedIn = false; state.me = null; }, logoutFailureAction: (state) => { state.isLoggingOut = false; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.user, })) .addDefaultCase((state) => state), }); 위와같이 코드를 만들고 로그인을 해보면 action으로 로그인 정보를 잘 내려줍니다. 원래는 이전의 state (현 store데이터)를 받아오고 거기서 action데이터를 넣어서 업데이트해줘야하는데, state에서 proxy데이터가 내려와서 업데이트가 안되고 있습니다. ㅠ 리듀서에서 action 데이터 받고, state호출했을때, Proxy(Object) {type_: 0, scope_: {…}, modified_: false, finalized_: false, assigned_: {…}, …} [[Handler]]: null [[Target]]: null [[IsRevoked]]: true 이러한 경우에 reducer에서 state를 받아오는 방법이 있을까요? 혹시 코드가 이상하거나 틀렸다면 지적해주시면 감사하겠습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
https://choisuhyeok.tistory.com/57 요기에 잘 정리 되어있어서 제로초님 강의 보면서 툴킷으로만 작업하거나, thunk로 하지 않아도, toolkit + saga로 작업할 수 있습니다. 참고 부탁드립니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다. 깃헙에는 saga를 대체해서 toolkit에 내장되어있는 redux-thunk를 사용하신걸까요? 그렇다면 saga내용을 다 보고 thunk의 모양대로 수정해서 진행하게 되면 될지 궁금합니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 antd 라이브러리를 사용하니까 Server Error SyntaxError: Cannot use import statement outside a module This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack <unknown> file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/node_modules/rc-util/es/hooks/useMemo.js (1) Next.js rc-util/es/hooks/useMemo file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/pages/index.js (8862:18) Next.js eval /node_modules/antd/es/config-provider/index.js ./node_modules/antd/es/config-provider/index.js file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/vendor-chunks/antd.js (570:1) Next.js eval /node_modules/antd/es/grid/col.js 이러한 에러들이 나왔고 검색해보니 next.config.js 파일에 const nextConfig = { /* config options here */ // reactStrictMode: true, swcMinify: true, transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", ], compiler: { styledComponents: true, }, }; module.exports = nextConfig; 이런식으로 넣어주면 괜찮다는 것을 보고 실행해보니 정상적으로 나오는것을 확인했습니다. 그런데 이제는 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: 이런 에러가 나오고 있는데요.. 원래 antd최신버전을 쓰고 있다가 깃헙의 제로초님과 동일하게 ^5.8.3" 버전으로 수정해봤는데도 동일한 이슈가 발생하더라구요 혹시 다른 부분을 수정해야할지 알 수 있을까해서 차장보다 문의 드립니다. 참고로 현재 package.json은 { "name": "react-nodebird", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "author": "", "license": "MIT", "dependencies": { "@ant-design/icons": "^5.3.6", "@reduxjs/toolkit": "^2.2.3", "antd": "^5.8.3", "next": "^14.2.3", "next-redux-wrapper": "^8.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.51.3", "react-redux": "^9.1.1", "react-slick": "^0.30.2", "redux": "^5.0.1", "styled-components": "^6.1.8" }, "devDependencies": { "eslint": "^8.57.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2" } } 이렇습니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
현재 개발하는 환경이 13 버전인데 임포트가 되지 않네요
해결됨
Next + React Query로 SNS 서비스 만들기
다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요. 왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다. 새로고침해도 수정한 로직이 적용되지 않은채여서, 처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가 다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ 노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ 어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;
해결됨
Next + React Query로 SNS 서비스 만들기
해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다 제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, 제로초님. 사진 크게보기 modal을 보던 중 궁금한게 있어서 질문 드립니다. 사진을 크게 보기 위해 페러렐 라우터와 인터셉팅 라우터를 사용한다고 하셨는데 인터셉팅 라우터를 사용하기 위해선 @modal/[username]이 아니라 @modal/(.)[username] 이 되어야 하는게 아닌지 질문 드려요! 뿐만 아니라 위에 같이 (.)을 붙이지 않았을 경우에 http://localhost:3000/elonmusk/status/1/photo/1 위 URL에서 새로고침을 하게되면 인터셉팅 되지 않은 (afterLogin)/[username]/status/[id]/photo/[photoId]/page.tsx 가 나타나야 하고 이는 Home 화면을 보여주기로 하였는데 이 부분도 동작하고 있는 것 같지 않습니다. 혹시 원래 동작하는데 제가 놓친 부분이 있는걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 ! Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요 ?! hooks 폴더를 페이지 단위로 두어 RCC 컴포넌트 내부 로직을 hooks으로 관리하는 Custom hook 패턴과 아토믹을 함께 사용하려고 하고 RSC 컴포넌트에서는 아토믹 패턴을 사용하려고 하는데 이렇게 hooks을 next에서 사용해도 괜찮은 건지 고민이 들어서 질문 드립니다 ! (정답이 없는 문제인 건 알지만 어떻게 생각하시는지 궁금하여 질문드립니다.)
미해결
Next + React Query로 SNS 서비스 만들기
dependencies에 next-auth버전입니다 "next-auth": "^4.24.7", 오류를 보면 import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import { NextResponse } from "next/server"; 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(); console.log("user", user); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); 이게 제 코드인데 제 코드에서는 credentials 속성이 없다고 뜨는데 실행해보면 Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'GET') Source src/auth.ts (6:14) @ GET 4 | 5 | export const { > 6 | handlers: { GET, POST }, | ^ 회원가입시 이런 오류가 뜹니다 오류와 대조를 하여 공식문서를 보면 현재 여기 credentials의 코드가 바뀐것같은데 제 코드에서 어떻게 수정을 해줘야할지 모르겠습니다. vscode자체 오류로도 credentials' 속성이 '{ authorize(credentials: Record | undefined): Promise; }' 형식에 없지만 'Pick>, "credentials" | "authorize"> 형식에서 필수입니다. 라고 뜨는것으로 보아 제 생각에도 공식문서에있는 credentials 속성을 넣어줘야하는것같은데 어떤식으로 해야할지 잘 모르겠습니다. route.ts 역시 // api auth와 관련된 주소는 전부 nextauth가 관리 export { GET, POST } from "@/auth"; 이런식으로 잘 넣어주었구요. 어떤식으로 수정을해야 GET오류가 나지 않을까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
Tab.tsx에서 "추천"과 "팔로우 중"을 클릭하면 상태가 "rec", "fol"로 변경되는 것을 확인했습니다. 이후 TabProvider.tsx 파일을 만들고 <TabProvider>로 상태를 공유할 하위 컴포넌트를 감싸는 것 까지 되었습니다. TabProvider.tsx에 있는 state를 하위 컴포넌트가 구독하여 상태 공유를 할 수 있는 것으로 알고있습니다. 여기서 질문입니다. TabProvider.tsx로 감싼 하위 컴포넌트인 Tab.tsx에서 상태가 변경되었을 때, TabProvider에 변경된 상태를 공유할 수 있는지 궁금합니다. (자식 컴포넌트에서 상태가 변경되면, Provider 상태도 변경할 수 있는지) Post.tsx에서 상태공유 확인하는데, Tab.tsx에서 상태가 변경되어도 Provider에서는 변경되지 않아 질문 올립니다.. import { TabContext } from "../home/_component/TabProvider"; const Post = () => { const { tab } = useContext(TabContext); return ( <> <div>TabContext Value = {tab}</div> </> ); };
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 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 + React Query로 SNS 서비스 만들기
강의를 듣던 중에 프라이빗 폴더에 관한 궁금증이 생겼습니다. 단순 중복 제거 컴포넌트를 모아두는 폴더로 사용한다. 클라이언트 컴포넌트만 넣어두는 폴더로 사용한다. 1번과 2번의 용도로만 사용하면 되는 것인가요?? 그리고 View마다 프라이빗 폴더를 생성해서 파일을 정리해도 괜찮을까요??
미해결
Next + React Query로 SNS 서비스 만들기
양 사이드에 flex-grow : 1; 씩 주는 방법을 처음 알게되었습니다. 이전에는 현재 구현하고자 하는 레이아웃처럼 중앙정렬 할 때, 아래 코드처럼 요소 전체를 감싸는 컨테이너에 justify-content : center;를 지정해서 정렬했었습니다. (아래 코드 첨부) 레이아웃을 정확하게 중앙에 놔둘 때에는 flex-grow 및 justify-content를 선택해서 사용할 수 있을 것 같고, flex-grow는 비대칭적인 레이아웃을 구성할 때, 더 유용할 수 있겠다. 라고 생각하는데 올바른 접근일까요?? .container { display: flex; align-items: stretch; background-color: #fff; justify-content: center; }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql-codegen 설치중에 에러가 계속 나서 node-module 과 yarn.lock 을 삭제 한후 다시 yarn install 실행 후 yarn add --dev typescript @graphql-codegen/cli 에러가 났습니다 내친구 쳇에게 물어봤더니 제가 한거처럼 하라고 하네요 매번 환경설정시 긴장의 연속!!! 왜이러는 걸까요?? 혹시 yarn add -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher 요걸 해줘야되는지 ?? :~/codecamp/class$ yarn add --dev typescript @graphql-codegen/cli yarn add v1.22.22 [1/4] Resolving packages... error AggregateError at internalConnectMultiple (node:net:1102:18) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
미해결
Next + React Query로 SNS 서비스 만들기
private 폴더까지 강의를 보면서 진행하다가 문득 로그인이나 계정 만들기, 모달 close button에 마우스를 가져다 대니 커서 변경이 되지 않네요. 속성이 없는건가? 싶어서 보니 cursor : pointer; 는 제대로 들어가있는 것 같은데 마우스 포인터가 잘 변경되지 않아서 다른 분들은 잘 변경되시는지 궁금하네요
