inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

11강 수업자료가 수업영상입니다.

해결됨

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

안녕하세요. 11강 수업자료를 다운로드 받아보니 해당 수업영상입니다. 괜찮을까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
hanbrang 댓글 1 좋아요 0 조회수 79

82 12.6) css설정 이미지 정렬 오류

해결됨

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

html, body { margin: 0px; width: 100px; background-color: rgb(246, 246, 246); } #root { background-color: white; max-width: 600px; width: 100%; margin: 0 auto; min-height: 100vh; height: 100%; box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px; } body * { font-family: "NanumPenScript"; } 이렇게 작성하셨는데 구현하신 화면 보면 root가 가운데 정렬 되어있지만 제가 구현하면 css는 좌측 세로 정렬 되는데 원인이 있을까요?

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

프로필 수정시 포스트변경

해결됨

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

프로필 수정시 자신이 작성한 PostItem 의 이미지, 닉네임도 같이 변경이 되어져야 하지 않을까요? 새로고침해야 변경이 되어성., 프로필 버튼은 잘 변경이 됩니다.

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

서버컴포넌트의 파라미터 전달문제.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요...강의 잘 보고있습니다. 일단 로그인을 합니다.. 그런데 이때 각 소속회사별로 로그인을 합니다. (A회사로 로그인을 하면... 다음부터는 A회사의 정보만 조회를 해야 합니다.) 그런 경우 공지사항 계시판이 메인화면에 있는데.이때 공지 화면의 내용은 당연히 A회사의 공지사항만 나와야 하는데.. 서버 컴포넌트에 파라미터를 넘겨야 하는데. 어떻게 넘겨야 할까요? zustand같은 전역상태도 사용 못하고.. 쿠키를 이용해야하나요? 현재는 http:url/index?blngcocd=999 이런식으로 소속회사를 달고 다나는데... 이건 아닌거 같아서요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
shoncg 댓글 1 좋아요 0 조회수 72

강의와 만들어진 코드가 달라요

미해결

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

좌측이 강의 코드, 우측이 강의 보며 10강까지 진행한 코드 결과입니다. 우측, 만들어진 코드를 보니 ReactDom, <React.~~> 등이 입력되어있지않아요. 무슨 문제인걸까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
ㅇㅇ 댓글 3 좋아요 0 조회수 103

폴더 구조 관련 질문

미해결

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

제로초님 안녕하세요 expo 프로젝트의 폴더 구조에 대해서 고민이 있습니다.!! 현재 src/app 폴더에서 페이지들을 관리하고 있고 각 페이지 내부에서만 사용하는 하위 컴포넌트들은 src/app/settings/_components/AccountSettingsSection.tsx 와 같이 _components 폴더 하위에 배치하고, named export를 통해 라우트로 잡히지 않게 하고 있습니다. 문제는 없지만 프로젝트를 실행시키면 WARN Route "./settings/_components/AccountSettingsSection/AccountSettingsSection.tsx" is missing the required default export. Ensure a React component is exported as default. 라는 경고 메시지가 app/ 내부에서 named export 한 모든 하위 컴포넌트를 대상으로 출력됩니다. Next.js처럼 _components 내부의 하위 컴포넌트들은 완전히 무시하도록 하고 싶은데 아무리 찾아봐도 무시할 방법이 없는 거 같습니다 ㅠ 제로초님께서는 어떤 방법으로 페이지 내부 하위 컴포넌트들을 배치하시는지 궁금합니다..!! 관리하기 용이한 폴더 구조가 있다면 추천해주실 수 있으신가요??

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

window 10을 사용하고 있는 학생인데 react작동안됩니다ㅜㅜ

미해결

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

window 10을 사용하고 있는 학생인데 react작동안됩니다ㅜㅜ ctrl 하고 마우스 왼쪽해도 실행이 안되네요 로딩이 오래 걸려요

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
구님 댓글 3 좋아요 0 조회수 70

리액트 설치시 vite와 create React APP 차이

해결됨

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

