index.js에서import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();이렇게 랜딩 페이지로 잘 가는데,import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux'; import 'antd/dist/reset.css'; import { legacy_createStore as createStore, applyMiddleware } from 'redux'; import promiseMiddleware from 'redux-promise'; import ReduxThunk from 'redux-thunk'; import rootReducer from './_reducers'; //'./_reducers/index.js'라고 안 해도 알아서 index.js인 줄 알고 해 줌. const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore); //원래는 createStore만 해서 store를 redux에서 생성하는건데, 그냥 store는 객체밖에 못 받기 때문에 //promise와 function도 받게 해주기 위해 이 middleware와 함께 이렇게 만들어 주는 것. //그래서 store 만든 것을 이렇게 store에다가 넣어주는 것. //이렇게까지 하면 우리 application에 redux를 연결 시킨 것. ReactDOM.render( <Provider store={createStoreWithMiddleware(rootReducer , window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )} > <App /> </Provider> , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 이렇게 redux 부분을 추가한 코드로 하면 랜딩페이지로 가지 않고 컴파일은 되나 localhosst:3000도, localhosst:3000/login도, localhosst:3000/register도 다 이렇게 흰 화면만 뜨고 해당 페이지로 가지 않습니다.. 해결 방법 아시는 분 알려주시면 감사하겠습니다😭 

도표 자료 중 커뮤니티 생성까지는 열람이 되는데 포스트 페이지 생성부터 부록까지 "파일을 찾지 못했습니다. 파일이 존재하지 않거나 읽기 권한이 없습니다."라는 경고창이 뜨면서 파일을 볼 수가 없습니다......

package.json 에 "generate": "graphql-codegen" 이라는 명령어가 없어서 작동을 제대로 안 하는거 같은데 혹시 이 문제는 뭘 어떤 걸 설치 해야 될까요? graphql 도 다시 설치해보고 인터넷에서 찾은 것들로 설치를 해봐도 문제가 해결이 안됩니다.

오랜만에 문의 드립니다.바쁘시겠지만 답변 부탁 드릴께요페이팔로 결제를 할때 동영상에서는 샌드박스로 가상결제가 되도록 했는데 실제로 결제가 되도록 할려면 어떻게 해야 하는지 문의 드립니다.회사에서 페이팔을 사용하고 있다고 하는데 회사에 무슨정보를 받아서 어디에 설정을 하면 되는지 알려주시면 감사하겠습니다.

main/index.js 에서는setProducts(result.data.products); 로 써야하고product/index.js 에서는setProducts(result.data); 로 써야하는데두 파일에서 return문에서는 동등하게 {product.name} , {product.price} 등으로 사용됩니다. 둘의 차이를 알려주시면 감사하겠습니다.

import axios from 'axios'; 에서는 중괄호가 없고import {Link} from 'react-router-dom' 에서는 중괄호가 있는데 차이가 뭔지 잘 모르겠습니다.axios는 'axios' 안에 있는 함수를 import 하는 것이고 {Link} 는 'react-router-dom' 안에 많은 컴포넌트 중 Link만 import 하기 위함인가요?

 버전1으로 듣다가 버전2가 있다는 걸 알게 되어서 버전 1 말고 버전2으로 들어도 되나요?버전2는 처음부터 들으려고요

빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요?제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?

