inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

안녕하세요 제로초님 redux-persist 질문 드립니다.

미해결

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

안녕하세요 제로초님 redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다. import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper; 이렇게 스토어를 만들었습니다. 그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나. next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다. 둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?

  • redux-persist
  • express
  • react
  • nodejs
  • redux
  • Next.js
정문채 댓글 2 좋아요 0 조회수 1147

모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??

  • typescript
  • react
  • tdd
  • redux
  • Next.js
조찬호 댓글 1 좋아요 1 조회수 3117

ec2 에 배포시 500 (Internal Server Error) 에러가 뜹니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요? 강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가 .env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.

  • react
  • nodejs
  • docker
  • typescript
  • postgresql
  • Next.js
  • 클론코딩
댓글 1 좋아요 0 조회수 1422

로그인을 안한 상태에서 에러질문 드립니다(재작성)

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

로그인을 하지않은 상태에서는 loadUser함수에 의해 /auth/me로 router로 호출이 되어 user미들웨어는 담긴 쿠키가 없으니 next()로 넘어서 auth미들웨어에서 unauthenticated 에러가 뜹니다 로그인을 안한 상태라고 401 에러가뜨는게 맞는건지.. 강의대로 재대로 따라했는지 잘 모르겠어서 질문드립니다 제공된 소스코드랑 비교해도 다른점을 모르겠네요 로그인만 하면 에러는 당연히 안뜨네요

  • docker
  • nodejs
  • react
  • typescript
  • postgresql
  • 클론코딩
  • Next.js
댓글 1 좋아요 0 조회수 383

이메일 아이디는 findOneBy를 이용하였는데 서브레딧제목은 왜 QueryBuilder를 사용하나요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

const emailUser = await User.findOneBy({ email }); const usernameUser = await User.findOneBy({ username }); if (emailUser) errors.email = '이미 사용 중인 이메일입니다.'; if (usernameUser) errors.username = '이미 사용 중인 이름입니다.'; if (Object.keys(errors).length > 0) { return res.status(400).json(errors); } 이런방식과 QueryBuilder는 뭐가 다른지 왜 그렇게 하는지 궁금합니다.. 연휴에도 질문드려 송구하네요..에고 ^^

  • postgresql
  • docker
  • typescript
  • nodejs
  • react
  • Next.js
  • 클론코딩
댓글 1 좋아요 1 조회수 486

도커를 이용하여 postgresql을 사용하는것에 이점이 있나요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커를 사용하지 않으면 postgresql을 사용하지 못하는것인가요? 정말 잘 몰라서 그러는데 도커를 사용해 postgresql을 이용하는것에 장점이 궁금합니다

  • nodejs
  • typescript
  • docker
  • postgresql
  • react
  • 클론코딩
  • Next.js
댓글 1 좋아요 0 조회수 384

GET /api/auth/me 304

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

커뮤니티생성 - 커뮤니티 생성핸들러 생성하기(2) 까지 강의를 들은 상황에서 첫 로그인은 network status가 200이 뜨는데 그 다음부터는 어느 페이지든 접근시 GET /api/auth/me 304 가 나옵니다. routes/auth.ts 에서 [변경전] const me = async (_: Request, res: Response) => { return res.json(res.locals.user) } [변경후] const me = async (_: Request, res: Response) => { return res.status(200).json(res.locals.user) } 바꾸었으에도 계속 그러네요.. 왜 그런지 아시나요 아래와 같은 글을 발견했지만 캐싱 이후 그냥 304를 날린다는데 이게 맞는건가요..? https://www.inflearn.com/questions/14571

  • 클론코딩
  • Next.js
  • docker
  • nodejs
  • postgresql
  • typescript
  • react
heonpage 댓글 1 좋아요 0 조회수 356

API_URL

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?

  • tdd
  • react
  • redux
  • typescript
  • Next.js
댓글 1 좋아요 0 조회수 308

스타일관련문의드립니다

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요 혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은 없는지요?

  • Next.js
  • redux
  • react
  • typescript
  • tdd
David Ko 댓글 2 좋아요 0 조회수 325

특정 영화의 더 상세한 정보가져오기

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

const {data:moviedetail} = await axios.get(`movie/${movieId}`,{params:{append_to_reponse:'videos'}}) setmovie(moviedetail) `movie/${movieId}`,{<---------- 이부분이요 params:{append_to_reponse:'videos'}}); 선생님 저 윗 부분은 1. 중괄호로 params를 묶으신건 어떤걸 의미하는건가요? 2.append_to_response:'videos' 이부분은 문법인가요? 감사합니다

  • tdd
  • redux
  • typescript
  • react
  • Next.js
David Ko 댓글 2 좋아요 0 조회수 362

error: password authentication failed for user "postgres"

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커 컨테이너도 실행 잘 되고, 서버 연결도 잘되서 localhost : 4000에서 서버도 잘 띄워집니다. 그런데, 데이터베이스만 연결이 안되는 것 같아요 ㅠㅠ npm run dev 만 하면 이런 에러가 납니다. // docker-compose.yml // data-source.ts 환경변수로도 해봤는데 안되서, 일단은 postgres, password로 입력해 놓은 상태입니당 ㅜ Docker Desktop에 컨테이너에서 로그 같은 기능이 있길래 봤는데 자꾸 비밀번호 인증에 실패 했다고만 나오고 구글링해도 모르겠어용 ㅠㅠ reddit-postgres | 2022-08-28 02:13:17.747 UTC [1] LOG: database system is ready to accept connections reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] FATAL: password authentication failed for user "postgres" reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] DETAIL: Connection matched pg_hba.conf line 100: "host all all all scram-sha-256"

  • error
  • react
  • typescript
  • docker
  • postgresql
  • nodejs
  • 클론코딩
  • Next.js
