inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

메모 추가 및 제거UI 부분 질문있습니다.

미해결

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

안녕하세요 메모 추가 및 제거UI 강의를 듣다가 조금 헷갈리는 부분이 있어 질문을 드립니다. import { useEffect, useRef, useState } from 'react'; import { AiOutlineClose, AiOutlineCheck } from 'react-icons/ai'; const Note = ({ id, onRemoveNote }) => { const colorOptions = [ 'bg-yellow-300', 'bg-pink-300', 'bg-blue-300', 'bg-green-300', ]; const [isEditing, setIsEditing] = useState(false); const textareaRef = useRef(null); const [content, setContent] = useState(''); useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'; } }, [content]); return ( <div className={`p-4 bg-yellow-300 relative max-h-[32rem] overflow-hidden`} onClick={() => setIsEditing(true)} > <div className="absolute top-2 right-2"> {isEditing ? ( <button aria-label="Check Note" className="text-gray-700" onClick={e => { e.stopPropagation(); setIsEditing(false); }} > <AiOutlineCheck size={20} /> </button> ) : ( <button aria-label="Close Note" className="text-gray-700" onClick={() => onRemoveNote(id)} > <AiOutlineClose size={20} /> </button> )} </div> <textarea ref={textareaRef} value={content} onChange={e => setContent(e.target.value)} className={`w-full h-full bg-transparent resize-none border-none focus:outline-none text-gray-900 overflow-hidden`} aria-label="Edit Note" placeholder="메모를 작성하세요." style={{ height: 'auto', minHeight: '8rem' }} readOnly={!isEditing} /> {isEditing && ( <div className="flex space-x-2"> {colorOptions.map((option, index) => ( <button key={index} className={`w-6 h-6 rounded-full cursor-pointer outline outline-gray-50 ${option}`} aria-label={`Change color to ${option}`} /> ))} </div> )} </div> ); }; export default Note; 이 코드에서 useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'; } }, [content]); 이렇게 useEffect를 사용했는데 useEffect는 컴포넌트가 마운트 될 때 먼저 실행이 되고 또 의존성배열이 빈배열이면 한번만 실행이 된다로 알고 있습니다. 그럼 여기서는 빈 배열이 아닌 content가 있으니 메모장에 작성할 때마다 메모장을 늘어나게 하기 위해서 useEffect를 사용했다라고 이해하면 될까요?

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

20:34초에 await이 아무 효과가 없다고 뜨는데 사용하신 이유가 궁금합니다

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요! 로펀님 강의 잘 보고 있습니다 ㅎㅎ 다름이 아니고 TodoList에서 할일 CRUD 기능을 구현할 때 20:34초에서 onChange 함수에 async, await를 걸어주셨는데, hover 하니까 await이 아무 효과가 없다고 뜨더라구요 혹시 그럼에도 await를 달아주신 이유가 있나요? 이전에 같이 일하던 동료분도 가끔 이렇게 쓰셨었는데.. 그때는 제가 await가 아무런 작용을 안하는데 왜 쓰지? 하면서 다 뺐었거든요.. 😂 그러면 안됐을까요... 🥲 궁금합니다!!

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

latest 버전 변경에 따른 프로젝트 설정 방식 업데이트 가능하신가요

해결됨

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

프로젝트 생성 시 이제 npx create-next-app@latest next-tutorial 를 하면 이제 강의 만들던 시기의 설정과 다르게 되는 부분이 꽤나 있는데, 해당 부분에 대해서 강의 노트 업데이트를 해주실 수 있으실까요 ?ㅠ tailwind 설정이나 , latest 로 설정되는 라이브러리들의 버전에 따라 설정 방식이 다른 것 같습니다 ✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다.

  • next.js
  • tailwindcss
  • supabase
Junho 댓글 2 좋아요 0 조회수 176

tailwind 설치에 대해 질문있습니다.

미해결

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

안녕하세요 현재 Tailwind CSS 강의 부분을 보고 있는데 강의에 나오는 테일윈드 사이트와 현재 테일윈드 사이트가 좀 다른거 같아 우선 강의에 나오는 설치 명령어로 하고 있는데 그 중에 npx tailwindcss init -p 이 명령어를 작성하니 아래 이미지처럼 에러가 계속 나더라구요. 어떤 부분이 잘못된건지 모르겠습니다.

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

개인 개발자 비즈 앱 전환 버튼이 안보여요

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 강의처럼 개인 개발자 비즈 앱 전환 버튼이 뜨지 않고 카카오 비즈니스 통합 서비스 약관 동의로 표시되어있는데,, 어떻게 해야 이메일 필수항목도 넣을 수 있을까요?

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

supabase에서 가입된 유저를 강제로 로그아웃 시키는 방법?

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. supabase에서 가입된 유저를 강제로 로그아웃 시키는 방법이 궁금합니다.

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

메세지를 전송하면 DB에는 남는데 화면에 보이지 않아요.

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 제목 그대로 DB에는 채팅이 잘 남고 있는데 화면에는 보이지 않습니다 console로 찍어봐도 빈배열을 반환하는데 이유가 뭘까요?? 강의를 돌려보고 gpt를 써도 원인을 못찾겠어요. 제가 생각했을때 채팅 목록을 나타내는 코드를 캡쳐해서 보내고 현재까지 문제생긴 부분을 커밋해둘테니 캡쳐사진으로 확인이 안되시면 제 깃헙에서 확인해주세요! 깃헙 링크

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

globals.css 설정 질문드립니다

해결됨

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

