inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

React에서 load 상태를 어떻게 감지할 수 있을까요?

미해결

애플 웹사이트 인터랙션 클론!

안녕하세요. 강의 재미있게 완강하였습니다. Next.js에 애니메이션을 구현해보려고 하는데요. 현재는 load event 대신 useEffect안에서 기능들을 호출하는 방식으로 구현하였는데, useEffect는 DOM요소들이 생성이 완료되는 시점에서 기능이 실행되어 이미지들의 다운로드가 다 완료되지 않은 상태에서도 Loading 화면이 끝나버립니다. useEffect안에서 onLoad나 eventListener load를 시도해보았지만 다른 eventListener와 다르게 제대로 동작하지 않는 현상이 발생합니다. 혹시 답변이 가능하시다면 React에서는 Resource의 다운로드 완료 시점을 어떻게 알 수 있을지 조언 부탁드립니다!

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
신승헌 댓글 1 좋아요 0 조회수 723

server ,client 컴포넌트 랜더링 질문입니다!

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요~ 직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요! 서버컴포넌트로 Link를 생성하고 useSelectedLayoutSegment로 active클래스 처리해주려고 합니다! export default function SideBar() { const links = [ { path: "/home", pathName: "Home" }, { path: "/", pathName: "탐색하기" }, { path: "/", pathName: "쪽지" }, { path: "/", pathName: "프로필" }, ]; return ( <div className={classes.nav}> <div>logo</div> <nav> <ul> {links.map((link, idx) => { return ( <li key={`${link}-${idx}`}> <SideLink href={link.path}>{link.pathName}</SideLink> </li> ); })} </ul> </nav> <button className={classes.btn}>게시하기</button> </div> ); } interface SideLinkProps { children: ReactNode; href: string; } export default function SideLink({ children, href }: SideLinkProps) { const segment = useSelectedLayoutSegment(); const isSegment = href.slice(1); return ( <Link href={href} className={segment === isSegment ? classes.active : undefined} > {children} </Link> ); } 근데 랜더링이 Sidebar가 서버에서 초기 랜더링 하고 client에서 class 반영한다 라고 이해하고 있는데용 브라우저에서 "페이지 소스보기"를 했더니 이미 class에 active가 반영된 상태로 랜더링 되어있어요 캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다. hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데 왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다! 검색해도 명확한 답이 없어서 질문드려요!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
squirrel PARK 댓글 1 좋아요 1 조회수 204

3.3)Node.js 사용하기 강의 중 npm run start 시 오류 발생

해결됨

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

강의대로 package.json에 scripts 내 start에 경로 추가 후("node src/index.js) 터미널에 npm run start 입력 시 아래와 같은 error가 발생됩니다. PS C:\Users\HOME\Desktop\oneBite-React\section03> npm run start > section03@1.0.0 start > node src/index.js npm error code ENOENT npm error syscall spawn C:\Program Files\Git\bin\git.exe npm error path C:\Users\HOME\Desktop\oneBite-React\section03 npm error errno -4058 npm error enoent spawn C:\Program Files\Git\bin\git.exe ENOENT npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\HOME\AppData\Local\npm-cache\_logs\2024-07-14T05_57_50_914Z-debug-0.log

  • javascript
  • react
  • node.js
overbold 댓글 1 좋아요 0 조회수 819

객체 타입의 얕은 복사와 깊은 복사에 대해 질문 있습니다

해결됨

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

안녕하세요~ 2.5) 원시타입 vs 객체타입 강의의 8분 6초 쯤에 객체의 얕은 복사와 깊은 복사에 대해 설명해주시는 부분이 있는데요. 중첩객체에서는 spread 연산자를 사용해서 복사를 해도 1 depth까지는 복사가 되는데, 2 depth 이상 부터는 복사되지 않는 걸로 알고 있습니다. 그래서 spread 연산자를 사용한 복사를 얕은복사, JSON.stringify() 등을 이용해서 하위 중첩된 객체들까지 복사하는 것을 깊은 복사라고 하는 걸로 알고 있는데 혹시 제가 잘못 알고 있는건지 궁금해서 질문남깁니다!

  • javascript
  • 복사
  • 얕은복사
  • 깊은복사
ywj 댓글 2 좋아요 2 조회수 298

SuryveyPie 기획서 어디에 있나요?

미해결

실무 중심! FE 입문자를 위한 React

