inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

shadcn sidebar관련해서

미해결

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

안녕하세요...강의 잘 듣고 있습니다. 강의 에서 사용하는 shadcn 으로 메뉴를 구성하고 있는데... 위에 top메뉴를 두고 top메뉴 밑에 sidebar를 두고 있는데.... sidebar는 무조건 맨위에 존재해야 하느건지 도저히 top메뉴(shadcn의 navigation menu) 밑으로는 들어가지를 않네요..T.T 혹시 sidebar는 무조건 left top인가요?

  • react
  • typescript
shoncg 댓글 2 좋아요 0 조회수 202

Home 구현 중 getMonthlyData에서 질문이 있습니다.

해결됨

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

구현해야할 Home 페이지는 title의 월과 년도가 같은 일기들을 보여주면 된다고 생각해서 beginTime과 endTime의 구현 없이, 단순히 월과 년도가 같으면 해당 아이템을 가져오는 방식으로 작성했습니다. 이렇게 했을 때 비교적 코드가 간단해 보인다고 생각했고 Home 구현만 한 현재까지는 문제없이 작동되는데,혹시 다른 문제를 일으킬 여지가 있는걸까요? 답변 미리 감사드립니다. const getMonthlyData = (data, pivotDate) => { return data.filter( (item) => item.createDate.getMonth() === pivotDate.getMonth() && item.createDate.getFullYear() === pivotDate.getFullYear() ); };

  • javascript
  • react
  • node.js
  • 카카오공채-개발
diazepam57 댓글 2 좋아요 0 조회수 53

6.8 zustand 강의에서 devtools 미들웨어에 대한 질문입니다.

미해결

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

zustand 강의에서 devtools 미들웨어를 사용하여 브라우저 도구 Redux 툴에서 Action 과 State 를 살펴보는데 강의 영상에서는 Action의 이름이 setSession 으로 나오는 데... 제 Redux 툴에서는 액션 명이 anonymous로 표시됩니다. 어떻게 액션명이 표시되는 지 궁금합니다. set 함수에서 액션명 표시하려면 이름을 주어 표시했는데 . 뭔가 다른가요 ? //... set({session, isLoaded: true}, undefined, 'setSession'); //...

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

고농축 백엔드와 완벽한 프론트 강의 차이?

해결됨

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

고농축 백엔드 코스의 첫 부분과 완벽한 프론트엔드 첫 부분이 겹치는 부분이 많은거 같은데, 둘 중 하나만 들어두될까요? 아니면 다른 부분이 있으니 들어야하나요?

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

21강. 강의와 다른부분에서 todo 타입 에러가 납니다.

미해결

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

import type { Todo } from "@/types"; import { create } from "zustand"; import { combine } from "zustand/middleware"; import { immer } from "zustand/middleware/immer"; const initialState: { todos: Todo[]; } = { todos: [], }; const useTodosStore = create( immer( combine(initialState, (set) => ({ actions: { createTodo: (content: string) => { set((state) => { state.todos.push({ id: new Date().getTime(), content }); }); }, deleteTodo: (targetId: number) => { set((state) => { state.todos = state.todos.filter((todo) => todo.id !== targetId); }); }, }, })), ), ); export interface Todo { id: number; content: string; } 오히려 강의에서 7분에 'never'에러나던 state.todos.push({ id: new Date().getTime(), content}); 이 코드 작성 시에는 에러가 나지않고, state.todos.filter((todo) => todo.id !== targetId); 여기서 todo 부분에서 에러가 납니다. 'todo' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다. state.todos에 마우스오버해서 확인해보니 any 타입으로 뜹니다. 제가 중간에 설정하는 부분이나 놓친부분이 있는걸까요 ㅠㅠ?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
정중한 사슴 댓글 3 좋아요 0 조회수 115

example 서버 플레이그라운드, API 접속 모두 안됩니다.

해결됨

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

2025.10.27. 16:44분 기준 example 서버의 플레이그라운드 접속과 API 접근 모두 안됩니다. 확인 부탁드립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
이준희 댓글 2 좋아요 0 조회수 132

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 150

TailWind css 린트

미해결

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

