inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

공부방향에 대한 조언

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

강의를 막상 보면서 하는 건 쉬운데 미션에서 적용하는 것이 너무 어렵네요. 조금 빈 구멍이 생겨도 완강하는 것이 좋은 것인지, 구멍이 좀 생기지 않도록 끝까지 반복하면서 늦더라도 구멍이 생기지 않도록 하는 것이 좋은것인지 궁금합니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
양승근 댓글 2 좋아요 0 조회수 101

styled-components

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

책에서는 styled-components를 더이상 추천하지 않는다고 하셨는데요. 강의에서는 비교적 비중을 높게 두시고 강의하시는 것 같은데요. 처음하는 입장에서 공부 방향을 어떻게 잡고 가야 할까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
양승근 댓글 2 좋아요 0 조회수 67

강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 정환님. 저는 정환님의 강의를 모두 구매해서 수강하고 있는 수강생입니다. 현재는 바이브 코딩 강의를 제외한 강의들을 모두 수강했고, 지금은 복습을 진행하고 있습니다. 복습과 함께 프론트엔드 신입 지원용 개인 프로젝트를 준비하고 있는데, 정환님께 배운 내용을 최대한 활용해 보고 싶어서 질문드립니다. 개인 프로젝트 기술 스택은 Next.js + TanStack Query + Supabase 기반으로 생각하고 있습니다. 1. 제가 이전에 영어학원에서 근무한 경험이 있어서, 그 경험을 바탕으로 영어와 관련된 서비스를 만들어보려고 합니다. 예를 들어 영어 원서 학습 서비스나 영어 단어장 서비스 등을 생각하고 있는데, 이런 주제가 프론트엔드 신입 포트폴리오용 개인 프로젝트로 적절할지 궁금합니다. 2. 혹시 프론트엔드 신입 포트폴리오용으로 추천해 주실 만한 프로젝트 주제가 있을까요? 3. 현재 React, TypeScript, Next.js, TanStack Query를 학습하고 복습 중입니다. 신입 프론트엔드 개발자로 취업하기 위해 어느 정도 수준까지 준비하는 것이 좋을지, 그리고 추가로 공부하면 좋을 부분이 있다면 조언 부탁드립니다. 4. 정환님의 바이브 코딩 강의를 수강한 이후에는 AI를 활용한 프로젝트도 하나 진행해 보고 싶습니다. 프론트엔드 신입 포트폴리오 관점에서 추천해 주실 만한 AI 프로젝트 주제가 있을까요? 5.포트폴리오를 준비하는 입장에서 아래 항목들의 우선순위를 어떻게 가져가는 것이 좋을지도 궁금합니다. 현재 준비 기간이 넉넉하지 않아 세 가지를 모두 진행하지 못할 수도 있다는 생각이 들어서, 어떤 순서로 준비하는 것이 가장 효과적일지 조언 부탁드립니다. 1) 개인 프로젝트 2) AI 프로젝트 3) 팀 프로젝트 질문이 많았는데 시간 내어 읽어주셔서 감사합니다. 정환님 강의를 통해 정말 많은 도움을 받고 있습니다. 항상 좋은 강의 만들어주셔서 감사드립니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
imhj11777 댓글 1 좋아요 2 조회수 127

import {} 중괄호 차이점

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

안녕하세요 위 제목 같이 import {} 중괄호 차이점 1: import useCounter from "../context/counter/useCounter"; 2: import {useCounter} from "../context/counter/useCounter"; 중괄호 할때와 안할때의 차이점을 알고 싶습니다. 문의 답변 부탁드립니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
bluescreen 댓글 2 좋아요 0 조회수 90

[ 문의]몽고DB connect 의 건

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

후 connect 를 시도하면 아래와 같이 권한 문제로 접속이 안되고 있습니다. (source tree는 관리자 권한으로 실행 되고 있습니다.) 강사님~ 무엇이 문제인지요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
bluescreen 댓글 2 좋아요 0 조회수 107

제공되는 react_code.zip 중에 ..

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

제공되는 react_ code.zip 중에 .. D:\su\code\SECTION11\11-02 D:\su\code\SECTION11\11-03 안에 소스가 없네요. 당연히 제가 작성하면 되겠지만... 참조하는 차원에서.. ㅡㅡ;; 소스를 얻을 수 있을까요? 다른 폴더안에는 소스가 제공되고 있는데 말이줘 ..

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
bluescreen 댓글 2 좋아요 0 조회수 98

커리큘럼 비활성화

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

구입을 했는데 ... 아래 비활성화 된 강의 리스트는 뭔가요? 뒤 강의를 보고 싶거든요

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
bluescreen 댓글 2 좋아요 0 조회수 94

