묻고 답해요

useEffect의 deps에 함수가 들어가는 의미, 그리고 뒷정리 함수에 대한 질문

미해결

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

안녕하세요, 강의가 저에게 많은 도움이 되고 있습니다😄 강의를 수강하는 도중 몇가지 궁금한 것이 있어 질문 드립니다. 1. useEffect에 변수값(useState 포함)이 들어가는 것으로 알고 있었는데, 함수가 들어가는 것은 어떤 의미인지 궁금합니다. 함수가 변경될때마다 useEffect가 실행된다라는 뜻인 것 같은데, 함수가 변경된다는 뜻은 무엇일까요? (deps에 들어가는 함수의 인자들이 변경된다는 뜻은 아닌 것 같아서요...) 2. 뒷정리 함수를 사용하는 이유를 확실하게 알고 싶습니다. 현재 사용된 뒷정리 함수를 return (뒷정리함수) 에 두지 않고, 그냥 useEffect의 이펙트 부분에 함수를 실행하면 안되는 것인가요? 제 생각에서는 그냥 본 이펙트를 실행하기 직전에 observer.disconnect() 를 실행시켜도 비슷한 결과를 가져오지 않을까라는 막연한 생각이 들어서요 . 그래서 윗 부분의 두가지 궁금증을 해결하고자 질문을 남깁니다. 감사합니다.

• react
• lambda
• useEffect
• 뒷정리함수
• mongodb
• react
• nodejs
• express
• aws

안녕하세요 수업 중에 막히는 부분이 있어서 질문 남겨요

해결됨

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

자꾸 이런 오류가 떠서 수업 진행이 안되서 남깁니다. 확인하려 firebase.auth()를 콘솔로 찍어보니 이런 오류가 또 뜨더라고요... auth를 import 제대로 했고, 노드 모듈을 삭제하고 다시 실행해보라는 말도 있어서 해봤는데 똑같네요ㅠㅠ 구글링을 해도 별 소득이 없네요... 질 좋은 수업 열심히 듣고 있습니다!! 바쁘시지만 답변해주시면 더 열심히 하겠습니다!!

• react
• 웹앱
• frontend
• firebase
• react

게시글 작성을 안해도 이미지가 서버에 저장되는건가요?

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

사진 업로드만 해도 서버에 저장하는거면 사용자가 파일 업로드를 하고 막상 게시글 작성을 취소하거나 오류로 인해 작성 실패하더라도 이미지 데이터는 다 서버에 저장되는건가요??

• multer
• mongodb
• react
• nodejs
• node
• redux
• 웹앱
• react

빌드 에러 질문입니다.

미해결

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

npm run build하면 이런 에러가뜨는데 도통ㅇ 머가문젠지 모르겠습니다..ㅠㅠ stringify 를 쓰면 나는 에러같은데 저는 안쓰고있는데 이러네요..

• redux
• express
• nodejs
• react
• Next.js

onupdate 매개변수

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

onupdate 함수의 매개변수를 (id, text) 로 넣어주었더니! 수정 버튼을 클릭 했을 때 내용이 바뀌지 않더라구요 그래서 혹시나해서 매개변수를 (text, id) 로 변경했더니 수정 기능이 제대로 작동 했습니다. 매개변수 순서가 바뀌면 문제가 있는걸까요??

• rest-api
• graphql
• react

질문드립니다

미해결

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

안녕하세요. 우선 강의 너무 잘 듣고 있습니다. password . current = watch ( " Password " ) ; 강의를 통해 위 방법을 익히기 전엔 혼자서 onChange를 통해 ref.current값을 바꾸려고 시도하였는데요 input에 onChange를 걸어줘도 Change이벤트가 작동을 안하더라구요.. react hook form 공식 문서를 뒤져봐도 위 방법으로만 사용하라는 말은 따로 없고 태그에 onChange이벤트를 사용하는 예제도 있는데 왜 이러는걸까요?? 단순히 버그인지 뭐가 잘못된건지 모르겠습니다 ㅜㅜ

• react
• firebase
• 웹앱

안녕하세요 궁금한점이요!!

해결됨

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?

• babel
• Socket.io
• 웹팩
• typescript
• react
• 클론코딩