bg-muted, muted-foreground를 린트가 인식하지 못하는 것 같아요. Tailwind CSS IntelliSense 설치했구요, 추가로 PostCSS Language Support 확장 프로그램까지 설치한 상태입니다. 현재 제 eslint.config.js파일입니다. import js from '@eslint/js'; import globals from 'globals'; import reactHooks from 'eslint-plugin-react-hooks'; import reactRefresh from 'eslint-plugin-react-refresh'; import tseslint from 'typescript-eslint'; import { defineConfig, globalIgnores } from 'eslint/config'; import tailwind from 'eslint-plugin-tailwindcss'; export default defineConfig([ globalIgnores(['dist']), js.configs.recommended, // ESLint 기본 권장 ...tailwind.configs['flat/recommended'], // Tailwind 플러그인 권장(배열) ...tseslint.configs.recommended, // TypeScript 권장(배열) { files: ['**/*.{ts,tsx}'], extends: [ reactHooks.configs['recommended-latest'], // React Hooks 권장 reactRefresh.configs.vite, // Vite 환경에서 React Refresh ], rules: { 'tailwindcss/classnames-order': 'off', // 정렬은 Prettier가 담당하므로 충돌 방지 "@typescript-eslint/no-unused-vars": 'warn', // 사용되지 않은 변수가 있다면 경고 "@typescript-eslint/no-explicit-any": 'warn' // 명시적으로 any를 사용하면 경고 }, languageOptions: { globals: globals.browser, }, }, ]);

  • react
  • tailwindcss
likelion13 댓글 3 좋아요 1 조회수 251

렌더링

해결됨

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

혹시 main.jsx파일에서의 ReatDom.creatRoot( document.getElementById("root") ).render(<App/>);에서 id값을 따로 root로 설정해주지 않아도 render함수안에 있는 인자 값으로 root가 설정되는 걸까요? 어떻게 root로 설정하고 app을 루트로 만들어줬는지 궁금합니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
das mi 댓글 2 좋아요 0 조회수 67

강의자료는 어디에 있나요?

해결됨

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

강의자료는 어디에 있나요? [02-05] 헤더 옵션 심화 하는데 이미지 첨부하는 자료 또는 강의에서 진행하는 소스코드를 어디서 받을 수 있는지 알려주세요.

  • react
  • react-native
  • next.js
  • expo
하태영 댓글 2 좋아요 0 조회수 93

55강 Counter App 데모사이트 링크가 잘못된 것 같습니다.

해결됨

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

안녕하세요, 정환님 :) 55강 6.2) UI 구현하기에서 데모 사이트 링크가 https://counter-six-pi.vercel.app/ (데모 사이트) 대신 https://hyobb.com/?utm_source=notbook (김효빈님 resume) 으로 연결되는 것 같습니다. 확인 부탁드립니다! + : 강의 너무 잘 듣고 있습니다. 리액트 네이티브 프로젝트 전에 리액트 공부를 위해 구매했는데, 깔끔한 발성과 쉬운 설명 덕분에 리액트 공부가 훨씬 쉬워지는 느낌입니다. 강의 내용 잘 소화해서 프로젝트 잘 진행해보겠습니다! 감사합니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
변지섭 댓글 2 좋아요 0 조회수 45

(6.1) 인증과 인가 아해하기

미해결

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

질문은 아니고 오타가 있어서 제보 합니다. 이해하기 인데 아해하기로 되어 있네요 (6.1) 인증과 인가 아해하기

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이주영 댓글 1 좋아요 1 조회수 123

next.js가 아닌 react.js로 강의를 한이유가 궁금합니다.

미해결

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

next.js가 더 좋은거같은데 react.js로 하는이유가 있을까요? next.js요즘 안쓰는사람많던데 이유가 궁금합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
duddnd 댓글 3 좋아요 2 조회수 229

api 오류

미해결

AI와 함께 배우는 Next.js

https://app-router-api-five.vercel.app/ api 네트워크 오류가 나서 계속 500 오류가 납니다ㅠ

  • javascript
  • react
  • next.js
  • cursor
  • 인공지능(ai)