27강 Context내 RSC 사용 관련 문의

해결됨

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

강의 잘 듣고있습니다. 한 가지 궁금한 점이 있어 질문드립니다. "App.tsx를 Provider로 감싸는 순간 그 아래 모든 컴포넌트가 서버 컴포넌트로서의 최적화 기회를 잃는다"는 부분이 잘 이해되지 않습니다. 제가 알기로는 Provider를 children prop으로 받는 composition pattern으로 작성하면, Provider 자체는 Client Component여도 그 안에 들어가는 children은 Server Component로 유지될 수 있는 것으로 알고 있습니다. Next.js App Router의 RootLayout 에서 <Providers>{children}</Providers> 형태로 쓰는 패턴이 그 예시라고 알고 있고요. 이 경우에도 RSC 최적화 기회를 잃는다고 보시는 건지, 아니면 제가 놓치고 있는 다른 맥락이 있는지 궁금합니다.

  • javascript
  • react
  • typescript
  • frontend
  • zustand
Eden 댓글 3 좋아요 0 조회수 161

설명하시는 개념들을 잘 모르겠습니다.

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

안녕하세요. 설명하시는 개념들이 매우 어렵게 느껴집니다. 굉장히 기본 개념을 설명하고 계신 것 같은데요. 강의를 어떤 자세로 수강해야 할까요? 부분 부분 계속 끊어져 있으니 이해가 안 됩니다. 책을 구매해서 보면 도움이 될까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
댓글 2 좋아요 0 조회수 100

회원가입 구현 (구현 후 최종 화면 출력 X)

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

해당 강의 수강중에 정환님께서 진행해주신 부분 그대로 똑같이 따라했는데 화면에서는 아예 아무것도 보이지않는.. 출력이 안됩니다..ㅠㅠ 무슨 문제일까요?? 예상은 api를 저장하는 auth.ts 부분부터 뭔가 잘못된거같은데 이유를 모르겠습니다. (그리고, 예외사항으로 import 부분의 빨간밑줄오류나 코드에서 오타가 아닌 빨간밑줄오류는 왜 생기는걸까요??ㅠ) 현재 진행중인 코드를 한번에 알아보기 쉽게 Github에 바로 올렸습니다. 링크 : https://github.com/Skyllerrr 안에 Repository의 첫 번째 프로젝트(onebite-SNS)입니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
  • usemutation
rkdla666 댓글 2 좋아요 0 조회수 152

디바이스 별 다른 크기의 화면을 고려하는 반응형UI

미해결

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 ) 개발을 진행하면서, 사용자마다 서로 다른 핸드폰을 가지고 있고, 디바이스 별 화면 크기가 다릅니다. 이에 대한 반응형 UI대응은 어떻게 대응하는 것이 좋을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
  • 반응형ui
juhyunk0820 댓글 2 좋아요 0 조회수 113

(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 6.11 회원가입시 프로필 정보 자동 생성하기 강의중18:17 분 쯤에 아래처럼 useProfileData(session?.user.id) -> useEffect 훅을 선언하는데 처음에는 session?.user.id이 값이 없는데 useProfileData 훅을 먼저 부르는게 맞나요? 저는 useEffect -> useProfileData 이 순서가 맞다고 생각해서요 원본 export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading, isPending, } = useProfileData(session?.user.id); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; } 내 생각 export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); const { data: profile, isLoading: isProfileLoading, isPending, } = useProfileData(session?.user.id); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; }

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이민진 댓글 1 좋아요 0 조회수 96

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

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

안녕하세요 강사님. 자바스크립트에 대한 기본을 어느 정도 공부하고 와야 할까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
양승근 댓글 1 좋아요 0 조회수 104

styled-components(전역)

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

// main.tsx import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import { ThemeProvider } from "styled-components"; const theme = { colors: { primary: "red", secondary: "#gray", }, fontSizes: { normal: "16px", large: "20px", }, }; createRoot(document.getElementById("root")!).render( <StrictMode> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </StrictMode>, ); // App.tsx import styled, { keyframes, css } from "styled-components"; const boxShadowMixin = css` margin: 20px; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5); `; const fadeIn = keyframes` from { opacity: 0; } to { opacity: 1; } `; const Title = styled.h1<{ $color: string; $decoration: string }>` color: ${(props) => props.$color}; text-decoration: ${(props) => props.$decoration}; animation: ${fadeIn} 2s ease-in; `; const BigTitle = styled(Title)` font-size: 50px; `; const Wrapper = styled.section` padding: 2rem; border: 1px solid red; `; const BlueBorderWrapper = styled(Wrapper)<{ $shadow: boolean }>` border-color: ${(props) => props.theme.colors.primary}; ${(props) => props.$shadow && boxShadowMixin}; `; export default function App() { return ( <> <BlueBorderWrapper $shadow={true}> <Title $color="#00ff00" $decoration="line-through" as="p"> App Component </Title> <BigTitle $color="#0000ff" $decoration="underline"> App Component </BigTitle> </BlueBorderWrapper> </> ); } border-color: ${(props) => props.theme.colors.primary}; 적용하는 부분에서 에러가 발생합니다. Property 'colors' does not exist on type 'DefaultTheme'. 혹시 문제가 있는걸까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
잠댕뭉 댓글 1 좋아요 0 조회수 104

