다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target.name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target.name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요?[e.target.name] 왜 이렇게 써야하는지 궁금합니다.위에선 괄호없이 string으로 썼는데

요즘 프론트 공고를 보면, 경력/신입을 불문하고redux, recoil, mobX 등 상태관리 라이브러리가 필수 자격요건에 들어가있는 경우가 많더라구요.그런데 해당 props 수업을 듣고 생각나서 커리큘럼을 다시 보니까 다른 기술들은 다 강의가 있는데 딱 상태관리 라이브러리 관련 수업 제목만 안보였습니다.혹시나 뒤의 강의 내용에 포함되어 있는 건지는 아직 다 보진 못했지만관련 강의가 없다면 상태관리 라이브러리는 포트폴리오에 굳이 적용시키지 않아도 추후 서류를 넣을 때 포트폴리오에 상태관리 라이브러리 적용 경험이 없다면 합불 당락을 결정할 정도로 하자가 되지 않을지 궁금합니다.아직 이른 걱정일지는 모르겠지만,나중에 완강하고 따로 상태관리 라이브러리를 공부해서 추후 포트폴리오 완성 시 별도로 공부해서 적용 시켜볼지, 아니면 적용 시키지 않고 그대로 포트폴리오로 써도 상관 없을지 멘토님의 의견이 궁금합니다.좋은 강의 감사합니다.  

문득 수업 듣다가 궁금해진 부분인데요,boards 폴더 안에list 폴더 만들고 index.js 만들고detail 폴더 만들고 index.js 만드는게 아니라,바로 같은 경로에 list.js, detail.js 이런 식으로 만드는건 next.js에서 안되는 방식일까요?

ngrok 연결도 다 했고 url에다가 POSTMAN으로 GET 요청하면 데이터도 잘 불러와지는데 결과창을 보면 데이터가 불러와지지 않아 화면이 제대로 뜨질 않네요...해결 방법이 있을까요?  

해당 프로젝트에서 getInitialProps와 getServerSideProps를 동시에 쓰고 있는데 2개의 경우 pre-render를 하기 위해 작성했다고 이해했는데 둘 중 하나만 써도 되는 부분 아닌가요??? 어떤 상황떄문에 2개를 동시에 사용하는지 궁금합니다

안녕하세요 선생님혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??

선생님 useContext 다른 강의를 보다가 궁금한 점이 생겨서 질문드립니다.우리 수업에서는 context를 위한 파일을 따로 만들지 않고 app.js에 바로 context를 만들었잖아요..?그래서 app.js에 import {createContext} from "react"로 안쓰고 그냥 import React from "react"로 쓴 것인가요?파일을 따로 만들 때랑 아닐 때랑 import를 다르게 하는 것 같아서요..그리고 파일을 따로 만드는 것이 더 일반적인 방식인지 궁금합니다!

제로초 쌤 강의 잘들으면서 구현하고 있다가 갑자기 머리가 꼬여서 복습 확인 차 질문 올립니다!(reduxjs/toolkit 사용하고 있어서 제로초쌤 강의에서 saga를 바꿔보면서 하고 있습니다)(wsl 문제는 mysql안에서 명령문 익히면서 진행하고 있습니다)컴포넌트에서 어떤 액션을 디스패치 해줄때 안에 dispatch안의 콜백함수의 인자가 액션이 백엔드 주소에 데이터를 요청할때 들어가는 data 값의 형태로 들어가서 그게 백엔드에선 req.body로 들어가고(동적라우팅은 주소에 ${data}로 넣어준 부분이 백엔드의 req.params.(동적라우팅변수)로 들어가는거고) 그 후에 백엔드의 작업이 끝나면 res.json() 안의 인자가 결국 최종적으로 action.payload로 들어오는게 맞나요!?이 문제는 로그아웃하고 난 뒤에 regenertion 문제가 생겨서 소스코드도 보고 로직에 문제가 있나 싶어서 돌려보고 해당 문제로 저랑 같이 질문하신 분의 답글도 봤는데 한번 안보이니까 너무 안보이더라구요. 한번만 봐주시면 감사하겠습니다 로그아웃시 코드도 사진 따로 첨부하겠습니다(그 외 기능은 전부 잘 돌아갑니다! 로그아웃 하고 난 뒤에만 오류가 나요..)항상 질 좋은 강의 답변해주셔서 감사합니다! next.js부분도 화이팅하면서 듣겠습니다~