프링이 댓글 3 좋아요 1 조회수 1669

동영상이 없을 경우 오류

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

선생님 안녕하세요? 강의 잘 듣고 있습니다. Styled Component를 이용한 비디오 배너 만들기에서 iframe에서 src에 movie.videos.results가 없을 경우 오류가 생깁니다. 저는 여기에 옵셔널 체이닝(?.)을 걸어 만약에 movie.videos.results이 없을 경우 undefined를 반환하게 하는 방식으로 해결했습니다. 이렇게 한 경우 오류 페이지가 보이는 대신 동영상을 재생할 수 없다고 뜹니다. 이렇게 하는 방법도 괜찮은지, 혹시 더 좋은 방법이 있다면 가르쳐 주세요. 감사합니다. src={`https://www.youtube.com/embed/${movie.videos.results[0]?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`}

  • Next.js
  • typescript
  • react
  • redux
  • tdd
hh1234 댓글 1 좋아요 2 조회수 594

dispatch("LOGIN",res.data?.user); 쪽에서 에러가 뜹니다 ㅜ

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

TypeError: dispatch is not a function at _callee$ (login.tsx?11e1:20:10) at tryCatch (runtime.js?ecd4:45:16) at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1) at prototype.<computed> [as next] (runtime.js?ecd4:97:1) at asyncGeneratorStep (_async_to_generator.mjs?949a:3:1) at next ( async_to_generator.mjs?949a:25:1) 라는 에러가 뜨는데 어디가 문젠지 모르겠습니다.. ㅠ

  • docker
  • postgresql
  • typescript
  • react
  • nodejs
  • 클론코딩
  • Next.js
tmdrbwk3 댓글 4 좋아요 0 조회수 620

질문 드려요

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

findone vs findoneorfail 무슨차이 인가요?

  • toporm
  • typescript
  • nodejs
  • postgresql
  • react
  • docker
  • 클론코딩
  • Next.js
리나스 댓글 1 좋아요 0 조회수 307

디비 api 사이트 회원가입 문제

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

디비 api 사이트 회원가입이 안됩니다

  • react
  • typescript
  • redux
  • tdd
  • Next.js
강민성 댓글 2 좋아요 0 조회수 376

프론트앤드 .env 파일

미해결

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

그 어디에선가 프론트앤드에서 .env 파일이 build 시 노출된다는 얘기를 들었던 것 같은데 사실인가용 프론트앤드에서 .env 파일을 사용하면 더 효율적으로 처리 할 수 있는 작업이 생겼는데 백앤드로 처리해도 되지만 보안상 괜찮은지 궁금해서 여쭤봅니다

  • Next.js
  • redux
  • nodejs
  • react
  • express
123413 댓글 1 좋아요 0 조회수 497

상위 커뮤니티 imageUrl

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

사진을 등록하고 메인 페이지에서 위와 같이 이미지가 제대로 나오지 않습니다. server.ts 에서 express.static("public") 코드 추가한상태입니다. 해당 커뮤니티 페이지 내에서 사진 업로드는 잘 됩니다. 메인 페이지에서 이미지가 안보이는건 어떻게 해결해야 할까요?

  • Next.js
  • 클론코딩
  • typescript
  • nodejs
  • react
  • postgresql
  • docker
SOOMIN 댓글 2 좋아요 0 조회수 346

params : { append_to_response : "videos"},

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

강의 잘 보고 많이 배우고 있습니다 ! "append_to_response"는 사용자가 다르게 바꿀 수 있는 부분인가요 ? 아니면 axios 속성인가요 ?

  • axios
  • Next.js
  • typescript
  • redux
  • react
  • tdd
댓글 1 좋아요 0 조회수 369

11:58 질문입니다. ㅠㅠ

해결됨

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요 선생님... 아래 부분 이해를 못했는데 다시 한 번 설명 가능하신가요? ㅠㅠ const { data: movieDetail } = await axios.get(`movie/${movieId}`, { params: { append_to_response: "videos" }

  • react
  • tdd
  • redux
  • typescript
  • Next.js
miniapp 댓글 1 좋아요 0 조회수 425

모듈 시스템 차이 질문있습니다!

미해결

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

next.config.js 와 같은 설정파일에서는 commonjs 모듈을 사용하고 src폴더내의 소스파일들은 es6 모듈시스템을 사용하는게, src는 웹팩이 번들링하기 때문에 es6를 사용하는것이고, 그외 파일들은 node 완경이라서 그런건가요?? + 그리구 express를 사용할때, package.json에서 module타입을 es6로 변경해서 사용하시지 않는 이유가 있을까요? express 사용할때도 es6 모듈시스템이 편해서 항상 바꿔서 사용하는게 좋지 않을까 생각했는데, 여러 소스코드를 참고해봐도 굳이 es6모듈로 바꾸지 않고 commonjs모듈을 그대로 사용하는거 같더라구요! 혹시 어떤 단점이 있어서인지 궁금합니다

  • redux
  • react
  • nodejs
  • express
  • Next.js
댓글 1 좋아요 0 조회수 279

인기 태그

인프런 TOP Writers

주간 인기글