inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

dto 필드 기본값 이슈에 대해 질문드립니다.

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요! 다음과 같이 GET: http://localhost:3000/posts 아무런 파라미터 값 없이 요청을 실행했을 때 dto 객체의 기본 상태는 다음과 같고, 응답 결과로 아래와 같은 nextURL을 받을 수 있었습니다. "next": "http://localhost:3000/posts?page=undefined&order__createdAt=ASC&take=20&where__id__more_than=23" cursorPagination 이기 때문에 page를 사용하지 않지만 url에는 조립되는 이유가 로직에 값을 검증하는 부분이 없어서 그런 것 같은데요, 아래와 같이 값(dto[key])를 검증하는 것을 추가하니 문제 없이 동작하였습니다. if ( dto[key] // 값 검증 추가 && key !== 'where__id__more_than' && key !== 'where__id__less_than' ) { nextUrl.searchParams.append(key, dto[key]); } "next": "http://localhost:3000/posts?order__createdAt=ASC&take=20&where__id__more_than=23" 그런데 강사님께서는 따로 검증하지 않고 진행하셨음에도 nextUrl 쪽에 page가 따로 붙어나오진 않는 것 같은데요, 어떤 차이에서 발생한걸까요?.. ㅠㅠ

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
흔들거북이 댓글 2 좋아요 0 조회수 111

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

해결됨

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

안녕하세요! 회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데 figma 처럼 라디오버튼의 기본 색상을 회색으로 변경할 수 있을까요? css 파일에서 반복되어 사용되는 속성, 값들이 있는데 이런 값들은 공통적으로 사용하는 것이 구조적으로 좋을까요? 예) 아래 코드에서 .inputEmail과 .input에 설정하는 css 값들이 유사하지만 분리해서 작성 아래는 과제 관련 코드입니다! 미리 답변 감사합니다. <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="background"> <div class="signup"> <h2 id="title">회원 가입을 위해<br>정보를 입력해주세요<br></h2> <div> <span><br>* 이메일<br><br></span> <input class="inputEmail" type="text"> </div> <div> <span><br>* 이름<br><br></span> <input class="input" type="text"> </div> <div> <span><br>* 비밀번호<br><br></span> <input class="input" type="password"> </div> <div> <span><br>* 비밀번호 확인<br><br></span> <input class="input" type="password"> </div> <br><br> <div class="radioGender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <br><br> <div> <input class="agreement" type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <br> <hr id="line"> <br> <div> <button class="signupBtn">가입하기</button> </div> </div> </div> </body> </html> * { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; } .background { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; justify-content: center; align-items: center; } .signup { width: 470px; display: flex; flex-direction: column; } .signup span { color: #797979; } .inputEmail { width: 100%; border: none; border-bottom: 1px solid #0068FF; } .input { width: 100%; border: none; border-bottom: 1px solid #CFCFCF; } .radioGender { display: flex; justify-content: center; align-items: center; gap: 30px; accent-color: #D2D2D2; } .agreement { font-size: 14px; } .signupBtn { width: 100%; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFFFFF; color: #0068FF; font-size: 18px; } #title { font-size: 32px; color: #0068FF; } #line { width: 100%; height: 1px; border: none; background-color: #E5E5E5; }

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

book 페이지 스트리밍 적용

해결됨

한 입 크기로 잘라먹는 Next.js

book 페이지는 일부는 정적으로 실행되고, 일부는 동적으로 실행되는 걸로 알고 있습니다. generateStaticParams에 설정된 id는 정적으로, 설정되지 않은 id는 동적으로 실행된 후 이후부터 정적으로 실행됨 위와 같이 알고 있는데 만약 이러한 페이지에 loading.tsx를 만들어서 적용한다면, 새로운 id로 요청할 때만 스트리밍이 적용되는 것이라고 이해하면 될까요? 이전 강의에서 generateStaticParams에 설정된 id는 fetch와 같은 동적 함수가 있더라도 정적 페이지처럼 저장된 데이터를 가져온다고 기억해서요

  • react
  • typescript
  • next.js
