inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

이 강의를 수강하려면 React와 javascript만 알고있으면 되나요?

해결됨

Next.js 15로 완성하는 실전 YouTube 클론 개발

프로젝트 하나 남기고 싶어서 강의는 구매했는데 React를 잘 몰라서 공부를 하고 난 뒤 강의를 수강하려고 합니다. 강의 설명에 언급된 React, javascript 외 추가적으로 더 알아야하는 사전 지식이 있을까요?

  • react
  • postgresql
  • 클론코딩
  • next.js
  • tailwindcss
  • drizzle
박민석 댓글 1 좋아요 1 조회수 302

스토리북 테스트에 대한 질문

해결됨

실무에 바로 적용하는 스토리북과 UI 테스트

강의 중 스토리북이 테스트를 위한 라이브러리라고 말씀하신 부분이 있는데요, 스토리북 테스트 라이브러리가 yarn pnp와 의존성 간의 충돌이 있는 것으로 보입니다. 혹시 yarn pnp 환경에서 스토리북으로 컴포넌트에 대한 테스트를 진행하고 싶으면 어떻게 진행하면 좋을까요?

  • react
  • typescript
  • tailwindcss
  • storybook
  • ui-testing
김동훈 댓글 2 좋아요 0 조회수 127

npm install -D tailwindcss postcss autoprefixer 의 버전을 알고싶습니다.

미해결

최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리

tailwindcss의 버전이 4.x로 변경됨에 따라 강의 내용의 일부인 npx tailwindcss init -p 시 오류가 발생하는 것이 확인되었습니다. 최대한 강의를 따라가기 위하여, 일단 제 임의로 3.4.3 버전으로 다시 설치를 한 상황인데요. 강사님께서 npm install -D tailwindcss postcss autiprefixer 를 하셨을 때 설치되는 버전을 알고싶습니다.

  • vue.js
  • eslint
  • tailwindcss
  • vue-3
김정남 댓글 2 좋아요 0 조회수 140

무한스크롤 기능, 검색기능 대소문자

미해결

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

강의 잘 보고 있습니다. 무한 스크롤 기능 구현 해보았는데요 영화가 60개까지 나오고 진행이 되지 않다가 개발자 도구를 켜면 더 스크롤이 되는데 그것도 120번 영화에서 끊깁니다. 머가 문제일까요 ...ㅠ 검색기능에서 title 첫글자 대소문자 상관없이 하려면 어디를 수정해야 하나요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
코딩딩딩 댓글 1 좋아요 0 조회수 124

데이터 캐싱 부분에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 현재 고급- 데이터캐싱 부분의 강의를 보고 있는데 Fresh 상태에서는 데이터를 가져온 후 저장되어 있어 이 저장된 데이터를 사용하다 Stale상태가 되면 자동으로 다시 데이터가 요청되어 가져온다 라고 이해하고 있는데 맞는걸까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 2 좋아요 0 조회수 84

린캔버스 수정1 강의 매개변수에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 강의 잘 보고 있습니다. 린캔버스 수정1 강의 부분을 보고 있는데 조금씩 점점 어려워 질수록 헷갈리는 부분이 많은데 handleNotesChange 함수의 section, updatedNotes 의 매개변수가 작성이 되었는데 아직 초보자인 제가 이처럼 함수를 작성할 때 매개변수가 필요한지 필요하지 않는지에 대해 잘 모르겠더라구요. 정말 간단한거 예를 들어 삭제기능을 할땐 삭제할 id가 필요하니 id를 매개변수로 받아오고 이러한 부분은 이해를 하지만 지금처럼 조금 복잡해질때 어떤 매개변수가 필요하고 왜 필요한지에 대해 아직 어려운데 이럴때 어떤식으로 공부를 하면 좋을까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 1 좋아요 0 조회수 96

린캔버스 프로젝트 공부중에 z인덱스 값.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

선생님 린캔버스 프로젝트를 따라서 공부하고 있는데요. 해더부분에 햄버거 버튼을 클릭하면 나오는 aside 메뉴가 z-9999를 줬는데요 홈에 있는 돋보기가 더 위에서 노출되서요. 홈에 있는 서치 아이콘은 z-0으로 줬거든요 제가 뭘 잘못하고 있을까요 ㅠ

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
전순아 댓글 1 좋아요 0 조회수 77

smtp부분

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요, smtp 부분 이메일 인증 부분 진행하고있는데, smtp를 설정해야하는건가요? 그렇다면 어떻게 설정해야할까요? 리센드를 이용하면 도메인이 무조건 필요한거같아서요

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
wodndi0321 댓글 2 좋아요 0 조회수 112