제목 그대로 SurveyPie 기획서 pdf를 어디서 받아야 하는지 모르겠습니다. 처음에 받은 "학습노트_리엑트기초심화.pdf" 파일에서는 디자인 가이드와 코드만 존재합니다. 기획서 어디서 받을 수 있는지 알려주시면 감사하겠습니다.

  • react
  • redux
  • node.js
  • sass
  • swr
  • 기획서
yoonjae.song 댓글 2 좋아요 0 조회수 405

[section08, 투두리스트] 할일 추가가 한개밖에 안되는 문제

해결됨

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

안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다. onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다. 또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다. 몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다. App.jsx import './App.css' import Header from "./component/Header.jsx"; import Editor from "./component/Editor.jsx"; import List from "./component/List.jsx"; import {createContext, useMemo, useRef, useState} from "react"; export const ContextStateData = createContext(); export const ContextDispatchData = createContext(); const mockData = [{ id: 0, isDone: false, content: "Study react", date: new Date().getTime() }, { id: 1, isDone: false, content: "go to bed", date: new Date().getTime() }, { id: 2, isDone: false, content: "play game", date: new Date().getTime() },]; function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (content) => { const newTodos = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime() } setTodos([newTodos, ...todos]); } const memorizedDispatch = useMemo(() => { return {onCreate} }, []); return (<div className="App"> <Header/> <ContextStateData.Provider value={todos}> <ContextDispatchData.Provider value={memorizedDispatch}> <Editor/> <List/> </ContextDispatchData.Provider> </ContextStateData.Provider> </div>) } export default App 전체 코드 깃허브 주소 https://github.com/ironwhale1014/one-bite-react/tree/main/todo_list_train

  • javascript
  • react
  • node.js
이주영 댓글 1 좋아요 1 조회수 222

UTC 시간대 변경

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

timezone: 'Asia/Seoul', // 한국 시간대 설정 로 변경하거나 timezone: '+09:00', // 한국 시간대 설정 로 변경을 해도 시간대가 UTC 시간으로 저장이 되는것 같아요 ! 한번 데이터베이스로 가서 select now() 로 찍어보니까 application 단에 작성한 timezone 과 다르게 utc 시간대로 설정되어있어서 그런것 같더라구요 디비의 시간대를 변경하면 되긴한데 , 그러면 취지와 맞지 않는것 같아서 어떻게 하면 될까요 ?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
SJ 댓글 1 좋아요 1 조회수 257

App.vue가 필요한 이유

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

안녕하세요. 수업 정말 재밌게 잘 듣고 있습니다. 근데 듣다 보니 App.vue가 점점 왜소해지네요. 앞으로는 store가 데이터 저장과 중앙 처리 역할을 모두 수행하는 것 같은데 App.vue가 있어야 할 이유는 무엇일까요? 궁금하여 질문 남깁니다.

  • javascript
  • vue.js
  • es6
  • vuex
디에고시메오네 댓글 1 좋아요 0 조회수 228

한번에 이해 안가는 제가 비정상 일까요...?

미해결

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

해시 테이블까지 재밋었는데 레드 블랙트리 너무 어려운것 같습니다 ㅠㅠ... 반복 숙달이 답이겠죠?

  • javascript
  • 코딩-테스트
  • 알고리즘
rhkdtjd_12 댓글 1 좋아요 0 조회수 250

custom 파이프라인

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

custom 파이프 챕터를 듣고있습니다. 위의 강의에서 8 자 보다 긴 비밀번호는 throw new 반환을 적용한다고 했을때 파이프 라인으로 적용해도 될것같고 , request dto 로 적용할수있을것 같단 생각을 했습니다. 이럴때 어디서 적용할지에 대한 기준치는 어떻게 판별하시나요 ??

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
SJ 댓글 1 좋아요 1 조회수 194

강사님, 브랜치명 어떻게 만드셨어요?

미해결

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

사진을 보니 이렇게 되있던데, 잘 되있더라구요! 3-component 브랜치를 만들면, 해당 위치에서 3-component/... 이렇게 만들 수 없더라구요. 강제로 만든건지?(강제 브랜치 생성 명령어) TabComponent같은 브랜치를 파서 작업한 다음, PR을 올려서 머지 시키면 자동으로 저렇게 바뀌는 건지? 답변 부탁드립니다.

  • javascript
  • vue.js
댓글 1 좋아요 2 조회수 241

Authorization 과 Headers

