안녕하세요 zerocho님. 이번 강의에서 [프론트엔드 세팅하기] 챕터 관련해서 질문드립니다. 강의 후반부에서 babel이 image, css 파일 등을 js파일로 변환한다고 하셨는데 그게 아니라 webpack의 loader(style-loader, file-loader) 가 js파일로 번들링 해주는거 아닌가요? 혹시 제가 모르는 부분이 있나해서 이렇게 문의드립니다. 혹시 참고할만한 문서가 있다면 같이 주시면 도움 될 것 같습니다:) 감사합니다.

이렇게 사용하고있습니다. user_email이 변경되는 과정에서 console.log(value) 이게 onChange가 일어날 때마다 한 번씩만 실행되어야하는데 예를들어 'asdf'를 입력한다고 가정할 때 log에는 아래와 같이 찍힙니다. LOG => a LOG => as LOG => as LOG => asd LOG => asd LOG => asd LOG => asdf LOG => asdf LOG => asdf LOG => asdf 이렇게 점차 1개씩 스택이 쌓이듯 중첩되어 실행이되는데 제가 이상한건지 mobx가 이상한건지 감이 안 잡힙니다.. react-native 환경에서 사용하려합니다.

    const { workspace } = useParams<{ workspace: string }>();     console.log('workspace param name1 : ', workspace); workspace의 값이 계속 undefiend로 출력되고 있습니다. 현재 URL주소는 다음과 같습니다. http://localhost:3090/workspace/sleact/channel/일반 /App/index.tsx 파일에서도 /workspace/:workspace 로 해놓은 상황입니다. import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); // 코드 스플리팅 const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); const App = () => {   return (     <Switch>       <Redirect exact path="/" to="/login" />       <Route path="/login" component={LogIn} />       <Route path="/signup" component={SignUp} />       <Route path="/workspace/:workspcae" component={Workspace}/>     </Switch>   ); }; export default App; 의심가는 부분들은 어느정도 다 봤다고 생각하는데요. params가 undefined된 값을 출력하네요. import { Redirect } from 'react-router'; import { Link,Switch, Route, useParams } from 'react-router-dom'; 혹시 import가 문제가 있나 싶어서 useParams를 react-router와 react-router-dom 각각 불러왔는데도 마찬가지입니다.

next의 장점중 하나가 코드스플리팅을 자동으로 해주는 거라고 알고있는데 react를 쓰신이유는 프로젝트 취지가 ssr 할 필요가 없어서 인가요??  그리고 궁금한게 cna로 프로젝트 세팅을할때 ssr할 목적없이 코드스플리팅과 폴더구조를 잡아준다는 이유로 쓰기엔 비효율적인가요? next를 사용하면 꼭 ssr을 사용해야되는지 궁금합니다 

사용하시는 vsc에 관련해서 질문드려요!저도 지금 vsc를 사용하고 있는데 강의를 보다보면 자동완성 기능이 강사님이랑 저랑 다른 것 같아서요저는 일부만 자동완성이 되는데 강사님은 여러가지를 자동완성으로 쉽게 쓰시더라고요!혹시 js코드가 자동완성이 되는 extension이 있나요?그리고 이건 단축키 질문인데강의를 보면 {User}을 { User }로 바꿀 때 U자 앞과 r자 뒤로 가서 띄어쓰기를 안 하시고 단축키 눌러서 바로 바꾸시는 것 같아서요! 이건 어떤 단축키를 쓰신건가요?

안녕하세요 강의 잘보고 있습니다! 강의를 보다가 궁금한점이 생겨서요! toString()대신  toHexString() 을 사용한 이유가 궁금합니다~!!

안녕하세요. 쉽고 유익한 강의 감사합니다. 강의를 듣다가 궁금한 점이 있어서 질문드립니다. <br /> FileUpload.js에서 setImage 를 사용하여 이미지 state에 이미지를 추가 하였을 때, state에 바로 적용이 안되는 이유가 궁금합니다. <br /> 이 질문을 드리는 이유는 FileUpload.js에서 이미지를 업로드 했을 때, 이미지 state에 새로운 이미지를 추가하였는데, 부모 컴포넌트(UploadProductPage.js)에게 그냥 이미지 state만 보내지 않고, 추가된 이미지도 같이 보내는 이유가 궁금했습니다. <br /> 즉, FileUpload.js의 submitHandler에서  ''' setImages([...Images, response.data.filePath]) ''' 이렇게 해서 이미지 state에 새로 업로드한 이미지를 추가하였으니 부모 컴포넌트에게 state 정보를 보낼 때는 ''' props.refreshFunction([...Images]) ''' 이렇게 보내면 될 것 같은데, 이렇게 하지 않고 ''' props.refreshFunction([...Images, response.data.filePath]) ''' 이렇게 방금 추가한 이미지도 같이 보내야 되는 이유가 궁금합니다.

client.jsx에서는 require를 썼고 야구게임.jsx에서는 import를 썼는데 element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: "object". 에러를 받았습니다. 구글링 해보니 한가지로 통일해야한다고 했는데 왜인가욥?

커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?

