묻고 답해요

redux-saga 의 흐름.

미해결

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

질문1. 리덕스사가에 액션이 전달되는 과정 dispatch({ type: LOG_IN_REQUEST, data: { email, password }, }); 위와 같이 로그인 버튼을 눌렀을때 인자로 전달된 액션을 dispatch 하게 되는데. function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } 이후 사가에서 LOG_IN REQUEST 에관한 액션이 왔을떄 login 함수가 실행된다는 흐름은 이해를 했습니다. 하지만 액션객체의 type 속성인 LOG_IN_REQUEST 가 어떻게 위에 takeLatest 의 첫번째 인자로 인식이되어 login 함수가 실행되는지 직관적으로 이해가 가지않습니다. 이미 사가 라이브러이에서 정해진 규칙같은 건가요 ? 액션을 디스패치 할때 {type: `액션타입`} 형태여야만 takeLatest('액션타입') 이 인식이되는지 궁금합니다. 질문2. yield function* logIn(action) { try { console.log('saga logIn'); // const result = yield call(logInAPI); yield delay(1000); => 멈춤? yield put({ => 멈춤? type: LOG_IN_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } yield 는 중단점 역활을 한다고 이해했습니다. 그럼 위에 takeLatest 의 두번째인자로 위 login 함수가 실행될때 첫번째 yield delay(1000) 이 실행되고 멈추는게아니라 계속에서 아래 yelid put 쪽을 실행되는부분이 이해가 잘 가지않습니다.! 영상 몇번 돌려보고 찾아도 봤는데 스스로 해결하지 못해 질문 드립니다 ㅜㅠ..

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

axios.defaults.baseURL 지정 후, 다른 서버에 요청을 보내려면?

해결됨

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

/front/sagas/index.js 에서 axios . defaults . baseURL = 'http://localhost:3065' ; axios . defaults . withCredentials = true ; 이렇게 공통으로 지정을 해주는데, 만약에 예외적으로 다른 URL을 사용하고 싶으면 어떻게 하나요? function loadPostsAPI ( data ) { return axios . get ( 'http://naver.com/test' , data ); } 이런식으로 개별적으로 URL 넣어주면 될까요? 아니면 애초에 공통URL을 지정해주지 말고 각자 넣어줘야 하는걸까요? 공통URL과 더불어 withCredentials 값도 각자 넣으려면 어떻게 해야하는지 궁금합니다!

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

Route.get() requires a callback function but got a [object Object]

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

인자를 객체로 넘겼다고 에러가 뜨는데, auth를 구현하는 app.get에서 자꾸 문제가 있다고 합니다. 오타는 도저히 못찾겠는데,, 문제가 무엇일까요 const express = require ( 'express' ) const app = express () const port = 5000 const bodyParser = require ( 'body-parser' ); const { User } = require ( "./models/User" ); const config = require ( './config/key' ); const cookieParser = require ( 'cookie-parser' ); const auth = require ( './middleware/auth' ); // application / x-www-form-urlencoded app . use ( bodyParser . urlencoded ({ extended : true })); // application / json app . use ( bodyParser . json ()); app . use ( cookieParser ()); const mongoose = require ( 'mongoose' ); //mongoDB 연결 mongoose . connect ( config . mongoURI ,{ useNewUrlParser : true , useUnifiedTopolongy : true , useCreateIndex : true , useFindAndModify : false }). then (() => console . log ( 'MongoDB connected !' )) . catch ( err => console . log ( 'MongoDB Error !' )); //Hello world 출력 app . get ( '/' , ( req , res ) => { res . send ( 'Hello World!' ) }); //register 라우트 app . post ( '/api/users/register' , ( req , res ) => { // 회원가입 할 때 필요한 정보들을 client으로부터 받아오면 // 그것들을 database에 넣어준다. const user = new User ( req . body ) user . save (( err , userInfo ) => { if ( err ) return res . json ({ success : false , err }) return res . status ( 200 ). json ({ success : true }); }); }); // login 라우트 app . post ( '/api/users/login' , ( req , res ) => { // console.log('ping') //요청된 이메일을 데이터베이스에서 있는지 찾는다. User . findOne ({ email : req . body . email }, ( err , user ) => { // console.log('user', user) if ( ! user ) { return res . json ({ loginSuccess : false , message : "제공된 이메일에 해당하는 유저가 없습니다." }) } //요청된 이메일이 데이터 베이스에 있다면 비밀번호가 맞는 비밀번호 인지 확인. user . comparePassword ( req . body . password , ( err , isMatch ) => { // console.log('err',err) // console.log('isMatch',isMatch) if ( ! isMatch ) return res . json ({ loginSuccess : false , message : "비밀번호가 틀렸습니다." }) //비밀번호 까지 맞다면 토큰을 생성하기. user . generateToken (( err , user ) => { if ( err ) return res . status ( 400 ). send ( err ); // 토큰을 저장한다. 어디에 ? 쿠키 , 로컳스토리지 res . cookie ( "x_auth" , user . token ) . status ( 200 ) . json ({ loginSuccess : true , userId : user . _id }) }) }) }) }) // auth 라우트 (미들웨어로 사용될 것입니다.) app . get ( '/api/users/auth' , auth , ( req , res ) => { //여기 까지 미들웨어를 통과해 왔다는 얘기는 Authentication 이 True 라는 말. res . status ( 200 ). json ({ _id : req . user . _id , isAdmin : req . user . role === 0 ? false : true , isAuth : true , email : req . user . email , name : req . user . name , lastname : req . user . lastname , role : req . user . role , image : req . user . image }) }) app . get ( '/api/users/logout' , auth , ( req , res ) => { // console.log('req.user', req.user) User . findOneAndUpdate ({ _id : req . user . _id }, { token : "" } , ( err , user ) => { if ( err ) return res . json ({ success : false , err }); return res . status ( 200 ). send ({ success : true }) }) }) // 포트를 통해 index.js 를 실행합니다. app . listen ( port , () => { console . log ( `Example app listening at http://localhost: ${ port } ` ) }); 위는 index.js const { User } = require ( '../models/User' ); let auth = ( req , res , next ) => { //인증 처리를 하는곳 //클라이언트 쿠키에서 토큰을 가져온다. let token = req . cookies . x_auth ; // 토큰을 복호화 한후 유저를 찾는다. User . findByToken ( token , ( err , user ) => { if ( err ) throw err ; if ( ! user ) return res . json ({ isAuth : false , error : true }) // console.log('userh', user) req . token = token ; req . user = user ; next (); }) } module . exports = { auth }; auth.js // 모듈 (User에서는 데이터 베이스를 위한 몽구스, 유저의 비밀번호 암호화를 위한 비크립트, 유저의 개개인 토큰을 얻기 위한 제이슨웹토큰을 가져온다.) const mongoose = require ( 'mongoose' ); const bcrypt = require ( 'bcrypt' ); const jwt = require ( 'jsonwebtoken' ); // 비밀번호 암호화를 위한 salt 값 설정. salt 값은 암호화된 비밀번호를 해킹하기 어렵게 만들 수 있음. const saltRounds = 10 ; // 유저의 정보들을 객체화, 이른 바 유저 스키마를 생성한다. ( 몽구스의 메소드 ) // 각 유저들의 이름, 이메일, 비밀번호 등 개인정보를 담기 위한 객체임. const userSchema = mongoose . Schema ({ name : { type : String , maxlength : 50 }, email : { type : String , trim : true , unique : 1 }, password : { type : String , minlength : 5 }, lastname : { type : String , maxlength : 50 , }, role : { type : Number , default : 0 }, token : { type : String , }, tokenExp : { type : Number }, image : String }) // 유저 스키마 이전에 실행될 것임. userSchema . pre ( 'save' , function ( next ) { var user = this ; if ( user . isModified ( 'password' )) { //비밀번호를 암호화 시킨다. bcrypt . genSalt ( saltRounds , function ( err , salt ) { if ( err ) return next ( err ) bcrypt . hash ( user . password , salt , function ( err , hash ) { if ( err ) return next ( err ) user . password = hash next () }) }) } else { next () } }) // comparePassword 라는 이름의 유저 스키마 메소드를 생성합니다. ( 당연히 비밀번호 비교를 위한 메소드이겠지요? ) userSchema . methods . comparePassword = function ( plainPassword , cb ) { //plainPassword 1234567 암호회된 비밀번호 $2b$10$l492vQ0M4s9YUBfwYkkaZOgWHExahjWC bcrypt . compare ( plainPassword , this . password , function ( err , isMatch ) { if ( err ) return cb ( err ); cb ( null , isMatch ); }) } userSchema . methods . generateToken = function ( cb ) { var user = this ; // console.log('user._id', user._id) // jsonwebtoken을 이용해서 token을 생성하기 var token = jwt . sign ( user . _id . toHexString (), 'secretToken' ) // user._id + 'secretToken' = token // -> // 'secretToken' -> user._id user . token = token user . save ( function ( err , user ) { if ( err ) return cb ( err ) cb ( null , user ) }) } userSchema . statics . findByToken = function ( token , cb ) { var user = this ; // 토큰을 decode 한다. jwt . verify ( token , 'secretToken' , function ( err , decoded ) { // 유저 아이디를 통해서 유저를 찾은 다음에 // 클라이언트에서 가져온 token과 DB에서 가져온 토큰이 일치하는지 확인합니다. user . findOne ({ "_id" : decoded , "token" : token }, function ( err , user ) { if ( err ) return cb ( err ); cb ( null , user ); }) }) } // 유저스키마 => User 라는 이름으로 모델화. const User = mongoose . model ( 'User' , userSchema ); // 방금 모델화한 User 밖에서도 사용가능하도록 exports. module . exports = { User }; user.js 입니다. 문제가 무엇일까요, ㅠ

• react
• nodejs

models 최신 문법으로 변경 후

해결됨

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

index 페이지에 /Posts 요청에서 sequelizeeagerloadingerror Image is not associated to Comment 에러가 나고 로그인도 안되요 models 폴더 말고 다른 파일도 수정해야하는 곳이 있나요?

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

Router 를 사용해 SSR 페이지 이동할 때 질문입니다!

해결됨

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

/user/[id].js 로 Link 태그를 통해 접근했을 때 userInfo 가 null 인 에러를 해결하려고 이것저것 해보던중 /user/[id].js 안에 { /* <title>{userInfo.nickname}님의 글</title> <meta name="description" content={`${userInfo.nickname}님의 게시글`} /> <meta property="og:title" content={`${userInfo.nickname}님의 게시글`} /> <meta property="og:description" content={`${userInfo.nickname}님의 게시글`} /> <meta property="og:image" content="https://nodebird.com/favicon.ico" /> <meta property="og:url" content={`https://nodebird.com/user/${id}`} /> */ } Head 안에 위 부분을 주석처리하니까 정상적으로 렌더링 되었어요! 혹시 원인이 뭔지 알 수 있을까요? 스크립트가 실행되기 전 Head 안에 userInfo 를 찾다가 에러를 나는 것인지.. 다른 이유에서인지.. 그리고 제로초님 깃헙 클론받아서 실행할 때 next 디펜던시 버전을 9.5.3으로 변경해서 실행해보니 저와 동일한 에러가 났었어요 혹시 확인 가능하실까요?

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

dispatch가 자식컴포넌트로 넘어가질 않습니다.

미해결

웹 게임을 만들며 배우는 React

(사진)

• react

질문있습니다!!!

미해결

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

안녕하세요 :) !!! mainimage에서 이미지불러오는데 이미지가 화면에 표시되지않습니다. props로 로그찍어보고 거기에 나오는 주소로 검색하면 이미지가 잘나오는데 왜 안뜨는지 궁금해요...ㅠㅠ title 명도 분명 가져오는데 안가져오더라구요! -- LandingPage.js import React,{useEffect,useState} from 'react' import { FaCode } from "react-icons/fa" ; import {API_URL,API_KEY,IMAGE_BASE_URL} from '../../Config' import MainImage from './Sections/MainImage' function LandingPage() { const [Movies,setMovies]=useState([]) const [MainMovieImage,setMainMovieImage]=useState( null ) useEffect(() => { const endpoint= ` ${ API_URL } movie/popular?api_key= ${ API_KEY } &language=en-US&page=1` ; fetch(endpoint) .then(response => response.json()) .then(response => { console.log(response) setMovies([...response.results]) setMainMovieImage(response.results[ 0 ]) }) },[]) return ( <div style = { {width: '100%' ,margin: '0' } } > { /* Main Image */ } { MainMovieImage && <MainImage image = { ` ${ IMAGE_BASE_URL } w1280 ${ MainMovieImage.backdrop_path } ` } title = { MainMovieImage.original_title } text = { MainMovieImage.overview } /> } <div style = { { width: '85%' , margin: '1rem auto' } } > <h2> Movies by latest </h2> <hr/> /* Movie Grid Cards */ </div> <div style = { { display: 'flex' , justifyContent: 'center' } } > <button> Load More </button> </div></div> ); }; export default LandingPage -- MainImage.js import React from 'react' ; function MainImage(props){ return ( <div style = { {background: `linear-gradient(to bottom,rgba(0,0,0,0) 39%,rgba(0,0,0,0) 41% rgba(0,0,0,0.65) 100%), url(" ${ props.image } "),#1c1c1c` , height: '500px' , backgroundSize: '100%,cover' , backgroundPostition: 'center,center' , width: '100%' , position: 'relative' } } > <div> <div style = { {position: 'absolute' , maxWidth: '500px' , bottom: '2rem' , marginLeft: '2rem' } } > <h2 style = { {color: 'white' } } > { props.title } </h2> <p style = { {color: 'white' ,fontSize: '1rem' } } > { props.text } </p> </div> </div> </div> ) } export default MainImage

• express
• mongodb
• react
• 웹앱
• nodejs

로그아웃시 에러

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

리액트 강의 마지막 인증처리 빼고 로그아웃 강의까지 들으면서 따라 했는데 로그아웃에서 에러가 나옵니다 로그아웃시에 콘솔창에는 { isAuth: false, error: true } 뜨는데요 이건 auth 미들웨어에서 사용자를 찾지 못했을 때 나타나는 에러인데 왜 로그인이 됐고 토큰도 생성이 됐는데 사용자를 찾지 못하는 지 모르겠어요ㅠㅠ 깃허브에 올려주신 코드 비교도 해봤는데 안 되네요...

• react
• nodejs

antd 관련

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

john 님 안녕하세요? 좋은 강의 재밌게 잘 들었습니다. 강의를 참고해서 간단한 웹 페이지를 만드려고 하는 중입니다. antd 를 가져다가 메뉴 바를 만드는 부분이 따로 강의에서 다루고 있지 않으셔서 깃허브에 있는 boiler-plate 를 받아서 확인해보고 있는데요. 아무래도 제가 이해하고 해보는게 중요할 거 같아서 antd 홈페이지의 메뉴 바 예제를 확인 중입니다. https://ant.design/components/menu/ 위 링크에서 예제를 보고 있는데 다 훅이 아닌 클래스형으로 작성했더라구요. 혹시 제가 찾지 못한 hook 스타일 document가 있는지 궁금합니다. 그게 아니라면 class 형 스타일 예제 코드를 john 님이 고쳐서 적용한 건지요? 아직 리액트가 익숙하지가 않아서 여쭤봅니다!

• react
• nodejs

update구현:state변경 8분이후

미해결

생활코딩 - React

안녕하세요 강사님. Update구현 : state 변경중간까지 따라해서 작동이 다 되었는데 7분이후에 concat 이 나오는 부분에서 ( 제 생각에는 이부분은 이전 강의에서 이미 변경이 되었다고 생각되는데) 동영상에 나오는대로 코드를 따라 했는데, 이후에는 에러가 발생하면서 , 기존 디폴트로 주었던 id :2 ( title:css 와 desc : 내용) 갑을 갖고 getContent 부분으로 이동한후에 무한루프에 빠져버리는 것 같습니다. 이 부분 동영상을 계속 보긴 했는데 어느부분에서 잘못된건이지 찾을 수가 없네요. 혹시 update 구현부분에 해당 하는 UpdateContent.js 를 갖고 계시면 혹시 보내주실 수 있는지요? 아무래도 비교해봐야 할것 같습니다. 좋은 강의 감사합니다

• react

로그아웃 버튼을 로그인 상태일 때만 보이게 해주고 싶은데 store 안에 있는 값들을 어떻게 접근해야 할지 모르겠습니다..ㅠㅠ

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

LandingPage에 있는 로그아웃 버튼을 로그인 했을때만 볼 수 있게 해주고 싶어서 Store 안에 loginSuccess 값이나 userId 값을 체크해서 값이 존재 할때만 버튼을 렌더해주려고 하는데 이 값들을 어떻게 접근해야 할지 모르겠습니다ㅠㅠ

• react
• nodejs

댓글에 writer 정보가 넘어오지 않습니다

미해결

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

안녕하세요. 강의 재미있게 잘 듣고 있습니다! 다름이 아니라 며칠째 해결해보려고 올려두신 github 소스코드와 비교하며 해결해보려고 했으나 좀처럼 해결이 되지 않아 질문 드립니다. 댓글 기능 (3) SingleComment의 약 15분 경에 해당하는 댓글 리스트를 console에 찍어내는 것까지는 성공했습니다. 이를 화면에 출력하고자 하는데 댓글 내용은 잘 나오지만 댓글 작성자의 이름과 프로필 사진이 나타나지 않는 문제가 발생하였습니다. 출력된 에러 메세지는 다음과 같습니다. console.log로 props.comment.writer.name을 출력하면 잘 나오기는 하던데 어떤 부분이 문제인지 알 수 있을까요?? https://github.com/coding-Benny/react-youtube-clone

• react
• mongodb
• nodejs
• redux

마지막 강의 auth 부분 질문 있습니다

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

export default function (SpecificComponent,option,adminRoute = null) { function AuthenticationCheck(props) { const dispatch = useDispatch(); useEffect(() => { dispatch(auth()).then(response => { if(!response.payload.isAuth) { if(option) { props.history.push('/login') } } else { if(adminRoute && !response.payload.isAdmin){ props.history.push('/') } else { props.history.push('/') } } }) }, []) return( <SpecificComponent/> ) } return AuthenticationCheck } 요즘 웹에 빠져서 프론트랑 백엔드 강의를 보는데 재밌는 강의 올려주셔서 감사합니다 !! 궁금한 건 예를들어서 로그인이 필요한 페이지에 로그인 없이 접근한다해도 결국 마지막엔 <SpecificComponent/> 이걸 리턴시켜줘서 렌더링이 될거라고 생각을 했는데요 그런데 useEffect라는 함수를 찾아보면 렌더링이 될 때 특정 작업을 수행해주는 함수라고 했고 느리게 잘 보면 로그인이 필요한 페이지에 로그인 없이 접근할 때 한 0.2초 정도는 잠깐 페이지가 뜨지만 바로 사이트 접근이 안되더라구요 그래서 useEffect 함수를 사용해서 return을 통해 랜더링을 하고 인증 확인 절차가 가능한 부분이구나 했는데 위에 있는 코드에서 useEffect 함수를 안쓰고 해도 로그인이 필요한 페이지에 로그인 없이 접근이 안되는 건 같아서요 그럼 결국 if문에 있는 props.history.push 코드가 실행이 되면 밑에 return <SpecificComponent/> 까지 코드가 진행이 안되고 바로 넘어가는거라고 이해해야하나요??? 제가 아직 자바스크립트에 대한 이해가 부족해서 이상한 질문일수도 있지만 궁금해서 질문해봅니다 감사합니다!!

• nodejs
• react

ref 관련 질문드립니다

해결됨

웹 게임을 만들며 배우는 React에 TypeScript 적용하기

안녕하세요 강의 수강 중 궁금한 점이 생겨 질문드립니다 1. function useRef <T>(initialValue : T | null ) : RefObject<T>; 2. function useRef <T>(initialValue : T ) : MutableRefObject<T>; 3. function useRef <T = undefined >() : MutableRefObject<T | undefined >; setTimeout, useRef 타이핑 강의 끝부분에서 <T>를 <number | null> 을 줬습니다. 그러면 2번 꼴이 만들어지는 거를 확인할 수 있었는데요, 그럼, <number> 만 잇엇을때에도 똑같이 Mutable~ 로 인식할수잇다고 생각햇는데, 제가 어디를 놓친건지 알려주시면 감사하겟습니다

• react
• typescript

TicTacToe.jsx reducer 부분 질문입니다

해결됨

웹 게임을 만들며 배우는 React

case CLICK_CELL : const tableData = [... state . tableData ]; tableData [ action . row ] = [... tableData [ action . row ]]; // immer라는 라이브러리로 가독성 해결 tableData [ action . row ][ action . cell ] = state . turn ; // console.log(tableData[action.row]); return { ... state , tableData , recentCell : [ action . row , action . cell ], } 위 코드에서 tableData [ action . row ], [... tableData [ action . row ]] 두 값이 동일한데 [... tableData [ action . row ]] <-- 이 배열을 대입해주는 이유가 있을까요? 콘솔로 찍어봐도 동일한값으로 나오길래 주석처리하고 진행해보니 정상작동은 하는데 최적화 부분에서 memo를 적용했을 때 렌더링이 정상적으로 되지 않더라구요 어떤 이유 때문에 위와 같은 현상이 생기는지 알 수 있을까요?

• react

선생님 제발 도와주세요

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

삭제된 글입니다

• react
• nodejs

리덕스 어렵네요.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

강의 잘보고있는데 너무 어렵네요. 1. user_action.js에서 user_reducer.js와의 연결고리가 없는데 어떻게 저파일을 찾아가는건지 궁금합니다. 2. types.js에 LOGIN_USER= "login_user" 지정해주는데 "login_user" 값은 어디서도 사용안된 값인데 왜 저리 지정되는지도 모르겠는데 답변주시면 많은 도움이 될거 같습니다.

• nodejs
• react

에러 처리 질문

미해결

실전 리액트 프로그래밍

안녕하세요. 강의를 따라 코드를 치던 중 화면과 같은 에러가 발생했습니다. 검색 후 상단에 보이는 것처럼 코드를 추가하였지만 해결되지 않고 있습니다. 어떻게 하면 될까요?

• react
• redux

vscode 에서 vim 으로 .env 파일을 만드는데 안되요...

미해결

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

vscode에서 git bash 로 사용 했는데 다 작성하고 esc 누르고 wq 누르고 엔터 눌러도 반응이 없습니다..

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

Collections에서 데이터 확인

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

안녕하세요 :) PostMon을 통해 보낸 데이터들을 확인하려고 Collections에 들어갔는데 잘 안나와서 아래있는 질문들도 확인하고 앞에 강의도 확인하고 구글링도 다 해봤는데 뭔가 조금 이상하다는 생각이 들어서 질문드립니다. Collections를 누르면 이렇게 아무 것도 안뜨고, Add my own data를 누르면 아래와 같은 창이 뜹니다. Collections를 눌렀을 때, 이와 같은 창을 확인 할 수 있는데, 여기서의 Database name이 " mongodb+srv://june:<password>@nodejspractice.xjqzt.mongodb.net/<dbname>?retryWrites=true&w=majority" 이 코드에서의 <dbname> 을 의미하는 건가요? 앞선 강의에선 <dbname> 부분이 test로 세팅이 되어있는데, 현재는 을 채우도록 되어있습니다. 이때 <dbname>부분에 무엇을 넣느냐를 고민하고 있고, 여러 시도를 해봤는데 진전이 없어서 질문드립니다. 감사합니다

• nodejs
• react