inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

interface 와 type

미해결

@시코 - TypeScript 제대로 배우기(초중급)

안녕하세요. 잘듣고 있습니다:) 강의에서 웬만하면 interface 대신 type 을 쓰라고 말씀하시더라고요! 저는 줄곧 type 만 쓰다가 최근에 props 같은 객체 타입은 interface를 사용하는 방향으로 바꿨는데, 이런 경우도 interface 보다 타입을 쓰는게 좋나요?(왜 그런지가 궁금합니다..!!) 그리고 interface 랑 type의 차이를 더 자세히 알고싶어요!

  • javascript
  • react
  • typescript
프빌쳐 댓글 2 좋아요 2 조회수 136

프레임워크 여론 파악법

미해결

Next + React Query로 SNS 서비스 만들기

next 15, app router를 알아갈수록 어째.. 제 취향에 안맞거나 제 서비스에 적용하기에 불리한 점들이 많은데요 저만 그런건지 궁금하기도 해서, 특정 프레임워크에 대한 평가나 여론을 알아보는 팁 같은게 있으신지 궁금합니다. 지금은 유튜브 검색해서 상위노출 영상 몇개에 의존하는데 모수가 부족한 느낌입니다 정석적으론 각 프레임워크 공식문서를 보고 그 특성들을 이해해 자기 서비스에 맞는걸 스스로 판단하는 것이겠지만, 그래도 집단지성에 기대고 싶네요ㅎ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
Eric J 댓글 2 좋아요 0 조회수 150

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

미해결

Next + React Query로 SNS 서비스 만들기

next 공식문서에서 서버 fetch를 권장하고 있지만 필터옵션이 다수 포진된 페이지에서도 서버 fetch를 해야할까 의문점이 듭니다. 필터 버튼 하나 누를때마다 다시 fetch 해야하니까 route.push나 replace 할 수 밖에 없는데 이게 과연 좋은 방법인가 의구심이 듭니다. 리액트 쿼리를 사용하는게 더 나을지, 서버 fetch를 사용하는게 나은지 선생님의 의견이 궁금합니다. 추가로 window.history.replaceState webAPI를 사용하면 단순 url만 변경하고 페이지 로드나 컴포넌트 리렌더링은 일어나지 않는걸로 알고 있는데요. 근데 리액트 쿼리로 클라이언트 fetch 할 땐 window.history.replaceState 로 url만 변경해도 다시 fetch가 되더라구요?? 어떤 원리로 동작하게 되는지 궁금합니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 2 좋아요 0 조회수 139

필터옵션이 많은 페이지에서도 서버 fetch를 사용하는게 맞을까요??

해결됨

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

강의에서 말씀해준 내용도 그렇고, next 공식문서에서도 서버 fetch를 권장하고 있지만 필터옵션이 다수 포진된 페이지에서도 서버 fetch를 해야할까 의문점이 듭니다. 필터 버튼 하나 누를때마다 다시 fetch 해야하니까 route.push나 replace 할 수 밖에 없는데 이게 과연 좋은 방법인가 의구심이 듭니다. 리액트 쿼리를 사용하는게 더 나을지, 서버 fetch를 사용하는게 나은지 선생님의 의견이 궁금합니다. 추가로 window.history.replaceState webAPI를 사용하면 단순 url만 변경하고 페이지 로드나 컴포넌트 리렌더링은 일어나지 않는걸로 알고 있는데요. 근데 리액트 쿼리로 클라이언트 fetch 할 땐 window.history.replaceState 로 url만 변경해도 다시 fetch가 되더라구요?? 어떤 원리로 동작하게 되는지 궁금합니다!

  • react
  • typescript
  • next.js
변재정 댓글 2 좋아요 0 조회수 121

A

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
댓글 2 좋아요 0 조회수 110

강의 code 올려논 github 있나요 ?

해결됨

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

있으면 url 좀 알려주세요.

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
YCorn 댓글 2 좋아요 0 조회수 128

GRAPHQL 활용 과제

해결됨

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

과제 10 진행하고 있습니다. "수정을 하기 위해서는 글을 입력할때 설정하였던 비밀번호를 입력받아야 합니다." 이런 조건이 있던데 비밀번호는 어디에 저장되는 건가요?

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

vercel login

해결됨

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

저는 이메일에 버튼이 나오는 대신 코드가 나와서 페이지에 입력하라길래 입력했는데 페이지는 로그인이 되는데 vscode는 계속 로딩중이에요...

  • javascript
  • react
