inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

eslint 오류..

해결됨

Next.js 시작하기

수업 내용을 따라 작성 하는데..이상한 점이 있어서 문의 드립니다. eslint, prettier 등 처음 부터 셋팅을 그대로 따라 했는데요. 저는 그림 처러 저런 오류가 생깁니다. problem 을 보면 이런게 생기고요.. 그런데 상단에 /* eslint-disable prettier/prettier */ 라는 것을 넣으면 오류가 사라지는데요.. 왜 그럴까요? 제가 셋팅을 잘못 한게 있을까요??

  • javascript
  • react
  • next.js
민경언 댓글 2 좋아요 1 조회수 656

Parallel Routes에 대하여 질문있습니다.

미해결

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

안녕하세요 제로초님. Parallel Routes에 대하여 질문있습니다 (공식문서 폴더구조) 우선 공식문서대로 위와같은 폴더구조로 한 후 export default function Layout({ children, team, analytics, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <> {children} {team} {analytics} </> ) } Layout에 team과 analytics를 props로 주게되면 team과 analytics에 있는 page.js 가 잘 렌더링 되는 것을 확인하였습니다. 그래서 이것을 강의에 응용해보려고 했습니다. (강의 폴더구조 및 응용) src/app/(afterLogin)/@team (afterLogin)폴더에 @team 폴더를 만들고 그 안에 default.tsx 랑 page.tsx 파일을 만들었습니다. default.tsx 파일이 없으면 404 not found 가 뜹니다. 그 후 AfterLoginLayout에 team을 props로 두어 렌더링하였습니다. 결과는 default.tsx가 렌더링 되었습니다. src/app/(afterLogin)/layout.tsx type Props = { children: ReactNode; team: ReactNode}; export default async function AfterLoginLayout({ children, team }: Props) { return ( <> {children} {team} </> ); } 공식문서에서 default.tsx 는 "초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 폴백으로 렌더링할 default.js 파일을 정의할 수 있습니다." 즉 파일을 찾지 못하여 default.tsx를 렌더링 한다는 말이라고 이해했습니다. 즉 궁금한 것은 공식문서 폴더구조에서는 @team폴더의 page.tsx를 렌더링하는 반면 강의 폴더구조에서는 page.tsx를 렌더링하지 않고 default.tsx를 렌더링하는지 궁금합니다. 해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ 항상 좋은강의 감사드립니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김건희 댓글 3 좋아요 0 조회수 389

part2는 언제..

미해결

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

혹시 언제쯤 강의로 볼 수 있을까요 ㅠㅠ part1 내용이 너무 좋아요

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
bottlewook 댓글 2 좋아요 0 조회수 444

최소힙 remove 구현하기

미해결

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

class MinHeap { // 최소힙 arr = []; #reheapUp(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] < this.arr[parentIndex]) { const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapUp(parentIndex); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } #reHeapDown(index) { const leftIndex = index * 2 + 1; // 왼쪽 Index if (leftIndex < this.arr.length) { // 만약에 왼쪽 인덱스가 총 배열의 길이보다 작은경우 const rightIndex = index * 2 + 2; const smaller = this.arr[leftIndex] > this.arr[rightIndex] ? leftIndex : rightIndex; if (this.arr[index] < this.arr[smaller]) { const temp = this.arr[index]; this.arr[index] = this.arr[smaller]; this.arr[smaller] = temp; this.#reHeapDown(smaller); } } } remove() { // root만 remove if (this.arr.length === 0) { return false; } if (this.arr.length === 1) { // 마지막 하나 남으면 pop해서 리턴해주기 return this.arr.pop(); } const root = this.arr[0]; this.arr[0] = this.arr.pop(); this.#reHeapDown(0); return root; } sort() { // 힙 정렬 const sortedArray = []; while (this.arr.length > 0) { sortedArray.push(this.remove()); } return sortedArray; } search(value) { for (let i = 0; i < this.arr.length; i++) { if (arr[i] === value) { return i; } } } } const minheap = new MinHeap(); minheap.insert(78); minheap.insert(56); minheap.insert(45); minheap.insert(32); minheap.insert(23); minheap.insert(19); minheap.insert(8); console.log(minheap.arr); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); minheap.remove(); 최대힙 코드를 최소힙 구하기 코드로 바꿔봤습니다. 질문1) 최소힙 구하기 remove 코드가 맞을까요? 질문2) 최대힙이든 최소힙이든 sort 메서드가 sort 메서드 호출시 remove 메서드를 while문 루프로 호출하여서 sort 메서드 실행 후에 this.arr가 당연하게 빈배열이 되는데 while문 전에 this.arr를 변수에 담아두었다가 while 루프가 끝난후에 다시 this.arr 멤버변수에 넣어주어야 하는거 아닌가 궁금합니다.

