이정환 Winterlood
@winterlood
수강생
36,748
수강평
2,526
강의 평점
4.9
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
강의
로드맵
전체 2수강평
- 한 입 크기로 잘라먹는 타입스크립트(TypeScript)
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
- 한 입 크기로 잘라먹는 타입스크립트(TypeScript)
게시글
질문&답변
안녕하세요 7.4 이미지업로드구현하기2 질문드립니다.
안녕하세요 이정환입니다. 우선 Proimise.all 메서드는 요청의 순서를 보장하지 않습니다. 그러나 요청의 응답값은 배열 안에 순서대로 저장됩니다.예를 들어 Promise.all([p1, p2, p3])을 실행하면, 가장 먼저 끝난 게 p2여도 결과는 항상 [result1, result2, result3]처럼 입력 배열의 인덱스 순서대로 들어옵니다. 그래서 “응답 순서가 뒤죽박죽이어도 결과를 매칭할 수 있게 해준다”가 Promise.all의 핵심 성질이라고 보면 됩니다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
- 0
- 3
- 20
질문&답변
회원가입 시 엑세스 토큰이 localStorage에 자동으로 저장이 안됩니다.
안녕하세요 다하자님 이정환입니다.질문과 함께 올려주신 사진에 보면 아래와 같은 에러 메세지가 출력되는걸 보실 수 있습니다.(사진)위 메세지를 읽어보면 "To Many Requests" 라는 이유로 singup(회원가입)요청이 실패하고 있는걸 보실 수 있습니다. Supabase 서버는 짧은 시간에 과도하게 많은 요청을 보낼 경우 해당 IP로 들어오는 요청을 이처럼 잠시 차단합니다. 따라서 조금 기다리신 다음 다시 시도해보시기를 권장드립니다.
- 0
- 2
- 29
질문&답변
참고 소스 질문
안녕하세요 kopti님 이정환입니다."예제 코드 안내" 챕터에서 확인하실 수 있습니다.(사진)
- 0
- 2
- 18
질문&답변
취약점 제거시 nestjs 버전 문제가 생길까요?
안녕하세요 Sec님 이정환입니다.문제가 발생하신다면 그때 원상복구 하셔도 무방할 것 같습니다. API 엔드포인트가 모두 잘 동작한다면 크게 문제될 일은 없어보입니다
- 0
- 1
- 34
질문&답변
모달 UI 관련 질문
안녕하세요 keenco님 이정환입니다.이런 경우 모달내부 요소의 CSS 속성에 overflow-scroll 등을 추가해 스크롤바를 통해 해결할 수 있습니다. 강의에서도 아래에 보이시는 것 처럼 스크롤바를 통해 해결했으니 강의 코드를 참고해보셔도 좋을 것 같습니다 😀(사진)
- 0
- 1
- 24
질문&답변
안녕하세요 이정환님!
안녕하세요 이정환입니다.우선 취업 준비 화이팅입니다!! 다만 저는 현재 1:1 개인 멘토링은 진행하지 않고 있습니다 🥲🥲🥲
- 0
- 1
- 23
질문&답변
eslint.config.mjs 내 rules 어떻게 설정 하나요?
안녕하세요 김주일님 이정환입니다.넵! 고렇게 작성하시면 됩니다 😀
- 0
- 1
- 30
질문&답변
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
안녕하세요 이인기님 이정환입니다.맞습니다. ReviewList 컴포넌트의 렌더링이 꽤 오래걸리긴 하더라구요 🥲다만 실습 환경에서는 리뷰 데이터가 많아야 10~100개 정도라서, “수십 개의 데이터를 한꺼번에 가져와서 생기는 성능 이슈일 것 같다”는 가정이나, 페이지네이션 API를 학습 겸 /review/book/${bookId}를 고도화하자는 제안은 이번 케이스의 원인/해결책과는 조금 결이 다를 수 있을 것 같습니다.(10 ~ 100개 수준의 레코드를 단순 조회하는 작업은 보통 네트워크 전송량도 크지 않고, DB 입장에서도 인덱스(예: bookId 기준)가 잡혀 있는 한 응답 시간이 병목이 되기 어렵습니다.) 실제로 느리게 느껴지는 이유는 리뷰 개수가 많아서라기보다는, 해당 페이지가 정적으로 빌드된 결과를 바로 보여주는 구조가 아니라 매 요청마다 데이터를 다시 가져오는 Dynamic 렌더링으로 동작하기 때문입니다. 특히 데이터 소스가 Supabase이고, 프리티어 환경에서는 트래픽 상황이나 인스턴스 리소스에 따라 응답 시간이 일정하지 않거나 상대적으로 느려질 수 있어서, 같은 양의 데이터라도 “항상 바로 온다”는 보장이 없습니다. 결국 병목의 핵심은 “수십 개 데이터를 한 번에 가져왔기 때문”이라기보다, “요청 시점에 서버에서 실시간으로 데이터를 받아와야 하는 구조 + 외부(Supabase) 응답 지연 가능성” 쪽에 더 가깝다고 보는 편이 자연스럽습니다.가장 간단한 해결책으로는 해당 컴포넌트를 Suspense로 감싸서, 데이터가 준비되기 전까지는 fallback UI를 먼저 보여주도록 만드는 방법이 있습니다. 혹은 인터셉트 라우트로 제공되는 모달이라면, 모달의 컨텐츠 영역(리뷰 목록이 렌더링되는 부분)을 아예 Suspense로 감싸면 로딩 시간이 실제로 줄어들지는 않더라도, 사용자가 즉시 로딩 상태를 확인할 수 있어서 “모달이 멈춘 것처럼 보이는 체감”은 확실히 줄어듭니다.
- 0
- 2
- 27
질문&답변
Node.js 설치에 관한 질문입니다.
안녕하세요 이정환입니다.강의에서 안내드렸듯 LTS 버전이라면 숫자 무관하고 설치하셔도 됩니다 😀
- 0
- 2
- 26
질문&답변
함수 타입 호출 시그니처
안녕하세요 루룸님 이정환입니다.함수 타입 표현식과 호출 시그니쳐의 가장 핵심적인 차이점은 함수 타입 표현식은 해당 타입을 함수로 정의한다는 것이고, 호출 시그니쳐는 해당 타입을 객체로 정의한다는 것 입니다.자바스크립트에서는 함수 또한 객체의 일종으로 분류되기 때문에 일반적인 객체가 그렇듯 프로퍼티를 가질 수 있습니다. 타입스크립트에서 호출 시그니처 문법을 사용하는 이유도 바로 이런 특성(함수도 프로퍼티를 가질 수 있다)을 타입 레벨에서 자연스럽게 표현하기 위해서인데요. 함수 타입 표현식은 “어떤 인자를 받아 어떤 값을 반환하는 함수”라는 호출 형태를 간결하게 나타내는 데 적합한 반면, 호출 시그니처는 여기에 더해 label 같은 추가 프로퍼티를 함께 정의하거나, 여러 형태의 호출을 오버로드처럼 묶어서 표현해야 할 때 특히 유용합니다. 즉, 두 표현은 모두 “호출 가능하다”는 의미를 담고 있지만, 호출 시그니처 쪽이 객체 타입을 기반으로 하기 때문에 확장성이 더 크다고 이해하시면 됩니다.
- 0
- 1
- 21




