묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer함수에서 로컬 데이터에 find,filter,push등 해주는 이유가 궁금합니다.
안녕하세요 요즘 SWR과 redux를 섞어쓰고 있는 초보 학생입니다. 지식이 미약해서 부족한 질문이라도 들어주시면 감사하겠습니다. 리듀서 함수에서는 예를들면 이런 코드가 있으면 action.data를 mainPosts 맨앞에 둔다는 뜻인데 case ADD_POST_SUCCESS: draft.mainPosts.unshift(action.data); break; 이 코드는 프런트 환경에서 store에 있는 mainPosts에 action.data를 추가한다는 뜻으로 서버에 요청 상관없이 프론트 환경에서 새로고침 없이 view 변동을 보여주려고 쓰는 건가요? 저는 swr을 사용하면서 서버에서 mainPosts를 불러올때 데이터가 추가되면 mutate 로 체크를 해주었는데요. swr을 사용해서 data를 가져올 경우 굳이 전역스토어에 추가 게시글 데이터를 추가해야되는지?? 의문입니다. 그냥 서버에서 처리해주고 가져오면 되는거 아닌가? 이런 생각이 드는데 경험이 적다보니 아직 잘모르겠습니다. 그리고 선생님 최신강의를 보던중 swr로 전역상태를 관리할수있다는 말을 들었습니다. 근데 이기능은 react-query에 정식 릴리즈 되어있는것 같은데 이걸로 api 콜+전역상태관리 둘다 하게되면 굳이 리덕스를 사용하지 않아도 되는 걸까요?? 리덕스 세팅이나 코드량이 너무 긴 단점이 있지만 반면에 에러 헨들링은 쉽다는 장점이 있어? 의견을 여쭈어 보고싶습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
sagas/index.js의 axios default url을 localhost나 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요
sagas/index.js의 axios default url을 localhost 나 혹은 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요 axios.defaults.baseURL = 'http://127.0.0.1:3065'; // ssr 로그인 유지 o // axios.defaults.baseURL = 'http://localhost:3065'; ssr 로그인 유지 x // axios.defaults.baseURL = 'http://api.nodebird-hyun.shop'; ssr 로그인 유지 x 로그인 시점에서 쿠키가 생성은 되는거 같은데 application 탭을 열어보면 없는데 이유가 무엇일까여? 알려주시면 감사여
-
해결됨실전 리액트 프로그래밍
'react-redux 없이 직접 구현하기' 강의 중 궁금한 점이 있어 질문합니다.
안녕하세요. 강의 'react-redux 없이 직접 구현하기'를 듣던 중 궁금한 점이 있어 질문하게 되었습니다. 강의에서 아래와 같은 코드를 작성하셨습니다. const [, forceUpdate] = useReducer((v) => v + 1, 0); 설명하실 때 "상태값 변경 함수(forceUpdate)를 호출할 때마다. 상태값을 변경하는 코드이다. 이 함수(forceUpdate)가 호출될 때마다 컴포넌트를 렌더링하기 위해 작성했다."라고 말씀하셨습니다. 그런데 여기서 "컴포넌트를 다시 렌더링하는 것은 useState를 써도 되지 않을까?" 하는 생각이 들어 해당 라인에 useReducer를 useState로 바꿔서 실행해보니 오류는 발생하지 않았지만 timeline이 하나밖에 추가가 되지 않았습니다. useReducer를 사용한다는 것은 redux에서 발생하는 모든 action들에 대해 감지를 한다는 뜻일까요? 위의 코드가 정확히 구체적으로 어떤 역할과 효과를 가져오는지 잘 모르겠습니다. 답변 주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
폴더와 파일 구조 질문이 있습니다
제가 예전에 리덕스를 공부할 때 리덕스의 로직순서를 배웠었는데요 이러한 흐름으로 실행이 된다고 배웠습니다 그런데 노드버드 프로젝트에는 컴포넌트의 AppLayout에서 LoginForm 컨테이너를 가져와서 실행하는데, 컨테이너에서 props로 전달하거나, 이 반대로 전달하는 거는프로젝트를 만드는 사람에 따라 다 다른건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
회원가입할 때 request payload에 저장되는 정보 노출 안 시키게 할 수 있나요?
안녕하세요 제로초님! 궁금한 부분이 있어 질문 드립니다. 회원가입할 때 개발자도구 network 탭에서 해당 요청의 request payload를 보면 회원가입할 때 입력했던 정보를 그대로 확인할 수 있는데요, 혹시 이거 노출시키지 않도록 설정할 수 있나요? 가령 비밀번호는 암호화 한다는가하는 방법으로요. 실제 실무에서는 이 부분이 보안상 문제가 될 거 같은데, 실무에서는 어떻게 처리하는지 궁금합니다. :) 감사합니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run build 오류
안녕하세요 front에서 내용을 수정하고 ec2에서 git pull하고 npm run build과정에서 자꾸 먹통이 나는데 무슨 문제일까요?? 제가 했던 순서는 제로초님 말대로 그냥 로컬 : git commit -am " ~comit msg" git push origin master에서 git에 등록한 후 ubuntu 접속: sudo git pull sudo npm run build 아래의 캡처본과 같이 여기서 자꾸 동작이 멈추게 되네요... pm2 kill하고도 해봤고 pm2를 그대로 실행시킨 상태에서도 해도 똑같네요... 어딜 고쳐야하는 걸까요? (로컬에서 npm run build하면 제대로 작동하고 위의 경우에도 인스턴스 중지 후 다시 재시작해서 build하면 제대로 작동해요)
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
인피니트 스크롤 throttle 두번씩 요청 질문입니다,,,
안녕하세요, redux devtools 로 확인해보면 요청이 두번씩가는데 도데체 이유를 모르겠습니다..ㅠㅠ 코드도 동일하고 throttle 5000도 동일하게 적용했는데 왜그럴까요.. throttle을 설정했는데 요청이 두번갈수가 있나요?
-
해결됨실전 리액트 프로그래밍
BestScore 표현이 NaN 으로만 나타납니다.
한단계식 나아갈때마다 찾지 못할 에러에 빠지네요 ㅠㅠㅠ 전체다 코드 점검을 해본것 같은에,,,,, 제 힘으로 찾아지지가 않습니다 ㅠㅠ BestScore에서 숫자로 표현되지 않고 NaN으로 표현됩니다. 코드는 깃허브 주소에 있습니다. https://github.com/Doha-Dev/game2048 감사합니다!!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
동영상이 아닌 사진 저장
동영상이 아닌 사진으로 올리려고 하는데 사진 사이즈를 바꾸고 렌더 시키고 싶어서 ffmpeg의 screenshot의 옵션 이용했는데 썸네일이 저장이 안되네요 ㅠ 혹시 사진 사이즈를 바꾸고 렌더시킬 수 있는 방법이 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
samesite=none 일 때 쿠키 공유 문제
안녕하세요. 쿠키 관련 질문이 있습니다. front에서 axios로 보낼 때 withcredentials: true 를 해주고 backend에서도 cors에서 credentials : true를 해주었기 때문에 로컬에서 프론트와 백엔드를 같이 돌릴 경우에는 쿠키 공유 문제가 없습니다. 그런데 백엔드를 aws EC2에 두고 프론트 엔드를 로컬에서 돌릴 경우 쿠키가 공유되지 않습니다. 원인은 samesite 정책 때문이고 해결하려면 backend에서 쿠키를 보낼 때 samesite=none과 secure:true를 같이 적용해줘야 한다는 걸 알았습니다. 이를 해결하려면 결국 https 적용을 위해 nginx로 프록시를 만들어 줘야 하는데 다른 방법이 있을까요? 간단한 방법은 로컬에서 계속 테스트 하다가 배포관련 수업에서 하는 것 처럼 도메인을 같이 등록하면 되긴 하지만 이런 경우에도 해결하는 방법이 있는지 궁금합니다.
-
해결됨실전 리액트 프로그래밍
강의를 따라 공부중인데 어디서 막혔는지 모르겠습니다.
키보드 조작하는 부분까지 강의를 따라 만들어둔 상태입니다. (스코어 부분 시작 직전까지, 약 37분 45초까지) * 키보드 동작을 넣기전에는 4x4 셀을 그린 후 두 곳에 랜덤하게 숫자2를 표현하였습니다. * 키보드 동작까지 완료 후 4x4 셀을 그린 후 아무런 타일이 생성되지 않고 있습니다. 키보드 동작시에 에러도 없습니다. 강의 진행 중 아무런 에러도 발생하지 않고 코드를 역추적해가며 살펴봐도 어디 부분에서 잘못을 했는지 찾아지지가 않습니다 ㅠㅠ 도움이 필요합니다! * 깃에 올려둔 코드 주소입니다( https://github.com/Doha-Dev/game2048.git )
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
리덕스 툴킷 유튜브 영상
안녕하세요, 제로초님 강의 잘 보고 있습니다. 예전에 유튜브에 리덕스 툴킷영상이 올라갔던걸로 기억하고, 봐야지... 하고 있었는데 없어졌네요?? 영상에 문제가 있어서 내리셨나요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 질문있습니다.
다른분이 질문하신건데 9:30초에 const productId = props.match.params.productId; 여기서 props.match.params.productId 가 어디서 나온건지 잘 모르겠습니다 ㅠㅠ. App.js 에서 Auth로 감싸줘서 props가 있는건 알겠는데 match.params.productId가 어디서 나온건지 모르겠네요 ㅠㅠ App.js -> hoc/auth.js -> user_actions.js->index.js-> routes/users.js 까지 가봤는데 잘 모르겠네요 ㅠㅠ
-
propery 'nickname' of undefined
삭제된 글입니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이번 강의 users.js에서 map() 대신 forEach()를 사용한 이유
간단한 궁금증입니다.. map()과 forEach()의 세세한 차이점은 검색을 해봤는데 map메소드가 보통 성능 면에서도 더 빠르고 기존의 데이터를 변형시키지 않고 새로운 배열을 반환하기 때문에 기존 데이터가 필요한 경우에도 쓸 수 있을 것 같다는 생각이 들었습니다. 강사님은 각각 어떤 경우에 map()과 forEach()를 사용하시는지 여쭤보고 싶습니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
이 에러는 왜나는걸까요?ㅠㅠ
그동안 강의보면서 에러나도 어찌저찌 잘 넘겼는데 ㅠㅠ 이번 에러는 조금 감이 안오네요 ㅠㅠ writer가 유효하지 않게 넘어가는 건지 ㅠㅠ 이유가 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
rootReduecer함수에서 리듀의 초기화
reducers 폴더의 index파일의 rootReducer함수에서 defalut: return state 들어가는이유 설명해주실때 액션타입해서 그 다음상태 만들어주는것을 처리해주는대 리듀서 초기화할때 또 rootReducer함수가 실행이되는대 그때defalut: return state이 부분이 없으면 리턴값이 undefined된다 이렇게 설명해주셨는대 리듀서가 왜 초기화되는지 이유가 궁금합니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
user를 찾을 수 없다고 나와요ㅠㅠㅠㅠ
AppLayout에서 store에서 IsLoggedIn 가져오는데서 에러가 발생합니다. const isLoggedIn = useSelector((state) => state.user.isLoggedIn); 에러 코드 TypeError: Cannot read property 'user' of undefined const initialState = { user: { isLoggedIn: false, user: null, signUpdata: {}, loginData: {}, }, post: { mainPosts: [], }, }; const rootReducer = (state = initialState, action) => { switch (action.type) { case "LOG_IN": return { ...state, user: { ...state.user, isLoggedIn: true, user: action.data, }, }; case "LOG_OUT": return { ...state, user: { ...state.user, isLoggedIn: false, user: null, }, }; default: return; } }; 뭐가 문제일까여...힝ㅜㅜㅜㅜ
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
ORM에 대해 질문드립니다.
이전 질문은 보니 관계형 데이터 베이스로도 강의를 제작할 계획이 있다고 하셨는데요 1. 존안님께서 실무에서 쓰는 DB는 MySQL 인가요?? 2. 그럼 ORM 종류는 무엇으로 하시나요? 시퀼라이즈, 프리즈마.. 등등 어떤것으로 사용하시나요?
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
새로고침시 로그인이 유지 되지 않습니다.
되게 여러번 따라 했는데, 새로고침 하고난 후 로그인이 유지가 되지 않습니다..ㅠㅠ authSaga 속의 함수들이 제대로 작동하지 않는것 같습니다.... authoSaga속 함수를 호출하는 시작이 어딘지 순서 또한 잘 파악되지 않습니다..ㅠ 계속 401에러가 뜹니다. ㅠㅠ