inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

성능 탭에서 소요시간이 안보입니다

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

강사님 Perfomance 화면과 다르게 저는 Timing 화면을 볼 수 없습니다. 왜 그럴까요...?

  • react
  • chrome-devtools
qjatjs123123 댓글 2 좋아요 0 조회수 260

scrollSpy 바닐라버전에서 data-index를 찾는 코드 질문

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 1

강사님 안녕하세요. 항상 강의 잘 보고 있습니다 🙂 완강하고 다시 보다가, scrollSpy 바닐라버전에서 궁금한 점이 있어서 질문 남깁니다! 네비게이션의 버튼을 클릭 했을때, 버튼의 부모인 li의 index 값을 찾기 위해 사용했던 e.composedPath() 대신 closest('li') 메서드 를 사용하는 것은 어떤지 궁금해서요! 퍼블리셔로 일하면서, 클릭한 타겟의 가까운 부모를 찾을때 자주 사용했던 메서드인데, e.composedPath()를 사용한 다른이유(강의에서 설명한 이유 외에)가 있으신지 궁금합니다!

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
이태경 댓글 2 좋아요 0 조회수 159

const [isVoteOpen] = useWatch({ control, name: ["isVoteOpen"] })

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

VoteModal에서 모달이 열렸는지에 대한 상태값을 가져오기위해 useWatch를 사용하시면서 const [isVoteOpen] = useWatch({ control, name: ["isVoteOpen"] }); 로 작성하셨는데, const isVoteOpen = useWatch({ control, name: "isVoteOpen" }); 와 동일한게 맞나요 ? watched하는 필드가 하나일때도 주로 배열 비구조화 할당 방식을 써서 하시는지 궁금합니다 !

  • javascript
  • react
  • react-native
  • typescript
  • react-query
zoezoe 댓글 1 좋아요 0 조회수 92

섹션5 강의 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

섹션5 수강하고 있는데 혹시 서비스 테스트코드나 레파지토리 테스트코드 실습파일은 어디있을까요? 글씨가 작아서 따라 치기가 어려워서요. 돋보기로 하면 글자가 깨져서요. 상품 목록/등록 강의를 듣고 있습니다. 테스트 코드에서 아래를 실행하면 이런 에러가 납니다.(참고로 db는 연결되어있어요. springboot 돌리면 tomcat start 8080나옵니다.) Cannot invoke "com.example.backend.mallapi.domain.ProductImage.getFileName()" because "productImage" is null 아래는 코드입니다. 참고로 upload 파일에도 파일이 2개가 있는상황이여서 productImage가 null일 이유가 없다고 생각하는데 왜나는지 모르겠습니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 108

node_modules에서 export 오류

미해결

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

수업과 같이 npm에 배포하고 제가 만든 ui를 다운받아 import하는 과정에서 해당 이미지와 같이 node_modules에서 export가 나타납니다. 1) lib파일과 index.ts파일을 myapp 폴더로 직접 import했을때는 정상적으로 작동하였습니다. 2) 해당 수업에서 codecamp-ui가 npm 사이트에 아직 배포중이기에 그것도 시험삼아 다운받아서 import하였지만 똑같은 오류가 나타났습니다. 3) node_modules 파일 삭제하고 다시 yarn install로 다운받았지만 같은 오류가 나타났습니다. 그 전 수업까지는 동일하게 오류없이 진행했습니다. 무엇이 문제일까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 161

섹션 5. 상품 API 서버 구성하기-파일업로드 섬네일처리 쪽에서 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

섹션 5. 상품 API 서버 구성하기- 파일업로드 섬네일처리 쪽에서 질문있습니다. application.properties 파일안에서 org.zerock.upload.path=upload 이 구문에 대해서 질문있습니다. 위 사진에서 빨간 네모박스처럼. java 아래부터 mallapi폴더 전까지 폴더명들이 있는데요. org, zerock 혹시. upload전까지 폴더명과 java 아래부터 mallapi폴더 전까지 폴더명이 같아야 하나요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 87