import "./App.css"; function App() { const count = 0; const increaseCountState = () => { count++; }; return ( <div className="App"> <p>State : {count}</p> <button onClick={increaseCountState}>State 올려</button> </div> ); }안녕하세요 1. useRef 를 공부하고 있는데 리액트의 변수를 관리할 때 state랑 useRef 를 사용하는 것은 알겠습니다.그런데 왜 그냥 일반 변수에서 값을 수정하면 되는데 복잡하게 useRef를 사용할까요? 렌더링 그런것을 떠나서 useRef랑 일반 변수를 사용할 때 차이가 궁금합니다.2. 리액트에서 저 코드가 왜 작동이 안될까요?

 강의 들을때마다 점점 지치네요.. 맥 윈도우 다쓰는데 매번 오류나고 뭐가문제인지 모르겠네요 공부를 하려고 해도 의욕이 떨어져요 Server ErrorError: The default export is not a React Component in page: "/02-02-counter-state"This error happened while generating the page. Any console logs will be displayed in the terminal window.Call StackObject.renderToHTMLfile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/render.js (234:19)doRenderfile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1392:57)<unknown>file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1487:34)<unknown>file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/response-cache.js (63:42)ResponseCache.getfile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/response-cache.js (80:11)DevServer.renderToResponseWithComponentsfile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1423:53)DevServer.renderToResponsefile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1559:39)process.processTicksAndRejectionsnode:internal/process/task_queues (95:5)async DevServer.pipefile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1111:25)async Object.fnfile:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (912:21)

안녕하세요개발환경으로 code-server을 사용하고 있는데, 문제를 도대체 알 수 없어서 질문 올립니다 ㅜㅜㅜㅜㅜㅜcode-server은 실행시 도메인/proxy/port로 실행 주소가 설정됩니다.그래서 hot-reload 웹소켓 연결을 설정하기위해서 webpack.config.ts에client: { webSocketURL: 'ws://0.0.0.0:443/proxy/3090/ws', },를 추가했습니다.index.html에서 src = "./dist/app.js"로 했습니다다른 모든 코드는 setting/ts를 그대로 npm i 했습니다.(여기까지 사전 참고내용)  이전 강의에서 App.tsx에 <div>코드어쩌구저쩌구</div>는 잘 나타났습니다.이번 강의에서 react-router-dom을 도입해서 code-server에서 실행을 하게되면 브라우저에 아무런 화면이 나오지 않습니다. 그러나, code-server가 아닌 구름ide에서 같은 파일을 실행할 경우(서버 주소가 proxy가 아니게됨)정상적으로 동작합니다.  react-router-dom을 사용했더니 화면이 안보이기때문에 react-router-dom 과 관련된 문제라고 추측합니다.code-server에서 실행주소뒤에 'proxy/3090'이 붙었을때 문제가 생겼기 때문에 code-server 관련 문제로 추측됩니다.code-server사용시 가져온 파일이랑 구름ide사용시 가져온 파일 비교해보면, code-server에서 파일2개를 못 가져온것 같은데, 이게 문제인거 같기도 합니다.  또한, App.tsx에서 react-router을 빼고 다음과 같이 입력후 실행해보았습니다.import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; import SignUp from '@pages/SignUp'; const App = () => { return <SignUp />; }; export default App;  가져온 파일 목록은 다음과 같고, 정상적으로 signup화면이 나타납니다.이번에는 loadable/component가 문제인가 싶어서, 이걸빼고 다음과 같이 App.tsx를 입력했습니다.import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; import LogIn from '@pages/LogIn'; import SignUp from '@pages/SignUp'; const App = () => { return ( <Switch> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> </Switch> ); }; export default App;그랬더니 이전과 같이 화면에 아무것도 안나옵니다. 도대체 뭐가 문제인지를 모르겠네요 ㅜㅜㅜ

안녕하세요 페이지 구현 일기쓰기(new)까지 수강하고코딩을 완료하였는데 수정완료 버튼을 누르면 수정이 되질 않는 버그와 console.log(targetDate)를 하면 콘솔에 두번 출력되는 버그가 있어서 깃 링크를 드리고 질문을 하려했으나 깃이 자꾸 오류가나서 그런데 혹시 메일로 파일을 보내드리면 그거에 대한 답변이 가능하신지 궁금하여 여쭤봅니다.

