inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

날짜 비교 방법에 관해서 문의드립니다.

해결됨

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

안녕하세요 이정환님!! 강의 잘듣고 있습니다. 12.11) Home 페이지 구현하기 2. 기능 강의 수강중에 궁금한 점이 생겨 문의드립니다. 두개의 날짜를 정보를 비교를 하기 위해서는 Date의 객체 형식을 timestamp 형식으로 변경을 한후 두개의 날짜 정보를 비교를 해야 하는 것으로 알고 있습니다. 강의에서 pivotDate에 저장이 되어있는 state 날짜 기준으로 data를 필터링 하기 위해서는 시작시간과 끝시간을 timestamp 형식으로 만들고 시작시간과 끝시간 사이에 있는 data 객체 안에 있는 createDate의 값을 필터링 하셨습니다. 여기서 궁금한점이 startDate와 endDate 변수에는 timestamp형식의 날짜 정보가 들어가 있지만 data.createDate 정보에는 객체형태의 날짜 정보가 들어가 있습니다. 어떻게 객체 형태의 날짜 정보와 timestamp 형식의 날짜 정보가 비교가 가능한지 궁금합니다. 제가 어떤 부분에서 착각을 하고 있는지 궁금합니다. 감사합니다.^^

  • javascript
  • react
  • node.js
노란배추잎 댓글 1 좋아요 0 조회수 212

2.18) on-demand ISR 질문입니다

해결됨

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

강의에서는 handler를 만들어서, 직접 api를 입력할 때마다 갱신하도록 예시를 보여주셨는데, 실제로는 어떻게 사용하는 건가요??(어느 시점? 어느 곳에서 트리거 되는 건가요??)

  • react
  • typescript
  • next.js
allmy 댓글 1 좋아요 0 조회수 351

babel-core module 에러

미해결

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

fs를 못찾는다고 해서 lecture-vue-trello 에서 npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env 로 설치 해주었습니다 하지만 똑같은 오류가 뜹니다.. 아예 폴더를 삭제하고 깃에서 다시 클론하여 npm 설치 후 열어주었습니다 그런데도 똑같은 오류가 뜹니다. webpack버전은 5를 쓰고 있습니다 어떻게 해야 해결할 수 있을까용.. vue cli 로 만든 프로젝트로 다시 해보았습니다 퀵픽스에 install bable-core이 있어서 적용해보았는데 똑같습니다..

  • javascript
  • vue.js
신주형 댓글 2 좋아요 0 조회수 275

트워터 홈페이지에서 svg 복사하는 방법

미해결

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

강의에서 svg 복사하는 방법을 알려줬는데 어디 강의인지 기억이 나지 않아서 질문합니다. 알려주세요 ㅠ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
박명재 댓글 2 좋아요 0 조회수 619

Pre-Rendering 이라는 것이 크게보면 결국 SSR 인가요?

해결됨

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

CSR 과 다르게 서버에서 렌더링 과정을 거쳐 보여주는 것이라면.. 결국 이 과정이 SSR 이라는 것으로 이해를 했는데요. 강의 목차를 보니 SSR, SSG(?) 는 또 따로 나와있어서요.. 궁금해서 질문 드립니다 !!! 추후 배울 내용이라 지금 시점에서는 SSR 과는 다르게 Next.js 에서는 "사전 렌더링"이라는 것이 따로 존재한다고 이해하면 되는걸까요?

  • react
  • typescript
  • next.js
티라미수 댓글 2 좋아요 0 조회수 310

수정페이지의 작성완료 누를떄 에러가 납니다

해결됨

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

Edit 페이지 구현하기 챕터의 작성완료 누를때 에러가 나는데 이유를 모르겠어요 https://github.com/dajungleee/section12 확인 한번 부탁드려요ㅠㅠ

  • javascript
  • react
  • node.js
다정 댓글 3 좋아요 0 조회수 265

2-6 함수 강의

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

안녕하세요 2-6 강의부터 4개- 5개 강의 정도 화면이 검정으로 나오는데 저만그런것인지 확인 가능할까요??

  • javascript
  • rest-api
  • spa
  • dom
찹찹이 댓글 1 좋아요 0 조회수 123

프런트와 Pub/Sub연결하기 문의

해결됨

Azure Native로 나만의 GPT 만들기

안녕하세요. 좋은 강의 잘 듣고 있습니다. 프런트와 Pub/Sub연결하기 강의를 듣고 있는데 아래와 같은 문제가 발생하였습니다. 시간 되실 때 확인해 주시면 감사하겠습니다. 빠른 시작 WebSocket API로 서비스에 연결하고 Pub/Sub 시작 -> 2개 새탭 열고 각 url 입력 후 메세지 상호작용 확인. front 소스 코드 적용 후 아래 이미지와 같이 정상적 연결 성공 뜸. front페이지 새로 고침 이 후 url 입력 한 창에서 메세지 입력하여도 front페이지개발자 도구의 console에서는 변화가 없음. data가 있는 json 메세지를 받아야 하는데 변화가 없네요. 유료강의로 상용화 가능한 azure기반 chatbot강의도 해주시면 감사하겠습니다.

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
ymc 댓글 2 좋아요 1 조회수 297