jhp009 댓글 2 좋아요 0 조회수 67

에러 어떻게 고치나요?ㅠㅠ

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

에러 어떻게 고치나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
yoonseong 댓글 3 좋아요 0 조회수 127

codegen practice 서버 접속 불가 문제

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

yarn codegen 명령어 실행 시, ✖ Failed to load schema from http://main-practice.codebootcamp.co.kr/graphql : Unexpected response: "unconditional drop overload" 이와 같은 에러가 뜨네요. 혹시 서버가 지금 잠시 닫힌걸까요? graphql로도 접속이 안되어서 문의드립니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 160

3000포트 겹치네요

해결됨

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

혹시 헤메시는 분들을 위해 next.js nest.js 모두 기본 포트를 3000번 사용합니다. 간단하게 수정하시려면 backend/main.ts 파일에서 app.listen(port)를 변경 하셔서 사용하시면 됩니다.

  • aws
  • docker
  • next.js
  • nestjs
  • prisma
진수 댓글 2 좋아요 0 조회수 198

styled.span / styled.input "CSS 자동완성"

해결됨

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

확장프로그램 설치, "vscode-styled-components" ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ import styled from에서 경로 쓸 때 백틱금지 🤬

  • react
  • node.js
  • seo
  • graphql
  • next.js
yaco kim 댓글 1 좋아요 0 조회수 63

깃허브 커밋 중...

해결됨

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

안녕하세요~선생님 강의 잘 따라하고 있는데요, SEO 제안이 아닌, 다른걸로도 한번 만들어 봤는데, (node.js로)... 조금 복잡한거라 그런지 1000여개의 파일이 만들어 지더라구요. 그래도 콘솔에서 실행도 잘되고 에러도 없어서. 이번 장의 깃허브에 올리는걸 실험해볼려고 했는데, 파일이 U -> A로 변동이 되었는데 대부분의 파일이 U에서 A로 바뀌지 않더라구요. 그래도 이니셜 업로드는 되던데, u로 되어 있는것들이 어떤건지 찾아볼려고 해도 안보이더라구요. 그래서,,, 예를 들어 .env 파일처럼 올려서는 안되는 파일들이 u로 남아 있는건지요? 그렇다면 .env 하나야 복사해서 올리면 되는데, .env 파일처럼 실행에 필요한 중요한 파일들이 안올라가면, 나중에 깃허브에서 클론하고 가져왔을때(내 동료나 또는 내가 집에서 하고 싶을때) 실행에 어떤 파일이 필요한건지 알수 있나요?

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
kelo 댓글 2 좋아요 0 조회수 66

schema.gql 질문 드립니다.

해결됨

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

entity 등으로 생성된 tpye 에서 강의에서 사용된 코드로 예시를 들면 # product.entity.ts @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[]; 위와같이 nullable 을 사용하여 #schema.gql type Product { productId: String productName: String! description: String! productPrice: Int! isSoldout: Boolean! productSalesLocation: ProductSalesLocation productCategory: ProductCategory user: User productTags: [ProductTag!] } productTags: [ProductTag!] 와 같이 할 수 있었습니다. 위에서 productTags: [ProductTag!] 를 productTags: [ProductTag] 와같이 변경 해보려고합니다. 방법이 있나요? @Field(() => [ProductTag, { nullable: true }], { nullable: true }) 에러는 발생하지 않지만 안됩니다.

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 1 좋아요 0 조회수 75

서버 재실행시 Many to Many

해결됨

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

