173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
http://practice.codebootcamp.co.kr/graphql 에서 mutation을 가져올때 백틱 안에 들어가면서 강사님과는 다른 포맷으로 입력됩니다. 데이터를 받아오는 과정에서 문제가 생기진 않는데 뒤의 수업에서 자동완성이 되지 않거나, # 주석도 표현되지않고 죄다 연두색으로 표현되는 문제가 있습니다. 왜 다르게 표현되는거죠? 강사님처럼 쉼표를 붙이고 자리를 똑같이 만들어도 변하지 않네요,,,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
1번부터 난관이네요ㅜ createBoard 생성하는데 무엇이 문제일까요? 오류는 boardAddress부분인것같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
_app.js에 글로벌 적용시켜서 전체 레이아웃은 잡았는데 작성자랑 비밀번호 구역이 들어가는 부분에서 justify-content: space-between; 명령어가 먹질 않아요ㅠㅠ 뭐가 문젠가 해서 justify-content: center 해봐도 먹히지않아 문제가 다른곳에 있는것같은데 도통 알수가 없습니다.. 아래에 코드 첨부합니다ㅠ index.js emotion.js
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 멘토님 이 질문이 하나쯤은 있을 줄 알고 찾아봤는데 없어서 올립니다. antd 별점과 모달을 듣고 섹션9 퀴즈 부분을 진행 중인데 섹션9 퀴즈 1번인 별점 클릭 시 별점 가져오기를 진행하는데 점수가 이상하게 출력됩니다. 4점 위치에서 클릭하면 2점이 나온다던가, 3점 위치에서 클릭하면 뒤이어 아까 선택했던 4점이 나오는 등 이전에 선택했던 별점들이 한 차례 뒤로 밀려서 출력되는 느낌입니다. 추후에 해당 부분 리뷰가 있을진 모르겠으나, 먼저 퀴즈와 포폴을 다 만들고 보려고 하는 것도 있고 해당 부분은 왜 이런지.. 추후에 포폴에 적용할 때도 문제가 될듯 싶어서 질문올립니다. 그리고 어떨 때는 강의에서 알려주신 것 처럼 import "antd/dist/antd.css"; 를 import해야 정상 렌더링 되는 때가 있고, 어떨 때(어떤 것?)는 해당 CSS를 import하지 않아도 정상 렌더링 되는 현상도 있습니다. 이것은 또 왜 경우가 나뉘는지 궁금합니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요~ 포트폴리오 주소 가져오기 공부하면서 질문드립니다 BoardWrite 컨테이너 파일과 타입스 파일에서 타입 명시해주는 부분이 이해되지 않습니다 동그라미 친 부분만 그대로 타입 명시해주면 되는 줄 알았는데 타입스 파일에는 4부분으로 나눠져서 타입이 명시되 있어서요~ 저는 타입스 파일에서 4번째 동그라미만 있으면 될 것 같았어요~
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 ant design 사이트에서 별점을 가져와서 사용하는 부분 질문있습니다 콘테이너 파일에서는 리턴부분에 바로 setStar={setStar}로 넘겨주면 프레젠터 파일에서 props.setStar로 받고 있습니다 다른 매개변수처럼 onChange 함수를 사용하지 않고 바로 setStar로 넘겨주는 이유는 무엇인가요? 작동이 되는 이유가 궁금합니다 그리고 types 파일에서 setStar: Dispatch<SetStateAction<number>>; 타입을 이렇게 받고 있는데 이 설명은 강의에서 못본것 같아서요~ ant design 사이트에서 알 수 있는 것인가요?? BoardCommentWrite.container.tsx 파일 BoardCommentWrite.types.tsx 파일
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님! 시간을 짬짬히 내서 공부하는지라 진도는 느리지만 그래도 여차저차 타입스크립트 포폴 전환까지 완료헀습니다. 빨간 줄 한 곳도 없이 무사히 전환 완료하였으나 강의 내용에도 나오지 않은듯한? 부분에서 궁금한게 생겨서 질문 드립니다. 댓글 리스트 컴포넌트 부분을 map으로 렌더링 하는 방식으로 작업하였는데요, 여기 el의 타입을 지정하는 부분에서 Pick<IQuery, "fetchBoardComments"> 타입이 먹히지 않아서 삽질을 좀 했습니다. 그래도 여차저차 types.ts 내부를 참고하면서 수정해본 결과, el: IBoardComment 를 그대로 el의 타입으로 지정해주니까 컴파일 에러가 사라지고 해결되었습니다. 이건 알고 해결했다기 보다는 모르고 바꿨는데 운 좋게 에러가 사라진 것이라 왜 해결됐는지 알고 넘어가고 싶어서 질문드립니다. (이게 편법이거나 정답이 아닐 수도 있다는 생각도 들었습니다.) 그리고 Pick<IQuery, "fetchBoardComments"> 와 IBoardComment 는 어떠한 차이가 있는지 궁금합니다. 참고로 el을 props drilling 하여 보낸 presenter 부분은 이렇게 사용하고 있습니다. 감사합니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
강의에서 포트가 남아있을경우 killall -9 node명령어를 사용하라고 하셨는데요.. 포트가 남아있다는게 무슨 뜻인지 모르겠습니다.. 저는 vscode로 진행중이며, npm run bulid 후에 npm run dev로 서버를 다시 시작하고 코드가 변경될때마다 Ctrl + c로 껏다가 다시 재시작 하여 반복 하는데요. 강사님께서는 killall -9 node를 사용하시는데 이걸 왜 쓰는지 모르겠어요.. 그리고 killall node 사이의 -9 는 무슨뜻인가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
최초 접속시 10초가 넘는 로딩시간이 걸립니다. 왜 그런지 알 수 있을까요? 그 이후로는 빠르게 동작합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의는 hydration 들으면서 실습하던중으로, 게시글 등록시 해당 에러가 발생하는데, 토큰 만료는 어느 부분을 놓친지 모르겠습니다. 짐작건데, accessToken store쪽을 잘못저장해놨나 싶어서 캡쳐해봤습니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
해당 챕터에서 빌드 시 문제가 발생했습니다. 1. getStaticProps 사용 시 발생한 에러입니다. FetchError: request to http://localhost:3000/api/stores failed, reason: connect ECONNREFUSED 127.0.0.1:3000 구글 검색해보니 getStaticProps 말고 getServerSideProps를 사용하라 하네요?? 아마 로컬 서버에 접근을 못해서 그런듯 하구요 getServerSideProps를 사용하니 TypeError: fetch failed 에러로 빌드 실패 Axios로 교체 후 시도해도 역시 실패 Node 18에서 위와 같은 문제가 발생한다는걸 발견함 Node 16으로 교체하니 빌드 성공 결론: 노드 LTS버전 말고 16버전 사용하면 이유는 모르겠지만 해결이 되긴 한다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입이나 로그인 후 주소가 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_presenter import { 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;
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
vs code로 작업해도 상관없을까요? 그리고 npm 말고 yarn을 사용하시는 이유가 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당강의 찾아봐도 셋팅하는 부분은 안나오고 그냥 설치시 버전 오류가 발생합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위의 사진은 section2 quiz입니다. section별 quiz 정답을 못찾겟네요!! 고난도는 답이 따로 없다고는 기억 하고있는데 고난도를 제외한 문제들의 정답들은 어디있나요? ㅎㅎ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
boardCommentWrite.container 댓글 작성 컨테이너 안에서 작동된 업데이트 함수의 refetchQueries 가 어떻게 다른 폴더의 boardCommentList.presenter 댓글 리스트 프리젠터 부분을 정확히 리페치 시켜주는지 원리를 잘 모르겠습니다. isEdit = true, false 같은 경우에는 댓글 수정화면 또는 리스트 화면으로 변경되는건 setIsEdit 함수를 자식 컴포넌트에 props drilling 했기에 바꿔줄 수 있다는 부분은 이해가 됐습니다. 그런데 아무리 부모 자식 관계라도 아예 다른 경로에 존재하고 뭔가 setIsEdit 같은 직접적인 매개체도 없는데 어떻게 부모 컴포넌트의 댓글 리스트의 존재와 위치를 알고 그 부분을 정확히 refetchQueries 를 시켜준건지 원리가 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 멘토님 항상 좋은 강의 잘 보고 있습니다. 궁금한 점이 생겨서 문의를 드렸는데요, 수업을 하면서는 몰랐는데 타입스크립트와 graphql-codegen에 대하여 강의를 들으면서 09-01 폴더를 10-01로 복사 후, 수업 후반부까지 import 부분에서 계속 빨간줄이 뜨길래 원인을 한참 찾았는데 알고보니 저는 여태까지 컴포넌트를 import 할 때 절대경로를 사용하고 있었습니다. (import 할 때 자동완성 사용) 왜 인지는 모르겠지만 .js 파일까지는 절대 경로를 사용해도 문제가 없었는데 타입스크립트로 변환을 하니까 여태 잘 사용하던 절대경로가 빨간줄이 계속 뜨고 상대경로를 입력하니까 빨간줄이 사라지더라구요. 09-01 .js 실습 파일 (빨간줄 없이 정상작동) 10-01 .tsx 실습 파일 (절대경로 - 빨간줄, 상대경로 - 정상 작동) 이렇게 JS 에서는 되던 절대경로가 TS 에서는 왜 안되는 것인지가 궁금하여 질문드렸습니다. 감사합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
postman 설치후 빈화면을 보여주라고 하시는데 저는 선생님이랑 다른 화면이 나오는데 어떤메뉴로 들어가야 하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 보고 따라하는 중인데 yarn generate가 제대로 작동하지 않고 에러가 나옵니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 버전을 강의 버전으로 맞춘 후 node_modules와 yarn.lock 지우고 yarn install 후 yarn dev 했습니다. 에러는 그대로입니다. 콘솔 에러메시지구요, 요 문제 해결을 못해서 다음으로 진행을 못하고 있네요 ㅠㅠ 도와주십숑..