앞으로 프로젝트에서 사용할 것이라고 하신 globals.css 의 세 라인이 '@tailwind components' is no longer available in v4. Use '@tailwind utilities' instead.(invalidTailwindDirective) 이러한 오류를 발생시킵니다. tailwind의 4 버전이 자동으로 설치되어서 그런 것 같습니다, 3줄을 @import "tailwindcss/preflight"; @tailwind utilities; 로만 변경해도 될까요?

  • tailwindcss
Junho 댓글 2 좋아요 0 조회수 297

Todo Context에 대해 질문있습니다.

미해결

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

안녕하세요 강의를 너무 잘 보고 있습니다. 강의를 보다가 조금 헷갈리는 부분이 있는데 TodoContext.Provider로 value를 todos로 하고 그 밑에는 TodoDispatchContext.Provider로 value는 dispatch로 작성이 되었는데 이렇게 TodoContext와 TodoDispatchContext를 두개 작성된 이유가 궁금합니다.

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

6:29 movie-card-list.tsx파일작성하시기전에

해결됨

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

6:29 movie-card-list.tsx파일작성하시기전에 혹시 movieActions.ts파일에서 작업을 하셨었나요?? 3000 포트 브라우저에서 저는 스크롤을 내렸는데 false 에서 true로 바뀌지 않았었습니다.

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

map메소드에 대해 질문있습니다.

미해결

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

안녕하세요 강의 너무 잘 듣고 있습니다 공부를 하다가 map메소드에 대해 궁금한점이 있습니다. 예를 들어 items.map((item) => ) 여기서 어떨때에는 items.map((item) => () ) 화살표 다음에 ()가 오고 또 어떤 상황에는 items.map((item) => {}) 이렇게 {} 가 작성되는데 어떤 차이점이 있는지 궁금합니다.

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

수강후기 작성법 문의

미해결

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

수강후기 남기는 창을 벗어나니 다시 수강후기를 남길수 있는 방법이 없는데요 수강후기 남길수 있는 링크좀 전달 해주시면 감사하겠습니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
리버Riber TV 댓글 2 좋아요 0 조회수 149

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

미해결

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com 에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwindcss
  • zustand
  • vercel
tngus5232 댓글 2 좋아요 1 조회수 155

todolist할때 컴포넌트 분리 안했던 것 같은데...

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 강의보고 todolist할때 컴포넌트 분리 안했던 것 같은데... dropbox (선택수강)UI구축에 보면 supabase-todo-list vscode에 컴포넌트폴더에 ui컴포넌트 들이 있네요... 혹시 추가 작업을 하셨던 것일까요??

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
codestudy 댓글 2 좋아요 1 조회수 151

유틸리티 클래스 외부 링크

미해결

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

html안에 style에 정의된 apply 코드들은 cdn으로 링크된 tailwindcss 스크립트가 tailwindcss 스타일로 인식해 실시간으로 빌드하여 적용되지만 외부 스타일로 링크하면 일반 css로 인식해서 빌드하지 못하기 때문에 적용되지 않는다고 하네요 그래서 cli로 빌드해서 적용해야 한다고 합니다

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

에러, 로딩 내용 페이지를 모든 페이지에 다 만드는 이유가 따로 있나요?

미해결

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

에러나 로딩을 전역적으로 상태로 봐서 에러나 로딩을 띄우는게 아닌, 페이지별로 전부 다 복붙으로 넣는 이유가 따로 있나요..? 일단 따라해보고있긴 한데, 뭔가 좀 아닌것 같아서 질문 드립니다ㅠㅜ

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwindcss
  • zustand
Junho 댓글 3 좋아요 2 조회수 220

eslint.config.js (flat config): eslint.config.js 파일에서 eslint-config-prettier를 import한 후, 다른 설정을 재정의할 수 있도록 설정 배열의 마지막에 추가합니다.

미해결

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

eslint.config.js (flat config): eslint.config.js 파일에서 eslint-config-prettier 를 import한 후, 다른 설정을 재정의할 수 있도록 설정 배열의 마지막에 추가합니다. 에서 어떻게 import해야하는가요? import eslint-config-prettier from 'eslint-config-prettier'; 로 하면 오류가 납니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
수달고니 댓글 4 좋아요 0 조회수 249

.prettierrc를 적용했는데 저장하니 ;이 왜 안생길까요?

미해결

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

.prettierrc를 적용했는데 저장하니 ;이 왜 안생길까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
수달고니 댓글 2 좋아요 1 조회수 138

[질문 x 공유용] tailwind v4.0 으로 강의랑 다를 때 (import 다름, tailwind.config.js 없어짐 등)

미해결

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

강의랑 다른 부분 1. tailwind 설치 커맨드 : 커맨드가 간단해졌어요. npm install tailwindcss @tailwindcss/vite 강의랑 다른 부분 2. vite.config.ts : 이제 ***.tsx, ***.jsx 를 일일히 넣지 않아도 됩니다. import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) 강의랑 다른 부분 3. @import ~ 3줄 @import "tailwindcss"; 한 줄로 초간단해짐.. 강의랑 다른 부분 4. tailwind.config.js : config.js 가 없어졌습니다. (자세한 내용: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration ) 대신 index.css 에 아래와 같은 형식으로 theme 을 적용할 수 있습니다. @import 'tailwindcss'; @theme { --color-primary: #1d2745; --color-secondary: #1de5d4; --color-tertiary: #1d2745; --color-white: #ffffff; --color-mono100: #f1f1f1; --color-mono200: #bebebe; --color-mono300: #d6d7d9; --color-error: #d01e1e; --color-social: #395997; }

  • react
  • typescript
  • tailwindcss
  • storybook
  • ui-testing
윤삼삼 댓글 2 좋아요 6 조회수 528

인기 태그

인프런 TOP Writers

주간 인기글