inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

27:25초에 나의그래프큐엘셋팅 파일로 이동하는방법

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

27:25초에 나의그래프큐엘셋팅 파일로 바로 이동해지는데 어떻게 하는걸까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
손성오 댓글 1 좋아요 0 조회수 233

포트폴리오 31-1 과제 중 오류, password is not defined

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 과제 중, 게시물을 등록하고 수정할 때 비밀번호를 똑같이 입력했는데 저런 오류가 뜹니다 ....ㅠ 해결방법을 잘 모르겠습니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
naeun 댓글 1 좋아요 0 조회수 231

newAccessToken 이 바로 적용되지 않습니다

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1. 에러 캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2. 해당 에러가 토큰만료 에러인지 체크 if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( //2. refreshtoken으로 accessToken을 재발급 받기 getAccessToken().then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); //3. 재발급 받은 accesstoken 으로 방금 실패한 쿼리 실행하기 operation.setContext({ header: { ...operation.getContext().headers, //기존의 authorization: Bearer '만료된 토큰' Authorization: `Bearer ${newAccessToken}`, //3-2 authorization 만 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); //3-3 방금 수정한 쿼리 재요청하기 } } } }); 수업이랑 동일하게 코드를 작성하였으나 버튼을 눌러도 재발급된 accessToken 이 들어가지 않아 error 가 발생하고 2번이상 눌러야지만 accesstoken 이 제대로 수정되서 정상적으로 실행됩니다. 어디가 문제일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 3 좋아요 0 조회수 448

리액트 깃허프

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

리액트 작업을 컴퓨터 이동하면서 하고싶은데 usb론 너무오래걸려서 깃헙으로 하고싶은데 깃헙에 빌드해서 올리면 다시 받을때 어떻게 받아서 작업해야할까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
주재 댓글 1 좋아요 0 조회수 241

스터디 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 해당 강의를 통해 프론트엔드 기술을 학습 중인 취준생입니다. 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리하는 것이 문제가 되는 사항인지 여쭤봅니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
현정 댓글 3 좋아요 0 조회수 542

Server Cannot be Reached

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

vscode에서 계속 오류 떠서 playground에서 보내보았는데 server cannot be reached가 계속 뜨면서 docs도 무한 로딩중이에요 ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
김무연 댓글 1 좋아요 1 조회수 257

SSR vs SSG

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요 강의 정말 잘 듣고있습니다! SSG가 SSR보다 사용자 경험이 좋은건 이해했습니다! 근데 한가지 더 의문점인건 SSG가 아니고 SSR을 선택해야하는 케이스가 있을까요? 라는 의문이 듭니다! 예를 들면 검색결과 페이지라던가 매번 매순간 페이지의 내용이 달라지는 페이지라면 SSG가 아니고 SSR로 만드는게 더 적합한 그런 케이스가 실무에서 있을까요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
박굿뜨 댓글 2 좋아요 1 조회수 504

NoSSR 관련한 질문입니다:)

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

강의후반부에 window 에 접근하는 상황인 NoSSR 을 수강하면서 해당 상황이 어떤 케이스인지 확인차 질문 남깁니다. Next 에서 window 나 document 같이 WebAPI 에 기재된 객체들에 접근하는 코드를 쓸 때 백엔드 단에서 접근이 불가하니, dynamic 을 사용한다 정도로 이해하면 되려나요?.? 이와는 다르게, useEffect 의 경우 브라우저에서 렌더가 될 때 코드가 돌아가니까 WebAPI 에 접근이 가능하다 정도로 이해하면 되려나요?.?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
jj4783 댓글 1 좋아요 1 조회수 395

"한줄씩 디버깅하는 법" 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. 기존에는(강의 듣기전) visual studio 2019 버전 C++로 코드를 작성하고 F10, F5 등으로 한줄씩 디버깅을 진행했던 경험이 있습니다. 그런데 프론트엔드쪽에 관심을 가지면서 해당 강의를 수강하고 있는데, visual studio code를 통해 html, css와 javascript 역시 F10과 F5를 활용하면 한줄씩 디버깅하면서 해당 변수에 어떠한 값이 할당되는지 알 수 있을까요? 예를 들면 싸이월드 만들기 4탄에서 javascript를 통해 끝말잇기 게임을 만들었는데 해당 javascript의 동작 과정을 한줄씩 디버깅 해보고 싶습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
박재민 댓글 2 좋아요 0 조회수 405