  • javascript
  • 코딩-테스트
  • 알고리즘
rhkdtjd_12 댓글 1 좋아요 0 조회수 268

별찍기 마름모 문제입니다.

미해결

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

안녕하세요! 마름모 별찍기 문제입니다 ! 우선 위에 마름모는 출력을 하였는데 밑으로 다시 내려오는 마름모가 안되어서 질문 드립니다. for(let j =0; j<6 ;j++){ if(j % 2 ===0) continue for(let i =0; i<3; i++){ for(i+ j+i ===5) console.log(' '.repeat(i)+ '*'.repeat(j)+' '.repeat(3-i)); } } 이 for문 에서 종료식을 바꿔야될것 같은데 지금은 종료식이 1씩 더해지는 것인데 혹시 종료식이 1씩 빼지는 것도 동시에 할수 있는 것 이 있을까요? 아니면 그림에 나온것 처럼 따로 k를 만들어서 해야되는 걸까요? 아니면 콘솔로 나온 결과는 반대로 해서 한번더 다시 나올수 있도록 해야되나? 라는 생각도 해보았습니다.

  • javascript
  • 별찍기
하리 댓글 2 좋아요 0 조회수 378

선생님 10-8 숙제 질문있습니다.

미해결

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

빨간줄 에러 그어져있는거를 읽고 ProductTag타입과 create-product.input.ts에서 선언한 @Field(() => [String]) productTags: string[]; 이부분이 문제라고 판단을 했습니다. 더 깊게 파고들어가보면 선생님이 제시하신 숙제에대해서 먼저 살펴봐야할것 같다는 생각이 들었습니다. 1. 아래 코드에서 ...product 의 타입은 Product로 선언되어있습니다. // 숙제-1)왜 아래 에러가 발생하는지 고민해보기 // 숙제-2)아래 에러 고쳐보기 const result = this.productsRepository.save({ ...product, ...updateProductInput, }); Product의 타입중 아래와같이 ProductTag[]를 필수로선언한게 있는데 이게 업데이트프로덕션인풋 타입과 충돌(?)이 일어나서 에러가 발생하는것 같았습니다. productTags: ProductTag[]; 왜냐하면 업데이트프로덕션인풋 타입은 아래처럼 모든 타입을 ?로 바꿔주고있기때문입니다. PartialType(CreateProductInput) create-product.input.ts에서 선언한 타입을 아래와 같이 바꿔주어 해결했습니다. ProductTag의 {} 객체안에들어가는 값까지 다 ?로 바꿨습니다. @Field(() => [String]) productTags: DeepPartial<ProductTag[]>; 여기까지가 제가 풀이해본건데요.. 솔직히 맞는지 모르겠어요 요약하자면 ,updateProductInput이랑 product 타입이 충돌일어나서 그런거다. 라고 이해하고있는데 맞을까요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
반가우면반갑다고해 댓글 1 좋아요 0 조회수 185

advanced 수업자료 문의

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
tax 댓글 1 좋아요 2 조회수 248

컴포넌트화 하는 기준이 궁금합니다.

해결됨

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

강사님의 컴포넌트를 나눌 때의 기준이 궁금한데요. 지금까지 제가 이해한 내용으로는 반복되는 부분은 컴포넌트 화 시켜서 공통컴포넌트 _component폴더에 두시는것 같습니다. 제가 궁금한 것은 (afterLogin)/home/page.tsx 내부 구조가 컴포넌트만 있는데 (사진첨부) (afterLogin)/layout.tsx 파일의 내부구조는 컴포넌트화 되어있는 부분이 섞여있습니다 page는 모두 컴포넌트화 시키셨는데 layout은 왜 모두 컴포넌트화를 시키지 않으셨을까요? 따로 컴포넌트화 하시는 기준이 있을까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
한나릴 댓글 1 좋아요 1 조회수 272

사이트 접속이 안돼요

미해결

<M.B.I.T> 테스트 페이지 만들기! with Django

http://mbit.weniv.co.kr/ 사이트 접속이 안돼요

  • HTML/CSS
  • javascript
  • django
이유정 댓글 1 좋아요 0 조회수 258

강사님 VS Code 테마가 예뻐서 어떤거 쓰시는지 궁금해요.☺️

해결됨

실무에 바로 적용하는 스토리북과 UI 테스트

강의를 들으면서 이해하기 어려운 부분 강의를 따라하는데 에러가 발생하는 부분 강의에는 없지만 스토리북에 대해 궁금한 부분 들을 자유롭게 질문으로 올려주세요! 확인하는대로 최대한 빠르게 답변드리겠습니다 이런것도 여기 질문해도 되나요? 강사님 VS Code 테마가 예뻐서 어떤거 쓰시는지 궁금합니다 ☺ 찾아봤는데 비슷한게 안보여서 질문드렸어요

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
댓글 2 좋아요 0 조회수 315

숙제 질문

해결됨

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

강의 커리큘럼에 있는 셀프 체크는 정답 예시를 찾았는데 강의 중간중간에 내주시는 if문 중첩 줄이기, 계산기 처음 입력시 음수 입력가능하게 하기 등의 숙제는 정답 예시는 따로 없는건가요? 그냥 유튜브나 인프런에 관련 질문 올리면 확인해주시는건가요?

