묻고 답해요

데이터가 2번 호출되는 문제

미해결

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

동일하게 코드를 작성해보았는데 fetchPosts 함수가 2번 실행되어 포스트 리스트에 데이터가 2번 중복으로 들어갑니다. 강의에서도 19분 12초를 보니 2번 호출이 되는 것으로 보입니다. useEffect(() => { dispatch(fetchPosts()); }, [dispatch]); 이 부분이 2번 실행되는 문제 같아서 버튼 클릭할 때 fetchPosts 함수를 dispatch하는 방식으로 바꾸었더니 데이터가 1번만 요청됩니다. const handleClick = () => { dispatch(fetchPosts()); }; useEffect를 사용해서 페이지 접속 시 자동으로 데이터가 1번만 호출되게 하고 싶은데 어떻게 수정해야 할까요? useEffect(() => { dispatch(fetchPosts()); }, []); 이렇게 수정해도 2번 실행됩니다..ㅠㅠ

• react
• redux
• tdd
• typescript
• next.js
• 소프트웨어-테스트

yarn install 했는데 node_modules가 설치 안됐어요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이건 class 파일에서 작업한 내용이고 아래는 freeboard-frontend에서 작업한 내용입니다. 파일 지우고 똑같이 따라서 설치 했는데 안돼요.. 안에 내용도 다른 것 같아요 ㅠㅠ

• react
• node.js
• seo
• graphql
• next.js

디폴트 아바타 이미지 url에서 404 에러가 뜹니다.

미해결

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

https://www.gravatar.com/avatar?d=mp&f=y 에서 404 에러가 뜨네요

• react
• node.js
• postgresql
• docker
• typescript
• 클론코딩
• next.js

설치과정에서 불필요한 부분을 삭제하는데 저장을 하지 못한다고 떠요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

저장을 눌렀는데 위 화면이 뜨길래 sudo로 다시 시도를 눌렀습니다. 그런데 저장하지 못함 화면이 뜨고 다시 시도를 눌러도 저장이 되지 않습니다.

• react
• node.js
• seo
• graphql
• next.js

logoutUser 질문입니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이렇게 떠서 구글링, 유튜브를 보는데 안나와가지고 혹시 방법을 여쭤봐도 될까요 ㅠ

• react
• node.js
• seo
• graphql
• next.js

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챕터까지 복습해야할까요?

• react
• node.js
• seo
• graphql
• next.js

driver = webdriver.Chrome('chromedriver', options=chrome_options)

미해결

안녕하세요. 5강수업 실습 중 오류가 나와 문의 드립니다.

• python
• 웹크롤링

axios 설치 오류

미해결

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

안녕하세요! npm install axios --save 명령어로 axios를 설치하였는데 이런 문구가 나왔습니다. 혹시 설치가 안된것인가요? 그 이후에 수업을 진행하여 "이미지 배너 만들기" 수업을 듣고 코드를 작성 후 실행을 하니 영화에 정보가 나오지 않고 이런 오류들이 나옵니다. api 키도 사이트에서 잘 가져왔는데.. 혹시 axios 설치가 안되어서 나오는 오류 일까요?

• react
• redux
• tdd
• typescript
• next.js
• 소프트웨어-테스트

작업형2 모의문제1

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

train 데이터를 별도 분리안하고 범주형은 라벨 인코더로 스케일링하고나서 수치형데이터도 값이 큰건 minmaxscaler나 robustscaler로 적용하고 싶어서 개별 컬럼 선택해서 적용해보는데... 에러가 뜨는데 머가 문제인지 알수 있을까요? 수치형 범주형 개별로 스케일링 하고 싶으면 데이터를 분리했다가 다시 합쳐야 하는 걸까요? train['Total_Trans_Amt'] = scaler.fit_transform(train['Total_Trans_Amt']) test['Total_Trans_Amt']=scaler.transform(test['Total_Trans_Amt'])

• python
• 머신러닝
• 빅데이터
• pandas
• 빅데이터분석기사

react dev tool 하이라이트 관련 질문

해결됨

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

page를 이동하면 보여줄 page컴포넌트가 바뀌고 그 컴포넌트가 첫렌더링 되고 그 page의 요소들을 전부 그리는 것으로 알고 있는데요. 근데 react dev tool상으로 내부 요소에 하이라이트가 되지 않더라고요. react dev tool에서 보이지 않지만 실제로는 그려지는 것이 맞나요? 회원가입 페이지로 이동했을때의 하이라이트 사진입니다.

