묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
refreshToken 질문입니다.
강사님 refreshToken 이해가 되지않아서 인데요.제가 52강의 까지 보고 했는데요,이사진은 기존토큰이 없을때 뜨는 restore try~ catch문에서 나오는 Error 입니다. 저는 refreshToken을 localStorage에 값이 있을때로 했거든여, 제가 구현하고 싶은거는사용자가 해당 시간때가 끝나면 알아서 자동으로 해주는걸로 했는데 이렇게 해도 되는지여쭤봅니다... 강의에서 볼때는 버튼을 누르고 새롭게 갱신하는걸로 해가지고요뭔가 로그인, 로그아웃 새로고침 여기서 막히네여 ㅠ,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
spread 연산자 질문
let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const copy = JSON.stringify(origin); const deepCopy = JSON.parse(copy);강의에서 깊은 복사할 때 위 코드처럼 JSON.stringify(), JSON.parse()를 사용해서 복사를 해주셨는데 아래의 코드처럼 복사해주어도 문제가 없을까요? 물론 객체 안에 객체들이 많아진다면 JSON 명령어를 사용해서 복사해주는 것이 좋다고 생각합니다! 하지만 예시처럼 객체가 하나거나 적은 경우에 저는 개인적으로 아래처럼 해주는 게 편한 것 같아서 아래처럼 복사해줘도 괜찮은건지 질문드립니다!let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const myCopy = {...origin, favoriteFood: {...origin.favoriteFood}}
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
26-01 강의 : 아폴로 캐시 질문입니다.
아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다. 포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요.두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다.강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요.캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
ReferenceError: reducer is not define 오류
configureStore.js 파일을 강좌와 똑같이 진행하였는데해당오류가 발생합니다. 강의를 계속 진행하면 해결될까요?configure.js _app.jspackage.json
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
dispatch로 데이터를 넘겨주는 과정 질문
제가 redux toolkit을 이용해서 제로초님 강의를 따라가고 있는데 dispatch로 데이터를 넘겨주는 과정중에 이해가 잘 안되는 부분이 있어서 질문드립니다로그인을 하는 과정인데LoginForm.js const onSubmitForm = useCallback(() => { console.log(email, password); dispatch( loginAction({ email, password, }) ); }, [email, password]);user.js export const loginAction = createAsyncThunk(LOG_IN, async (data) => { await wait(1000); return data; }); .... .addCase(loginAction.fulfilled, (state, action) => { state.logInLoading = false; state.logInDone = true; state.user = dummyUser; state.loginData = action.data; })이렇게 두부분의 코드로 아래의 action 과정이 일어나는데 LoginForm.js에서 dispatch로 email, password를 넘겨주었는데 딱히 user.js에서 이를 처리하는 코드는 보이지 않습니다 redux devtools에서는 payload에 email과 password를 받은것은 확인이 되는데 말입니다그리고 저는 initialState에 email과 password를 설정하지 않았습니다export const initialState = { logInLoading: false, // 로그인 시도중 logInError: null, // 로그인 에러 logInDone: false, // 로그인 상태 체크 logOutLoading: false, //로그아웃 시도중 logOutError: null, // 로그아웃 에러 signUpLoading: false, // 회원가입 시도중 signUpDone: false, // 회원가입 상태 체크 signUpError: null, // 회원가입 에러 user: null, signUpData: {}, loginData: {}, }; 이렇게 되면 payload에 들어있는 email과 password는 어디에 어떻게 저장이 되는걸로 생각을 해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 프로젝트 생성
리액트 npx create-react-app [이름]으로 해서 프로젝트 생성해서 보면 index.html과 app.js를 같이 작성하는지 아니면 app.js만 하는지. 알고 싶습니다 src에 컴포넌트 폴더를 생성하면 파일 종류가 어떻게 되어 있는지 알고 싶습니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
부록 도포자료가 다른 내용이 올라와 있는것 같아요
도포자료 부록 버전 클릭하니까, https://drive.google.com/file/d/1uvbiIXHVC3QIYBD1XOFRdiHiDQL57-G8/viewnextjs와 typescript 내용 한페이지만 있는데 부록 관련 도포자료 pdf가 어디 있나요~?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn 이 설치가 안되요
yarn 설치가 안됩니다 npm 으로는 작동이 되는데 yarn 이면 아무것도 안되네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
async 함수 중복선언 문제 관련
안녕하세요. 리액트 04-01-rest-get강의를 보다가 export default function RestGetPage() { function onClickAsync() { const result = axios.get("https://koreanjson.com/posts/1"); console.log(result); //Promise } // async function onClickSync() { // const result = await axios.get("https://koreanjson.com/posts/1"); => 함수 중복 선언 문제 // console.log(result); //제대로 된 결과 // }아랫부분의 주석 코드에서 함수 중복 선언 문제가 발생할 수 있으니 화살표 함수를 쓰라고 하셨는데요.함수 중복 선언의 예제를 설명하시는건 이해가 됐는데왜 저 코드가 함수 중복 선언인지 이해가 안가요.위에 함수랑 주석된 함수 이름은 다른데왜 중복선언인가요?챗지피티한테 물어봤더니 자기도 모르겠대요ㅠ그리고 여태 들었던 강의들보다 강사님 강의가 퀄리티가 너무 좋은 거 같아요
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
데이터가 2번 호출되는 문제
동일하게 코드를 작성해보았는데 fetchPosts 함수가 2번 실행되어 포스트 리스트에 데이터가 2번 중복으로 들어갑니다.강의에서도 19분 12초를 보니 2번 호출이 되는 것으로 보입니다. useEffect(() => { dispatch(fetchPosts()); }, [dispatch]);이 부분이 2번 실행되는 문제 같아서 버튼 클릭할 때 fetchPosts 함수를 dispatch하는 방식으로 바꾸었더니 데이터가 1번만 요청됩니다. const handleClick = () => { dispatch(fetchPosts()); };useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데 어떻게 수정해야 할까요? useEffect(() => { dispatch(fetchPosts()); }, []);이렇게 수정해도 2번 실행됩니다..ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn install 했는데 node_modules가 설치 안됐어요
이건 class 파일에서 작업한 내용이고 아래는 freeboard-frontend에서 작업한 내용입니다. 파일 지우고 똑같이 따라서 설치 했는데 안돼요..안에 내용도 다른 것 같아요 ㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
디폴트 아바타 이미지 url에서 404 에러가 뜹니다.
https://www.gravatar.com/avatar?d=mp&f=y 에서 404 에러가 뜨네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
설치과정에서 불필요한 부분을 삭제하는데 저장을 하지 못한다고 떠요
저장을 눌렀는데 위 화면이 뜨길래 sudo로 다시 시도를 눌렀습니다. 그런데 저장하지 못함 화면이 뜨고 다시 시도를 눌러도 저장이 되지 않습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
logoutUser 질문입니다
이렇게 떠서 구글링, 유튜브를 보는데 안나와가지고 혹시 방법을 여쭤봐도 될까요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
31 댓글 등록 삭제 포트폴리오 문제
안녕하세요 ! 포트폴리오 댓글,등록 삭제 과제 풀고있 었는데요 삭제 만드는중에 왜 포폴용 서버 문서에는 저렇게 리턴값을 명시해줘야한다고 돼있는데 코드는export const DELETE_BOARD_COMMENT = gql` mutation deleteBoardComment($password: String, $boardCommentId: ID!) { deleteBoardComment(password: $password, boardCommentId: $boardCommentId) } `; 왜 이렇게 작성해야하는건가요? 풀다보니 저렇게 해야 댓글삭제할때 오류가 나지않더라구요처음에는export const DELETE_BOARD_COMMENT = gql` mutation deleteBoardComment($password: String, $boardCommentId: ID!) { deleteBoardComment(password: $password, boardCommentId: $boardCommentId) { ID } } `;이렇게 작성했는데 오류가 떠서 혹시나 삭제해보니 오류가 나지 않아서 궁금합니다. 점점 복잡해지네요 ㅠㅠ일단 이해는 다 못하지만 댓글삭제, 등록 기능을 구현하긴했는데 다음챕터로 넘어가도될까요 ? 아니면 처음부터 다시 31챕터까지 복습해야할까요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
axios 설치 오류
안녕하세요!npm install axios --save 명령어로 axios를 설치하였는데이런 문구가 나왔습니다. 혹시 설치가 안된것인가요? 그 이후에 수업을 진행하여"이미지 배너 만들기" 수업을 듣고 코드를작성 후 실행을 하니 영화에 정보가 나오지 않고이런 오류들이 나옵니다.api 키도 사이트에서 잘 가져왔는데.. 혹시 axios 설치가 안되어서 나오는 오류 일까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
react dev tool 하이라이트 관련 질문
page를 이동하면 보여줄 page컴포넌트가 바뀌고 그 컴포넌트가 첫렌더링 되고그 page의 요소들을 전부 그리는 것으로 알고 있는데요.근데 react dev tool상으로 내부 요소에 하이라이트가 되지 않더라고요.react dev tool에서 보이지 않지만 실제로는 그려지는 것이 맞나요? 회원가입 페이지로 이동했을때의 하이라이트 사진입니다.
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
window.removeEventListener("scroll", () => {});
안녕하세요 강사님🙇♀️다름이 아니라, removeEventListener와 관련되어 질문이 있습니다. 1. window.removeEventListener("scroll", () => {});에서 함수 부분에 아무것도 적어주지 않았는데, 빈 함수를 전달한다면 어떤걸 의미하는건가요? addEventListener과 같은 함수를 적어줘야 하지 않나요?처음 리액트를 공부하는 거라, 많이 부족합니다ㅠㅠ 바쁘시겠지만 도움주시면 감사하겠습니다!(아래는 참고자료 겸 전체코드 첨부드립니다.)import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import "./Nav.css"; export default function Nav() { const [show, setShow] = useState(false); const [searchValue, setSearchValue] = useState(""); const navigate = useNavigate(); useEffect(() => { window.addEventListener("scroll", () => { console.log("window.scrollY", window.scrollY); if (window.scrollY > 50) { setShow(true); } else { setShow(false); } }); return () => { window.removeEventListener("scroll", () => {}); }; }, []); const handleChange = (e) => { setSearchValue(e.target.value); navigate(`/search?q=${e.target.value}`); }; return ( <nav className={`nav ${show && "nav__black"} `}> <img alt="Netflix logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/170px-Netflix_2015_logo.svg.png" className="nav__logo" onClick={() => (window.location.href = "/")} /> <input value={searchValue} onChange={handleChange} className="nav__input" type="text" placeholder="영화를 검색해주세요." /> <img alt="User logged" src="https://occ-0-4796-988.1.nflxso.net/dnm/api/v6/K6hjPJd6cR6FpVELC5Pd6ovHRSk/AAAABbme8JMz4rEKFJhtzpOKWFJ_6qX-0y5wwWyYvBhWS0VKFLa289dZ5zvRBggmFVWVPL2AAYE8xevD4jjLZjWumNo.png?r=a41" className="nav__avatar" /> </nav> ); }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npm i antd styled-components @ant-design/icons 를 하면 오류가 뜹니다
npm i antd styled-components @ant-design/icons터미널에 이 코드를 치면 아래와 같은 오류 메세지가 뜹니다.도와주세요ㅠㅠnpm ERR! Cannot read properties of null (reading 'edgesOut')npm ERR! A complete log of this run can be found in:npm ERR! /Users/hyeonyeongjeong/.npm/_logs/2023-06-23T07_52_15_483Z-debug-0.log
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run dev를 하고 localhost로 들어가면 연결을 거부했다고 뜹니다
npm run dev를 하면 아래와 같은 오류 메세지가 뜹니다그리고 로컬호스트 들어가보면 사이트에 연결할 수 없음이 뜹니다.도와주세요 ㅠㅠ > react-nodebird-front@1.0.0 dev> nextBrowserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-dbready - started server on http://localhost:3000node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'}Node.js v18.16.1