yarn generate 실행시 YAML Error 발생하는 분들!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

참고 - https://stackoverflow.com/questions/19975954/a-yaml-file-cannot-contain-tabs-as-indentation codegen.yaml 파일에서 들여쓰기를 모두 지우고 띄어쓰기(space 키) 2번씩으로 바꿔주시면 해결됩니다!(plugins와 config는 띄어쓰기 4번, - typescript와 typesPrefix: I 는 띄어쓰기 6번, 이런식으로)

  • react
  • node.js
  • seo
  • graphql
  • next.js
joka 댓글 2 좋아요 0 조회수 473

@graphql-codegen/cli 설치시 EPERM: operation not permitted 에러나시는 분들!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

섹션8 - graphql-codegen 설치 및 실습과 기타 타입 영상시간 0:18:13 구간에서 yarn add --dev @graphql-codegen/cli 설치 시 에러가 날 경우 해당 프로젝트의 node_modules 를 삭제 yarn install 명령어로 node_modules를 재설치 다시 yarn add --dev @graphql-codegen/cli 로 설치 이렇게 해주면 에러없이 잘 설치가 됩니다! 혼자 검색도 해보고 컴퓨터랑 vscode 껐다켜보기도 하고 여러 시도 끝에 겨우 해결했네요 ㅠ 다른 수강생분들은 저처럼 시간낭비하지 않으시길 바라겠습니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
joka 댓글 1 좋아요 0 조회수 257

댓글 기능 컴포넌트 구조

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강사님 안녕하세요~! 자유게시판의 댓글 기능과 중고마켓의 댓글 기능을 리팩토링하면서 공통으로 뺄 수 있는 부분은 최대한 빼보려고 하고 있는데요. 댓글생성, 댓글수정 등등 각각의 뮤테이션도 모두 다르고 조건(회원/비회원, 자유게시판/중고마켓) 따라 보여지는 부분도 상당히 달라서 최대한 공통인 부분으로 잘게 쪼개봤는데도 코드 길이가 너무 길어집니다 ㅜㅜ 받아오는 데이터의 타입들도 각기 달라서 점점 더 미궁속으로 빠지고 있습니다 .... 자유게시판과 중고마켓 각 디렉토리에서 댓글 컴포넌트를 만들고 그 안에서 공통 UI 컴포넌트와 사용하는 뮤테이션들을 추가하는 방식으로 하고 있는데 계속 생각해봐도 비효율적이라는 생각이 들어서요 .. 데이터 타입, 뮤테이션, 렌더링 조건 등등이 모두 다른 이런 상황에서 공통으로 기능을 어떻게 빼야할지 조언 부탁드려도 될까요?🥹

  • react
  • node.js
  • seo
  • graphql
  • next.js
summery 댓글 2 좋아요 0 조회수 332

로그인한 회원이 자유게시판 글 작성할 때 오류가 납니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 강사님 ! 로그인한 회원이 자유게시판에 글을 쓸 때 작성자가 존재하지 않는다는 오류가 나옵니다. 피그마 화면에 작성자와 비밀번호 인풋이 없어서 똑같이 비회원일 때만 보여주도록 했고 뮤테이션을 날릴 때에도 필수값이 아니라 비회원 글작성 뮤테이션을 똑같이 썼습니다. 그런데 작성자가 존재하지 않는다는 오류가 나요. 플레이그라운드에서 토큰을 넣고 똑같이 시도해봤는데 CreateBoardInput 에 작성자랑 비밀번호를 다 넣어줘야 정상적으로 등록이 되더라구요. 타입을 보면 필수가 아닌데.. 제가 놓친 부분이 어디인지 잘 모르겠습니다 ㅠㅠ 강의는 완강했습니다! +댓글등록도 해보는데 댓글은 작성자가 없다는 오류 없이 정상적으로 등록되지만 user 정보가 같이 저장되지 않습니다. 저는 토큰에서 user 정보를 알아서 가져가는 줄 알았는데 그게 아닌건지, 그게 맞는데 제 코드가 잘못된건지 모르겠습니다 😂

  • react
  • node.js
  • seo
  • graphql
  • next.js
summery 댓글 2 좋아요 0 조회수 262

동적라우팅

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

동적 라우팅 폴더를 생성해서 강의 따라서 입력했는데 경로에 들어가면 qqq 폴더 관련하여 에러가 뜹니다ㅠ 다르게 입력한건 없는데 왜 이런걸까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
쟌 댓글 1 좋아요 0 조회수 211