Cannot read property 'dispatch' of undefined

미해결

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

export const getServerSideProps = wrapper . getServerSideProps ( async ( context ) => { context . store . dispatch ({ type : LOAD_USER_REQUEST , }) context . sotre . dispatch ({ type : LOAD_POSTS_REQUEST , }) context . store . dispatch ( END ) await context . sotre . sagaTask . toPromise () }) 위 코드를 실행했을 때 dispatch of undefined라는 오류가 뜹니다. configureStore.js 에서 store와 dispatch의 log를 찍어보면 잘 나오는데 왜 저런 오류가 뜨는걸까요? redux의 전은 6이에요.

• Next.js
• express
• nodejs
• redux
• react

해쉬태그 등록 오류

미해결

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

이번 강의에 해쉬 태그 등록을 위한 코드들 const hashtags = ~~~ 부분과 if(hashtags) { } 요거를 추가하면은 500에러가 떠요. 왜 이럴까요? const express = require ( 'express' ) const multer = require ( 'multer' ) const path = require ( 'path' ) const fs = require ( 'fs' ) const { Post , Image , Comment , User , Hashtag } = require ( '../models' ) const { isLoggedIn } = require ( './middlewares' ) const router = express . Router () try { fs . accessSync ( 'uploads' ) } catch ( error ) { console . log ( 'uploads 폴더가 없으므로 생성합니다.' ) fs . mkdirSync ( 'uploads' ) } // multer 셋팅 const upload = multer ({ storage : multer . diskStorage ({ destination ( req , file , done ) { done ( null , 'uploads' ) }, filename ( req , file , done ) { const ext = path . extname ( file . originalname ) // 확장자 추출(.png) const basename = path . basename ( file . originalname , ext ) // 이름 추출(제로초) done ( null , basename + '_' + new Date (). getTime () + ext ) // 이름_1518123131.png }, }), limits : { fileSize : 20 * 1024 * 1024 }, // 20MB }) // 게시글 작성 router . post ( '/' , isLoggedIn , upload . none (), async ( req , res , next ) => { try { // const hashtags = req.body.content.math(/#[^\s#]+/g) const post = await Post . create ({ content : req . body . content , UserId : req . user . id , }) // if(hashtags) { // const result = await Promise.all(hashtags.map((tag) => Hashtag.findOrCreate({ // where: { name: tag.slice(1).toLowerCase() }, // }))); // 결과 [[노드, true], [리액트, true]] // await post.addHashtags(result.map((v) => v[0])); // } if ( req . body . image ) { if ( Array . isArray ( req . body . image )) { // 이미지 여러개면 image: [경로.png, 경로.png] const images = await Promise . all ( req . body . image . map (( image ) => Image . create ({ src : image }))) await post . addImages ( images ) } else { // 이미지 하나만 올리면 image: 경로.png const image = await Image . create ({ src : req . body . image }) await post . addImages ( image ) } } const fullPost = await Post . findOne ({ where : { id : post . id }, include : [{ model : Image , }, { model : Comment , include : [{ model : User , // 댓글 작성자 attributes : [ 'id' , 'nickname' ], }] }, { model : User , // 게시글 작성자 attributes : [ 'id' , 'nickname' ], }, { model : User , // 좋아요 누른 사람 as : 'Likers' , attributes : [ 'id' ], }] }) res . status ( 201 ). json ( fullPost ) } catch ( error ) { console . error ( error ) next ( error ) } }) router . post ( '/:postId/comment' , isLoggedIn , async ( req , res , next ) => { try { const post = await Post . findOne ({ where : { id : req . params . postId } }) if ( ! post ) { // 게시글 존재하는지 확인 return res . status ( 403 ). send ( '존재하지 않는 게시글입니다.' ) } const comment = await Comment . create ({ content : req . body . content , PostId : parseInt ( req . params . postId ), UserId : req . user . id , }) const fullComment = await Comment . findOne ({ where : { id : comment . id }, include : [{ model : User , attributes : [ 'id' , 'nickname' ] }] }) res . status ( 201 ). json ( fullComment ) } catch ( error ) { console . error ( error ) next ( error ) } }) // 좋아요 누르기 router . patch ( '/:postId/like' , isLoggedIn , async ( req , res , next ) => { // PATCH /post/1/like try { const post = await Post . findOne ({ where : { id : req . params . postId }}) if ( ! post ) { return res . status ( 403 ). send ( '게시글이 존재하지 않습니다.' ) } await post . addLikers ( req . user . id ) res . json ({ PostId : post . id , UserId : req . user . id }) } catch ( error ) { console . error ( error ) next ( error ) } }) // 좋아요 취소 router . delete ( '/:postId/like' , isLoggedIn , async ( req , res , next ) => { // DELETE /post/1/like try { const post = await Post . findOne ({ where : { id : req . params . postId }}) if ( ! post ) { return res . status ( 403 ). send ( '게시글이 존재하지 않습니다.' ) } await post . removeLikers ( req . user . id ) res . json ({ PostId : post . id , UserId : req . user . id }) } catch ( error ) { console . error ( error ) next ( error ) } }) // 게시글 삭제 router . delete ( '/:postId' , isLoggedIn , async ( req , res , next ) => { // DELETE /post/10 try { await Post . destroy ({ where : { id : req . params . postId , UserId : req . user . id , }, }) res . status ( 200 ). json ({ PostId : parseInt ( req . params . postId , 10 ) }) } catch ( error ) { console . error ( error ) next ( error ) } }) // 이미지 업로드 router . post ( '/images' , isLoggedIn , upload . array ( 'image' ), ( req , res , next ) => { console . log ( req . files ) res . json ( req . files . map (( v ) => v . filename )) }) module . exports = router