yarn start:dev 를 할 경우 Many to Many 로 자동으로 생성되는 table이 자꾸 문제를 일으키네요. 서버 재 실행시 기존에 만들어진 중간테이블 강의에서는 상품_상품태그 테이블이 되겠네요. 해당 테이블을 삭제후 실행하지 않으면 에러발생시키네요. 원인을 찾아보면 아래 코드의 주석된 custom join table 이 문제였는데요. 기본 @JoinTable 사용시 문제는 사라집니다. // @JoinTable({ // name: 'PRODUCT_TO_PRODUCT_TAG', // 원하는 중간 테이블명 // joinColumn: { // name: 'PRODUCT_ID', // Product 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productId', // Product 엔티티의 실제 ID 컬럼명 (기본값은 PrimaryColumn 이름) // }, // inverseJoinColumn: { // name: 'PRODUCT_TAG_ID', // ProductTag 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productTagId', // ProductTag 엔티티의 실제 ID 컬럼명 // }, // }) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[]; 질문 1. 위의 문제를 해결할 수 있는 방법입니다. 질문 2. DB 컬럼에는 UPPER_CASE (SCREAMING_SNAKE_CASE) 로 작성하지 않나요? 그렇기 때문에 custom / 각 컬럼마다 @Column({ name: 'BOARD_TITLE', type: 'varchar', length: 50, nullable: false, }) @Field(() => String) boardTitle: string; 위와 같이 컬럼명을 하나하나 지정해줬습니다. typeorm 또는 요즘 실무 컨벤션에서는 강의에서처럼 카멜표기법으로 사용하나요? Node 강의지만 Java기준 스프링 기본설정에서 카멜케이스조차도 스네이크로 자동 변환하는데 말이죠! msa 구조에서는 테이블은 공통된걸 사용할수도 있으니 궁금해서 질문 드립니다.

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 3 좋아요 0 조회수 152

gpt에게 물어보니 client컴포넌트는 서버에서 실행되지 않고 hydrate할 공간이라고 예약만 한다고 하네요??

해결됨

한 입 크기로 잘라먹는 Next.js

제목과 같습니다 클라이언트 컴포넌트는 서버에서 함수가 아예 실행되지 않고 빈영역의 HTML을 건네주며, FCP 때의 ui는 모두 서버 컴포넌트 또는 정적 페이지라고 이해했는데 사실인가요??

  • react
  • typescript
  • next.js
mungyun1234 댓글 2 좋아요 0 조회수 115

vue강의는안하시나요?!

미해결

애플 웹사이트 인터랙션 클론!

선생님 vue강의는 안하시나여? 너무 잘가르쳐 주셔서 프론트엔드쪽도 선생님한테 배우고싶네요!ㅎㅎ

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
vcxzz33 댓글 1 좋아요 0 조회수 138

챕터 17 배열 강의 듣는 중에 궁금한게 있습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

위처럼 콘솔찍었을때, 22번째 콘솔에서 arrC 배열 요소를 보면 0번쨰 인덱스에 "hellooo?"가 출력됩니다. 그러나 그다음 콘솔에서는 0번째 인덱스가 1로 찍힙니다. 29번째 줄에서 arrC 배열의 0번째 인덱스를 "hellooo?"로 수정한 것이 22번째줄 콘솔에서 보여지는 것 같은데, 실질적인 값은 무엇인지, 이런건 자바스크립트 자체 오류인건지 아니면 원리가 따로 있는지 궁금합니다.

  • javascript
  • react
  • node.js
낙희 댓글 2 좋아요 0 조회수 60

무한스크롤 기능, 검색기능 대소문자

미해결

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

강의 잘 보고 있습니다. 무한 스크롤 기능 구현 해보았는데요 영화가 60개까지 나오고 진행이 되지 않다가 개발자 도구를 켜면 더 스크롤이 되는데 그것도 120번 영화에서 끊깁니다. 머가 문제일까요 ...ㅠ 검색기능에서 title 첫글자 대소문자 상관없이 하려면 어디를 수정해야 하나요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
코딩딩딩 댓글 1 좋아요 0 조회수 124

12.5 path 경로에 "/diary/:id" 입력시...

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

스크린샷에서 보는 것처럼 잘못된 페이지라고 나옵니다. "/diary"만 입력하면 문제없는데 id만 입력하면 경로를 찾지 못하는 것 같습니다.

  • javascript
  • react
  • node.js
댓글 2 좋아요 0 조회수 103

react 와 차이점 질문

해결됨

