https://github.com/JaeHyuk1217/JH_mall/tree/master/shopping-mall server을 실행하면 이러한 오류가뜹니다... 환경변수 설정도 해보고 node 재설치도 해봤는데 되지 않습니다..

수업 도중, 플러그인 설치중에 이런 경고 문구를 확인하게 되었는데,문구에서도 그렇고 안내해주는 사이트들어가서 확인해보니subcriptions-transport-ws는 더이상 업데이트 되지 않는다고,대신에 graphql-ws 를 사용하길 강력하게 권장한다 하는데요.지금 수업을 따라갈때는 크게 문제가 없을거 같긴한데, 이부분에 대해, 수업내용을 graphql-ws를 사용하는 것으로 업데이트할 계획이 있으실지 궁금합니다.

해당 영상 5:45 에서 편집이 좀 튑니다. 내용이 살짝 반복되네요이전 강의영상들에서도 몇개 있긴했는데, 적어놓진 않았네요.앞으로 수업들으면서 튀는 부분이 또 나오면,추가글을 작성안하고 이글의 답변으로 남겨놓겠습니다.너무 제가 질문게시판 글 도배하는거같은 느낌이 있네요.;

섹션 5. Backend 개발 1 - subscription 부분을 진행하고 있습니다.subscriptions 라는 모듈을 설치해야했는데,git bash 터미널 에서는 해당 명령어는 작동이 안됐습니다.반면, powershell 터미널에서 명령어를 치니 잘 설치되었습니다.그래서 터미널은 bash 와 powershell 두개를 같이 사용하고 있습니다. <정리하자면>수업을 따라가면서, 저의 Windows 환경에서는서버실행은 git bash 에서 .bat 을 추가해서 명령어를 쳐야잘 작동했고,각종 모듈 설치할 때는 powershell 로 터미널을 바꿔서 해야했습니다.이부분은, 수업이 Windows 환경에서 수업이 진행되지 않았기도했고, 수업에서 언급되지 않았던 내용이라, 잘 되시는 분들도 있겠지만, 혹시나 저와 같은 어려움을 겪은 분들이 있을 것 같아서수업내용에 보완이 되길하는 바람으로 제보합니다.

깃허브 자료에 있는 코드에 있는 다른부분? 오탈자? 제보합니다.해당부분 _id : _id가 되어야 하지 않나요?그리고 이부분은 강의영상에서는 const 로 되어있던데강의자료에는 이부분만 let으로 되어있습니다. 상관없는 건가요?error 명령어 출력하는부분, throw 가 없네요 여기는.  

오탈자 제보합니다. 해당부분,updateFile 이 아닌uploadFile 이 되어야합니다. 이부분 때문에 계속 playground 가 하얀화면으로 아무것도 안나왔었어요.ㅠㅠ다행히 수업자료 파일은 제대로 나와있었어서 코드하나하나 비교해가면서 겨우 찾았네요..

 최초 접속시 10초가 넘는 로딩시간이 걸립니다.왜 그런지 알 수 있을까요? 그 이후로는 빠르게 동작합니다.