이진섭 댓글 2 좋아요 1 조회수 147

오류가 아닌 warning 메세지가 계속 뜹니다.

해결됨

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

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다 실행하는데 문제가 되지는 않는데 혹시 해결할 수 있는 방법이 있을까요??

  • javascript
  • react
  • node.js
  • 카카오공채-개발
고민지 댓글 2 좋아요 0 조회수 78

컴포넌트 네이밍 컨벤션 관련 질문 드립니다.

미해결

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

안녕하세요! 강의 잘 보고 있습니다. 정환님이 제작하신 강의는 모두 수강하고 있는데요, 리액트나 넥스트 강의에서 보면 컴포넌트 파일명도 케밥 케이스로 작성하시던데, 일반적으로 컴포넌트는 파스칼 케이스로 작성하는 경우가 많아서 혹시 특별한 이유가 있는지 궁금합니다!

  • react
  • typescript
  • react-query
  • supabase
  • zustand
popo 댓글 2 좋아요 0 조회수 125

Zustand의 get/set 메서드 관련 질문 드립니다.

미해결

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

안녕하세요! 강의 잘 듣고 있습니다. (3.2) Zustand 기본 사용법 1 강의의 9분 21초경 에서 궁금한 점이 생겨 질문드립니다. 강의에서 get 메서드는 store(객체) 전체를 반환 한다고 설명하셨습니다. 그리고 set 메서드는 인자로 전달된 객체의 프로퍼티만을 갱신 한다고 하셨는데요. 그런데 아래 코드처럼 보면, set 내부에서는 따로 get() 을 호출하지 않아도 count 값을 바로 참조해 업데이트하고 있습니다. increase: () => { const count = get().count; // 여기서 store의 count 프로퍼티를 가져온다 set({ count: count + 1 }); // 그런데 여기서는 count를 직접 사용할 수 있다? } 제가 이해하기로는 store의 값을 변경하기 위해 프로퍼티를 참조할 때에도(여기서는 count: ) 먼저 get() 으로 현재 store의 참조를 얻은 뒤 수정해야 할 것 같은데, set({ count: count + 1 }) 처럼 직접 count를 갱신할 수 있는 이유 가 궁금합니다. 즉, set 은 내부적으로 get() 을 다시 호출해서 현재 store 상태를 알고 있는 건가요? 아니면 set 이 store 객체의 참조를 이미 가지고 있어서 가능한 건가요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
popo 댓글 2 좋아요 0 조회수 171

.prettierrc 자동완성

해결됨

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

.prettierrc 파일에서 플러그인 설정 관련 코드를 작성하실 때 자동완성이 되시는데 혹시 어떤 설정을 해야하나요??

  • react
  • typescript
  • react-query
  • supabase
  • zustand
mandoo 댓글 1 좋아요 1 조회수 138

기기에서는 네트워크 에러가 납니다.

미해결

React Native with Expo: 제로초에게 제대로 배우기

로컬에서는 분명히 문제 없이 DB에 접속이 되는데 빌드를 해서 apk파일을 만들어서 안드로이드 기기에 설치를 하면 network error가 나네요 app.json 파일에 "android": { "usesCleartextTraffic": true, 이렇게 설정을 했는데도 네트워크 오류가 나는데 이것 말고 더 수정해야하는 내용이 있을까요? 환경 설정은 https://inf.run/6wYbc 여기와 동일합니다.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
인프러너 댓글 2 좋아요 0 조회수 137

common component생성, storybook 작성시 하나하나 하게 됨

해결됨

[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

수업에서는 common component생성, storybook 작성을 한번에 하고 그 다음 수정하는것이 효율적이라고 하셨는데 일괄생성 후 수정작업하다 보니 ( 색상코드를 사용하지 않음, 색상코드를 적용오류에 대한 발견, html 구조 이상, story 파일 오류 등 ) 다시 하나씩 재생성하는 경우도 생기게 되네요. 그냥 하나씩 component 생성 후 story 생성하는것이 낫지 않을까 싶어 글 남깁니다.

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
hanbrang 댓글 2 좋아요 0 조회수 91

인기 태그

인프런 TOP Writers

주간 인기글