• react
• next.js

window.removeEventListener("scroll", () => {});

미해결

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

안녕하세요 강사님🙇‍♀️ 다름이 아니라, 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
• redux
• tdd
• typescript
• next.js
• 소프트웨어-테스트

npm i antd styled-components @ant-design/icons 를 하면 오류가 뜹니다

미해결

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

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
• redux
• node.js
• express
• next.js

npm run dev를 하고 localhost로 들어가면 연결을 거부했다고 뜹니다

미해결

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

npm run dev를 하면 아래와 같은 오류 메세지가 뜹니다 그리고 로컬호스트 들어가보면 사이트에 연결할 수 없음이 뜹니다. 도와주세요 ㅠㅠ > react-nodebird-front@1.0.0 dev > next Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db ready - started server on http://localhost:3000 node: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

• react
• redux
• node.js
• express
• next.js

이미지경로를 시퀄라이즈 모델에저장시 post모델에 배열로 저장하지 않고 따로 테이블을 만들어 관계형으로 저장하는이유

해결됨

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

1.이미지 경로는 이미지가 여러개일 경우 배열상태로 존재하는데 왜 post 모델에 배열로 저장하지 않고 따로 테이블을 만들어 관계를 짖는 이유를 알수있을까요 2.테이블에 배열데이터를 저장하려면 json으로 저장이 될꺼같은데 이 데이터를 text타입으로 바꿔서 저장해야하나요? 관계를 지어 테이블을 두개 만드는 방식과 배열데이터를 같은 테이블에 넣는 방식중 머가 더 좋은가요?

• react
• redux
• node.js
• express
• next.js

javascript 내장함수 리뷰 파트 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