URL 복사 버튼 만들기 챕터에서 react-copy-to-clipboard 오류가 발생합니다.

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

Q. npm i react-copy-to-clipboard 패키지 설치시 아래와 같은 오류가 발생합니다. > npm i react-copy-to-clipboard npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: mbti-contents-platform@0.0.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0 npm error node_modules/react-copy-to-clipboard npm error react-copy-to-clipboard@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error ... 강의 들으며 문제가 발생했고, 직접 해결한 방법을 공유합니다. 🎯 오류 원인 분석 오류 메시지를 분석하면, react-copy-to-clipboard@5.1.0 패키지가 React 19을 지원하지 않기 때문에 설치에 실패한 것입니다. 🎯 1. 오류 원인 분석 오류 메시지를 보면: npm error Found: react@19.0.0 npm error Could not resolve dependency: npm error peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0 📌 원인 프로젝트에 React 19.0.0 이 설치되어 있음. 하지만 ** react-copy-to-clipboard@5.1.0 **은 React 19을 지원하지 않음 (React 15~18까지만 지원). 📌 결과 react-copy-to-clipboard 는 react@19 와 호환되지 않아서 설치할 수 없음. 강사님은 18버전으로 진행, 실습 시 vite로 최신버전이 19버전으로 설치됨 Soultion ✅ react-copy-to-clipboard 대신 다른 패키지 사용 (추천) 현재 react-copy-to-clipboard 는 React 19을 공식적으로 지원하지 않음 . 대신 React 19에서 정상적으로 동작하는 최신 패키지 를 사용하는 것이 좋음. 대체 패키지: @uidotdev/usehooks 이 패키지는 useCopyToClipboard() 훅을 제공하며, React 19에서도 사용 가능 . npm i @uidotdev/usehooks 📌 사용 예시 ( useCopyToClipboard 활용) import { useCopyToClipboard } from "@uidotdev/usehooks"; export default function CopyButton() { const [copiedText, copy] = useCopyToClipboard(); return ( <div> <button onClick={() => copy("Hello, World!")}>복사하기</button> {copiedText && <p>복사 완료: {copiedText}</p>} </div> ); } 저는 위 방식을 통해 해결하였습니다. 더 좋은 방법이 있으면 공유해주세요.

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
7유스카트 댓글 2 좋아요 1 조회수 420

정규표현식

해결됨

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

안녕하세요! 강의 들으며 많은 부분 배우고 있습니다. DateCoverter 정규표현식 부분을 보면서 드는 의문이 있어 질문드립니다. 제가 이해한 바가 맞다면, 정규표현식에서 {1,2} 부분은 앞부분의 패턴을 1번 또는 2번 반복한다고 이해했습니다. 그렇다면 r"20\d{2}/([1-9]|0[1-9]|1[0-2]){1,2}/([1-9]|0[1-9]|[12][0-9]|3[01]){1,2}" 라는 정규표현식에서 월과 일의 숫자를 체크하는 부분이 1번 또는 2번 반복될 수도 있으니 "2023/0303/1212"와 같은 문자열도 통과 가능한 것일까요?

  • react
  • python
  • django
  • web-api
  • htmx
김은혜 댓글 2 좋아요 0 조회수 131

next-auth 사용 이유

미해결

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