  • javascript
psbin1016 댓글 1 좋아요 0 조회수 245

var 로 선언해서 window 객체의 프로퍼티로 만들기

미해결

따라하며 배우는 자바스크립트 A-Z

수업 자료 보면" let과 const는 블록 스코프이기에window 객체 내부의 블록에서 선언된 것으로 되기에전역 객체의 프로퍼티로 활용될 수 없습니다. " 라는 표현이 나오는데window 객체 안에 있는 더 작은 블록 단위 안에서 선언된 것이므로그 블록 안에서만 유효하고 window 객체에서 호출하지는 못한다는 뜻인가요?

  • javascript
탱_ 댓글 1 좋아요 0 조회수 158

안녕하세요 선생님 Event Emit 질문 드립니다.

해결됨

Vue 3 시작하기

선생님 강의 들으면서 따라하고 있습니다 강의랑 똑같이 타이핑하면서 공부하고 있는데 왜 타임라인에서 이벤트 호출이 안되는지 이유를 모르겠어서 질문 남깁니다! 확인 부탁드립니다...!

  • javascript
  • vue.js
  • vue-3
날라댕기는 포차코 댓글 1 좋아요 2 조회수 443

뷰 라이프사이클

해결됨

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

Vue2는 created가 있지만, Vue3는 없기때문에 혼용해서쓴다면 (누가하던 작업을 이어받음) Api호출을 mounted 시점에하는게 나을까요? created시점에 호출하는것과 차이 많이날까요?

  • javascript
  • vue.js
  • es6
  • vuex
wjdgksak 댓글 1 좋아요 1 조회수 216

settings.json에 올려두신 사진과 동일하게 안뜹니다

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
thswnstn9981 댓글 1 좋아요 0 조회수 444

Vue3로 진행중입니다

해결됨

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

현재 Vue3로 해당 강좌 진행중입니다...! 이벤트 버스가 들어가면서 bus.js를 작성하면서부터 학습 진행을 따라갈 수 없게 되었는데요ㅠㅠ!! 이 경우 해결 방안이 있을까요...? 버전 다운을 해야만 진행 가능한 부분인걸까요..? 코드상으로는 문제가 없으나 npm run serve시 해당 오류를 반환합니다..! bus 내 코드를 제거하고 확인하면 해당 오류가 노출되지 않아요 ㅠㅠ!!

  • javascript
  • vue.js
AS S 댓글 1 좋아요 1 조회수 357

Material--icons_4.0.0.woff2

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

Material--icons_4.0.0.woff2 는 리소스 크기가 3mb인데 해당 폰트는 font-display:block으로 하지 않는이상 폰트 다운드로 전에 영어를 출력시키거나 안보이도록 해야하는되 이 부분 레이아웃 시프트 발생하지 않도 록 cls 잡는 방법이 무엇이 존재할까요???

  • react
  • chrome-devtools
lab ajung 댓글 1 좋아요 0 조회수 238

key.svg 이미지

미해결

웹 애니메이션의 새로운 표준, Web Animations API

안녕하세요 !강의를 열심히 따라가고있는 학생입니다:)key.svg 가 데이터 폴더에 있긴한데 강사님이 직접 자르신 키 사진(쇠 모양이없음) 과는 다르던데,저는 어도비 일러스트 유료버전이없어서 그런데 어떻게 해야할까요 ?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • frontend
  • web-animations-api
Anna Jeon 댓글 1 좋아요 1 조회수 233

리액트 배포 후 아이폰에서 보이지 않는 문제

미해결

안녕하세요 리액트를 사용해서 웹 페이지를 배포 후 반응형 테스트를 위해 여러 기종에서 테스트 중인데요 안드로이드 핸드폰에선 기종 상관 없이 전부 잘 보이는데 아이폰에서는 아무것도 보이지 않고 하얀 화면만 보이는 문제가 생겼습니다 혹시 리액트로 배포 후 ios 기기 호환성을 위해 따로 해줘야하는 작업이 있을까요?

  • react
  • ios
김민지 댓글 1 좋아요 0 조회수 787

yarn dev를 하니 리엑트 버전 오류가 납니다.

해결됨

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

첫번째 사진은 터미널창에서 yarn dev를 하니 리엑트 버전을 18.2.0 버전으로 해야 한다고 합니다. . 전에 eslint 설치중에 오류가 나서 node_modules, eslintrc.js , yarm.lock 을 지웠다가 재설치를 했습니다. 이때문에 오류가 난것 같은데 구글링해도 해결방법을 모르겠어서 질문남깁니다 ㅜ

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

인기 태그

인프런 TOP Writers

주간 인기글