inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

ssr방식과 csr방식

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

수업시간 5분 50초때 설명해주시기로는 ssr방식은 첫 페이지는 전통적인 방식으로 seo를 가능하게 하고, 이후 페이지 전환시에는 react방식으로 하신다고 하셨는데, 이게 next.js에서 구현된 ssr에 한하여 설명해주신건가요?? 아니면 next가 아니더라도 보편적인 ssr방식을 설명해주신건가요 ?? 동아리 면접 대비로 ssr, csr, spa, mpa 개념이 헷갈려서 공부하고있는데, 제가 이해하기로는 ssr은 브라우저의 요청시마다 페이지 전체를 데이터까지 적용하여 서버에서 전달받아 렌더링하는걸로 이해했는데, 6분때 설명해주시는것은 csr방식이 섞인것 같은데, 혹시 제 이해가 잘못되었나 싶어서 여쭤봅니다.. + 수업 1분20초에 ssr의 전체 과정이 길어서 로딩속도가 많이걸려 느리게 그려준다고 하셨는데, 다른 관련 블로그 글에선 오히려 csr방식이 서버에 첫 요청시 전체 페이지에 대한 문서파일을 받아오니 ssr보다 첫페이지 로딩속도가 느리다고 하더라고요. 그러면 첫페이지 로딩속도는 ssr이 csr보다 빠르고, 페이지 전환 속도는 csr이 ssr보다 빠르다고 정리하면 될까요?? 답변해주시면 감사하겠습니다 !

  • react
  • redux
  • node.js
  • express
  • next.js
ohjaehokor 댓글 2 좋아요 0 조회수 790

포트폴리오 댓글 무한 스크롤

해결됨

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

포트폴리오 과제에서 주셨던 무한 스크롤 리뷰가 오늘 강의에선 없네요! 혹시 이유가 있는걸까요?! 그리고 백앤드에 하나의 게시판에 달려있는 댓글 갯수를 가져오는 api가 따로 없던데 퀴즈처럼 무한스크롤을 직접구현하는 건가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
ju han 댓글 1 좋아요 0 조회수 542

.eslintignore 관련 문의

해결됨

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

안녕하세요. eslint와 prettier 설정 및 UI 프레임워크 강의 상에서는 .eslintignore가 적용되지 않는데 혹시 추후 강의에 이 부분이 다시 언급되는지가 궁금해서 문의 남깁니다. 혹시 언급되지 않는다면 어떻게 처리하면 될까요? 그리고 추가로 .eslintrc.js 파일 내용이 이전 강의랑 다른데 이건 왜 달라졌는지 알 수 있을까요? (이전 강의에서는 .eslintrc.js에 parser: @typescript-eslint/parser도 있었고, plugins에도 적용을 해주었던거 같은데 이번 강의에서는 다 빠져있어서 문의드립니다.)

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