강의는 hydration 들으면서 실습하던중으로, 게시글 등록시해당 에러가 발생하는데, 토큰 만료는 어느 부분을 놓친지 모르겠습니다.짐작건데, accessToken store쪽을 잘못저장해놨나 싶어서 캡쳐해봤습니다.

 회원가입이나 로그인 후 주소가http://localhost:3000/login? 이나http://localhost:3000/signUp? 으로 이동해지며, url 뒤에 물음표가 붙습니다. 가끔 Failed to fetch 메시지가 뜨는것은 너무 많이 요청을 보내서 그런것같습니다만, 그것과 무관하게 아래의 이슈가 사라지지 않습니다. 지금 학습단계에서 임시로 사용하기로한 로컬스토리지때문에 발생한 이슈일까요? import React, { useEffect } from 'react'; import { ApolloLink, ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import { createUploadLink } from 'apollo-upload-client' import { useRecoilState } from 'recoil'; import { accessTokenState } from '@/src/commons/store'; interface Props { children: JSX.Element; } const GLOBAL_STATE = new InMemoryCache() const ApolloSetting = (props: Props) => { const [accessToken, setAccessToken] = useRecoilState(accessTokenState) useEffect(() => { if (localStorage.getItem("accessToken")) { setAccessToken(localStorage.getItem("accessToken") ?? "") } }, []) const uplodLink = createUploadLink({ uri: "http://backendonline.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}` } }) const client = new ApolloClient({ link: ApolloLink.from([uplodLink as unknown as ApolloLink]), cache: GLOBAL_STATE }); return <ApolloProvider client={client}>{props.children}</ApolloProvider>; }; export default ApolloSetting; import { Title } from '@/src/commons/styles/emotion' import * as S from './Login_styles' import React, { useEffect, useState } from 'react' import { useMutation } from '@apollo/client' import { type IMutation, type IMutationLoginUserArgs } from '@/src/commons/types/generated/types' import { LOGIN_USER } from './Login_query' import { Modal } from 'antd' import { useRouter } from 'next/router' import { useRecoilState } from 'recoil' import { accessTokenState } from '@/src/commons/store' const Login_presenter = () => { const [accessToken, setAccessToken] = useRecoilState(accessTokenState) const router = useRouter() const [input, setInput] = useState({ email: '', password: '', }) const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => { setInput({ ...input, [e.currentTarget.id]: e.currentTarget.value }) } const [loginUser] = useMutation<Pick<IMutation, 'loginUser'>, IMutationLoginUserArgs>(LOGIN_USER); const onSubmitSignUp = async () => { if (!input.email.includes("@") || !input.email.includes(".")) { Modal.error({ content: "이메일이 유효하지 않습니다." }); return } if (input.email && input.password) { try { const result = await loginUser({ variables: { email: input.email, password: input.password } }); if (!result.data) { Modal.error({ content: "로그인에 실패하였습니다." }); return } const accessToken = result.data?.loginUser.accessToken if (setAccessToken) { setAccessToken(accessToken || "") // 3. 로그인 성공페이지로 이동하기 void router.push('/') localStorage.setItem("accessToken", accessToken) // 임시로 사용 나중에 지울예정 } } catch (error) { if (error instanceof Error) { alert(error.message) } } } } return ( <S.LoginForm> <Title style={{ color: '#fff', "textAlign": "center", "marginBottom": "20px" }}>로그인</Title> <S.InputContainer> <S.Label htmlFor='email'>이메일</S.Label> <S.Input id='email' placeholder='이메일을 입력해주세요.' onChange={onChangeInput} /> </S.InputContainer> <S.InputContainer> <S.Label htmlFor='password'>비밀번호</S.Label> <S.Input id='password' placeholder='비밀번호를 입력해주세요.' onChange={onChangeInput} autoComplete="on" type='password' /> </S.InputContainer> <S.SubmitButton onClick={onSubmitSignUp}>로그인</S.SubmitButton> </S.LoginForm> ) } export default Login_presenterimport { accessTokenState } from '@/src/commons/store'; import { type IQuery } from '@/src/commons/types/generated/types'; import { gql, useQuery } from '@apollo/client'; import * as S from './Header_style' import { useRouter } from 'next/router'; import { useRecoilState } from 'recoil'; import { useEffect, useState } from 'react'; const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn { fetchUserLoggedIn{_id picture email name} } `; const Header = () => { const [accessToken] = useRecoilState(accessTokenState) const [isMounted, setIsMounted] = useState(false) const router = useRouter(); useEffect(() => { setIsMounted(true) }, []) const { data } = useQuery<Pick<IQuery, 'fetchUserLoggedIn'>>(FETCH_USER_LOGGED_IN); const onClickLogout = () => { if (localStorage) { localStorage.removeItem("accessToken") router.reload() } } return ( <S.Header> <S.Logo onClick={async () => await router.push(`/boards`)}> 🚢 FREE BOARD </S.Logo> {isMounted && <S.HeaderButtons> {!accessToken && <S.Login onClick={() => { void router.push(`/login`) }}>로그인</S.Login>} {!accessToken && <S.Signup onClick={async () => await router.push(`/signUp`)}>회원가입</S.Signup>} {accessToken && <S.Login onClick={onClickLogout}>로그아웃</S.Login>} {accessToken && <div>{data?.fetchUserLoggedIn.name}</div>} {accessToken && <div>{data?.fetchUserLoggedIn.email}</div>} {data?.fetchUserLoggedIn.picture && <img src={data?.fetchUserLoggedIn.picture}></img>} </S.HeaderButtons>} </S.Header> ); }; export default Header;

안녕하세요 4일차 공부를 하던중 willpay를 cart 에서 밖으로 꺼내 willpay-index.tsx 로 변경하게 되면서 이러한 오류가 뜨면서 장바구니가 담아지지 않습니다.(장바구니가 비어있을 때는 비어있다는 텍스트는 출력이됩니다) 코드상 오류 표시는 안나는데 해결이 안되서 여쭤봅니다. 감사합니다.

강의 해당 부분에서, 9:51은 try ( ) catch( ) 가 있는데9:58 에서는 이부분이 사라진상태로 나오는데요.어떤 것이 맞는 건가요? 

