176만명의 커뮤니티!! 함께 토론해봐요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
왜 배포전에 기능 다 구현하고 했는데, 배포하면 이런 기능을 못 쓰고, 추가로 파이어베이스 등을 사용해야만 가능한가요.... 정 방법이 없나요? 아니면 파이어 베이스 까지 활용해서 기능을 성공적으로 구현하는 걸 보고 싶은데 안될까요?? 추가 강의로든, 이 질문에 대한 답변으로든, 꼭 이번 프로젝트의 끝을 보고 싶습니다..!!
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
제가 본 바로는, 원래 notes 속성으로 db.json에 사전에 기입해둔 데이터가 있어서 실습하는 과정에서 해당 린캔버스는 오류가 없었는데, 다른 린캔버스 들어가면서 이런식으로 에러가 뜨네요. 전 짐코딩님 강좌 처음부터끝까지 다 스킵 안하고 보고 있는데, 저만 이런 오류가 뜨나 해서요. 혹시, 강좌에서 코드에 이런 오류는 반영이 안된걸까요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; } 제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다. 제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데, 강의에서는 Object.assign({baseURL}),options 으로 options객체를 object.assign 함수 바깥에 위치하더라구요? 이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요? Object.assign({baseURL,},options)를 해야 되는거 같은데, 제가 놓친 부분이 있는걸까요? (코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
lean-canvas 프로젝트 생성부터 react-router-dom 설치하기까지 중간중간 보이는 package.json 을 보고 전부 버전을 맞췄는데, react-router 를 통해 home 에서 about, contact 가는 그게 전혀 작동하지 않습니다. 버전에 맞춰서 새로 영상을 찍어주시거나 가능할까요? 버전을 맞춰도, 작동이 안돼서 어렵네요.. ㅠㅠ 아래는 영상의 package.json 을 보고 버전을 맞춘 코드 입니다. { "name": "lean-canvas-make-downversion", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix", "preview": "vite preview", "format": "prettier --write --cache ." }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.57.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "prettier": "3.6.2", "vite": "^5.3.4" } }
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데, 레이아웃을 만들수가 없습니다 ㅠㅠ 처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠ ㅠ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다. 여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만, router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도, data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다. ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다. 일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드 부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다. 그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요? 혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
강사님! 질문이 있습니다. 질문이 좀 길어요. 죄송합니다. 커뮤니티에도 질문을 올렸는데 휴가 중이신지 답변이 없어서 여기에도 남겨봅니다. Vue3 모든 과정을 수강하고 덕분에 프로젝트도 수행을 잘 했습니다. 그런데 프로젝트 할 때 quasar와 사용자 css 적용 문제로 퍼블리셔들이 고생을 많이 했습니다. 저는 PM 역할을 수행합니다. quasar의 css가 사용자가 정의한 css를 덮어 쓰는 경향이 있어 처리한다고 퍼블리셔 분들이 고생들을 많이 했어요. 그래서 다시 프로젝트를 곧 수행할 것 같은데 이번에는 tailwind를 적용해 볼려고 해요. 그러면 nuxt3 + vue3 + quasar + tailwind로 생각하고 있는데 그런데 저희는 포털은 웹 접근성 심사를 받아야 해서 이 조합이 맞는지가 궁금합니다. quasar가 다른 css를 덮어 쓰는 문제가 발생해서 tailwind로 작성한 css도 무용지물이 될까 심히 걱정스럽습니다.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
지난강의에서 useImmer에서 활용한 update함수에서는 push, splice와 같은 현재의 객체를 변환시키는 api를 활용했었습니다. 그래서 immer 가 적용된 상황에서는, 현재 객체를 변환시키는 것만이 답일것이라 생각해서, 오히려 filter api를 써야 코드가 더 간단해지는 상황에서는 useState를 따로 분리해서 써야 고민하고 있었습니다. 그런데 이번 강의에서 useImmerReducer에서 활용하는 것을 보아하니, State가 아니라 Immer 이 적용된 케이스더라도, return으로 새로운 객체를 반환하거나, 직접 객체에 변화를 주거나 하는 방법이 둘다 적용이 되는것으로도 보이는것 같더라구요? case 'deleted':에서도 draft.filter에 return 이 적용되면, immerReducer라도 잘 작동하고, return을 없애고, break로 나오게 하면, 변화가 아무래도 적용이 안되더라구요(당연하겠죠... 원래 객체에 변화를 준것이 아니니) 그래서 immer나 immerReducer를 활용한다는 것은 useState을 확장시키는 느낌인건가요? 직접객체에 변화를 주는것 뿐만아니라, useState에서 했던것처럼 새로운 객체를 만들어 return하는 것 '까지' 가능한건가요? 만약 immer가 적용된 상황에서, 직접 객체를 변환하는 코드와, 새로운 객체를 만들어 return 하는 코드가 하나에 전부 적용되어 있다면 어떻게 작용하나요? 다시 말해, draft.push로 '변경사항이 immer에 반영되고', 동시에return으로 draft.filter한 값을 보내면, 어떻게 작용하며, 어떤 로직이 적용되나요? 감사합니다
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요 vite를 설치해서 리액트를 잘 사용하다가 최근 vite를 설치하고 npm run dev로 실행을 하니 아래 이미지와 같은 에러가 계속 나더라구요. 찾아보니 버전과 관련이 되어 있는거 같은데 아무리 찾아봐도 해결이 되지 않더라구요. 현재 vite는 사용하지 못하는건가요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
npm init vite@5.2.3 를 통해 설치 후 npm i를 통해 필요한 라이브러리를 다운 받을시에, 터미널 창을 통해 각종 경고 안내가 나옵니다. 예를 들어 하나만 보여드리자면, npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported 입니다. 이처럼 온갖 라이브러리들이 '더 이상 지원하지 않는 버전임'을 명시하고 있는데, 최신 버전을 사용해서 수업을 따라가야 하나요, 아니면 '더이상 지원하지 않는 버전'의 라이브러리를 사용해서 코드를 짜도 이상이 없을까요? 안내해주신 것처럼 라이브러리 버전을 맞춰서 수업을 따라가고 싶은데, 터미널에서 이러한 경고를 보여주니, 버전을 맞출시에 '지원하지 않는 버전'문제로 인한 추가적인 오류가 생길까 걱정됩니다. 요약 1.터미널에서 말하는 '더 이상 지원하지 않는 버전' 안내를 무시하고, 짐코딩님 강의의 라이브러리 버전을 사용해도 문제가 없을까요? 2.최신 버전을 사용하고, 달라진 문법등의 오류를 감당하는게 나을까요? 2번 질문의 문제에 대한 기술적인 지원을, 짐코딩님을 통해 받을 수 있을까요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
추가할 todo에 공백이 포함된 상태로 엔터를 입력하면 위와 같이 추가가 되는데 제가 잘못한 부분이 있을까요? https://github.com/juan-rybczinski/learn-react/commit/dba6aab43a96601fed941edfa652e4508f6a88e9
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
4.6강 초기 로딩 속도 케이스 비교 세가지 케이스를 적어주셨는데 case1, case3이 같은 건가요? 제가 이해를 못한 건가 싶어서 세 번 돌려봤는데 같아 보여서요.
미해결
Next.js App router 기반 Chat GPT 만들기
// model.ts import { create } from 'zustand'; type State = { model: string; }; type Action = { updateModel: (model: State['model']) => void; }; const useModelStore = create<State & Action>((set) => ({ model: 'gpt-3.5-turbo', updateModel: (model) => set(() => ({ model })), })); export { useModelStore }; // ModelSelect.tsx 'use client'; import { useModelStore } from '@/store/model'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; const MODELS = ['gpt-3.5-turbo', 'gpt-4', 'gpt-4o']; export default function ModelSelect() { const { model: currentModel, updateModel } = useModelStore((state) => ({ model: state.model, updateModel: state.updateModel, })); const handleChange = (selectModel: string) => { updateModel(selectModel); }; return ( <Select value={currentModel} onValueChange={handleChange}> <SelectTrigger className="w-[180px] border-none focus:ring-transparent"> <SelectValue placeholder="모델 선택" /> </SelectTrigger> <SelectContent> {MODELS.map((model) => ( <SelectItem key={model} value={model} disabled={currentModel === model}> {model} </SelectItem> ))} </SelectContent> </Select> ); } 위 코드 적용 결과 아래와 같은 무한반복 에러가 발생합니다. 강의 내용과 비교해 보아도 문제를 찾지 못했습니다 ㅜㅜ
미해결
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
강사님 강의 잘봤습니다, 개인적으로 만들고 싶은게 있어서 하다가 postgres_changes로 채팅방 기능을 만들어서 배포를 하였는데 로컬에서는 평균 속도가 200ms인데 vercel 무료로 하니까 1.2s 정도 잡히더라구여 그래서 쿼리문제인가 싶어서 컬럼도 필요한것만 가져오고 나름대로 최적화를 진행했는데도 배포에서만 느려가지고 제가 잘못하고 있나... 그래가지고 무료버전이라서 그런지 궁금합니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
이런식으로 저도 그렇고, 로펀님도 그렇고 material 가져올때 붉은 밑줄이 나오는데, 이거 안 나오게 하는 방법이 있나요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요, 강의 내용대로 했는데 500 에러가 나서 확인해보니 한글로 된 파일일 경우 에러를 내는 상황입니다 ㅜ supabase 스토리지에서는 한글로된 이름을 허용하지 않는것 같은데, 따로 해결방법이 있을까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. recoil 이게 next에서 쓸 때에 따로 타입 에러 등 next가 recoil을 못 찾아내는 거 같은데, 강의 진행할때에는 recoil을 쓸거잖아요? 이럴때에는 어떻게 해야 하나요? 버전을 낮추어야 하나요? 낮춘다면 어디 버전까지 낮춰야 할까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
있으면 url 좀 알려주세요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
저는 처음에 과제를 할때 setTotal 을 직접 prop 으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요?? 차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return ( <main> <h2>Main Component</h2> <h1>{Total}</h1> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> </main> ); } export default Main;
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
'BuildSchema<"update", { id: PgColumn<{ name: "id"; tableName: "videos"; dataType: "string"; columnType: "PgUUID"; data: string; driverParam: string; notNull: true; hasDefault: true; isPrimaryKey: true; isAutoincrement: false; ... 4 more ...; generated: undefined; }, {}, {}>; ... 15 more ...; updatedAt: PgColumn<...>...' 형식이 'ZodType<any, any, any>' 제약 조건을 만족하지 않습니다. 'ZodObject<{ id: ZodOptional<ZodUUID>; title: ZodOptional<ZodString>; description: ZodOptional<ZodNullable<ZodString>>; ... 13 more ...; updatedAt: ZodOptional<...>; }, { ...; }>' 형식에 'ZodType<any, any, any>' 형식의 type, parse, getType, getOrReturnCtx 외 7개 속성이 없습니다. 라는 에러 문구가 코드 에디터에 나타납니다.