선생님 인강 잘듣고 있읍니다 인강에선 react 설치시 vite 로설치하고 책에서는 create React App 으로 설치하는데 대략검색해보니 vite 설치시 효울적이고 빠르다고 하는데 책으로 공부하면 create React App으로 설치해도 상관없나요

  • javascript
  • react
  • node.js
  • 카카오공채-개발
ymckh1005 댓글 3 좋아요 0 조회수 227

hooks 파일 분리 질문 드립니다.

해결됨

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

안녕하세요, 강의 잘 보고 있습니다. 저는 1년 차 백엔드 개발자 입니다. 미니 프로젝트에 프론트로 투입이 되어 zustand와 tanstack 학습을 위해 강의를 듣게되었습니다. 선생님께서 hook을 작성하실 때 함수를 각각 별도 파일로 분리하는 방식으로 진행하셨는데, 실무에서도 보통 함수마다 파일을 나누는 방식으로 진행하나요? 아니면 도메인 단위로 묶어서 하나의 파일안에 관련함수들을 관리하시는지 궁금합니다. 선생님 강의 덕분에 쉽고 재밌게 학습하고 있습니다. 감사합니다 : )

  • react
  • typescript
  • react-query
  • supabase
  • zustand
조하영 댓글 2 좋아요 1 조회수 124

React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)

미해결

[React 2부] 고급 주제와 훅

안녕하세요, 강의에서 훅( useState , useEffect ) 사용 규칙과 내부 동작 원리를 공부하다가 궁금한 점이 있어 질문드립니다. React는 훅을 순서 기반 으로 관리한다고 배웠습니다. 그래서 다음과 같은 규칙이 있는 걸로 알고 있습니다: 훅은 컴포넌트 최상위에서만 호출 해야 한다. 조건문, 반복문, 중첩 함수 안에서 훅을 호출하면 안 된다. 이와 관련해 궁금한 점은 다음과 같습니다: 개발하다 보면 상태가 많아지고 상태마다 핸들러도 많아지게 되어 코드가 길어지게 됩니다. 그러다 보니 소스코드를 한눈에 파악하기 어려워지는 것 같습니다. 실무에서는 상태별로 핸들러를 묶어서 작성하는 패턴을 많이 쓰나요? 예를 들어: const [count, setCount] = useState(0); const handleChangeCount = () => { ... }; const [name, setName] = useState(''); const handleChangeName = () => { ... }; 이런 방식으로도 구현을 하시는지, 아니면 useState는 최상단에서 묶어 관리하고 handler는 handler끼리 useEffect는 useEffect 끼리 작성하는 것이 일반적인지 궁금합니다.

  • javascript
  • react
  • 웹앱
  • React-Context
  • react-hooks
Jinhee Lee 댓글 2 좋아요 1 조회수 146

강의 자료를 제공해주실 수는 없을까요?

미해결

스프링 부트와 리액트로 구현하는 보안 JWT 로그인

동영상 화면만 보면서 강의 자료를 확인하기에는 제가 원하는 부분을 실시간으로 확인하기가 어려운 점도 있고, 이후 복습하기도 어렵습니다. 강의 자료를 제공해주신다면 학습 하는 데에 시간을 많이 아낄 수 있을 것 같습니다.

  • react
  • java
  • aws
  • spring-boot
  • spring-security
댓글 2 좋아요 0 조회수 161

소셜 로그인 질문

해결됨

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

(6. 5) 소셜 로그인 구현하기 부분 보고 질문 드립니다. 현재는 사전에 자신 Github의 OAuth 정보를 입력해야 로그인 되는 것으로 보입니다. 혹시 이 정보를 사전에 등록하지 않고, github 로그인 버튼을 눌렀을 때, 아이디 비밀번호를 입력해, 그 때 인증을 유도하는 방법은 없나요?? 각기 다른 사용자들이 이 정보를 매번 등록할 수는 없지 않을까 싶어서 그렇습니다 !

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

11강 내용과 12강 내용이 충돌하는 것 같아요.

해결됨

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