안녕하세요. 백엔드에서 connect.sid 쿠키와 next-auth의 auth.js-session-token을 사용해서 유저 인증을 하는 것 처럼 보입니다. 프론트서버에서 유저가 접근 시 세션 쿠키(connect.sid)를 받아 백엔드에 유저 세션을 확인한다면 next-auth를 사용하지 않아도 되는 것처럼 보입니다. 백엔드에서 auth.js-sessoin-token으로 유저 인증을 한다면 역시 세션 쿠키(connect.sid)가 필요없는 것처럼 보입니다. connect.sid와 auth.js-session-token 쿠키를 모두 사용해야 하는 이유가 있을까요? 만약 둘 다 사용하는게 좋다고 한다면 동기화가 필요할 것 같은데(만료 시간, 세션 무효화 등..), 이건 어디서 어떻게 처리하는게 좋을까요? (예외 질문) connect.sid의 쿠키에 httpOnly 옵션이 false여도 괜찮은가요? 혹시 백엔드에서 connect.sid의 쿠키를 httpOnly로 보냈다면 쿠키파싱이 제대로 안된 것 같습니다. 아래 모듈로 쿠키파싱하면 되는 것 같습니다. 혹시나하고 남겨봅니다. //현재 코드 //import cookie from "cookie"; //const parsed = cookie.parse(setCookie); import { parseSetCookie } from "next/dist/compiled/@edge-runtime/cookies"; const parsed = parseSetCookie(setCookie);

  • react
  • next.js
  • next-auth
송지훈 댓글 2 좋아요 0 조회수 239

가상 시뮬레이터 실행

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

강의에서 모든 부분이 잘 따라왔습니다. 다만.. 마지막 안드로이드 가상 에뮬레이터가 작업표시줄 창에는 뜨지만 직접적으로 확인하지 못하고 있습니다. 클릭해도 아무 반응이 없고, 작업 표시줄에 있는 프로그램에 마우스를 올려보면 이렇게만 뜨고 있습니다. adb 설치도 다시 해보았고, 에뮬레이터에서 앱이 실행 중인지도 adb shell pm list packages | grep 명령어로 확인해보았습니다. 제가 놓친 부분이 있는 걸까요?

  • javascript
  • react
  • node.js
  • react-native
  • typescript
윤재형 댓글 2 좋아요 1 조회수 188

cache: "force-cache" 질문이 있습니다.

미해결

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

const res = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, //cache: "force-cache", } ); '/home'에서 포스팅 로딩 시 또는 새로고침 시에 데이터를 최초 조회하는 시점에서 cache: "force-cache"를 제거하면 포스팅이 노출되고 포함하면 포스팅이 안 나오는 현상이 있는데 어떤 이유인지 의심 가는 부분을 못 찾겠어서 질문 드립니다. cache: "force-cache" 주석처리 데이터 존재 cache: "force-cache" 빈 배열

  • react
  • next.js
  • react-query
  • next-auth
  • msw
yskim 댓글 2 좋아요 0 조회수 145

db에 저장된 비밀번호 암호화

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. pgAdmin4에 저장된 유저 정보에 비밀번호를 보면 제가 임의로 입력한 비밀번호가 아닌 암호화?된 값이 저장되어있는데 이 부분은 올려주신 server 백엔드에서 진행된건가요? 프론트 부분에서는 없는것 같아서 여쭤봅니다. 프론트가 아닌 백엔드에서 암호화하는게 맞는것 같긴 한데, 혹시나 놓친 부분이 있는건가 싶어서 여쭙니다.

  • javascript
  • react
  • react-native
  • typescript
  • react-query
경바 댓글 1 좋아요 0 조회수 128

업로드파일 조회/삭제 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

업로드파일 조회/삭제 7분 58초에 ResponseEntity를 컨트롤러에 넣는것은 15년전 방식이라고 말씀해주셨는데요. 근데 ProductController에 아래 같이 있는데요. @GetMapping("/view/{fileName}") public ResponseEntity<Resource> viewFileGET(@PathVariable String fileName){ return fileUtil.getFile(fileName); } 아래 코드를 Controller에 넣는게 15년전 방식인건가요? //파일 조회하는것 public ResponseEntity<Resource> getFile(String fileName) { Resource resource = new FileSystemResource(uploadPath+ File.separator + fileName); if(!resource.exists()) {//파일이 없을 떄 resource = new FileSystemResource(uploadPath+ File.separator + "default.jpeg"); } //http 헤더가 중요. 내가 보낸 타입을 알아야함. HttpHeaders headers = new HttpHeaders(); try{//마이 타입 headers.add("Content-Type", Files.probeContentType( resource.getFile().toPath() )); } catch(Exception e){ return ResponseEntity.internalServerError().build(); } return ResponseEntity.ok().headers(headers).body(resource); }

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 78