front 인스턴스 퍼블릭 주소 접근 에러

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님..강의 따라 프론트 배포 후, aws인스턴스에 나와있는 퍼블릭 ip주소로 들어가서 프론트 서버가 실행되는지 확인해보니 연결을 거부했다는 창이 떴습니다. 우분투에서 npm run build 해서 info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps) 이렇게 빌드 하고, sudo npx pm2 start npm -- start 위의 명령어를 입력하니까 ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 start npm -- start npx: installed 184 in 13.279s [PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /usr/bin/npm in fork_mode (1 instance) [PM2] Done. ┌─────┬────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐ │ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │ ├─────┼────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤ │ 0 │ npm │ default │ N/A │ fork │ 19231 │ 0s │ 0 │ online │ 0% │ 26.1mb │ root │ disabled │ └─────┴────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘ 터미널에 이런 창이 떴구요, sudo npx pm2 monit 위의 명령어 입력하니까 ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 monit npx: installed 184 in 7.952s ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ npm run build > fahsionary@1.0.0 build /home/ubuntu/My-Projects/fourthProject/front > cross-env ANALYZE=true NODE_ENV=production next build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db info - Using external babel configuration from /home/ubuntu/My-Projects/fourthProject/front/.babelrc Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/server/analyze/client.html Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/analyze/client.html info - Creating an optimized production build info - Compiled successfully info - Collecting page data [ ==] info - Generating static pages (0/4)watchSinUp [====] info - Generating static pages (1/4)watchSinUp 메인포스트: [] undefined [=== ] info - Generating static pages (1/4)watchSinUp undefined watchSinUp info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ┌─ Process List ───────────────────┐┌── npm Logs ────────────────────────────────────────────────────────────────────┐ │[ 0] npm Mem: {#aN-fg} 0 MB ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ ┌─ Custom Metrics ─────────────────┐┌─ Metadata ───────────────────────────────────────────────────────────────────────┐ │ ││ App Name npm │ │ ││ Namespace default │ │ ││ Version N/A │ │ ││ Restarts 15 │ │ ││ Uptime 0 │ │ ││ Script path /usr/bin/npm │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ left/right: switch boards | up/down/mouse: scroll | Ctrl-C: exit To go further check out https://pm2.io/ 이렇게 뜨던데..어디가 문제인가요? vim package.json 하니까 "scripts": { "dev": "next", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80" }, scripts부분은 이렇게 나왔습니다 aws에서 프론트 인스턴스의 보안그룹 인바운드 규칙은 이렇게 구성했습니다. 백서버는 ip주소로 들어가면 수업 내용과 같이 hello express가 보여서 잘 실행되고 있는걸 확인했습니다. config폴더에에서 confing.js로 backUrl로 백 주소 정의해서 교체도 진행했어요

  • react
  • redux
  • node.js
  • express
  • next.js
뉸뉴 댓글 1 좋아요 0 조회수 601

401 오류

미해결

[리뉴얼] React로 NodeBird SNS 만들기

쿠키 세션과 전체 로그인 흐름 강의 까지 들었습니다. 안녕하세요. 로그인시 401 오류가 생겨서 해결을 못하고 있습니다. user saga 에서 logInAPI랑 logIn 부분에서 error가 생기고 있는거 같은데 이유를 찾지 못했습니다. 아래에 비슷한 질문이 있길래 봤더니 json 형식으로 axios.post 해줘야 한다고 하시는 거 같은데 이해를 못하겠습니다... 조금 더 길게 설명해 주실 수 있을까요?

  • react
  • redux
  • node.js
  • express
  • next.js
ea 댓글 1 좋아요 0 조회수 586

회원가입 페이지 기능생성 질문입니다

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. docker compose up 을 작성했는데 이런식으로 나와서 연결이 된건지 안된건지 모르겠습니다. 오류문구가 뜨지는 않지만 회원가입 눌렀을때 백엔드 문구가 뜨지 않아서 연결이 안된거 같아 문의드려봅니다. 혹시 어느 부분이 잘못된건지 알수 있을까요? [+] Running 1/0 ⠿ Container postgres Running 0.0s Attaching to postgres

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
Cacamoli 댓글 1 좋아요 0 조회수 518

GraphQL 목록 삭제가 실시간으로 반영되지 않아요

해결됨

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

import { gql,useMutation,useQuery } from "@apollo/client" import styled from "@emotion/styled" const FETCH_PRODUCT = gql` query fetchBoards($page:Int){ fetchBoards(page:$page){ writer title contents number } } ` const FETCH_DELETE = gql` mutation deleteBoard($number:Int){ deleteBoard(number:$number){ message } } ` const Row = styled.div` display:flex; ` const Column = styled.div` width: 25%; ` export default function StaticRoutedPage(){ const{data}=useQuery(FETCH_PRODUCT, {variables:{ page:2 }}) const[deleteBoard]= useMutation(FETCH_DELETE) console.log(data?.fetchBoards) const onClickDelete= async (event)=>{ await deleteBoard({ variables:{ number: Number(event.target.id) }, refetchQueries:[{query: FETCH_PRODUCT}] }) } return ( <> {data?.fetchBoards?.map((el)=>( <Row> <Column><input type="checkbox"/></Column> <Column>{el.number}</Column> <Column>{el.title}</Column> <Column>{el.contents}</Column> <Column> <button id={el.number} onClick={onClickDelete}>삭제</button> </Column> </Row>))} </> ) }

  • react
  • node.js
  • seo
  • graphql
  • next.js
웹서퍼 댓글 1 좋아요 0 조회수 468

로그인 섹션 이후 리뷰 및 완성코드

해결됨

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

안녕하세요, 중고마켓을 진행하게 되는 로그인 섹션부터는 포트폴리오 리뷰가 진행되지 않는다고 하셨는데, 완성코드도 제공이 되지 않는걸까요? 제공이 되지 않는다면 모르는 부분에 대해선 코드수정과 리뷰는 어떻게 알 수 있을까요??

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

back에 mysql설치 중 뜬 메시지 질문

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님. 우분투(back)에 mysql 설치 커맨드를 강의 따라 입력하다가 터미널 창에 아래와 같은 메시지가 떴는데 우분투가 mysql에 지원되지 않는 서버라고...?? 목록에 있는 시스템 중 하나를 선택하라고 하는데 이때 뭘 선택해야 하나요? 명령어 sudo dpkg -i mysql-apt-config_0.8.13-1_all.deb 입력하니까 저런게 나왔어요.우분투 22.04 LTS 입니다. mysql --version 하니까 mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu)) 이렇게 나오던데 계속 진행해도 될까요?

  • react
  • redux
  • node.js
  • express
  • next.js