명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 6.8 Zustand를 이용해 세션 관리하기 4:52초에 타입 선언 부분에 타입 문의가 있어서요! 아래처럼 차이가 뭔지 잘 모르겟네요 강사님은 as 타입선언으로 자주 쓰시던데 ai 물어보니 initailState: State 이 형식이 명시적 타입 선언 이라 더 엄격해서 추천한다고 하던데 as로 타입 단언 하는 이유가 있으신가요? const initailState: State = { isLoaded: false, session: null, }; const initailState = { isLoaded: false, session: null, } as State;

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이민진 댓글 2 좋아요 0 조회수 98

쿠폰 문의 드립니다.

미해결

한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS

안녕하세요 강사님 강의들 잘 보고 있습니다. 2026년에 구입했던 "한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS" 강의 다시 보게 되면서 "한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편" 강의도 구매해서 보고 싶어 졌는데 예전에 받았던 할인 쿠폰이 만료 처리 되어 사용할 수가 없네요. 너무 늦은 시점에 요청 드려 염치가 없지만 혹시 쿠폰 재발급이 가능한지 문의 드립니다. 감사합니다. 수고하세요.

  • react
  • 웹앱
  • tailwindcss
  • react-query
  • zustand
itdeveloper 댓글 2 좋아요 0 조회수 80

useMutation 적용 후 새로운 글 등록시 content가 안보여요

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

useMutation 적용후, 새로운 아이템을 추가하면, 아이템은 추가 되지만 안에 컨텐츠 내용은 안나오고, 삭제도 안되네요? 어디를 놓친걸까요??

  • react
  • typescript
  • react-query
  • supabase
  • zustand
powerwmj 댓글 3 좋아요 0 조회수 127

추가 강의 업데이트 일정 문의

미해결

리액트 취준생을 위한 Zustand 실전 입문 가이드

안녕하세요, 강의 소개에서 지속적인 업데이트를 강조하고 있고 이후 올해 1분기 내 추가 강의 업로드 예정이라는 안내를 보고 기다리고 있습니다. 이제 2분기 중반임에도 별도 추가 강의 업로드나 공지가 없어서 일정이 변경된 것인지 궁금하여 문의드립니다.

  • react
  • zustand
댓글 1 좋아요 2 조회수 101

문의관련 문의

해결됨

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

다른분들이 이미 80강 내용없음 및 중복인 부분들 문의를 올렸는데 왜 개선되는게 하나도 없나요???? 최소한 모가 어떻다는 내용은 전달해 주셔야 하는거 아닌가요??

  • javascript
  • react
  • typescript
  • frontend
  • zustand
보헤미안 댓글 2 좋아요 0 조회수 132

섹션3 Shadcn/ui 생성 시

미해결

한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS

( 해당 섹션 수강하던 2026-04-03 기준 ) npx shadcn@latest init 명령어 입력하면 2가지 선택지를 제공해줘요. Select a component library 라고 떠요 선택지에 Radix, Base 있는데 Radix가 흔히 아는 Shadcn/ui 라고 합니다. Which preset would you like to use? Nova (아이콘 Lucide, 폰트 Geist) Vega (아이콘 Lucide, 폰트 Inter) Maia (아이콘 Hugeicons, 폰트 Figtree) Lyra (아이콘 Phosphor, 폰트 JetBrains Mono) Mira (아이콘 Hugeicons, 폰트 Inter) Luma (아이콘 Lucide, 폰트 Inter) 강의에선 7:16 참고 하시면 base color 고르라는 선택지가 나왔고, 강사님께선 Neutral 고르셨습니다. 저는 저게 안나와서 gemini 에게 물어봤고 이와 같은 답변을 얻어서 진행했습니다. 혹시나 참고가 될까싶어 작성합니다.

  • react
  • 웹앱
  • tailwindcss
  • react-query
  • zustand
ggomsoo 댓글 1 좋아요 0 조회수 205

인기 태그

인프런 TOP Writers

주간 인기글