tmdxor741 댓글 2 좋아요 0 조회수 237

yarn으로 express 다운 후 node 2_server.js 실행 안되는 경우

미해결

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

저는 yarn node 2_server.js 로 실행하니 되네요! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
홍준기 댓글 3 좋아요 0 조회수 181

Select 태그의 옵션 값중에 선택전에 보여지는 첫 번째 옵션값을 디폴트로 가져오는 방법

해결됨

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

안녕하세요. 강사님. 5.8) State로 사용자 입력 관리하기1에서 Select태그를 선택하지 않은 상태에서 onSubmit 이벤트 핸들러 호출시 웹 페이지에 보여지는 첫 번째 옵션 값을 디폴트 값으로 가져오는 방법이 궁금합니다.

  • javascript
  • react
  • node.js
유일용 댓글 2 좋아요 1 조회수 92

10-01 Entity TypeOrmModule.forRoot 에 entities

해결됨

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

@Module({ imports: [ BoardsModule, // // ProductModule, // UsersModule, ConfigModule.forRoot(), // GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: process.env.DATABASE_TYPE as 'mysql', host: process.env.DATABASE_HOST, port: Number(process.env.DATABASE_PORT), username: process.env.DATABASE_USERNAME, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE_DATABASE, entities: [__dirname + '/apis/**/*.entity.*'], synchronize: true, logging: true, }), ], }) export class AppModule {} entity 파일들에서 각 entity 파일에 import 할때 절대경로로 입력하면, 오류가나는데 해결방법을 모르겠습니다. 상대경로로 작성시 문제가 해결되었는데 이유를 모르겠습니다.

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

강의 버전관련 문의입니다

해결됨

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

강의 버전이 구버전(Ver.1)인 것 같은데 Ver.2로 어떻게 업데이트하나요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
김우현 댓글 2 좋아요 0 조회수 131

vercel 배포 1명

해결됨

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

vercel 배포는 한명 한테만 되는건가요? 그리고 링크를 전달해서 당사자가 링크에 들어가면 로그인을 하라고 뜨는데 제 아이디로 로그인 하지 않으면 프로젝트를 사용할 수 없는데 이게 원래 맞는건가요?

  • javascript
  • react
tmdxor741 댓글 2 좋아요 0 조회수 413

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

미해결

Next + React Query로 SNS 서비스 만들기

auto export default function Weekday() { return ( <Suspense fallback={<WeekdayBannerLoading />}> <WeekdayMiniBanner /> </Suspense> ); } export default function WeekdayMiniBanner() { const { banners } = use(getBanners( params )); if (banners.length === 0) return null; return ( <div className={cn('wrapper')}> <WeekdaySwiper data={banners} /> </div> ); } 이런 식으로 코드를 짰는데요. 해당 페이지를 새로고침하면 초기엔 컨텐츠영역 아무것도 노출되지않다가 잠깐 fallback ui가 노출되고 fetch가 완료되면 컨텐츠를 노출시킵니다. suspense는 promise가 pending 중일 때 promise를 catch해서 fallback ui 를 노출시키는걸로 알고 있는데 왜 새로고침 시 페이지 초기로드단계에선 빈화면이 노출되는지 궁금합니다... 아님 제가 잘못 설계한 걸까요..?? 리액트 공식문서 suspense 예시 코드 에선 버튼 누르자마자 바로 fallback ui를 노출시키는데 말이죠... 참고로 WeekdaySwiper 내부는 react swiper로 구성되어있습니다! (클라이언트 컴포넌트)

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 2 좋아요 0 조회수 132

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

미해결

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

export default function Weekday() { return ( <Suspense fallback={<WeekdayBannerLoading />}> <WeekdayMiniBanner /> </Suspense> ); } export default function WeekdayMiniBanner() { const { banners } = use(getBanners( params )); if (banners.length === 0) return null; return ( <div className={cn('wrapper')}> <WeekdaySwiper data={banners} /> </div> ); } 이런 식으로 코드를 짰는데요. 해당 페이지를 새로고침하면 초기엔 컨텐츠영역 아무것도 노출되지않다가 잠깐 fallback ui가 노출되고 fetch가 완료되면 컨텐츠를 노출시킵니다. suspense는 promise가 pending 중일 때 promise를 catch해서 fallback ui 를 노출시키는걸로 알고 있는데 왜 새로고침 시 페이지 초기로드단계에선 빈화면이 노출되는지 궁금합니다... 아님 제가 잘못 설계한 걸까요..?? 리액트 공식문서 suspense 예시 코드 에선 버튼 누르자마자 바로 fallback ui를 노출시키는데 말이죠... 참고로 WeekdaySwiper 내부는 react swiper로 구성되어있습니다! (클라이언트 컴포넌트)

  • react
  • typescript
  • next.js
댓글 1 좋아요 0 조회수 100

7-1 서버 액션에서 Page 컴포넌트 옮기는 과정 질문드립니다.

해결됨

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

안녕하세요 정환님 강의 잘 보고 있습니다. 이번 섹션 8 . 7.1) 서버 액션을 소개합니다. 에서 궁금한게 있는데요 이전에 섹션 4 . App Router에서 32. 3.2)페이지 라우팅 설정하기 강의에서 " URL 파라미터나 searchParams, Query String 같은 값은 Promise로부터 꺼내써야 되는걸로 알고 그렇게 변경해서 사용했습니다." const BookDatail = async ({ bookId }: { bookId: string }) => { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}` ); // ... 생략 /* 저의 code */ export default async function Page({ params, }: { params: Promise<{ id: string }>; }) { const { id } = await params; return ( <div> <BookDatail bookId={id} /> </div> ); } /* 정환님이 강의해서 사용한 code */ export default function Page({ params, }: { params: {id:string}; }) { return ( <div> <BookDatail bookId={params.id} /> </div> ); } 경로 app/book/[id]/page.tsx URL 파라미터 값을 Promise로부터 꺼내와야 된다는 업데이트 강의 부분을 보고 한거라서 이게 맞는지 헷갈리네요 강의 전체를 아직 수강 전 인데 헷갈릴까봐 질문드립니다.

  • react
  • typescript
  • next.js
  • 서버액션
  • next.js15
우치하마다라 댓글 1 좋아요 0 조회수 141

filter가 아무것도 걸러내지 못하는 경우

미해결

함수형 프로그래밍과 JavaScript ES6+

function FlatEvaluation(evaluation: Array<[string, { score: number }]>) { return pipe( evaluation, filter(([key]) => key !== "overallAssessment"), map(([key, value]) => ({ key: key, score: value.score })) ); } function findPros(evaluation: { [x: string]: { score: number } }) { return pipe( Object.entries(evaluation), FlatEvaluation, filter((item) => item.score >= 80), reduce((item, acc) => (item.score > acc.score ? item : acc)), (item) => item.key ); } // A의 경우 findPros({ a: { score: 90 }, b: { score: 85 }, c: { score: 75 } }) // B의 경우 findPros({ a: { score: 70 }, b: { score: 65 }, c: { score: 75 } }) 안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 한 가지 궁금한 점이 있어서 이렇게 질문을 드립니다 (나중에 뒤에 가서 이 문제에 대한 해답이 나오거나, 이미 앞에 이런 문제에 대한 해결 방법이 나왔다면 참 부끄러워질 거 같긴 합니다) 다름이 아니라 FxTS를 사용해 기존의 프로젝트 일부를 함수형으로 리팩토링 해보고자 하는 중이었습니다. { [x: string]: { score: number } } 타입의 객체를 인자로 받아 제일 고득점을 한 인원의 이름(key)를 리턴해야 합니다. A의 경우 80점 이상의 득점자가 두 명이 있고, 그 중 더 높은 득점을 한 a의 이름이 잘 리턴됩니다. 그런데 B의 경우 80점 이상의 득점자가 하나도 없다보니 filter가 적절한 값을 리턴하지 못해 reduce에서 에러가 납니다. 이런 경우에는 어떻게 처리하는 게 옳을지 궁금합니다.

  • javascript
  • 함수형-프로그래밍
정진호 댓글 1 좋아요 0 조회수 145

블로그 애드센스 인증 실패문제

미해결

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

Ads.txt 스니펫을 시도하고 ads.txt 를 퍼블릭에 추가해주고 업로드했는데도 자꾸 아래 문구가 뜨네요 사이트를 확인할 수 없습니다 사이트를 확인할 수 없습니다. 사이트의 변경사항이 게시되었고 Google 애드센스 크롤러가 이를 액세스할 수 있는지 확인하세요. 문제가 계속 발생하는 경우 다른 방법을 시도해 보세요.

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

노란색 경고줄

해결됨

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

노란색 경고줄이 안뜨는데 뜨게 하는 방법이 무엇인가요??

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

인기 태그

인프런 TOP Writers

주간 인기글