안녕하세요. 유익한 강의 감사합니다.const useCurrentAnswer = () => { const step = useStep(); const [answers, setAnswers] = useRecoilState(answersState); const answer = answers[step]; const setAnswer = (newAnswer) => { setAnswers((answers) => { // 새로운 답변 렌더링 (answers 는 그냥 변수명 ) const newAnswers = [...answers]; // 기존 답변목록을 복붙함 (불변성의 법칙을 지켜라 / 기존 데이터는 건들지마..) newAnswers[step] = newAnswer; // 새로 작성한 답변을 복붙한 배열에 넣어줌 return newAnswers; // 새로운 답변 목록 반환 }); }; return [answer, setAnswer]; };에서 answer  - String / 답변answers - String[] / 답변 목록   setAnswer  - answer를 렌더링해주기위한 함수 / setAnswer(param) { answer = param }setAnswers - answers를 렌더링해주기위한 함수 / setAnswers(param) { answers = param } 로 이해되는데 그렇다면 setAnswers에 함수가 들어가도 괜찮은건지 궁금합니다. setAnswers((answers) => { const newAnswers = [...answers]; newAnswers[step] = newAnswer; return newAnswers; });는 setAnswers(화살표함수) { answers = 화살표함수} 이고answers는 화살표함수가 되는게 아닌가요? answers는 함수가 되어 입력된값을 리턴해서 바로 answers에 할당되는건가요?아니면setAnswers에서 함수가 실행되어 리턴된 값이 answers에 할당되는 건가요??

-C:\Users\ysm65\learn-sequelize>npm start> learn-seuqellize@0.0.1 start> nodemon app[nodemon] 3.0.1[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting node app.js3001 번 포트에서 대기중Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'users' AND TABLE_SCHEMA = 'nodejs'Executing (default): SHOW INDEX FROM users FROM nodejsExecuting (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'comments' AND TABLE_SCHEMA = 'nodejs'Executing (default): SHOW INDEX FROM comments FROM nodejs데이터베이스 연결 성공  --개정 3판 7장 내용 실습 중 마지막에 브라우저 창에 띄우는 것 까지 확인을 했지만 이름을 클릭 시 comment 내용이 뜨지 않아 하나씩 확인하면서 오류를 찾고 있습니다. 그 과정에서 3판 교과서 344page에서 소개된 내용과 다른 점을 찾았고 강사님과 다르게 CREATED가 아니라 SELECTED 로 뜨는 게 문제의 원인이지 않을까 생각하고 있습니다. 코드의 오타는 확인한 상황인데, 다른 원인이 어떤 게 있는지 고민을 하다가 이렇게 질문 글을 남깁니다. 어떻게 해결을 하는 게 좋을 지 조언을 구하기 위해서 질문을 남깁니다.   

포트폴리오 리뷰 중 타이핑하지 않은 상태에서 등록하기를 누르면 입력란 밑에 빨간색에러 표시가 나는 코딩부분에 질문이 있습니다.선생님은function onChangeWriter (event) { setWriter(event.target.value) if(event.target.value != "") { setWriterError("") } };이런식으로 if란에 이벤트 핸들링 함수를 넣어줘서 처리하셨고, 저는function onChangeWriter (event) { setWriter(event.target.value) if(writer != "") { setWriterError("") } };writer자체를 넣어서 안에 값이 들어오면 에러가 사라지게 만들었는데요.선생님은 코드는 한 번의 타이핑으로 바로 반응해서 없어지는데 반면, 저의 코드로는 에러 표시가 없어지기 위해서는 제목란을 제외하고는 2번씩 입력해야 에러 표시가 없어집니다.중요하지는 않은 것 같지만 궁금해서 여쭤봅니다. 

멘토님 따라 작성했는데 빨간 밑줄이 사라지지 않고있습니다 ㅠㅠ임포트도 했는데 저렇게하는게 아닌걸까요??... 오류메세지는 이렇게 뜹니다 vscode 껐다 켜도 동일하고..node_modules 와 yarn.lock삭제 후 재설치해도 동일합니다ㅜㅜ 문제가 뭐일까요

textarea를 적용시키니 칸을 줄이고 늘릴수 있는저런 요소가 생겼는데 못 없애나요?그리고 리액트에선 예전에Css를 다뤘던것 처럼 마우스커서로 색깔을 마음대로 선택 할수 없던데해결방법이 있나요?HTML:import { Wrapper, Project, Title, Label, Writer, Password, Contents, Address, WriterLabel, AddressNumber, AddressButton, YoutubeInput, InputWrapper, UserWrapper, TitleWrapper, ContentWrapper, AddressWrapper, YoutubeWrapper, ImageWrapper, UploadButton, UploadButtonText, SettingWrapper, RadioButton, RadioLabel, SubmitButton, } from "../../../styles/01-freeboard"; export default function EmotionPage() { // 여기는 자바스크립트 쓰는곳 return ( <Wrapper> <Project>게시물 등록</Project> <UserWrapper> <InputWrapper> <WriterLabel>작성자</WriterLabel> <Writer placeholder="이름을 적어주세요." /> </InputWrapper> <InputWrapper> <Label>비밀번호</Label> <Password type="password" placeholder="비밀번호를 작성해주세요." /> </InputWrapper> </UserWrapper> <TitleWrapper> <InputWrapper> <Label>제목</Label> <Title placeholder="제목을 작성해주세요." /> </InputWrapper> </TitleWrapper> <ContentWrapper> <InputWrapper> <Label>내용</Label> <Contents placeholder="내용을 작성해주세요." /> </InputWrapper> </ContentWrapper> <AddressWrapper> <InputWrapper> <Label>주소</Label> <AddressNumber placeholder="07250" />{" "} <AddressButton>우편번호 검색</AddressButton> <Address /> <Address /> </InputWrapper> </AddressWrapper> <YoutubeWrapper> <InputWrapper> <Label>유튜브</Label> <YoutubeInput placeholder="링크를 복사해주세요." /> </InputWrapper> </YoutubeWrapper> <ImageWrapper> <InputWrapper> <Label>사진 첨부</Label> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> </InputWrapper> </ImageWrapper> <SettingWrapper> <InputWrapper> <Label>메인 설정</Label> <RadioButton type="radio" name="radio_button" /> <RadioLabel>유튜브</RadioLabel> <RadioButton type="radio" name="radio_button" /> <RadioLabel>사진</RadioLabel> </InputWrapper> </SettingWrapper> <SubmitButton>등록하기</SubmitButton> </Wrapper> ); } Css: import styled from "@emotion/styled"; export const Wrapper = styled.div` margin: 50px; padding: 20px; width: 800px; /* border: 0.5px solid gray; */ box-shadow: 0px 0px 10px gray; display: flex; flex-direction: column; align-items: center; `; export const Project = styled.div` font-size: 34px; font-weight: bold; `; export const InputWrapper = styled.div``; export const Label = styled.div` font-size: 16px; font-weight: bold; margin-bottom: 10px; `; export const WriterLabel = styled.div` font-size: 16px; font-weight: 900; text-shadow: 2px 2px 2px gray; margin-bottom: 10px; `; export const UserWrapper = styled.div` display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Writer = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const Password = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const TitleWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Title = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ContentWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Contents = styled.textarea` width: 100%; height: 300px; border: 1px solid #bdbdbd; `; export const AddressWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const AddressNumber = styled.input` width: 80px; height: 30px; border: 1px solid #bdbdbd; `; export const Address = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; margin-top: 20px; `; export const AddressButton = styled.button` background-color: black; color: white; height: 35px; cursor: pointer; `; export const YoutubeWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const YoutubeInput = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ImageWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const UploadButton = styled.button` background-color: #bdbdbd; width: 75px; height: 75px; cursor: pointer; margin-right: 10px; `; export const UploadButtonText = styled.div` display: flex; flex-direction: column; `; export const SettingWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const RadioButton = styled.input` cursor: pointer; `; export const RadioLabel = styled.span` font-weight: 500; `; export const SubmitButton = styled.button` background-color: yellow; height: 60px; width: 140px; font-weight: bold; cursor: pointer; `;

 안녕하세요. 강의 잘 듣고 있습니다.user - service - google가 있다고 했을 때,user가 oauth code grant방식으로 login을 하면 service가 callback을 통해 code를 받게되고, 그 정보와 다른 정보를 조합하여 google로 부터 access token과 refresh token을 받아올텐데요.여기서 token을 어떤식으로 처리하는지 궁금합니다.service가 google로 부터 받은 token들을 app으로 전달하는 건가요? 그렇다면 app은 token이 만료되면 google에 직접 토큰을 다시 요청하는걸까요? 아니면 service를 통해 relay를 해서 토큰을 다시 요청할까요? service는 token이 올바른건지는 검증할 수 없으니 db에 저장을 해 두고 나중에 같은 토큰을 user로부터 받았을때 같은지 비교해서 허용할 지 말지 알 수 있을거 같은데 이렇게 하는건가요?아니면 service가 직접 새로운 토큰들을 생성해서 관리하는게 좋을까요?그리고 public app에서 보안을 더 강화하기 위해 pkce방식도 쓰는거 같던데 실제 많이 쓰시는지 궁금하네요.답변 부탁드립니다.감사합니다.

08-ESLint & Prettier 강의를 보는 중인데 5분 27초 경에 강의 에서 나오는 eslint 에러가 저는 안나옵니다. eslint가 적용이 안되고 있는걸까요?강의 화면제 vscode 화면   

16:19의 3번에서 세션 객체를 찾아서 req.session으로 만든다고 했었는데 이전에 처음에 로그인 했을 때 req.session으로 등록된 세션 객체(13:40의 6번)는 사라진 건가요?

다음과 같은 에러가 뜨는데 어떻게 해결할 수 있을까요..??

const onChangeEmail = (event) => { console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); if (email === "") { alert(); }위의 코드를 실행할경우가장 첫 입력시 아래와 같은 문제가 발생합니다.(이메일 입력란에 'ㅁ' 입력)첫번째 console.log envent.target.value는 정상적으로 출력되며두번째 console.log는 "!@#" 을 제외한 email이 출력되지 않습니다. "!@#"만 출력됨if문의 경우 공백으로 인식해서 true 동작하여 출력이 되고 있습니다.원인은 무엇인가요?추가로 event 의 문제인가 싶어onChange가 아닌 onKeyUp 을 사용 할 경우에는f12 개발 디버깅쪽 console 에 error 표시가 잔뜩 발생합니다.이유가 무엇인가요?==================================email input tag에 최초 입력 시 아래의 코드처럼 onChange 함수안에 지역변수 testb 에 할당하는 event.target.value 는 출력되지만state 에 할당된 email 은 한반작 늦은? 출력이 됩니다.ex) input box 'ㅁ' 입력 시 결과state email = '' 공백출력지역변수 testb = 'ㅁ' 출력const onChangeEmail = (event) => { let testb = event.target.value; alert(testb); console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); 설명 부탁드립니다.

이 질문은 학습용임으로 사용목적에 대해서 답변을 구하는것은 아닙니다.function onChangePasword(e){}위와 같이 사용도 가능하지만const onChangeEmail = function (event) {}와 같이 익명함수로도 선언이 가능하자나요?질문코자 하는 내용은 아래와 같이 default 로 생성시 error 가 발생합니다.onChangeEmail = function (event) {}또한 화살표 함수를 사용시에도 동일한 문제가 발생합니다.const onChangeEmail = (event) => {} 정상onChangeEmail = (event) => {} error 이유가 뭔가요?

섹션1,2,3을 마친 학생입니다.섹션4인 react를 시작하다보니 버전도 안맞고 혼자 헤매다 보니까섹션23부터 다시 react파트부터 리뉴얼 되었더라구요섹션1,2,3을 마쳤다면섹션3~섹션22까지 뛰어넘고 23부터 들으면 되는건가요?그렇게 하는게 맞다면 진도에 의한 수료증은 어떻게 받을수 있나요?