삭제기능 구현부분에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 삭제기능 구현 강의를 보다가 조금 어려운 부분이 있어 질문을 드립니다. canvas.js 파일에서 getCanvases함수와 createCanvas함수는 canvases.get, canvases.post앞에 return이 붙었고 이건 다른 곳에서 사용할 수 있다라고 알고 있습니다. 그럼 deleteCanvas는 왜 똑같이 return을 사용하지 않고 async await을 사용했는지 궁금하고 왜 위에 두 함수는 return을 사용했는지도 궁금합니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 2 좋아요 0 조회수 84

캔버스 프로젝트에서 파일명에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 현재 캔버스 프로젝트 부분을 공부중입니다. 공부를 하면서 파일에 대해 궁금한점이 생겼는데 컴포넌트에는 뒤에 .jsx를 작성했는데 api폴더에서 canvas와 http 파일에는 .js가 붙은 이유가 뭔지 궁금합니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 1 좋아요 0 조회수 102

함수 정의 위치

해결됨

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요! React로 프로젝트를 진행할 때 여러 함수들(이벤트 핸들러나 로직 처리 함수 등)을 구현하게 되는데, 이런 함수들을 어느 위치에서 정의하고 관리하는 것이 좋은지 궁금합니다. 예를 들어, B 컴포넌트 안에 A 컴포넌트가 있고, A에서 어떤 이벤트 함수가 필요하다면 그 함수를 B에서 정의하고 props로 A에 전달하는 식으로 처리하는 것이 React에서 일반적인 방식인가요? 그리고 만약 그 함수가 여러 컴포넌트에서 재사용되어야 한다면, 이들 컴포넌트의 공통 상위 컴포넌트까지 올라가서 정의한 후 각 컴포넌트에 전달하는 방식이 맞는지도 궁금합니다. 혹시 더 좋은 구조나 패턴이 있다면 조언 주시면 감사하겠습니다!

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
Junseob Youn 댓글 1 좋아요 1 조회수 122

모듈 에러

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 모듈 에러가 뜨는데 수파베이스 설치를 잘못 한 것일까요? 검색해서 이리 저리 해보아도 잘 해결이 되지 않네요. 도와주세요~

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
댓글 2 좋아요 0 조회수 186

vs code 검색안됨

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

터미널에서 코드 입력해서 vs코드 열 수 있도록 하는 설정 강의보고 따라했는데 "code" 쳐도 제 vs목록에 PATH에 'code'명령 설치 라는 항목이 없어요ㅠㅠ

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
H Hun 댓글 2 좋아요 0 조회수 353

얕은복사와 깊은복사 질문

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요. 얕은복사와 깊은복사에 대해 질문합니다. 제가 알기론 지금 예시를 든 let person1 = {firstName:'짐', lastName:'코딩'}; let person2 = {...person1}; person1.firstName = 'GYM' console.log('person1: ', person1); console.log('person2: ', person2); 이거를 깊은 복사라고 하셨는데 얕은 복사 아닌가여?? 값이 원시값이라서 참조 공유 문제가 안생기는거 아닌가요?? 깊은 복사는 모든 깊이까지 값 자체를 완전하게 복사해야되는걸로 알고 있어서 cloneDeep이나 JSON.parse(JSON.stringify(person1)) 이런식으로 써야되는걸로 알고 있거든여. const items = [...todos] 도 얕은 복사지만 새로운 배열 주소를 만들어서 리액트에서는 변화가 생겼다고 판단하고 리렌더링이 되는걸로 알고 있는데 아닌가요??

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
얄라차개발자 댓글 2 좋아요 1 조회수 149

Streaming 관련 질문

미해결

Next.js App router 기반 Chat GPT 만들기

Loading UI & Streaming 강의 수강 중 강의 내용대로 따라 했는데 잘 안되는 부분이 있어서 질의드립니다! dashboard/page 에서의 page loading...은 정상적으로 나오는데 Card 컴포넌트 각각의 loading도 page loading 이후 한번에 로드되면서 각각의 loading이 나오지 않습니다. 혹시 어떤 문제가 있는지 알려주실 수 있으실까요? 아래에는 해당 깃허브 링크와 이미지 첨부했습니다! https://github.com/holdn2/NextJS-Inflearn-Chatgpt

  • react
  • typescript
  • next.js
  • tailwindcss
  • zustand
  • chatgpt
Uch0 댓글 2 좋아요 0 조회수 135

tailwind 4.x 버전 변경된 CSS 추출(?) 커맨드

미해결

실무에 바로 적용하는 스토리북과 UI 테스트