뉸뉴 댓글 1 좋아요 0 조회수 583

infinite-scroller 무한 스크롤

해결됨

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

선생님 안녕하세요... 정말 열심히 하였지만 무한 스크롤 때문에 정말 머리가 터질것같습니다.. 댓글 한번만 작성 했는데... 사진처럼 여러개가 나옵니다 해결 방법이 있을까요ㅠㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
뽕리뽕뽕 댓글 1 좋아요 0 조회수 952

Prettier 적용 오류

해결됨

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

다른 때에는 prettier가 잘 동작하는데 useQuery, useMutation Hook에 type을 지정하면 prettier가 잘 작동하지 않습니다. useQuery에 타입을 지정하지 않거나, 코드를 주석처리하면 prettier가 잘 작동합니다. const { data, refetch } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(FETCH_BOARDS);

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

회원가입 폼 과제 정답

해결됨

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

안녕하세요, 혹시 강의에 나와 있는 회원가입 폼 피그마로 되어 있는 부분 정답지는 따로 알 수 없는걸까요 선생님?

  • react
  • node.js
  • seo
  • graphql
  • next.js
다댕 댓글 3 좋아요 0 조회수 680

트랜잭션 롤백 시 Insert 쿼리

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 위와 같이 테스트를 구현하고 테스트 실행 시 Insert 쿼리가 나갑니다. 그런데 예외가 발생했기 때문에 롤백이 되어서 또는 테스트의 트랜잭션 디폴트 값이 Rollback이라서 Insert 쿼리가 나가지 않아야 하는 것 아닌가요?

  • java
  • spring
  • spring-boot
  • jpa
엽엽 댓글 1 좋아요 0 조회수 939

Task :test FAILED이 뜹니다.

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] gradlew build를 하면 이런 에러가 발생합니다. 인텔리제이 설정에서 build Tools > Run tests using 항목을 IntelliJ IDEA로 변경을 해보았으나 에러는 동일하게 발생했지만 해결책을 모르겠습니다.

  • java
  • spring
  • mvc
  • spring-boot
