inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

7강 application.yml에 문제가 있는거 같습니다...

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 아니오 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 현재 구글링 하면서도 진행 해봤지만 다른게 문제인지 h2 console에도 insert 구문이 날라가지 않습니다 ... 현재 제가 놓친게 있을까요 ?... 지금 스프링부트 버전은 3.2.5 버전입니다. 자바 버전도 17로 설정되어 있습니다. 해당 프로젝트 주소 : https://drive.google.com/file/d/1SbgjH5aDY_j_g07r9_Kmz4Uk-uImcC9L/view?usp=drive_link

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
조현민 댓글 1 좋아요 0 조회수 556

redux toolkit, saga으로 하는중에 devtool에서 액션 명칭이 undefined로 나옵니다

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 여쭤보고 싶은게 있습니다. 강의를 따라가다가 데브툴에서 액션, 데이터들을 확인하시는 모습을 봤는데, 저도 따라해보니 액션명칭도, state tree의 데이터들도 제대로 안나오는것 같더라구요. 그래서 좀 테스트해보니까 아래의 로직처럼 put에 액션 함수를 실행하면 데브툴에서 액션 명칭니 나오고예시: put(액션명(데이터)), 기존처럼 put({type: 액션명, payload: 데이터}) 호출하게되면 undefined로 나오는것 같습니다. function* addPost(action) { try { yield delay(1000); const id = shortid.generate(); yield put(addPostSuccessAction({ id, content: action.payload.text, }) ); yield put({ type: addPostToMe, payload: id }); } catch (err) { yield put({ type: addPostFailureAction, error: err.response.data }); } } 아무래도 toolkit과 saga를 사용할때 저렇게 사용하는게 아닌가 싶은데 undefined로 나오는 부분은 개선했다고 하더라도 action 부분이 제로초님과 다르게 나오더라구요. 액션명만 나오는게 아니라 reducer의 위치도 함께나온느데 이렇게 나와도 괜찮은건지 여쭙고 싶습니다. 다른 부분은 잘 작동하는것 같습니다. import { HYDRATE } from "next-redux-wrapper"; import { createSlice } from "@reduxjs/toolkit"; import shortId from "shortid"; export const initialState = { mainPosts: [ { id: "1", User: { id: "1", nickname: "zzimzzim", }, content: "첫 번째 게시글 #해시태그, #익스프레스", Images: [ { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_53669042936_630c778818_320_240_nofilter.jpg", }, { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_52982053835_12fc661207_320_240_nofilter.jpg", }, { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_52905479084_303bf25ec0_320_240_nofilter.jpg", }, ], Comments: [ { id: shortId.generate(), User: { nickname: "찜찜", }, content: "얼른 사고싶어요~", }, { id: shortId.generate(), User: { nickname: "hero", }, content: "리액트 넥스트 고수가 될테다~", }, ], createdAt: {}, }, ], imagePaths: [], addPostLoading: false, addPostDone: false, addPostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; const dummyPost = ({ id, content }) => { return { id, content, User: { id: "1", nickname: "WlaWla", }, Images: [], Comments: [], }; }; const dummyComment = (content) => ({ id: shortId.generate(), content: content, User: { id: "1", nickname: "WlaWla", }, }); const postSlice = createSlice({ name: "post", initialState, reducers: { addPostRequestAction: (state, action) => { state.addPostLoading = true; state.addPostDone = false; state.addPostError = null; }, addPostSuccessAction: (state, action) => { state.addPostLoading = false; state.addPostDone = true; state.mainPosts.unshift(dummyPost(action.payload)); }, addPostFailureAction: (state, action) => { state.addPostLoading = false; state.addPostError = action.error; }, addCommentRequestAction: (state, action) => { state.addCommentLoading = true; state.addCommentDone = false; state.addCommentError = null; }, addCommentSuccessAction: (state, action) => { const { content, userId, postId } = action.payload; const post = state.mainPosts.find((d) => d.id === postId); post.Comments.unshift(dummyComment(content)); state.addCommentLoading = false; state.addCommentDone = true; }, addCommentFailureAction: (state, action) => { state.addCommentLoading = false; state.addCommentError = action.error; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.post, })) .addDefaultCase((state) => state), }); export const { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } = postSlice.actions; export default postSlice.reducer; 사가 코드입니다. import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } from "../reducers/post"; import { addPostToMe, removePostOfMe } from "../reducers/user"; import shortid from "shortid"; function addPostAPI(data) { return axios.post("/api/post/", data); } function* addPost(action) { try { // const result = yield call(addPostAPI, action.data); console.log("addPost saga", action); yield delay(1000); const id = shortid.generate(); yield put( addPostSuccessAction({ id, content: action.payload.text, }) ); yield put({ type: addPostToMe, payload: id }); } catch (err) { yield put({ type: addPostFailureAction, error: err.response.data }); } } function addCommentApi(data) { return axios.post(`/api/post/${data.postId}/comment`); } function* addComment(action) { try { // const result = yield call(addPostAPI, action.data); console.log("addComment saga", action); yield delay(1000); yield put({ type: addCommentSuccessAction, payload: action.payload, }); } catch (err) { console.log(err); yield put({ type: addCommentFailureAction, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(addPostRequestAction, addPost); } function* watchAddComment() { yield takeLatest(addCommentRequestAction, addComment); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 2 좋아요 0 조회수 255

특정인 정보 api 질문

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님, 특정인 정보 api(api/users/{id}) response 관련 질문이 있습니다. response에 Followers 배열이 있어 해당 유저를 팔로우 한 다른 사용자들을 얻고자 했습니다. 처음 시도 는 강의에서 진행했던대로 prefetchQuery + useQuery 조합 으로 데이터를 끌어오고자 했습니다. 하지만 이 경우에 Followers 배열이 빠진 상태로 응답이 돌아오고 있습니다. 한 100번 새로고침하면 1~2번만 붙어서 옵니다. 아래는 prefetchQuery + useQuery 조합 코드입니다. // page.tsx import Link from "next/link"; import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getUserInfo from "./_lib/getUserInfo"; import getUserPosts from "./_lib/getUserPosts"; import Nav from "./_component/Nav"; import ProfileUserData from "./_component/ProfileUserData"; import UserPosts from "./_component/UserPosts"; import { Container, Userzone, Profile, HeaderPhotoZone } from "./page-style"; type Props = { params: { username: string }; }; export default async function Username({ params }: Props) { const { username } = params; console.log("username : ", username); const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ["user", username], queryFn: getUserInfo, }); await queryClient.prefetchQuery({ queryKey: ["posts", "user", username], queryFn: getUserPosts, }); return ( <Container> <HydrationBoundary state={dehydrate(queryClient)}> <Nav username={username} /> <Userzone> <Profile> <HeaderPhotoZone> <Link href="/home">{/* <Image src={이미지} alt="header_photo"></Image> */}</Link> </HeaderPhotoZone> <ProfileUserData username={username} /> </Profile> <UserPosts username={username} /> </Userzone> </HydrationBoundary> </Container> ); } //Nav.tsx "use client"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import getUserInfo from "../_lib/getUserInfo"; import BackBtn from "../../_component/BackBtn"; import { Navigation } from "./style"; import { User } from "@/model/User"; type Prop = { username: string; }; export default function Nav({ username }: Prop) { const { data } = useQuery<User, Object, User, [_1: string, _2: string]>({ queryKey: ["user", username], queryFn: getUserInfo }); console.log("네비게이션 유저 데이터 : ", data); return ( <Navigation> <BackBtn></BackBtn> {data === undefined ? ( <div>프로필</div> ) : ( <div> <div>{data?.nickname}</div> <div>0 게시물</div> </div> )} </Navigation> ); } //ProfileUserData.tsx "use client"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import Link from "next/link"; import { useSession } from "next-auth/react"; import Tab from "./Tab"; import FollowButton from "../../_component/FollowButton"; import { ProfileUserdataMid, UserName, SignupDate, AboutFollower, ProfileUserdata, NoAccountId, NoAccountMsg, ProfileUserdataTop, AbsoluteProfileContainer } from "./style"; import { User } from "@/model/User"; import getUserInfo from "../_lib/getUserInfo"; type Prop = { username: string; }; export default function ProfileUserData({ username }: Prop) { const { data: session } = useSession(); const { data } = useQuery<User, Object, User, [_1: string, _2: string]>({ queryKey: ["user", username], queryFn: getUserInfo }); console.log("프로필 유저 데이터 : ", data); // const createdDate = new Date(data?.createdAt!); if (data === undefined) { return ( <> <NoAccountId>@{username}</NoAccountId> <NoAccountMsg>계정이 존재하지 않음</NoAccountMsg> </> ); } // return null; // 팔로우, 팔로잉 데이터 추가 필요 return ( <ProfileUserdata> <ProfileUserdataTop> <AbsoluteProfileContainer> <div>아 몰랑</div> </AbsoluteProfileContainer> {/* 팔로우 버튼 확인 */} {/* <Link href="/settings/profile">프로필 수정</Link> */} {/* {session?.user?.email === data?.id ? <Link href="/settings/profile">프로필 수정</Link> : <FollowButton user={data} />} */} </ProfileUserdataTop> <ProfileUserdataMid> <UserName> <div>{data?.nickname}</div> <div>@{data?.id}</div> </UserName> <SignupDate> <svg viewBox="0 0 24 24" aria-hidden="true" height="1.25rem"> <g> <path d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"></path> </g> </svg> {/* <div>{`가입일 ${createdDate.getFullYear()}년 ${createdDate.getMonth() + 1}월`}</div> */} </SignupDate> <AboutFollower> <Link href="/follow"> <span>{data._count.Followings}</span> 팔로우 중 </Link> <Link href="/followers"> <span>{data._count.Followers}</span> 팔로워 </Link> </AboutFollower> <Tab></Tab> </ProfileUserdataMid> </ProfileUserdata> ); } react-query 결과 때문에 다른 방법으로 prefetchQuery를 사용하지 않고 useQuery만을 사용 해서 특정인 정보를 가져오는 시도를 했는데 이 경우에는 모두 Followers 배열이 같이 날아오더군요. 왜 이런 현상이 일어나는지 궁금해 질문 남깁니다. 아래는 useQuery만 사용한 코드는 page.tsx에 prefetchQuery만 빠진 것 이외에 다른 부분은 동일합니다. //page.tsx import Link from "next/link"; import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getUserInfo from "./_lib/getUserInfo"; import getUserPosts from "./_lib/getUserPosts"; import Nav from "./_component/Nav"; import ProfileUserData from "./_component/ProfileUserData"; import UserPosts from "./_component/UserPosts"; import { Container, Userzone, Profile, HeaderPhotoZone } from "./page-style"; type Props = { params: { username: string }; }; export default async function Username({ params }: Props) { const { username } = params; console.log("username : ", username); const queryClient = new QueryClient(); // await queryClient.prefetchQuery({ // queryKey: ["user", username], // queryFn: getUserInfo, // }); await queryClient.prefetchQuery({ queryKey: ["posts", "user", username], queryFn: getUserPosts, }); // 개인 사용자 데이터 가져오는 것으로 수정해ㅑ함 // 이거 서버 컴포넌트인데 Nav 같은거는 client란 말이야 그래서 깜박거리는데 어카지; return ( <Container> <HydrationBoundary state={dehydrate(queryClient)}> <Nav username={username} /> <Userzone> <Profile> <HeaderPhotoZone> <Link href="/home">{/* <Image src={이미지} alt="header_photo"></Image> */}</Link> </HeaderPhotoZone> <ProfileUserData username={username} /> </Profile> <UserPosts username={username} /> </Userzone> </HydrationBoundary> </Container> ); } react - query 결과 useQuery만 사용했을 때의 네트워크 탭 getUserInfo.tsx 는 다음과 같습니다. import { QueryFunction } from "@tanstack/query-core"; import { User } from "@/model/User"; const getUserInfo: QueryFunction<User, [_1: string, _2: string]> = async ({ queryKey }) => { const [_1, username] = queryKey; const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${username}`, { credentials: "include", }); if (response.ok) return response.json(); }; export default getUserInfo;

  • react
  • next.js
  • react-query
  • next-auth
김지환 댓글 1 좋아요 0 조회수 228

제로쵸 선생님 ㅜ 리액트 문제는 아닌데 질문드려도 될까요?ㅜ

미해결

[리뉴얼] React로 NodeBird SNS 만들기

제로쵸 님의 강의를 여러개 듣고 있는 코딩 입문자입니다 ㅜ 간단한 사진첩 클릭 사이트를 만들었는데요. 스샷처럼 한쪽 사진만 계속 선택 했을 때는 함수가 한번만 실행되며 제가 원하는 아웃풋이 나오는데, 다른 사진을 선택하면 함수가 여러번 실행이 되네요... 왜이러는걸까요? ㅜㅜ 소스는 html+js+부트스트랩 로 짰습니다. 원본소스의 링크는 아래 올려놨습니다. https://drive.google.com/file/d/1Ov0Qik9ofDHli-TsblLw5OkUz7uCXTDo/view?usp=drive_link

  • react
  • redux
  • node.js
  • express
  • next.js
오르골 댓글 1 좋아요 0 조회수 200

concat()이 내부적으로 생성하는 String 인스턴스

미해결

김영한의 실전 자바 - 중급 1편

public class StringImmutable2 { public static void main(String[] args) { String before = "hello"; String after = before.concat(" java"); System.out.println("before = " + before); System.out.println("after = " + after); } } 자바 프로그램 로딩 시점에 문자열 리터럴이 문자열 풀에 보관된다고 알고 있는데요. 위 코드에서 "hello" 뿐만 아니라 " java"도 문자열 리터럴인가요? 그렇다면 " java"도 문자열 풀에 저장되는 것인가요? (제가 자바 기초 지식이 부족한 상태입니다) concat() 내부에서 생성하는 String 인스턴스는 문자열풀에 생성되는 것인가요? 아니면 문자열풀이 아닌 힙 영역에 생성되는 것인가요?

  • java
  • 객체지향
도토리 댓글 1 좋아요 0 조회수 246

폴더 변경 이후 not found

미해결

Next + React Query로 SNS 서비스 만들기

패러렐 라우트 강의 중 폴더 이동하는 부분이 있는데 i/flow/signup 페이지가 notFound로 나옵니다 http://localhost:3000/ 경로에서도 해당 페이지 ui 가 나오지 않는데 어떤 문제일까요

  • react
  • next.js
  • react-query
  • next-auth
  • msw
mjoh 댓글 1 좋아요 0 조회수 244

마지막 단에서 공통 처리할 때의 catch 부모 예외

해결됨

김영한의 실전 자바 - 중급 1편

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 5:50에서 공통 처리 catch를 최상위 예외인 Exception으로 잡았는데 결국 해결할 수 없는 예외들은 언체크 예외들로 구성되어 있으니깐 RuntimeException으로 잡는게 낫지 않나요? 다른 케이스가 있어서 그런건지 궁금해서 질문 남깁니다.

  • java
  • 객체지향
  • 예외
kyk 댓글 1 좋아요 1 조회수 300

스프링JdbcTemplete강의 내용 1:38초부분에서 의존성주입 질문이 있습니다

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

//JdbcTemplateMemberRepository public class JdbcTemplateMemberRepository implements MemberRepository { private final JdbcTemplate jdbcTemplate; public JdbcTemplateMemberRepository(DataSource dataSource) { jdbcTemplate = new JdbcTemplate(dataSource); //SpringConfig @Configuration public class SpringConfig { private final DataSource dataSource; public SpringConfig(DataSource dataSource) { this.dataSource = dataSource; } JdbcTemplate을 사용하도록 스프링 설정 변경하는 부분인데 이전에 객체를 생성해서 직접 주입하면 안좋다고 하셨었는데 jdbc템플릿을 적용하시는 부분에서는 직접 dataSource를 JdbcTemplate를 생성해서 넣으셨습니다. public SpringConfig(DataSource dataSource) { this.dataSource = dataSource; }대신에 JdbcTemplate를 빈에 등록해서 이렇게 사용하는게 이전에 배운내용에 따르면 의존성, 결합성 면에서 나은 코드라 생각했습니다. (@autowired를 사용하게끔 수정해본 코드) //JdbcTemplateMemberRepository public class JdbcTemplateMemberRepository implements MemberRepository { private final JdbcTemplate jdbcTemplate; @Autowired public JdbcTemplateMemberRepository(DataSource dataSource) { jdbcTemplate = new JdbcTemplate(dataSource); //SpringConfig @Configuration public class SpringConfig { private final DataSource dataSource; @Bean public JdbcTemplate jdbcTemplate(DataSource dataSource) { return new JdbcTemplate(dataSource); } } 이렇게 수정해서 사용하라고 설명해주시다가 이 JdbcTemplate강의에서는 직접 주입하시면서 설명해주셨는데, JdbcTemplate빈을 정의해서 주입하는 방식이 아닌 Datasource를 직접 사용한 이유가 있을까요? 뭔가 데이터접근할때는 다른부분이 있어서 이런 방법이 사용된건지 궁금합니다.

  • java
  • spring
  • mvc
  • spring-boot
담이 댓글 3 좋아요 0 조회수 606

react Dom 설치 에러

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. 추가 질문 달았는데 답변이 안 달려서 따로 올립니다. 섹션 7 학습 중 React dom 설치하고 로컬 서버 열었더니 이런 오류 메시지가 뜹니다. 대강 버전이 안 맞는다는 것 같은데 해결 방법을 모르겠습니다. 이거 답변 기다리느라 일주일 넘게 진도를 나가지 못하고 있습니다. 조속한 해결 부탁 드립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
edo020424 댓글 1 좋아요 0 조회수 228

toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다.

미해결

[리뉴얼] 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
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 2 좋아요 0 조회수 303

redux toolkit을 사용하시면서 redux saga를 사용하시다가 애먹으시는 분들은 참고해주세요

미해결

[리뉴얼] React로 NodeBird SNS 만들기

https://choisuhyeok.tistory.com/57 요기에 잘 정리 되어있어서 제로초님 강의 보면서 툴킷으로만 작업하거나, thunk로 하지 않아도, toolkit + saga로 작업할 수 있습니다. 참고 부탁드립니다.

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 1 좋아요 0 조회수 200

깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다. 깃헙에는 saga를 대체해서 toolkit에 내장되어있는 redux-thunk를 사용하신걸까요? 그렇다면 saga내용을 다 보고 thunk의 모양대로 수정해서 진행하게 되면 될지 궁금합니다. 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 1 좋아요 0 조회수 156

html a태그에 이미지를 표시하는 것은 웹 접근성 기준으로 올바른 것인지에 대한 질문입니다.

미해결

Next + React Query로 SNS 서비스 만들기

이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
hwuiinn 댓글 1 좋아요 0 조회수 270

antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.

미해결

[리뉴얼] 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" } } 이렇습니다. 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 3 좋아요 0 조회수 850

2:56 src/app/page.tsx 파일을 이동 후 not-found 페이지만 뜹니다.

해결됨

Next + React Query로 SNS 서비스 만들기

다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요. 왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )

  • react
  • next.js
  • react-query
  • next-auth
  • msw
댓글 1 좋아요 0 조회수 287

어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다. 새로고침해도 수정한 로직이 적용되지 않은채여서, 처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가 다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ 노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ 어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 3 좋아요 0 조회수 439

"Validation failed (numeric string is expected)" 400 에러와 함께 유저 프로필 / 게시글을 불러오지 못합니다

해결됨

Next + React Query로 SNS 서비스 만들기

해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다 제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
천하무적박정권 댓글 1 좋아요 0 조회수 426

kafka 사용 이유

미해결

실습으로 배우는 선착순 이벤트 시스템

안녕하세요, 궁금한 내용이 생겨 기존에 질문들을 살펴보고 제가 이해한 것이 맞는지 확인차 질문드립니다. redis의 싱글스레드 특성으로 100개 발급에 대한 race condition 해결 --> 그러나 insert 시 DB 처리량에 부하가 발생할 수 있음 kafka 미들웨어를 통해 100개의 쿠폰 저장 이벤트를 보관해두었다가 컨슈머에서 원할때 꺼내어 처리할 수 있는 여지를 주어 처리량 부하를 분산시킬 수 있음 ex) 쿠폰 발급은 당장 안해도 되니, kafka에 이벤트만 잘 발행되어 있다면 DB 작업량이 적은 새벽에 꺼내서 저장해도 됨 이렇게 이해했는데, 맞을까요?

  • java
  • docker
  • spring-boot
  • kafka
  • redis
jyyoon0615 댓글 2 좋아요 2 조회수 460

컴포넌트 만들때에는 jsx를 사용하는 이유?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
minji 댓글 1 좋아요 1 조회수 424

인기 태그

인프런 TOP Writers

주간 인기글