NavLink 사용시, onClick에서 에러가 발생합니다(property) onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefinedType 'void' is not assignable to type 'MouseEventHandler<HTMLAnchorElement> | undefined'.ts(2322)index.d.ts(1448, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & NavLinkProps<unknown> & RefAttributes<HTMLAnchorElement>'이런 에러가 발생하였습니다.그래서 인터넷에 검색하니까onClick={()=>resetCount(member.id)}이렇게 바꿔주면 된다고 해서 바꿔줬더니 오류가 사라졌습니다.제로초님께서는 에러가 없었는데 저만 이 오류가 나타나는 이유가 뭘까요??// import EachDM from '@components/EachDM'; // import useSocket from '@hooks/useSocket'; import { CollapseButton } from '@components/DMList/styles'; import { IDM, IUser, IUserWithOnline } from '@typings/db'; import fetcher from '@utils/fetcher'; import React, { FC, useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router'; import { NavLink } from 'react-router-dom'; import useSWR from 'swr'; interface Props { userData?: IUser; } const DMList: FC<Props> = ({ userData }) => { const { workspace } = useParams<{ workspace?: string }>(); const { data: memberData } = useSWR<IUserWithOnline[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // const [socket] = useSocket(workspace); const [channelCollapse, setChannelCollapse] = useState(false); const [countList, setCountList] = useState<{ [key: string]: number }>({}); const [onlineList, setOnlineList] = useState<number[]>([]); const toggleChannelCollapse = useCallback(() => { setChannelCollapse((prev) => !prev); }, []); const resetCount = useCallback((id) => { setCountList((list) => { return { ...list, [id]: 0, }; }); }, []); const onMessage = (data: IDM) => { console.log('dm왔다', data); setCountList((list) => { return { ...list, [data.SenderId]: list[data.SenderId] ? list[data.SenderId] + 1 : 1, }; }); }; useEffect(() => { console.log('DMList: workspace 바꼈다', workspace); setOnlineList([]); }, [workspace]); // useEffect(() => { // socket?.on('onlineList', (data: number[]) => { // setOnlineList(data); // }); // console.log('socket on dm', socket?.hasListeners('dm'), socket); // return () => { // console.log('socket off dm', socket?.hasListeners('dm')); // socket?.off('onlineList'); // }; // }, [socket]); return ( <> <h2> <CollapseButton collapse={channelCollapse} onClick={toggleChannelCollapse}> <i className="c-icon p-channel_sidebar__section_heading_expand p-channel_sidebar__section_heading_expand--show_more_feature c-icon--caret-right c-icon--inherit c-icon--inline" data-qa="channel-section-collapse" aria-hidden="true" /> </CollapseButton> <span>Direct Messages</span> </h2> <div> {!channelCollapse && memberData?.map((member) => { const isOnline = onlineList.includes(member.id); const count = countList[member.id] || 0; return ( <NavLink key={member.id} activeClassName="selected" to={`/workspace/${workspace}/dm/${member.id}`} onClick={resetCount(member.id)} > <i className={`c-icon p-channel_sidebar__presence_icon p-channel_sidebar__presence_icon--dim_enabled c-presence ${ isOnline ? 'c-presence--active c-icon--presence-online' : 'c-icon--presence-offline' }`} aria-hidden="true" data-qa="presence_indicator" data-qa-presence-self="false" data-qa-presence-active="false" data-qa-presence-dnd="false" /> <span className={count > 0 ? 'bold' : undefined}>{member.nickname}</span> {member.id === userData?.id && <span> (나)</span>} {count > 0 && <span className="count">{count}</span>} </NavLink> ); // return <EachDM key={member.id} member={member} isOnline={isOnline} />; })} </div> </> ); }; export default DMList;  +)그리고 강의 코드와 깃헙에 있는 코드가 부분적으로 다른 부분이 있는데 븥여넣을 때마다 동영상을 정지시키고 코드를 다시 작성해야해서 조금 번거로운 부분이 있는 것 같아요ㅜㅜ 

 Invalid Custom Plugin "typescript" 라면서 에러가 뜹니다 어떻게 해결해야 할까요?

이미지 서버 죽은것같습니다.저도 귀여운 고양이들이랑 수업받고싶어요

왜 이 라이브러리를 사용하는지 사용목적과 이유를 간단하게라도 설명해주시는게 좋을 것 같습니다.처음 듣는 사람도 있으니까요

useRef를 사용해서 위와 같이 해당 요소의 padding값을 구하려 했는데요. 첫 렌더링 시에는 ref.current.style을 읽지 못해서 useEffect에 넣어주었더니 style값은 읽어오도록 하였습니다. 다만 그 뒤에 얼마나 렌더링이 되든 style안에 값들은 계속 ''(string) 으로 나옵니다. 주석에 적은 다른 값으로는 style을 구할 수 있었습니다.ref를 사용해서는 값을 구할 수 없는 걸까요?

안녕하세요 ! 이번에 리액트 강의를 구매했는데 커리큘럼 문제로 질문드립니다.리액트 강의를 듣기전에따라하며 배우는 노드 ,리액트 시리즈 기본강의=>유튜브=>영화사이트 =>챗봇 =>쇼핑몰 =>리액트 A-Z=>레딧사이트 만들기 이순서로 들을까 하는데 괜찮을까요?

쿠키파서가 없어도 쿠키가 보내지고 데이터를 받을 때 원본이 오는데 쿠키파서 미들웨어가 필수인건가요?

실습중인데고양이 사진이 뜨질 않습니다 ㅠㅠ