안녕하세요 제로초님~ 강의에 내용에 막힌 것이 있어 드리는 질문은 아니구 SSR 관련되어 궁금한 것이 있어 질문 올립니다. 질문의 요건을 먼저 말씀드리자면 NextJS 없이 커스텀 서버로 SSR를 제공하는 것에 장점이 무엇이 있는지 여쭤보고 싶습니다. SSR을 공부하면서 Next.js 없이 Express(or Koa) 같은 커스텀 서버에 react-router-dom 을 사용하는 방법이 있다고 알고 있는데요. 실제 제 회사의 유관 부서들 중 NextJS 없이 SSR로 서비스를 제공하는 곳이 있습니다. 제가 공부하면서 느낀 것은 SSR을 구현하면서 라우팅 방식을 제외하면, 구조가 NextJS를 따라가게 되는 것 같습니다. 비록 서비스에 프로젝트 구성을 도입한 개발자들이 저마다의 이유가 있어 세팅을 그렇게 한 것이겠지만, 대중적으로 생각하자면 직접 세팅을 다하면서 초기 개발의 overhead가 들어가는것, 프로젝트를 인수 인계할 때의 소통 비용 등을 제치고 사용할 큰 장점이 있는지 궁금합니다. 예를 들어 퍼포먼스 상승의 이유인지,  File-based structure 가 싫어서 그런건지 답변을 듣고 싶습니다.

안녕하세요 강의 정말 잘 보고 있습니다.  강의 도중에 많이 사용하시는 map 함수에 대해 질문이 있어 글을 작성하게 되었습니다. 로또 만들기에서  {renderNum.map((v) => <div key={v}>{v}</div>);} 이런식으로 사용하셨는데 이 구문을 그냥 바로 return에 넣으면 화면에 나타나지 않고 return 구문전에 변수에 담은 다음에 return 문에 변수로 나타내주어야 화면에 잘 나오는 현상이 있는데 리액트 버전이 올라가면서 바뀐 부분인 건가요? 아니면 제가 혹시 실수한 것이 있는건가요?

console 창 가져온건데 서버-클라이언트 코드가 달라 변경도 해보았는데 안되서 어떻게 해야할지 모르겠습니다ㅠㅠ 도와주세요ㅜㅜ 서버쪽코드 const request = axios.get(`${USER_SERVER}/auth`) 클라이언트코드 router.get("/auth", auth, (req, res) => {

sagas/index.js의 axios default url을 localhost 나 혹은 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요 axios.defaults.baseURL = 'http://127.0.0.1:3065'; // ssr 로그인 유지 o // axios.defaults.baseURL = 'http://localhost:3065'; ssr 로그인 유지 x // axios.defaults.baseURL = 'http://api.nodebird-hyun.shop'; ssr 로그인 유지 x 로그인 시점에서 쿠키가 생성은 되는거 같은데 application 탭을 열어보면 없는데 이유가 무엇일까여? 알려주시면 감사여

sotre.js  부분의 sagaMiddleware.run(rootSaga) 에서 sagaMiddleware.run(searchSaga) 로 바로 사용하지 않고 rootSata 를 만든 이유는 여러개의 미들웨어를 관리할 수 있도록 하기 위해 한 것 인가요?

강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.  제가 리액트만 공부하고 싶어서 섹션 2부터 보려고 하는데 섹션1, 2 나눠진 내용인가요 아니면 연달아 봐야하나요?

안녕하세요. 강의 'react-redux 없이 직접 구현하기'를 듣던 중 궁금한 점이 있어 질문하게 되었습니다. 강의에서 아래와 같은 코드를 작성하셨습니다. const [, forceUpdate] = useReducer((v) => v + 1, 0); 설명하실 때 "상태값 변경 함수(forceUpdate)를 호출할 때마다. 상태값을 변경하는 코드이다. 이 함수(forceUpdate)가 호출될 때마다 컴포넌트를 렌더링하기 위해 작성했다."라고 말씀하셨습니다. 그런데 여기서 "컴포넌트를 다시 렌더링하는 것은 useState를 써도 되지 않을까?" 하는 생각이 들어 해당 라인에 useReducer를 useState로 바꿔서 실행해보니 오류는 발생하지 않았지만 timeline이 하나밖에 추가가 되지 않았습니다. useReducer를 사용한다는 것은 redux에서 발생하는 모든 action들에 대해 감지를 한다는 뜻일까요? 위의 코드가 정확히 구체적으로 어떤 역할과 효과를 가져오는지 잘 모르겠습니다. 답변 주시면 감사하겠습니다.

POSTMAN에서 req 전송 시 무한로딩이 발생하고 있습니다.ㅠㅠ다른분들 질문도 보고 ; 표시도 하고  강사님 깃허브랑 비교도 해봤는데... 다른 걸 못 찾겠어서... postman으로 테스트 시 어디서 문제 생기는지 확인하는 방법도 모르겠어서 염치없지만... 시간 되시면 확인부탁드립니다.ㅎㅎ ㅠㅠㅠ  

질문은 아니고 이번 강의 안에 들어가는 자막에 유독 오타도 많고 크기가 커서 수정이 필요해보입니다.

const app = express(); 여기서 express에 ()붙이는것도 비슷한 맥락인것 같은데 차이가 뭔가요 ?

안녕하세요 제로초님! 궁금한 부분이 있어 질문 드립니다. 회원가입할 때  개발자도구 network 탭에서 해당 요청의 request payload를 보면 회원가입할 때 입력했던 정보를 그대로 확인할 수 있는데요, 혹시 이거 노출시키지 않도록 설정할 수 있나요? 가령 비밀번호는 암호화 한다는가하는 방법으로요. 실제 실무에서는 이 부분이 보안상 문제가 될 거 같은데, 실무에서는 어떻게 처리하는지 궁금합니다. :) 감사합니다!