6.5 에러핸들링) startTranstion 질문입니다!

해결됨

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

안녕하세요, 선생님! 강의를 듣다가 startTransition에 대해 더 찾아봤는데, startTransition()은 우선순위가 낮은 상태 업데이트나 비동기 작업을 처리할 때, 고우선순위 비동기 작업보다 나중에 실행되도록 하는 함수라고 이해했습니다. 그런데, startTransition()이 비동기 작업을 동기적으로 처리하도록 사용된다는 이야기는 찾지 못했습니다. startTransition()을 비동기 작업을 동기적으로 처리하기 위해 사용해도 괜찮은 건가요?

  • react
  • typescript
  • next.js
yeongi0111 댓글 1 좋아요 0 조회수 339

섹션16 husky

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

git도 다운받았고 터미널도 git bash가 작동이 됩니다. 근데 husky 다운이 안되네요. .git can't be found 따라하는데 계속 이 문장만 자꾸 뜹니다. 그래서 인강에 나온 방법처럼 하지 않고 학습자료에 나와있는거 처럼 따라했는데 괜찮나요? 학습자료 방법으로 해도 괜찮나요 추가 질문) git 을 계속 재설치해서 husky를 깔아도 .git can't be found만 뜨는데요. 왜그런걸까요

  • react
  • node.js
  • seo
  • graphql
  • next.js
imhj11777 댓글 2 좋아요 0 조회수 177

vbc 단축키 질문

미해결

Vue 3 시작하기

vbc + 탭을 하면 기본적인 템플릿 가이드가 나온다고 하는데 저는 나오지 않습니다. vue vscode snippet 플러그인을 다운받았는데도 그러는데 왜 그럴까요??

  • javascript
  • vue.js
  • vue-3
김은재 댓글 2 좋아요 0 조회수 182

4.1) 빌드 시 오류 질문 드립니다.

해결됨

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

안녕하세요. 4.1) 앱 라우터의 데이터 페칭 강의를 수강하고 build를 진행했는데 Generating static pages (0/6) [ ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 이런식으로 오류메시지가 출력돼서 메시지에 있는 공식문서를 참고하여 아래와 같이 searchbar.tsx를 수정하였는데요. // searchbar.tsx "use client"; import { Suspense, useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import style from "./serachbar.module.css"; function Search() { const router = useRouter(); const searchParams = useSearchParams(); const [search, setSearch] = useState(""); const q = searchParams.get("q"); useEffect(() => { setSearch(q || ""); }, [q]); const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => { setSearch(e.target.value); }; const onSubmit = () => { if (!search || q === search) return; router.push(`/search?q=${search}`); }; const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { onSubmit(); } }; return ( <div className={style.container}> <input value={search} onChange={onChangeSearch} onKeyDown={onKeyDown} /> <button onClick={onSubmit}>검색</button> </div> ); } export default function Searchbar() { return ( <Suspense> <Search /> </Suspense> ); } 이런식으로 Suspense로 감싸줬는데도 동일한 오류메시지가 출력돼서 해결방법을 검색해보다가 // loading.tsx import React from "react"; export default function Loading() { return <div>Loading...</div>; } app 폴더 아래에 loading.tsx 파일을 생성하니 정상적으로 build가 되었습니다. 공식문서를 참고하여 Suspense를 감싸줬는데도 해결이 되지 않은 이유가 궁금합니다! 강사님께서 따로 Suspense 관련 언급을 안하신 건 next버젼과 관련이 있을까도 싶어 package.json 파일도 함께 첨부합니다. // package.json { "name": "section04", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", "next": "15.0.0-rc.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "15.0.0-rc.0" } } 답변해주시면 감사하겠습니다!! 그리고 혹시 다른 강의도 찍으실 계획이 있는지 궁금합니다! ㅎㅎ 강의 너무 잘 듣고 있습니다 좋은 강의 감사합니다!!^^

  • react
  • typescript
  • next.js
징니 댓글 1 좋아요 0 조회수 488

useQuery + fetch에 대해 메모이제이션 질문드립니다.

해결됨

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

Next.js의 fetch는 requiest Memoization과 data Memoization를 이용해서 사용하는 것으로 이해했습니다. header랑 body를 보내서 api에 재 요청 하지않고 캐싱하는 것을 확인 했는데요 만약에 useQueryhook을 사용한다고 가정하면, useQuery 도 데이터 캐싱기능을 staleTime 등으로 핸들링 할 수 있기에 Next.js의 fetch 캐싱기능을 꺼야 적절할까요? "no-cache"를 해서 useQuery의 캐싱기능만 이용하는 것이 간결하고 시점을 통일 할 수 있을 것 같아서 질문드립니다.

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

정적 사이트 생성 (SSG)에서 빌드 타임에 데이터를 요청한다면 사용자는 최신 데이터가 아닌 데이터를 받게 되는 것 아닌가요?

해결됨

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

안녕하세요. 좋은 강의 잘 수강하고 있습니다! 강의를 듣던 중 궁금한게 있어 질문드립니다. 정적 사이트 생성 (SSG)는 빌드 타임에 데이터를 서버로 요청하고 받아온 후 렌더링을 미리 해둔다고 이해했는데, 이렇게 되면 사용자가 페이지를 요청한 시점에는 서버의 데이터가 달라졌을 수 있는게 아닌가 하는 의문이 남습니다. 또한 이렇게 된다면 서버의 데이터가 변경될 때마다 매 번 프로젝트를 새로 빌드해야하는 것일까요? 제가 잘못 이해한 부분이 있는지 궁금합니다.

  • react
  • typescript
  • next.js
김동민 댓글 1 좋아요 0 조회수 270

getServerSideProps를 사용한 페이지의 navigation 방식이 궁금합니다

해결됨

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

Next.js는 오직 초기 접속시에만 html 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR 방식으로 처리된다고 알고 있습니다. 그런데 Page Router 에서 getServerSideProps 를 사용할 때 매 요청마다 사전 렌더링을 통해 html을 생성하는 것으로 알고 있습니다. 그러면 초기 접속이 아니더라도, getServerSideProps 를 사용한 페이지로 이동하면 Next 서버에서 클라이언트에게 html을 응답해주는 건가요? 서버로부터 html을 응답받는 것이 맞다면 어떻게 깜빡임 없이 화면 전환이 자연스럽게 되는지, 그리고 이렇게 되면 페이지 이동이 리액트의 CSR 방식으로 처리된다고 말할 수 없는건지 궁금합니다 😭 서버로부터 html을 응답받는 것이 아니라면, 클라이언트에서 어떤 값을 서버로부터 받아 렌더링을 하는건지 궁금합니다. getStaticProps 를 사용할 때와 유사하게 json 파일이 생성되어서 이 json 파일을 클라이언트에게 응답해주는 건가요?

  • react
  • typescript
  • next.js
강혁준 댓글 2 좋아요 1 조회수 310

3.5) RSC 주의사항, 4번째 주의사항 관련 질문 입니다