let isStarted = false; let auth = () => { if(isStarted === false){ // 타이머가 작동중이 아닐때 타이머가 동작하게 함 isStarted = true document.getElementById("finish").disabled = false const token = String(Math.floor(Math.random() * 1000000)).padStart(6,"0") document.getElementById("target").innerText = token document.getElementById("target").style.color= "#" + token let time = 180 let timer timer = setInterval(function() { if(time >= 0 ){ let min = Math.floor( time / 60 ) let sec = String (time % 60).padStart(2,"0") // console.log(min + ":" + sec) document.getElementById("timer").innerText= min + ":" + sec time = time - 1 } else { document.getElementById("finish").disabled=true isStarted = false clearInterval(timer) } },1000) } else { // 타이머가 작동중일때 } } let isStarted를 False로 주고 auth함수 안에 if문에서 isStarted가 False 일때 1.isStarted에 아무것도 할당 안하면 else문으로 넘어가지않는다. 2.처음에 isStarted에 true를 할당하고 마지막에 false를 할당한다 if문 부분에 설명이 모든게 낯선 제 머리로는 이 로직이 이해가 안되네요 ㅠㅠ 왜 true를 줬는지 ture를 주면 어떤일이 일어나는지 아무것도 안줬을때는 어떤일이 일어나는지 조금 더 자세한 설명 부탁드립니닷. 확실히 javascript파트는 어렵습니다.ㅠㅠㅠ

• react
• node.js
• seo
• graphql
• next.js

createAsyncThunk로 일부러 지연시켜서 pending상태 만드는법 질문

미해결

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

const wait = (timeToDelay) => new Promise((resolve) => setTimeout(resolve, timeToDelay)); export const loginAction = createAsyncThunk(LOG_IN, async (data) => { await wait(1000); return data; }); export const logoutAction = createAsyncThunk(LOG_OUT, async () => { return; }); const userSlice = createSlice({ name: "user", initialState, // exraReducers 그냥 reducer는 user/login 이런식으로 액션 이름을 적어야 하지만 extraReducers를 사용하면 login으로 줄일 수 있다 extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.user, })) .addCase(loginAction.pending, (state) => { state.isLoggingIn = true; state.isLoggedIn = false; }) .addCase(loginAction.fulfilled, (state, action) => { state.isLoggingIn = false; state.isLoggedIn = true; state.user = dummyUser; state.loginData = action.data; }) .addCase(loginAction.rejected, (state) => { state.isLoggingIn = true; }) .addCase(logoutAction.pending, (state) => { state.isLoggingOut = true; state.isLoggedIn = true; }) .addCase(logoutAction.fulfilled, (state) => { state.isLoggingOut = false; state.isLoggedIn = false; state.user = null; }) .addCase(logoutAction.rejected, (state) => { state.isLoggingOut = false; }) .addCase(signUp.fulfilled, (state, action) => { state.signUpData = action.data; }) .addDefaultCase((state) => state), }); 제가 redux toolkit으로 제로초님이 만드시는 코드를 만들고 있는데 createAsyncThunk로 일부러 지연 시켜서 pending상태로 만들려고 했는데 이렇게 코드를 짜니까 pending이 제대로 동작을 안하고 로딩 아이콘이 제대로 보이지 않습니다 제가 추가적으로 실험을 해보았는데 state.isLoggingIn을 pending과 fulfilled두개 모두 state.isLoggingIn = true;로하고 동작을 시켜도 로그인 아이콘이 로딩이 안됩니다 하지만 로그아웃은 모두 true로 하니까 로딩이 보입니다... 그래서 액션을 reducer를 작성할때 뭔가를 실수한것 같습니다 무었인지 알 수 있을까요? 그리고 saga의 delay처럼 createAsyncThunk의 지연시켜서 pending상태가 나오는 방법을 알고싶습니다

• react
• redux
• node.js
• express
• next.js

useParams를 이용한 영화 상세 페이지 구현하기

미해결

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

useParams를 이용한 영화 상세 페이지 구현하기에서 가져올 useParams에 파라미터 값이 movieId인 것을 어떻게 확인할 수 있을까요 ?

• react
• redux
• tdd
• typescript
• next.js
• 소프트웨어-테스트

섹션35 13-01 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

export default function LibraryIconPage(): JSX.Element { const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) } return ( <div id="삭제게시글id" onClick={onClickDelete}> <MyIcon /> </div> ) } 강사님께서 상위에 div를 만들고 event.currentTarget.id로 값을 받아오라고 설명해주셨는데, svg 상위 태그인 span에 id가 있으니까 MyIcon에 id,onClick 넣고 event.currentTarget.id로 span의 id값을 가져오는 건 잘못된 것인지 궁금합니다.

• react
• node.js
• seo
• graphql
• next.js

swr 캐싱

미해결

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

다른분들 질문 보다보니 부모컴포넌트와 자식컴포넌트가 동일한 key값으로 서버에 요청을 보내면 한번만 요청을 보내고 부모컴포넌트에서 캐싱된 값을 자식컴포넌트가 사용한다고 봤는데 공식 홈페이지 예제 보니 특정 페이지 내부에서 화면에 렌더링되는 모든 컴포넌트에서는 동일한 key값으로 서버에 요청하는경우에 하나만 요청되고 모두 캐싱되어서 같은화면?내에서 렌더링되는 컴포넌트들은 값을 공유하는것같은데 이도 맞을까요? nextjs _app Custom App component 에서 요청하는 swr key는 전역적으로 캐싱이 안되나요? _app에서 서버로 사용자 정보를 요청하도록 코드를 작성해놨고 각 페이지 마다도 동일한 key값으로 사용자 정보를 서버에 요청하도록 작성해두었습니다. 페이지를 이동하더라도 app에서 사용한 key값과 각 페이지에서 서버로 요청하는 key값이 동일하니 캐싱되어 서버로 사용자 정보를 재요청하지 않고 캐싱된 값을 사용해야된다고 생각되는데 계속해서 서버로 사용자 정보를 재요청을 보냅니다. 왜 그런것일까요..?

• react
• redux
• node.js
• express
• next.js

싸이월드 +

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

home.html이나 game.html은 css가 정상적으로 적용되는데 jukebox.html만 css가 적용되지않습니다 왜그런가욤.. jukebox.html: <!DOCTYPE html> <html lang="ko"> <head> <title>JUKEBOX</title> <link href="./styles/jukebox.css"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="wrpper__body"> <div class="wrapper__title"> <div class="title">추억의 BGM</div> <div class="subtitle">TODAY CHOICE</div> </div> </div> </div> </body> </html> jukebox.css: *{ box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; }

• react
• node.js
• seo
• graphql
• next.js