강의에 있는 커맨드가 사용되지 않아서 이곳 저곳 돌아다니다가 발견했네요 npx @tailwindcss/cli -i ./src/index.css -o ./src/output.css --watch

  • react
  • typescript
  • tailwindcss
  • storybook
  • ui-testing
한정훈 댓글 2 좋아요 1 조회수 231

스토리북 테마에 대해 질문 드립니다.

미해결

실무에 바로 적용하는 스토리북과 UI 테스트

퍼블리셔로 일하고 있는데.. 설정하는 부분이 녹록치 않아 이렇게 질문드립니다. 제가 하고자 하는 것은 라이트,다크 테마시 주요 컬러와 기타 색상등을 변경하려고 하는데요.. css 변수 처리 예는 아래와 같습니다. /* root 라이트테마 기본 변수 */ :root { --text-color: #000; --bg-color: #fff; } /* 다크 테마 기본변수 */ .dark { --text-color: #fff; --bg-color: #000; } 테마 설정은 다음과 같이 진행했습니다. preivew.tsx 에 decorators 배열로 추가함. import { withThemeByClassName } from '@storybook/addon-themes'; 이렇게 하니까 dark 클래스는 잘 붙고 있는데.. 문제는 상단 패널에 기본적으로 레이어로 떠서 클릭할수 있는 라이트,다크테마는 컴포넌트 화면의 배경컬러가 변경되지만 제가 애드온한 것은 토글버튼은 라이트,다크버튼이 나오더라구요.. 근데 문제는 애드온 한것은 클래스만 제어되고 있고 컴포넌트의 배경컬러를 제어하려니까 잘 안되더라구요.. 상단 기본 패널의 테마설정 부분과 애드온 한 부분의 싱크가 안맞는 부분도 있구요.. 이것을 어떤 식으로 처리해야하는지.. 조언을 구하고 싶습니다. 강의 잘 듣고 있습니다. 감사합니다.

  • react
  • typescript
  • tailwindcss
  • storybook
  • ui-testing
jaiyah 댓글 2 좋아요 0 조회수 181

추가 기능과 삭제 기능에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 강의 너무 잘 보고 있습니다. 공부를 하다가 궁금한점이 생겨서 질문을 드립니다. 메모를 추가 삭제 기능에서 처음에는 추가같은 경우에는.... const handleAddNote = () => { setNotes([...notes, {id: "", content: ""}]) } 이런식으로 ...notes로 기존 값에다가 id, content로 새로운 메모를 추가하는 기능으로 알고 있는데 나중에는... // 새로운 캔버스 export function createCanvas() { const newCanvas = { title: uuid().substring(0, 4) + '새로운 린 캔버스', lastModified: dayjs().format('YYYY-MM-DD HH:mm:ss'), category: '신규', }; return canvases.post('/', newCanvas); 이런식으로 추가기능을 만들고 삭제도 filter를 이용을 하는데 나중에는 export async function deleteCanvas() { await canvases.delete(`/${id}`); } 이런식으로 삭제 기능을 작성이 되었더라구요. 첫번째 코드들은 처음에는 추가, 삭제기능이 되지만 새로고침 후에는 다시 원래대로 나오고 두번째 코드들은 서버에서 추가, 삭제 기능을 만들어서 새로고침을 하면 실제로도 추가, 삭제 기능을 하게 되는 것인가요? 만약 그렇다면 첫번째 코드들은 새로고침을 하면 원대대로 되는데 왜 사용이 되는건지 궁금합니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 1 좋아요 0 조회수 112

그리드 레이아웃 관련 질문드립니다.

미해결

Tailwind CSS로 만드는 멋진 웹 UI 스타일링

안녕하세요! 강사님! 그리드 레이아웃과 관련되어 질문이 있습니다. 보통 디자이너들은 모바일, 태블릿, 데스크탑을 분리해서 개별적인 그리드 시스템을 활용해서 디자인을 진행하는 것으로 알고있습니다. <div class="container mx-auto"> <div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12"> <div class="col-span-4"> a </div> <div class="col-span-4"> b </div> <div class="col-span-4"> c </div> </div> </div> 이런식으로 각 섹션마다 container mx-auto로 컨테이너를 생성해주고 내부 row를 grid-cols로 그리드화하고 그리드 레이아웃에 맞게 컬럼들을 확보해서 하는 방식은 실제로는 잘 사용되지 않는 방법일까요 ?! 여러 군데를 찾아보아도 실제 grid를 사용하는 곳은 카드 UI들을 동일한 간격으로 배치하는 구조로만 사용하더라구요!

  • HTML/CSS
  • 반응형-웹
  • tailwindcss
yilee 댓글 2 좋아요 1 조회수 160

인기 태그

인프런 TOP Writers

주간 인기글