해결됨

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

서버 컴포넌트에서 클라이언트 컴포넌트에 직렬화 되지 않는 props는 전달 할 수 없다 RSC payload: RSC 렌더링 결과 + 연결된 클라이언트 컴포넌트 위치 + 서버 -> 클라이언트 컴포넌트에 전달하는 props 값 q1. 사전 렌더링 과정에서 서버 컴포넌트를 직렬화 할 때, 여기에 서버 -> 클라이언트 컴포넌트로 전달하는 props 값이 포함되는데 이 값이 함수이면 직렬화 할 수 없기 때문에 props에 함수를 사용할 수 없는 건가요?? q2. 서버->서버, 클라이언트->클라이언트 props는 RSC payload와(직렬화) 관계 없기 때문에 props에 함수 사용이 가능한 건가요??

  • react
  • typescript
  • next.js
  • rsc
allmy 댓글 1 좋아요 1 조회수 304

Vscode 한글 설정이 잘 안되요

해결됨

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

다음처럼 설정이나 이런 곳에는 한글 적용이 잘 되는데 Error lens 플러그인 설치 후 에러 알려주는 부분에서는 영어로만 됩니다.!

  • javascript
  • react
  • node.js
DH K 댓글 1 좋아요 0 조회수 429

팔로우 팔로우 취소

미해결

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

하나의 사람이 하나의 사람에게 팔로우할때 본인 스스로 팔로우 금지 A 라는 사람이 B 한테 팔로우 increment 가능 A 라는 사람이 B 한테 한번더 팔로우 요청 보내게 된다면 decrement 가 됨 으로 메서드 하나로 코드를 구성하는것은 어떤가요 ??

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

Followers & Followees 프로퍼티 생성

미해결

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

강의 2:30 쯤에서 @ManyToMany(() => UserModels, (user) => user.followees) @JoinTable() followers: UserModel[]; @ManyToMany(() => UsersModel, (user) => user.followers) followees: UserModel[]; 위처럼 되어있는데요 . 혹시 @ManyToMany(() => UserModels, (user) => user.followers) @JoinTable() followers: UserModel[]; @ManyToMany(() => UsersModel, (user) => user.followees) followees: UserModel[]; 이렇게가 아닌가요 ??

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

payment

미해결

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

안녕하세요 거의 강의 다 들어가는데요 ~ 추천해주셔서 아마 패스트캠퍼스에서도 뵙게 될것 같은데 결제에 대해서도 다뤄주시면 안될까요 ??

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

인기 태그

인프런 TOP Writers

주간 인기글