제보합니다. 경로가 /utils/formatDate 로 되어야합니다.오탈자 입니다.

meteor 설치가 안되어서 수업진행을 계속 못하고 있습니다.설치 진행하는데, 이렇게 node.js 14.x 이하 npm 6.x 이하로 설치하라고 나와서요. https://docs.meteor.com/install.html확인해보니 공식홈페이지에서도 이렇게 안내하더라구요.node.js 삭제하고 14.21.2버젼 받아서 설치하니, 잘 되었고,6분걸려서 설치완료되었습니다.그런데meteor run 해도, 반응없고.영상에서 안내해주신대로 명령어 쳐도 똑같은 반응만 나옵니다.+ 그리고npm i 로 설치를 했을 때에도 위와같은 에러와 경고? 가 뜨는데 문제 없겠죠?  구글링 해도 방법이 딱히 보이지 않아서,window 유저도 따라갈 수 있도록 설명 부탁드립니다.

gql`` 안에 코드 색상 나오게 하는방법이 있을까요?수업 중 schema 코드 보면, gql `` 백틱 안에 들어간 내용들이코드 색상들이 잘 구분이 되어있던데저는 강의와 다르게, 한색으로만 나오네요..

해당강의 찾아봐도 셋팅하는 부분은 안나오고그냥 설치시 버전 오류가 발생합니다.

 위의 사진은 section2 quiz입니다.section별 quiz 정답을 못찾겟네요!!고난도는 답이 따로 없다고는 기억 하고있는데 고난도를 제외한 문제들의 정답들은 어디있나요? ㅎㅎ

 boardCommentWrite.container 댓글 작성 컨테이너 안에서 작동된 업데이트 함수의 refetchQueries가 어떻게 다른 폴더의 boardCommentList.presenter 댓글 리스트 프리젠터 부분을 정확히 리페치 시켜주는지 원리를 잘 모르겠습니다.isEdit = true, false 같은 경우에는 댓글 수정화면 또는 리스트 화면으로 변경되는건 setIsEdit 함수를 자식 컴포넌트에 props drilling 했기에 바꿔줄 수 있다는 부분은 이해가 됐습니다. 그런데 아무리 부모 자식 관계라도 아예 다른 경로에 존재하고 뭔가 setIsEdit 같은 직접적인 매개체도 없는데 어떻게 부모 컴포넌트의 댓글 리스트의 존재와 위치를 알고 그 부분을 정확히 refetchQueries를 시켜준건지 원리가 궁금합니다.

다른 분 질문 글에 답변 달아주신 거 보니 학습 자료 업데이트 준비 중이라고 하셨는데 아직 업데이트된 건 아닌 건가요?업데이트되면 새 소식으로 알려주셨으면 좋겠네요.

수업 화면을 보면const typeDefs = gql` `백틱 안에 넣는 문자들도 컬러 표시가 되고주석 처리도 되는데 저는 한가지 색으로 표시가 되어서 주석 처리가 되는건지 알수가 없습니다.컬러테마는이걸 사용하고 있고, 다른 부분을 보면 강의에서 사용하는 테마와 같은 것 같은데백틱 안에 부분만 다르네요.뭐가 문제일까요?+다른 테마들로 바꿔봐도 백틱안에 문자는 한가지 색으로 표시되는거 보니까 컬러 테마 문제는 아닌것 같습니다. 

안녕하세요 멘토님항상 좋은 강의 잘 보고 있습니다.궁금한 점이 생겨서 문의를 드렸는데요,수업을 하면서는 몰랐는데 타입스크립트와 graphql-codegen에 대하여 강의를 들으면서 09-01 폴더를 10-01로 복사 후, 수업 후반부까지 import 부분에서 계속 빨간줄이 뜨길래 원인을 한참 찾았는데알고보니 저는 여태까지 컴포넌트를 import 할 때 절대경로를 사용하고 있었습니다. (import 할 때 자동완성 사용)왜 인지는 모르겠지만 .js 파일까지는 절대 경로를 사용해도 문제가 없었는데 타입스크립트로 변환을 하니까 여태 잘 사용하던 절대경로가 빨간줄이 계속 뜨고 상대경로를 입력하니까 빨간줄이 사라지더라구요.09-01 .js 실습 파일 (빨간줄 없이 정상작동)10-01 .tsx 실습 파일 (절대경로 - 빨간줄, 상대경로 - 정상 작동) 이렇게 JS에서는 되던 절대경로가 TS에서는 왜 안되는 것인지가 궁금하여 질문드렸습니다. 감사합니다!