11강에서는 removeEventListener 함수로 리스너를 명시적으로 제거하지 않는 한 요소가 사라지더라도 메모리에 계속 남아 있다고 설명하셨는데요. 12강에서는 요소를 제거하는 방식으로도 리스너를 제거할 수 있다고 해서 내용이 충돌하는 것 같아요.

  • HTML/CSS
  • javascript
  • react
  • web-api
  • dom
hans 댓글 2 좋아요 0 조회수 114

개발자 모드 활성화 시 반응형 처리

미해결

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

문득 강의 수강 중에 강사님께서 개발자모드를 활성화하면 전체적인 화면이 반응형으로 되어있는데 쭉 수강하다가 제꺼에서는 지정이 안되있어 어느 챕터를 놓쳤는지 감이 안옵니다ㅜㅜ 혹여나 다른 분들도 비슷한 사례가 있을까싶어 여쭈어봅니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
임스헝 댓글 1 좋아요 0 조회수 90

타입스크립트 버전 선택 안되시는분

미해결

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

7:33 초 타입스크립트 버전 선택 ctrl + shift + p 입력후 select type 로 하면 검색 결과가 안나오고 TypeScript: Select 검색해야 버전선택이 가능하니 안되시는분 참고하시길.. 처음 하는 분들은 안되고 한번 검색한 적이 있는경우 최근에 사용한 항목으로 검색이 되는듯하네요..

  • react
  • typescript
  • react-query
  • supabase
  • zustand
김주원 댓글 1 좋아요 1 조회수 97

isLoading 기능 추가했는데, 존재하지 않는 일기 입니다.

미해결

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

isLoading 기능을 추가했는데 수정하기, 다이어리 페이지에서 새로고침하면 존재하지 않는 일기입니다. 라고 나오네요. https://github.com/pdh9311/onebite-react 작성했던 코드 입니다. import { Route, Routes } from "react-router-dom"; import "./App.css"; import { createContext, useEffect, useReducer, useRef, useState } from "react"; import Diary from "./pages/Diary"; import Edit from "./pages/Edit"; import Home from "./pages/Home"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": nextState = [action.data, ...state]; break; case "UPDATE": nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; case "DELETE": nextState = state.filter( (item) => String(item.id) !== String(action.data.id) ); break; default: nextState = state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispathContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; if (isLoading) { <div>데이터 로딩중입니다....</div>; } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispathContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispathContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import { useContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { DiaryStateContext } from "../App"; //커스텀 훅 const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currDiaryItem, setCurrDiaryItem] = useState(); const nav = useNavigate(); useEffect(() => { console.log("useDiary"); const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrDiaryItem(currentDiaryItem); }, [id]); return currDiaryItem; }; export default useDiary;

  • javascript
  • react
  • node.js
  • 카카오공채-개발
padohy 댓글 3 좋아요 0 조회수 99

강의자료 다운로드시 발생하는 오류

해결됨

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

강의자료 다운로드시 위의 메시지로 다운이 되질 않습니다.

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

tsconfig.app.json에서 에러발생

해결됨

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

안녕하세요 선생님이 shadcn을 설치하고 있는데요 tsconfig.app.json에서 위와 같은 에러가 발생합니다. 혹시 몰라서 선생님이 올려두신 자료로 해봤지만 똑같네요... 그냥 "ignoreDeprecations": "6.0" 이걸 추가할까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
박 태영 댓글 3 좋아요 0 조회수 377

커밋메시지 인코딩 깨지는 현상

미해결

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

윈도우환경에서 커서를 이용하여 강의를 따라가는중인데 cursor에서 커밋메시지를 작성하고 커밋을하면 한글 인코딩이 깨지는 현상이 발생합니다. ctrl-shift-p 로 select default profile을 통해 기본 터미널을cmd로 변경해도 적용이되지않는것같습니다 커서가 기본 cmd 또는 git bash를 터미널로 사용하도록 설정할수있을까요 ??

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
콜라중독 댓글 1 좋아요 0 조회수 199

인기 태그

인프런 TOP Writers

주간 인기글