한 입 크기로 잘라먹는 Next.js

react에서 데이터를 가져올 때 페이지나 컴포넌트 내부에서 바로 가져와서 사용했던 걸로 기억하는데 AppRouter에서 사용하는 방식과 똑같은건가요? 2. 그리고 pageRouter는 페이지에서만 getStaticProps나 getServerSideProps를 사용해서 props형태로만 전달할 수 있기 때문에 이 단점을 보완하기 위해서 AppRouter에서는 지금처럼 사용하는건가요? 3. 그리고 마지막으로 section02에서 search페이지를 만들때 getStaticProps를 사용하는 대신 페이지 함수에서 useEffect를 사용해서 바로 데이터를 가져오는 형식으로(react에서 사용하던 방식이랑 똑같은 방식으로) 사용하는 부분이 있는데 이렇게 하면 PageRouter의 단점인 props형태로만 전달할 수 있다도 보완되는거 아닌가요? pageRouter 배우고 appRouter배우면서 react쓰던 지식까지 겹치니까 많이 헷갈리네요..ㅠㅠㅠ 질문이 좀 긴데 잘 부탁드립니다..

  • react
  • typescript
  • next.js
jhp009 댓글 2 좋아요 1 조회수 137

직접 생성해서 사용하는 pipe class에 대한 질문입니다.

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요! DefaultValuePipe와 이번 강의에 나온 인자를 받는 Custom Pipe Class는 반드시 인자를 받아야 하는 구조이기 때문에 무조건 직접 생성해서 사용해야한다. 라고 이해하였는데 맞을까요? 또한, 강의에서 MaxLengthPipe와 MinLengthPipe 각각 @Injectable() 데코레이터를 붙여서 작성하셨는데, 직접 생성해서 사용하는거라면 굳이 필요없지 않을까 생각하여서 빼고 테스트 해보니 문제없이 잘 동작하는 것 같습니다. 특별히 붙여야만 하는 이유가 있는걸까요?!

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
흔들거북이 댓글 2 좋아요 0 조회수 93

prefetch 속성 질문

해결됨

한 입 크기로 잘라먹는 Next.js

섹션 3. Page Router 핵심정리 12.2.4)프리페칭 안녕하세요 프리페칭 관련하여 실습을 진행하던 중 궁금한 사항이 있어서 질문드립니다 ! Next.js는 요청한 페이지의 js 번들과 현재 페이지 내에서 이동할 것 같은 페이지(Link 태그 및 router.prefetch로 설정한 페이지)를 프리페칭 한다고 배웠습니다. 근데 이때, Link 태그를 사용한 페이지 중 이동이 적을 것 같은 페이지는 <Link href="/" prefetch={false}>를 통해 프리페칭을 막을 수 있다고 배워 해당 내용을 실습했습니다. 근데 처음에 강력 새로고침을 진행하면 초기에는 프리페칭을 하지 않지만 약 5초 정도 지나면 추후에 제가 prefetch={false}로 설정한 Link 태그 js 번들 파일을 네트워크 탭에서 불러오는 것 같아 왜 그런지 궁금하여 질문드립니다.

  • react
  • typescript
  • next.js
  • prefetch
ReKoding 댓글 2 좋아요 1 조회수 127

이미지 수정시 CORS 에러 발생에 관하여

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요, 현재 이미지 업로드 및 수정 과제를 진행중에 발생한 CORS 에러에 대해 질문드립니다. 새로운 게시글의 이미지 input 데이터를 graphQL에 전송하는 것은 문제가 없습니다. 수정하는 게시글에서 이미지를 onChange를 통해 updateFile에 업데이트하는 것도 문제가 없습니다. 최종적으로 수정을 완료하는 graphQL에 통신을 하는 과정에서 다음과 같은 에러가 발생합니다. 며칠전에 같은 작업을 했을 때에는 문제가 없었던 부분이라 질문드립니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이승엽 댓글 2 좋아요 0 조회수 96

인기 태그

인프런 TOP Writers

주간 인기글