sucoding

안녕하세요. 😀 자바스크립트를 아주 깊게 알고 계실 필요는 없지만, 기본 문법 정도는 익히고 오시는 것을 권장드립니다.예를 들어:<ul><li>변수와 함수</li><li>조건문 / 반복문</li><li>배열과 객체</li><li>함수 표현식, 화살표 함수</li><li>비동기(async / await)</li><li>map, filter 같은 배열 메서드</li></ul>정도는 한 번이라도 사용해보셨다면 강의를 따라오시는 데 큰 문제는 없습니다.다만 이 강의는 리액트와 타입스크립트 자체에 집중하는 강의이다 보니, 자바스크립트나 타입스크립트 문법 자체를 처음부터 하나하나 설명하는 형태의 강의는 아닙니다. 그래서 자바스크립트 기초가 전혀 없는 상태라면 리액트보다 문법 자체가 더 어렵게 느껴질 수 있어서, 입문 수준의 자바스크립트(타입스크립트) 강의를 먼저 가볍게 학습하고 오시는 것을 추천드립니다. 🙂

이해가 절반 정도 되는데요.

안녕하세요. <code>styled-components</code>의 <code>DefaultTheme</code>은 기본적으로 빈 인터페이스(<code>{}</code>)로 정의되어 있어서, 커스텀 theme 객체의 타입을 자동으로 인식하지 못합니다.따라서 <code>props.theme.colors</code>에 접근하려 하면 TypeScript가 해당 프로퍼티가 없다고 에러를 냅니다.해결 방법<code>DefaultTheme</code>을 모듈 선언(Declaration Merging) 으로 확장해야 합니다.1. <code>styled.d.ts</code> 파일 생성<pre><code class="language-typescript">// src/styled.d.ts
import "styled-components";

declare module "styled-components" {
 export interface DefaultTheme {
 colors: {
 primary: string;
 secondary: string;
 };
 fontSizes: {
 normal: string;
 large: string;
 };
 }
}
</code></pre>2. (선택) theme 객체에 타입 명시<code>main.tsx</code>에서 theme 객체가 <code>DefaultTheme</code>을 만족하는지 컴파일 타임에 검증하고 싶다면 타입을 직접 지정할 수도 있습니다.<pre><code class="language-typescript">// main.tsx
import { DefaultTheme } from "styled-components";

const theme: DefaultTheme = {
 colors: {
 primary: "red",
 secondary: "gray", // ← "#gray"도 오타이니 이 기회에 수정
 },
 fontSizes: {
 normal: "16px",
 large: "20px",
 },
};
</code></pre><code>styled.d.ts</code> 파일 하나만 추가하면 프로젝트 전체에서 <code>props.theme.colors</code>, <code>props.theme.fontSizes</code> 타입 추론이 정상적으로 동작합니다.

styled-components(전역)

안녕하세요. tjsdn052님!해당 문제 확인하여서 영상 교체하였습니다.제보해주셔서 감사합니다.

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

안녕하세요. 귀한 불도새님!정답이 잘못 표기가 되어 있었네요.확인해서 수정했습니다.감사합니다!

미션 06-02

안녕하세요. 😀아마 최근에 버전이 업데이트되면서 (지난주) 영상에서 사용한 아이콘과 현재 결과가 다르게 보이는 것 같습니다.아래 명령어를 사용하시면 강의에서 사용한 버전과 동일하게 설치할 수 있어, 문제 없이 실습을 진행하실 수 있습니다.<pre><code class="language-bash">npm install lucide-react@^0.562.0</code></pre>보통 실습은 제공된 예제 코드를 기준으로 진행하시기를 권장드립니다. 예제 코드의 <code>package.json</code>에는 강의에서 사용한 lucide-react 버전이 그대로 명시되어 있기 때문에, <code>npm install</code>만 실행하셔도 정상적으로 동일한 환경이 구성됩니다.다만, 직접 패키지를 설치하실 경우에는 최신 버전이 설치되기 때문에 말씀해주신 것처럼 아이콘이 다르게 보이는 문제가 발생할 수 있습니다.따라서 위 명령어를 사용하여 버전을 맞춰 진행해주시기를 권장드립니다.감사합니다.

lucide react 아이콘 설치

안녕하세요 태리바이트님!이미 인프런 AI가 답변을 해줬네요...ㅎㅎ인프런 AI 답변 수준이 너무 훌륭합니다.제가 실제로 인프런 AI 답변 읽어 봤는데, 문제될 부분 없이 정확하게 답변해주었으니 그대로 참고하시면 됩니다.감사합니다!

cloudinary 관련

안녕하세요, 곰코드님.강의에 나오는 최신 코드는 제가 제공해드린 스니펫을 기반으로 완성된 코드입니다.먼저 섹션 1의 ‘커스텀 스니펫 등록하기’ 강의를 참고하여 스니펫을 등록하신 뒤, <code>nrlayout</code>을 활용하시면 학습에 보다 최적화된 코드를 작성하실 수 있습니다 😊참고로 코드 구조가 일부 다르더라도 학습에는 큰 문제가 없으니 이 점도 함께 참고해 주세요.감사합니다.

02-04 layout.tsx 구조가 달라요

안녕하세요!인프런 AI 인턴 답변이 정확하네요.질문해주신 내용은 인프런 AI 답변 참고해보시면 도움이 될 듯합니다.추가로 궁금한 게 있으시면 다시 물어봐주세요!감사합니다.

심플갤러리 만들기에서

안녕하세요![섹션 1.준비하기 > 2. 소스 코드 다운로드 및 활용법] 강의에 최신 코드 다시 업로드해놨습니다.소스 코드를 다시 다운로드 받으시면 됩니다!불편을 드려서 죄송합니다!

10-6 실습 할 수 없습니다..

안녕하세요.말씀해주신 부분은 참고하겠습니다. 😊그림 자료는 제공된 예제 코드의 <code>SECTION03/03-03/.excalidraw</code> 파일에 포함되어 있습니다. VS Code에서 <code>excalidraw</code> 확장 프로그램을 설치하신 후, 해당 파일을 더블클릭해 열어보시면 내용을 확인하실 수 있습니다.<img src="https://cdn.inflearn.com/public/files/posts/9eb43d55-e00e-4762-99bf-7ce9cc6f5fa3/4b9098c2-f4e1-4db2-bc34-9488513d065d.png" media-type="img" alt="image.png" title="image.png" width="572" height="191">감사합니다.

sucoding

Posts