• redux
• react
• express
• nodejs
• Next.js

yarn add를 했을 때 node_modules가 2개가 한꺼번에 생성이 되었는데 파일 경로가 잘못되어있었습니다!

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

해결했습니다!

• react
• rest-api
• graphql

게시글 삭제 후 리렌더링 문제

해결됨

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

게시글 삭제 직후 db에서는 바로 삭제가 되는데 브라우저에서 redux devtools로 state를 보면 mainPosts에 반영이 안되어있어요. 새로고침을 해야만 게시글이 사라져요. 어디에 문제가 있는건지 감이 안오네요

• react
• redux
• express
• nodejs
• Next.js

mySQL workbench

해결됨

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

db는 생성했는데 영상에 나오는 것처럼 mySQL workbench에서 생성된 데이터베이스를 어떻게 띄우는지 모르겠어요 ㅜ

• mysql
• redux
• nodejs
• react
• express
• Next.js

test에 질문이 있습니다

해결됨

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

현재 App.test.js에는 test()안에 실행중인 코드가 없는 것 같고 test도 react에서만 진행하는데 테스트가 되는게 있나요? 테스트를 하여 성공을 하더라도 무엇을 기준으로 성공한건지 잘 모르겠습니다.. 그리고 백엔드 프론트 DB 등등 다양한 컨테이너가 존재하는데 테스트는 리액트만 진행하네요 이게 도커 환경에서 CI로 배포하는 과정까지 큰 틀에 집중하기 위해 test부분 내용은 의도적으로 생략하고 별다른 동작을 안해도 절차를 보여주기 위해 넣은걸로 보면 될까요??

• docker
• aws
• travis
• test
• github
• docker
• react
• travis-ci
• cicd
• 데이터 엔지니어링

post

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

