172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList[0].filter 이렇게 하시면 콘솔창에서 필터가 되어 있는 모습을 볼 수 있습니다. 한 30분동안 왜 필터가 안 되는지 forEach로 찍어봤는데 배열 하나 안에 객체가 여러개 있는거기 때문에 저렇게 해야하는거 같긴 한데, 또 강사님은 그냥 하셔도 출력이 되시네요. 무튼 저는 위의 방식으로 해결했습니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
강사님 강의 내용과 똑같은 코드를 작성했으나 오류가 계속 생성됬는데 어찌저찌 풀어서 참고하실 분들을 위해 남깁니다 제가 오류가 발생한 상황(hoc/auth.js) [강사님과 같은 코드를 작성 후 서버/클라이언트 실행 시 빈 화면이 나옴] (오류 내용 : unctions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.) - 해결책 : AuthenticationCheck 리턴 시 함수로 리턴하는 것이 아닌 JSX 컴포넌트로 리턴하라고 합니다 (참고 : https://www.inflearn.com/questions/357383) - 실제로 auth.js의 마지막 부분인 을 return AuthenticationCheck -> return < AuthenticationCheck />로 변경 시 정상적으로 작동함을 확인할 수 있었습니다. [hoc/auth.js 코드] import React, { useEffect } from "react"; import { useDispatch } from "react-redux"; import { auth } from "../_action/user_action"; import { useNavigate } from "react-router-dom"; export default function (SpecificComponent, option, adminRoute = null) { //option : null = anyone, true = login user only, false = logout user only function AuthenticationCheck(props) { const dispatch = useDispatch(); const navigate = useNavigate(); useEffect(() => { dispatch(auth()).then((response) => { console.log("auth? ", response); if (!response.payload.isAuth) { // login yet if (option) { navigate("/login"); } } else { // login if (adminRoute && !response.payload.isAdmin) { navigate("/"); } else { if (option === false) { navigate("/"); } } } }); }, []); return ( <SpecificComponent /> // component return이 없으면 React 실행이 안됨. ); } return <AuthenticationCheck />; }
해결됨
Slack 클론 코딩[실시간 채팅 with React]
const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.
미해결
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
모든 과정을 세번씩 돌려보면서 따라했는데도 안되네요... queryClient는 위와 같이구성하였고 BASE_URL은 '/'으로 설정하였습니다. 위와같은 오류가 발생합니다 어떻게 해결하여야할까요? https://github.com/shinwonse/shopping-mall 깃 주소 첨부드립니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 10분28초쯤 일기 수정 중에 useEffect에서 isEdit과 originData를 배열에 넣어주는데요 isEdit과 originData는 바뀌지 않는 값인데 추가하는 이유가 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
다른기능들은 모두 정상적으로 작동을하는데 새로고침시 Localstorage에 저장된 값을 불러오지 못합니다. 정상적으로 Localstorage에 저장되는것으로 보여지는데 id값의 문제인지 date의 문제인지 아님 리스트렌더링 문제인지 아무리보아도 어떤부분에서 문제가 발생하는지 찾지 못하겠어서 질문남깁니다. https://codesandbox.io/s/currying-bash-b45zku?file=/src/App.js 코드샌드박스 링크 첨부합니다. (Edit페이지의 emotion이 깨지는 문제는 VScode에서는 발생하지 않는문제입니다. 무시해주세요) 정말 좋은강의 만들어 주셔서 감사합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 현영님. 에러는 해결을 한 상태인데 궁금한 점이 생겨 질문드립니다. const fs = require ( ' fs ' ); 백쪽에 fs모듈을 쓰면서 부터 시작됐는데, 강의 마지막 부분에 와서 프론트 서버를 새로고침하니 저런 에러가 발생했습니다. 스택오버플로우를 찾아보니, https://github.com/vercel/next.js/issues/7755 프론트쪽에 next.config.js라는 폴더를 생성한 후 module . exports = { webpack : ( config , { isServer } ) => { // Fixes npm packages that depend on `fs` module if ( ! isServer ) { config . node = { fs : 'empty' } } return config } } 이런식으로 넣어주라는데, 프론트 서버에서는 fs모듈에 관련된 작업을 한 게 없어 여러가지 테스트를 하다가, 프론트 폴더의 .eslintrc파일에 extends를 airbnb가 아닌 주석처리된 부분으로 바꾸니 또 해결이 되었습니다. (다른 프론트나 백쪽의 코드는 수정이 없었습니다) 1. 혹시 extends랑 상관이 있는건지? 아니면 그냥 일시적인 에러라고 생각을 하면 될까요? 2. 관련이 없다고 하면 혹시나 알 수 없는 에러가 나올 경우 현영님의 경우 어떻게 대처를 하시나요? (에러가 생길 때마다 기록을 해두는 편인데 생각보다 찾기가 힘든? 에러들이 종종 나오더라고요.. 짬의 차인지..?) ++ 어제 업데이트 하신 정보들 확인했습니다. 바로바로 업데이트 해주셔서 불편함이 없네요 감사합니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
리덕스로 로그인을 구현한 후 로그인 되지않는 문제가 생겼었습니다. dispatch 함수가 실행되지만 rootReducer에서 LOG_IN 부분이 실행이 안됐습니다(console.log로 확인) 그래서 useDispatch를 불러온 부분이 문제라고 생각해, react-redux버전을 강의에 맞게 7로 바꾸니 문제가 해결됐습니다. 왜 이런 문제가 발생한건가요..? 추가로 이 강의를 다 들은 후, react-redux를 8버전으로 올리고 싶으면 어디서 변경내역을 확인해야 하나요..?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 현재 프론트는 mysiteurl.site 라는 도메인으로 firebase 호스팅을 하고 있고 백엔드는 mysiteurl.shop 으로 다른 도메인으로 정할 예정인데요. 강의에선 프론트와 백엔드가 동일하게 nodebird.com 이 들어가 있고 route53에서 서로 다른 ip를 가르키게 했는데 제가 하려고 하는 방식에도 쿠키가 전달이 가능할까요? (nginx proxy_set_header 세팅은 동일하다는 가정)
해결됨
만들면서 배우는 리액트 : 기초
안녕하세요! Form 컴포넌트 내부를 작성해보다 실수로 아래와 같이 작성하였는데요 function handleFormSubmit(event) { event.preventDefault(); console.log('submit'); setCounter(100); console.log(counter); } 이런식으로 작성을 했더니 처음 submit 시에는 console 에 1이 찍히고 그 다음에 100이 찍혔습니다. 이 동작이 잘 이해가 되지 않는데 이유를 알 수 있을까요?!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 vscode 설정 관련 질문입니다. 지금 막 vscode를 설치했는데 js파일에서 오타 검사가 안되는데 그 이유를 알 수 있을까요???
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
에러 발생시점: faker.js 사용 후입니다 에러 최대한 제 손으로 잡으려 했는데 이번 거는 찾기가 조금 힘들고 감이 안오네요.. 처음 npm run을 했을 때 화면에는 정상적으로 더미데이터가 들어오면서 에러도 같이 뜨는 상태입니다(에러를 끄면 컨텐츠와 댓글 등등의 기능 동작은 되네요) 간단하게 힌트만 주셔도 직접 해결 해보겠습니다 감사합니다 코드: import {faker} from ' @faker-js/faker ' ; export const initialState = { mainPosts : [] , imagePaths : [] , addPostLoading : false , addPostDone : false , addPostFailure : null , removePostLoading : false , removePostDone : false , removePostFailure : null , addCommentLoading : false , addCommentDone : false , addCommentFailure : null } initialState . mainPosts = initialState . mainPosts . concat ( Array ( 20 ) . fill () . map ( () => ({ id: shortId . generate (), User:{ id: shortId . generate (), nickname: faker . company . companyName () }, content: faker . lorem . paragraph (), Images: [{ id: shortId . generate (), }], Comments:[{ User:{ id: shortId . generate (), nickname: faker . name . findName () }, content: faker . vehicle . vehicle () }] })) ) 에러: ++ 에러에 HYDRATE관련된 에러가 있어 우선은 리듀서폴더에 있는 index.js같이 첨부합니다 import { HYDRATE } from " next-redux-wrapper " import { combineReducers} from ' redux ' import user from ' ./user ' import post from ' ./post ' const rootReducer = combineReducers ( { index : ( state = {}, action ) => { switch ( action . type ) { case HYDRATE : console . log ( ' HYDRATE ' , action ) ; return { ... state , ... action . payload }; default: return state ; } }, user , post , } ); export default rootReducer ;
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
항상 개념이 헷갈리면 강사님이 하는 코드를 보러 옵니다 ㅋㅋ 근데 개인적으로 그래프 큐엘을 연습하다 궁금한것이 생겨 질문올립니다.저는 저기 날짜 년도 별, 월별로 관리를 하고 싶다고 했을때 어떻게 로직을 처리하는게 좋을까요 백엔드에서처리를 해야하나요 아니면 저렇게 날짜 데이터를 받아서 프론트에서 처리를 해야하는것이 효율적인가요..? 아직까지 실력이 부족해서 1월부터 12월까지 배열을 짜서 해야하나 막막합니다.. {content:"string", date:"2022-03-05"}예를 들어 이런 데이터가 엄청 많을때2022년 3월은 3월콘텐츠 4월은 4월컨텐츠를 리스트로 따로 처리하는 방법은 뭐가 있는지 고수의 팁좀 알려주십시오 ㅠㅠ 로직이 떠오르지가 않습니다 .. 수업과는 조금 떨어지는 질문 죄송합니다 ..
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
어제까지는 실행 잘됐었는데 주피터 노트북으로 실행하니까 이런식으로 뜹니다 ㅠㅠ http://127.0.0.1:8000/admin/instagram/comment/add/ 이랑 저번에 배웠던 python manage.py shell_plus --print-sql --ipython 로 실행시에는 이런식으로 잘나오는데 무슨이유인지를 모르겠네요. 혹시 더 올려야하는 정보들이 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강의를 따라가고 있는데 일기를 새로 작성하기를 해도 왜 일기 리스트에는 업데이트가 안 되는 지 궁금합니다. https://codesandbox.io/s/determined-cartwright-oep0ii?file=/public/index.html
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 3:45에 fetch then대신 try catch로 바꿔 봤는데 이렇게 사용하면 될까요? const getData = async () => { try { const response = await (await fetch(`https://jsonplaceholder.typicode.com/comments`)).json(); console.log(response); } catch (err) { console.log(err); } };
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 우선 좋은 강의 제공해주셔서 감사해요. 다름이 아니라, 강의 영상 28:47 부분과 같이 다이어리 리스트가 화면에 떠야 하는데 뜨지 않는 에러가 발생했고, 스스로 해결이 안 돼서 도움을 요청하려고 글을 쓰게 되었어요. 개발자도구 요소 탭에서도 리스트가 뜨지 않더라구요. 코드 마지막 부분 즉 export default DiaryList; 바로 앞 부분에 console.log(diaryList);도 입력해 보았는데 콘솔 창에는 undefined라고 출력이 되었어요. 코딩 공부가 처음이다보니 에러를 해결하기 위해 무엇부터 손을 대야 할 지도 모르겠고 질문조차 어떻게 해야 할 지 모르겠네요..ㅎㅎ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강의를 잘 듣고 있습니다. 6:49 부모 컴포넌트에서 데이터를 자식 컴포넌트로 이동하는데 만일 자식끼리 데이터를 useState로 해야 한다면 redux를 이용하면 될까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초님 nodebird에서 comment 관계에서는 user.hasmany(comment) post.hasmany(comment) 이렇게 관계를 설정하였는데 이는 아무 유저가 comment 작성이 가능하게 하기위해 이렇게 하였고 상품구매 리뷰에서는 상품을 구매한 사람에 한해서만 comment를 작성해야만 하니 comment는 user, product의 belongsToMany로 관계 설정을 해줘야 한다고 판단했는데 맞을까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 내용과 조금 떨어진 질문입니다. 크롬 개발자 툴에 컴포넌트를 보여주는것과 프롭스,훅스 등을 보여주는 창이 가로로 나뉘어져 보여지고 있는데, 이걸 윈터루드님처럼 위아래로 나뉘어지게 하려면 어떻게 해야하나요?