임찬휘 댓글 1 좋아요 0 조회수 1211

db에서 Join vs 애플리케이션에서 조합

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 제가 한 게시판에서 이런 글을 읽었습니다. "요즘에는 논리적인 연관관계는 만들지만 db에서는 만들지 않고 조인 연산을 거의 안 하고 여러 번 쿼리해서 애플리케이션에서 조합합니다." 이유로는 연관관계를 맺으면 테이블 설계에 있어 유연성이 떨어짐 조인연산은 db 자원을 많이 잡아먹는 무거운 연산이고 db 성능에는 한계가 있어 서버를 확장해서 자원을 쓰는 것이 유리함 라는 근거를 들었습니다. 이것이 맞는 판단인지 궁금합니다 (금융권에 계신 분이 쓴 듯 합니다)

  • java
  • jpa
dudwns328 댓글 3 좋아요 2 조회수 3597

apollo-upload-client 설정 시 uploadLink 부분 질문이 있습니다.

해결됨

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

강의 명: 이미지 업로드 프로세스 이해 및 실습 시간대: 1시간 1분 35초쯤 해당 부분에서 uploadLink를 넣으실 때 에러가 안뜨시던데 저는 위와 같은 타입 에러가 뜹니다. (모든 에러 구문은 마지막 부분에 있습니다) 물론 타입스크립트 apollo-client-upload의 타입스크립트 부분도 다운로드 받았습니다. TS 에러라 실제 업로드 기능 테스트에는 문제가 없었지만 저만 에러가 뜨는 것 같아서 찝찝한 마음에 질문을 올려봅니다. 버전 차이일까요? (일단 uploadLink 변수 뒤에 any를 붙여주면 컴파일 에러가 사라지긴 했습니다.) 사용 중인 버전 { "name": "class", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "generate": "graphql-codegen" }, "dependencies": { "@ant-design/icons": "^5.0.1", "@apollo/client": "^3.6.9", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@material-ui/core": "^4.12.4", "@next/font": "13.1.2", "antd": "^4.22.8", "apollo-upload-client": "^17.0.0", "axios": "^0.27.2", "graphql": "^16.6.0", "next": "12.1.0", "react": "17.0.2", "react-daum-postcode": "^3.1.1", "react-dom": "17.0.2", "react-infinite-scroller": "^1.2.6" }, "devDependencies": { "@graphql-codegen/cli": "^3.0.0", "@graphql-codegen/typescript": "^3.0.0", "@types/apollo-upload-client": "^17.0.2", "@types/node": "17.0.2", "@types/react": "17.0.2", "@types/react-infinite-scroller": "^1.2.3", "@typescript-eslint/eslint-plugin": "^5.0.0", "eslint": "^8.0.1", "eslint-config-prettier": "^8.6.0", "eslint-config-standard-with-typescript": "^34.0.0", "eslint-plugin-import": "^2.25.2", "eslint-plugin-n": "^15.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.32.2", "prettier": "2.8.4", "typescript": "*" }, "resolutions": { "@types/react": "17.0.2" } } 설정 코드 에러 내용 전문 const uploadLink: ApolloLink 'ApolloLink' 형식은 'ApolloLink | RequestHandler' 형식에 할당할 수 없습니다. 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식에 할당할 수 없습니다. 'split' 속성의 형식이 호환되지 않습니다. '(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/cor...' 형식은 '(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/clas...' 형식에 할당할 수 없습니다. 'left' 및 'left' 매개 변수의 형식이 호환되지 않습니다. 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").RequestHandler' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").RequestHandler' 형식에 할당할 수 없습니다. 'ApolloLink' 형식은 'ApolloLink | RequestHandler' 형식에 할당할 수 없습니다. 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' 형식에 할당할 수 없습니다. 'split' 속성의 형식이 호환되지 않습니다. '(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/clas...' 형식은 '(test: (op: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/cor...' 형식에 할당할 수 없습니다. 'right' 및 'right' 매개 변수의 형식이 호환되지 않습니다. 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@types/apollo-upload-client/node_modules/@apollo/client/link/core/types").RequestHandle...' 형식은 'import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("c:/Users/PC/Desktop/real_project/study/class/node_modules/@apollo/client/link/core/types").RequestHandler | undefined' 형식에 할당할 수 없습니다. 'ApolloLink' 형식은 'ApolloLink | RequestHandler | undefined' 형식에 할당할 수 없습니다.ts(2322) 감사합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
FRONTEER 댓글 1 좋아요 1 조회수 928

try/catch 내 error 관련 질문이 있습니다.

해결됨

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

안녕하세요 멘토님, 항상 양질의 강의 잘 듣고 있습니다. 저번에 질문 올리려다 까먹고 못 올렸다가 다시 기억나서 올리는 질문입니다. try/catch 구문에서 error.message는 graphql 에서 예외처리 될 때 보내지는 에러 메시지인지 아니면 graphql이 아닌 백단 부분(node 코드) 같은 곳에서 예외처리 되어 보내지는 에러 메시지인지 궁금합니다. 수업 때 들은 기억으로는 error 객체가 백엔드에서 보내주는 에러에 대한 정보라고만 들었던 것 같은데, 궁금하여 질문 올립니다. 감사합니다.

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

votes기능 부분

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 1.위 이미지처럼 comments.votes를 했는데 저렇게 Array만 뜨는데 값을 가져올 수 있는 건가요?? 위 이미지 처럼 postId와 commentID를 넣은게 아닌 comment 객체와 Post 객체를 넣었는데 어떻게 DB에는 postID와 CommentId가 들어간건지 알 수 있을까요??

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
oridori2705 댓글 1 좋아요 0 조회수 470

GraphQL $boardId: ID! 오류

해결됨

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

안녕하세요! 강의듣는데 혼자서는 오류를 해결하지 못 할것 같아서 질문드립니다! 오류뜨는 부분은 freeboard_frontend > boards > [_id] > index.js (상세페이지) 입니다. 글 작성 -> 상세페이지로 이동 -> 상세페이지에서 수정 버튼 누르면 수정페이지로 이동 -> 수정페이지에서 수정하고 수정버튼 누르면 다시 상세페이지로 이동 > 상세페이지에서 삭제버튼 클릭하면 삭제후 리스트로 이동 제가 의도한 기능들은 모두 정상작동은 하는데 상세페이지에 만 접속하면 해당 오류가 발생합니다..! (상세페이지 query 코드입니다) -> $boardID: ID! 이부분에서 오류가 나는것 같은데 강의 자료실에 올라온 코드와 비교해봤지만 같게 작성된걸 확인했습니다! (상세페이지 접속했을때만 NetWork에 이렇게 뜹니다ㅠㅠ) 한가지 더 궁금한 점이 있습니다! 타입 지정해줄때 Docs 보고 그대로 적으면 된다고 하셨는데 ($boardId: [ID!]!) 이렇게 적으니까 오류가 나서 ($boardId: ID!) 이렇게 적으니까 작동이되더라구요.. 제가 강의 들으면서 빼먹은 부분이 있는걸까요ㅠㅠ? 이럴땐 어떻게 적어야 할까요ㅠ?? export const DELETE_BOARD = gql` mutation deleteBoard($boardId: ID!){ deleteBoard (boardId: $boardId) } `;

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

GET http://localhost:4000/images/null 404 (Not Found)

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요. 이미지 업로드 부분을 다 작성하고 이미지까지 잘 올라가지는데 console을 보니 null:1 GET http://localhost:4000/images/null 404 (Not Found) 이런 오류가 뜨는데 무시해도 상관 없는건가요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
김현성 댓글 1 좋아요 0 조회수 1255

인기 태그

인프런 TOP Writers

주간 인기글