post 형식의 body인데 어떻게 name부터 imgUrl까지 destructuring할 수 있나요??정보가 입력되기 전인데 왜 그런지 궁금합니다..그리고 create({name:name,description:description..})이게 무슨 뜻인지 모르겠어요 key가 name,value가 name이런거를 만들라는건데 잘 이해가 가지 않습니다..ㅜ app . post ( " /products " , ( req , res ) => { const body = req . body ; const { name , description , price , seller , imageUrl } = body ; models . Product . create ( { name , description , price , seller , imageUrl , } ) . then ( ( result ) => { console . log ( " 상품 생성 결과 : " , result ) ; res . send ( { result , } ) ; } )

• react-native
• 머신러닝 배워볼래요?
• tensorflow
• HTML/CSS
• nodejs
• react
• javascript
• express

리액트 화면 잘림

미해결

세로가 길면 화면이 잘리는 현상이 있는데 어떻게 해결해야 될까요?

• 리액트
• react
• reactjs

실무에서 styled-components 업무

미해결

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

제로초님 궁금한게있어서 문의드립니다. styled-components 사용해서 react를 개발하려면 기존에 디자이너가 디자인을 해주고 그걸 마크업(퍼블리셔)가 html과 css파일로 주는 방식으로 업무를 진행하고있는데, styled-components를 이용하는 회사들은 마크업 업무를 프론트 개발자들이 다 하게 되는건가요? 실무에서는 업무롤이 어떻게되어서 진행되는지 궁금합니다.

• redux
• react
• express
• nodejs
• Next.js

강의 잘 듣고 있습니다.

미해결

대세는 쿠버네티스 (Helm편)

먼저 올려주신 대세는 쿠버네티스를 수강하고 현재 이 헬름 강의를 수강하고 있습니다. 저는 react(javascript) 나 spring boot(java) 로 web 개발에 관심이 많습니다. 가능하시면 실제 배포를 예로 구성해주시면 실제 실무환경과 가깝게 구성하는 연습을 할수 있을것 같습니다. 간단하게 실제 어플리케이션을 배포하는 환경을 구성해 보아주시면 안될까요 ^^ 부탁드립니다.

• react
• springboot
• kubernetes
• deploy

클린업에 대해 궁금한 점이 있습니다!

미해결

실전 리액트 프로그래밍

예제를 보면 useEffect를 사용해서 등록된 이벤트 리스너 addEventListener(), removeEventListener() 를 클린업 해주는데, 이렇게 처리하는 이유가 궁금합니다. 또 리엑트에서는 왜 클린업을 해줘야 하는건가요?

• react
• redux
• react

analyze 질문이여

해결됨

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

저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??

• nodejs
• redux
• express
• react
• Next.js

map undefined 오류 질문드립니다

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

코드를 혼자 짜보려고 하는 중에 type error:cannot read property 'map' of undefined가 뜹니다. 서버쪽은 postman연동했을때 잘 뜨는데 논리 하자가 있는 것 같습니다..ㅠㅠ뭐가 문제일까요 main/index.js import " ./index.css "; import axios from " axios "; import React from " react "; import { API_URL } from " ../config/config.js "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( `${ API_URL } /products ` ) . then ( function ( result ) { console . log ( " RESULT값: " , result ) ; const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . log ( " error발생 " ) ; } ) ; }, []) ; return ( < div > < div id = " banner " > < img src = " images/banners/banner1.png " /> </ div > < h1 > 판매되는 상품들 </ h1 > < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " > < div > < div className = " product-contents " > < span className = " product-name " >{ product . name }</ span > < span className = " product-price " >{ product . price } 원 </ span > < div classNmae = " product-footer " > < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " /> < span >{ product . seller }</ span > </ div > </ div > </ div > </ div > </ div > ) ; } ) } </ div > </ div > ) ; } ####App.js export default MainPage ; import " ./App.css "; import MainPageComponent from " ./main "; function App () { return < MainPageComponent /> ; } export default App ; ##server const express = require ( " express " ) ; const cors = require ( " cors " ) ; const app = express () ; const port = 7070 ; const models = require ( " ./models " ) ; app . use ( express . json ()) ; app . use ( cors ()) ; app . get ( " /products " , ( req , res ) => { models . Product . findAll ( { attributes : [ " id " , " name " , " price " , " imageUrl " , " seller " , " createdAt " ] , } ) . then ( ( result ) => { console . log ( " RESULT값 : " , result ) ; res . send ( { product : result , } ) ; } ) . catch ( ( error ) => { console . error ( " ERROR가 발생하였습니다: " , error ) ; } ) ; } ) ; app . listen (port , () => { console . log ( " 그랩 마켓의 서버가 돌아가고 있습니다. " ) ; models . sequelize . sync () . then ( () => { console . log ( " ✓ DB 연결 성공 " ) ; } ) . catch ( function ( err ) { console . error ( err ) ; console . log ( " ✗ DB 연결 에러 " ) ; process . exit () ; } ) ; } ) ;

• 머신러닝 배워볼래요?
• react-native
• javascript
• react
• HTML/CSS
• express
• nodejs
• tensorflow