묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 네이티브 기초
There was a problem loading the requested app
qr코드를 카메라로 찍어서 expo로 열면 다음과 같이 연결할 수 없다고 뜨는데 어떻게 해결할 수 있을까요?
-
미해결코드로 배우는 React with 스프링부트 API서버
csrf disable 의 대안책에 대해 질문드립니다.
스프링 시큐리티를 학습한 지 얼마 안되서 부족한 부분이 많아서 궁금한 점이 있어서 질문드립니다.csrf 를 disable 으로 설정하고 JWT 토큰을 활용하여 엑세스 토큰 유효 시간을 짧게(10분 이면 괜찮을까요..?)설정과 함께 리프레쉬 토큰(30일이면 괜찮을까요..?)을 발급하는 것으로 csrf 공격에 대비가 충분하다고 볼 수 있을까요?그리고 금융권처럼 보안을 강력하게 요구되지 않은 이용자 빈도가 낮은 개인 쇼핑몰 페이지 같은 실무 환경에서 csrf 에 대해 어떻게 대안을 세우는 것이 가장 적절하고 보편적인 방법이 될까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit, saga으로 하는중에 devtool에서 액션 명칭이 undefined로 나옵니다
안녕하세요 제로초님여쭤보고 싶은게 있습니다.강의를 따라가다가 데브툴에서 액션, 데이터들을 확인하시는 모습을 봤는데,저도 따라해보니 액션명칭도, 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)]); }
-
해결됨Next + React Query로 SNS 서비스 만들기
특정인 정보 api 질문
안녕하세요 제로초님,특정인 정보 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)
Chapter 5 (실습) 댓글 컴포넌트 만들기
npm start를 하면, chapter 5의 내용이 아니라 이전 실습에서 했던 시계가 창으로 나옵니다.chapter5와 관련된 질문을 찾아도 해결방안을 모르겠습니다ㅠㅠ
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
04-13) slugify가 작동하지 않습니다
질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요.질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다.시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다.오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. ===================================Song 모델, slug 필드 추가에서 질문이 몇 가지 있습니다.우선, Meta 속성 추가는 makemigration을 위한 것이고, get_absolute_url method는 template에서 호출하기 위해 정의한 것으로 이해했습니다.첫 질문은 makemigration을 두 단계로 나눈 이유가 있나요? class Migration(migrations.Migration): dependencies = [ ("hottrack", "0001_initial"), ] operations = [ migrations.AddField( model_name="song", name="slug", field=models.SlugField(allow_unicode=True, blank=True), ), migrations.AddIndex( model_name="song", index=models.Index(fields=["slug"], name="hottrack_so_slug_7cf104_idx"), ), migrations.RunPython(forward_code, reverse_code=migrations.RunPython.noop) ] 이런식으로 한번에 처리하면안되나요? 또한 영상 8:06 실습 영상에서는 생략되어있지만 5:40 설명하실 때는 class Song(models.Model): melon_uid = models.CharField(max_length=20, unique=True) rank = models.PositiveSmallIntegerField() album_name = models.CharField(max_length=100) name = models.CharField(max_length=100) artist_name = models.CharField(max_length=100) cover_url = models.URLField() lyrics = models.TextField() genre = models.CharField(max_length=100) release_date = models.DateField() like_count = models.PositiveIntegerField() slug = models.SlugField(allow_unicode=True, blank=True) class Meta: # Model의 related field, primary key에 대해서는 자동으로 index가 생성된다. # 이외에 model을 쿼리할 때 자주 사용되는 field인 경우 index 생성을 고려해보는 것이 좋다 indexes = [ models.Index(fields=["slug"]) ] def slugify(self, force=False): if force or not self.slug: self.slug = slugify(self.name, allow_unicode=True) def save(self, *args, **kwargs): self.slugify() super().save(*args, **kwargs) @property def get_absolute_url(self) -> str: # slug = slugify(self.name, allow_unicode=True) ###################################################### print("-----------check-----------") self.save() # 강의 상에서 누락 ####################################################### return reverse( viewname="hottrack:song_date_detail", args= [ self.release_date.year, self.release_date.month, self.release_date.day, self.slug, ] # kwargs={"pk": self.pk} )get_absolute_url 내부에 self.slugify()를 호출하여 detail 버튼을 클릭하였을 때 slug가 없으면 name으로 부터 slugify를 수행하는 것으로 이해하였는데 그 경우 db에 저장되지 않습니다. 그래서 제 경우 임으로 self.save()로 줄을 추가하여 db에 저장되도록 하였습니다.테스트를 위해 0002 migration만 진행하여 빈 slug필드만 생성하였습니다.그러나 버튼을 눌러 페이지를 호출 시url은 정상적으로 생성되었으나 db 업데이트가 이루어지지 않아 404 not found가 발생합니다. 추가적으로print 문도 stream에 나오지 않습니다. 아마 template단에서 method를 콜해서 그런거 같은데 문제가 뭔가요?만약 제가 이해한 바가 틀리다면, save와 slugify method는왜 정의했으며 어디에 사용되는 건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로쵸 선생님 ㅜ 리액트 문제는 아닌데 질문드려도 될까요?ㅜ
제로쵸 님의 강의를 여러개 듣고 있는 코딩 입문자입니다 ㅜ간단한 사진첩 클릭 사이트를 만들었는데요.스샷처럼 한쪽 사진만 계속 선택 했을 때는 함수가 한번만 실행되며 제가 원하는 아웃풋이 나오는데,다른 사진을 선택하면 함수가 여러번 실행이 되네요... 왜이러는걸까요? ㅜㅜ소스는 html+js+부트스트랩 로 짰습니다. 원본소스의 링크는 아래 올려놨습니다.https://drive.google.com/file/d/1Ov0Qik9ofDHli-TsblLw5OkUz7uCXTDo/view?usp=drive_link
-
미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
sort() 질문 드립니다.
안녕하세요.최근 검색어 구현 중 Store.js에서 스토리지의 historyData를 받아와서 sort를 할 때,강의에서 나오는대로 > 부등호로 하면 정렬이 되지 않고- 를 해줘야 내림차순으로 정렬이 됩니다. 왜 강의와 똑같이 부등호로 했을 때 정렬이 안되는 것일까요? getHistoryList() { return this.storage.historyData.sort(this._sortHistory); // 날짜 역순 정렬 } _sortHistory(history1, history2) { // return history2.date > history1.date; return history2.date - history1.date; }
-
미해결Next + React Query로 SNS 서비스 만들기
폴더 변경 이후 not found
패러렐 라우트 강의 중 폴더 이동하는 부분이 있는데i/flow/signup 페이지가 notFound로 나옵니다http://localhost:3000/ 경로에서도 해당 페이지 ui 가 나오지 않는데 어떤 문제일까요
-
미해결코드로 배우는 React with 스프링부트 API서버
PathVariable이 제대로 인식되지 않는 문제
본 강의 REST컨트롤러 - 수정/삭제, CORS 설정 시청중에Putmapping, DeleteMapping 쪽에서 파라미터를 @PathVariable로 받는데, postMan에서 테스트 요청을 보냈을때 파라미터가 전달되지 않습니다. @PathVariable(name="tno") 처럼 name을 명시하니까 제대로 파라미터가 받아지던데요 원래는 name은 생략 가능한게 아닌가요??
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
settings.jason 3가지
settings.json 을 검색하면 3가지가 뜹니다. user workspace default 이렇게 3가지 뜨는데, 제가 다 눌러보니 어떤건 영어문장이이 막 나오고, 어떤건 비어있는걸로 나오는데 user 로 하면 될까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
04-04 강의에서 질문 있습니다
질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요.질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다.시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다.오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. JS로 토스트 스타일 메시지 노출에서 JS와 장고 템플릿이 강하게 결합되어 있어 react와 같은 것을 적용하기 어렵다고 하셨는데 그게 무슨 뜻인가요?| 가 템플릿에서 원래 필터라고 배웠는데 json_script를 키로 하여 closure 함수를 매핑하는 것은 어떤 원리인가요?--> 이와 관련하여 단순히 views.py 에서 serialize된 List[dict]를 context에 반환 시키는 것보다 저런 식으로 context processor를 사용하는 것은 toast 메시지를 여러 페이지에서 사용할 수 있을 수도 있기 때문인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react Dom 설치 에러
안녕하세요. 추가 질문 달았는데 답변이 안 달려서 따로 올립니다.섹션 7 학습 중 React dom 설치하고 로컬 서버 열었더니 이런 오류 메시지가 뜹니다.대강 버전이 안 맞는다는 것 같은데 해결 방법을 모르겠습니다.이거 답변 기다리느라 일주일 넘게 진도를 나가지 못하고 있습니다. 조속한 해결 부탁 드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다.
안녕하세요 제로초님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 만들기
redux toolkit을 사용하시면서 redux saga를 사용하시다가 애먹으시는 분들은 참고해주세요
https://choisuhyeok.tistory.com/57 요기에 잘 정리 되어있어서제로초님 강의 보면서 툴킷으로만 작업하거나,thunk로 하지 않아도,toolkit + saga로 작업할 수 있습니다.참고 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.
안녕하세요 제로초님깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.깃헙에는 saga를 대체해서 toolkit에 내장되어있는 redux-thunk를 사용하신걸까요? 그렇다면saga내용을 다 보고 thunk의 모양대로 수정해서 진행하게 되면 될지 궁금합니다.감사합니다.
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 질문이 있습니다.
지금 수정하기 기능까지 수강을 하였습니다.근데 수정을 완료했을 때 작성 완료버튼을 누르면 id가 undefined이라는 오류가 계속 납니다.. 로그도 다 찍어보면서 확인을 하는데 undefined인 경우가 나오진 않았습니다... 어디가 문제일까요 ?ㅠㅠ 깃 레포 주소를 남기겠습니다 ㅠhttps://github.com/hcheorii/daily_workout
-
미해결Next + React Query로 SNS 서비스 만들기
html a태그에 이미지를 표시하는 것은 웹 접근성 기준으로 올바른 것인지에 대한 질문입니다.
이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
cypress 와 jest에서 타입만 다르다면? 그래도 같이 쓰는것도 좋지 않나요?
cypress를 적용해보고 러닝 커브가 훨씬 낮은거 같고 좋았습니다 jest는 많이 목킹을 하고 여러가지 더 설정이 많아서 힘들긴 했는데 여기서 타입을 제외하고 더 같이 쓰지 말아야할 이유가 있나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.
안녕하세요 제로초님antd 라이브러리를 사용하니까Server ErrorSyntaxError: Cannot use import statement outside a moduleThis 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.jsrc-util/es/hooks/useMemofile:///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.jseval/node_modules/antd/es/config-provider/index.js./node_modules/antd/es/config-provider/index.jsfile:///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.jseval/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" } } 이렇습니다.감사합니다.