해결됨

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요 ㅎ 강의 잘 보고 있습니다. 강의에서 access token 과 refresh token 을 사용하게 될때 postman 에서 Headers 탭을 이용하셨는데 이유가 있을까요 ? 옆에 Authorization 을 사용하지않고 Headers 를 사용하신 이유가 궁금합니다. !

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
SJ 댓글 1 좋아요 0 조회수 205

이렇게 풀어보았는데 확인부탁드립니다.

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

function solution(s) { let answer = ''; let current = s[0]; let repeat = 1; for (let i = 1; i < s.length; i++) { if (current === s[i]) { repeat++; } else { answer += `${repeat === 1 ? current : `${current}${repeat}`}`; current = s[i]; repeat = 1; } } return answer; }

  • javascript
  • 코딩-테스트
류시명 댓글 1 좋아요 0 조회수 185

3d 모델링 사진을 띄워 주고, 외부에서 json으로 값을 받아 데이터 베이스에 저장하고, 불러오는 웹을 만들고 싶습니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

지금3일차 강의를 듣고 있습니다. 전반적인 내용 설명이 잘 되어 너무 감사합니다. 그런데 제가 프로젝트를 하나 해야 합니다. 3d 모델링 사진을 띄워 주고, 외부에서 json으로 값을 받아 데이터 베이스에 저장합니다. 그리고 저장된 값을 가져와서 계산하고 보여 주는 웹을 만들고 싶습니다. 강의 자료가 너무 많은데 어느 부분을 공부하면 도움이 될까요? 아니면 싶게 만들수 있는 아이디어 부탁을 드립니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • python
  • django
  • web-api
  • htmx
dsoh 댓글 3 좋아요 0 조회수 260

화면 코드 보기

미해결

Vue.js 시작하기 - Age of Vue.js

강사님..혹시 화면을 좀 줄여 주실수 있을까요? 전체적인 코드라 할까? ... 좀 뒤에서 보고 싶네요... (매우 답답해서요) 주위 코드도 안보이고... 방법 없을까요? (녹화를 다시 하시기도 뭐하고..ㅠㅠ)

  • javascript
  • vue.js
bluescreen 댓글 2 좋아요 1 조회수 260

제네릭 타입을 사용하는 이유

미해결

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

안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! 제네릭에 대한 이해를 위해서 따로 문서도 찾아봤는데 궁금증이 해결되지 않아서 질문드립니다. 제네릭 타입을 사용해서 tagList로 넘어온 아이템이 onTagClick으로 전달된다는것을 보증 해준다고 하셨는데, 제네릭의 어떤 기능으로 이것을 보증해주는지 궁금합니다. 그리고 아래처럼 작성한것과 어떤 차이가 있는지 궁금합니다. import { useState } from "react"; import TagButton from "./TagButton"; interface ITagListProps { tagList: string[]; onTagClick: (tag: string) => void; } export default function TagList({ tagList, onTagClick, }: ITagListProps) { const [selectedTag, setSelectedTag] = useState<string>(tagList[0]); return ( <div className="flex gap-x-4" onClick={(event) => { const eventTarget = event.target as HTMLButtonElement; const tag = eventTarget.textContent as string onTagClick(tag) } }> {tagList.map((tag) => ( <TagButton key={tag} isChecked={tag === selectedTag} onClick={() => setSelectedTag(tag)} > {tag} </TagButton> ))} </div> ); }

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
dubu777 댓글 2 좋아요 1 조회수 336

[섹션18]AccessTokenGuard 적용하기 질문

해결됨

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

post Controller > postPosts에 @UseGuard(AccessTokenGuard) 할 경우 디펜던시 오류가 납니다. 앞에 강의 중에 대처법을 보고 따라 해봐도 잘 안되는데, 어디어디에 무엇을 작성해야할지 모르겠습니다ㅠ /////////////////////////// 앞에 강의 차분하게 다시 보면서 해결했습니다,

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
슈퍼아스라다 댓글 1 좋아요 0 조회수 301

안유진을 얼마만큼 좋아하시는 건가요?

미해결

[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스

궁금합니다.

  • javascript
장성욱 댓글 2 좋아요 7 조회수 481

Property 'references' does not exist on type 'ContentfulPostContent' 에러

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다. export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `

  • react
  • typescript
  • 블로그
  • gatsby
댓글 2 좋아요 0 조회수 364

인기 태그

인프런 TOP Writers

주간 인기글