라우터 푸시

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

섹션 27 라우팅 강의를 따라서 진행하며 useRouter 를 사용해 router.push(/폴더경로) 를 입력하고 버튼 onClick 이벤트에 바인딩 해주었습니다. 각 버튼 클릭시 url 은 정상적으로 이동되는걸로 나오는데, UI 화면은 바뀌지가 않습니다. 콘솔로그를 찍어봐도 클릭 이벤트도 정상작동 되는걸로 나오는데.. 도대체 뭐가 문제일까요ㅠ APP.js 에서 컴포넌트를 바꿔봤을 때도 각 버튼 별 이동 페이지들이 문제없이 뜨는걸 확인했습니다. url 이동시 화면만 새로고침되지 않는 것 같아요.. 이렇게 경로 변경만 되고 화면은 리렌더링 되지 않는 경우엔 어떻게 해결해야하나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
댓글 0 좋아요 0 조회수 234

createBoard 질문있습니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

const 나의그래프큐엘셋팅 = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id } } `; 처음에 단순히 결과값을 _id 만을 받도록 코딩했었는데 이 결과 등록하기 버튼을 누르면 create 된 값이 화면에 리렌더링 되기는 했지만 글의 갯수가 10개로 고정이 됬습니다. 예를들어 이미 1,2,....,9,10 이라는 글이 화면에 보이는 상황에서 a라는 글을 추가하면 a,1,2,...,9,10 으로 화면이 보이는 것이 아니라 a,1,2...,8,9 까지만 보입니다. const 나의그래프큐엘셋팅 = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id writer title contents } } `; 그리고 다음과 같이 코드를 수정하게 되면 원하는 결과가 나오게 되었는데 무슨 차이가 있는 것일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 1 좋아요 0 조회수 262

게시판 API 만들기 - cors 빨간 밑

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 선생님! 강의 게시판 API 만들기 실습을 보고 ApolloServer 안에 cors: true를 적었는데 빨간 밑줄이 생기면서 ' { typeDefs: string; resolvers: { Query: { fetchBoards: () => Promise<Board[]>; }; Mutation: { createBoard: (parent: any, args: any, context: any, info: any) => Promise<string>; }; }; cors: boolean; }' 형식의 인수는 'ApolloServerOptions<any>' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'ApolloServerOptionsWithTypeDefs<any>' 형식에 'cors'이(가) 없습니다. 라고 오류가 떴는데 아무리 찾아봐도 해결방법을 몰라 글을 올리게 되었습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
Kim Siyoon 댓글 1 좋아요 0 조회수 411

회원가입 과제 피드백 부탁드립니다!

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 강의를 들은 이후 나름 열심히 과제를 수행중이었는데, 도저히 해결되지 않는 문제도 있고, 피드백을 받고 싶어 질문을 남깁니다! 여성, 남성 선택 박스의 가운데 공백이 아무리 해도 생기질 않습니다. 2. 이용 약관 아래에 <hr> 태그가 먹히지 않습니다. 입력하면 줄이 생겨야하는데 생기지 않고 있어요. (정확한 위치는 사진 속 주석 참고 부탁드립니다.) 3. 아래쪽 전체적 간격이 뭔가 어정쩡한 느낌입니다.. 4. 코드를 보시고 혹시 제가 고쳐야 할 점이나, 공부가 필요한 부분이 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
kannlann 댓글 1 좋아요 0 조회수 623

display: flex 의 기능은 무엇인가요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

프리캠프 css정렬강의에서 자식 box들을 정렬하기 위하여, 부모 box의 속성 및 값으로 display: flex을 먼저 쓰고, flex-direction : row로 할건지, flex-direction : column으로 할건지 결정하고. 이어 justify content나 align itmes등을 사용하던데 그럼, display: flex의 기능은 무엇인가요? display : flex 라는 코드 없이 위의 flex기능들을 구사하면 문제가 생기나요?? 시험삼아 display : flex 라는 코드 없이 뒤이어 flex-direction : row; justify items : center; align items : center; 라고 적고 확인해보니. 부모 박스 안에 자식 박스가 마치 flex-direction : column ; 만 실행된 것과 같은 효과가 나타났습니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
포켓몬마스터가될거야 댓글 1 좋아요 0 조회수 558

인기 태그

인프런 TOP Writers

주간 인기글