백엔드 서버 세팅 오류

해결됨

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

안녕하세요! https://www.inflearn.com/community/questions/1528169 이 분과 똑같은 오류가 발생하는데요! 혹시 해결된 방안이 있을까요,,? 어디서 확인할수있을까요?

  • react
  • next.js
댓글 2 좋아요 0 조회수 261

로컬 스토리지에 데이터를 저장하는 시점에 대해 문의드립니다.

해결됨

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

안녕하세요 강의 잘 듣고 있습니다! 수업 중 reducer의 마지막 부분에 localStorage.setItem()를 호출하여 로컬 스토리지에 데이터를 저장하셨는데요. 그 이유는 데이터의 생성, 수정, 삭제가 reducer 함수 호출 시 이루어지기 때문이라고 이해했습니다. 만약 reducer 내부가 아닌 아래 코드처럼 data를 deps로 가지는 useEffect안에서 데이터를 저장해도 동일하게 동작하는 것이 맞을까요? useEffect(() => { localStorage.setItem("diary", JSON.stringify(data)); }, [data]);

  • javascript
  • react
  • node.js
훗추추 댓글 2 좋아요 0 조회수 156

on-Demand-ISR 사용질문드립니다!

해결됨

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

안녕하세요! on demand isr 의 실제 사용 관련해서 질문 드려요! const revalidate = async () => { try { const response = await fetch("/api/revalidate"); const result = await response.json(); if (result.revalidate) { //페이지 갱신이 됐을 때 } else { //페이지 경신 안됐을 때 } } catch (error) { //에러처리 } };특정 조건에 따라 on demand isr을 제대로 사용하려면 이런식으로 저희가 만든 api를 호출하는 비동기 함수를 만들어서 특정 조건문 아래에서 이 새로만든 함수를 호출하면 되는걸까요?? 감사합니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 3 좋아요 0 조회수 232

[5-1] 글작성 후 저장이 되지 않습니다.

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 윈도우에서 개발중이고 백엔드 서버 잘셋팅 되어 있습니다(로그인 부분은 잘 넘어갔습니다) 다만 글 저장이 안되어서 도저히 봐도 모르겠어서 올려주신 소스 그대로 다운 받아 다시 설치 후 해봐도 저장이 되지 않습니다. 콘솔에 오류도 안뜨고 디버깅 이것저것 해봐도 도통 모르겠습니다 (소스 받아서 해도 안되서요 ㅠㅠ) 다만 axios.ts에서 안드로이드 저 주소가 되지 않아 제 로컬 아이피 주소를 했더니 로그인 부분이 잘 넘어갔습니다. 이 주소는 그대로 해도 그냥 제 로컬 아이피 주소를 해도 어찌되었던 저장은 되지 않습니다. 여기서 진도가 나가지 않아 답답하네요 ㅠㅠ export const baseUrls = { android: "http://10.0.2.2:3030", ios: "http://localhost:3030", };

  • javascript
  • react
  • react-native
  • typescript
  • react-query
주현 댓글 1 좋아요 0 조회수 345

useEffect 경고

해결됨

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

안녕하세요! 섹션3 2.14)SSG2.정적 경로에 적용하기 강의 17분23초에서 useEffect 의존성 배열 관련해서 React Hook useEffect has a missing dependency: 'fetchSearchResult' 라고 이 함수를 의존성 배열에서 빠트렸다고 경고가 저도 나왔는데 여기서 함수를 의존성 배열에 꼭 넣어야 하는건가요?? 감사합니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 2 좋아요 0 조회수 160

인기 태그

인프런 TOP Writers

주간 인기글