inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

'JSX.IntrinsicElements' 유형에 'mesh' 속성이 없습니다. 경고 해결법

해결됨

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

전 영상과 똑같이 npm으로 설치하는 과정에서 에러가 발생하시는 분들을 위한 제 해결법입니다. (2025-02 기준) 강사님이 올려주신 소스코드 다운로드 이 방법은 강사님이 올려주신 폴더를 열어서 npm i 만 하시면 됩니다. 직접 다운그레이드 R3F가 현재(2025-02) 기준 React 19를 지원을 안합니다. 그렇기 때문에 React 18로 다운그레이드를 해줘야되는데요 React 다운그레이드 React 최신버전 설치 npm create vite@latest 우선 최신버전을 설치한 이후에 다운그레이드 npm uninstall react react-dom npm install react@18 react-dom@18 react와 react-dom을 삭제후 18버전으로 설치합니다. 3. 확인 npm list react react-dom 터미널로 확인하시면 18버전으로 다운그레이드 됩니다. 하지만 여기서 끝이 아니라 Typescript와 drei 설치시에도 문제가 발생합니다. mesh를 작성하게 되면 "JSX.intrinsicElements" 형식에 "mesh" 속성이 없습니다. 라는 경고창이 옆에 계속 뜨는데요 실행결과는 잘 출력 되지만 거슬려서 해결법을 적어봅니다. 'JSX.IntrinsicElements' 에러 해결법 package.json 파일에 type/react와 type/react-dom이 19버전으로 되어 있어 호환이 안되어 발생하는 에러입니다. npm install @types/react@18 @types/react-dom@18 터미널에 입력해주시면 package.json 파일에서 18버전으로 다운그레이드 됩니다. 또 drei를 설치할때 three-mesh-bvh@0.7.8: Deprecated due to three.js version incompatibility. Please use v0.8.0, instead 에러가 발생하는데요 이는 three.js 버전과 three-mesh-bvh 버전 간의 호환성 문제입니다. drei 라이브러리 설치법 터미널에 npm install @react-three/drei npm install three-mesh-bvh@0.8.0 --legacy-peer-deps 그럼 3가지 세팅이 완료됩니다

  • react
  • typescript
  • three.js
  • react-three-fiber
김수로 댓글 2 좋아요 1 조회수 361

react19에서는 react-beautiful-dnd가 설치되지 않습니다.

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

https://github.com/atlassian/react-beautiful-dnd/issues/2672 react-beautiful-dnd is now deprecated #2672 Drag and Drop 기능 구현을 위한 다른 방법 설명이 필요합니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
서상연 댓글 1 좋아요 0 조회수 851

pgAdmin 질문

미해결

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

pgAdmin의 Post 데이터를 전부 삭제한 후 다시 기록하고 싶어서 Post 내부 데이터를 전부 선택/삭제(휴지통 버튼 클릭)한 후 PSQL Tools에 COMMIT을 입력하라고 정보가 있어서 실행에 옮겼는데 갑자기 9090페이지가 아예 안돌아가네요(로그인 안됨, API문서 접근불가 등등) ㅠㅠ 어떻게 방법없을까요

  • react
  • next.js
  • react-query
  • next-auth
  • msw
심현석 댓글 1 좋아요 0 조회수 157

%0이 짝수라는뜻인가요?

미해결

문과생도, 비전공자도, 누구나 배울 수 있는 파이썬(Python)!

50%2를 하면 25인데 25일경우에는 0이 아닌데 이해가 잘 안되어서요 그냥 %2=0이면 짝수라는 통용되는 개념인가요?

  • python
escho94 댓글 1 좋아요 0 조회수 153

continue에 관해서 질문드립니다

미해결

문과생도, 비전공자도, 누구나 배울 수 있는 파이썬(Python)!

for i in range(10): print(i) if i < 5: continue elif i == 7: break 여기서 출력값이 01234567이 나왔는데 567이 나오는건 이해하겠는데 0부터 4는 if구문의 continue 때문에 건너뛰어야하는것 아닌가요..? 왜 이렇게 출력이 되는지 궁금해요

  • python
댓글 1 좋아요 0 조회수 124

확인부탁합니다_부록1의 순서

미해결

칼만 필터: 예제로 이해하는 상태추정의 수학적 원리

아래 순서가 부록 : 1 사전확률 &사후확률 부록 : 1 MLE & MAP 부록 : 1 베이즈 정리(Bayes Theorem) 이처럼 되는거가 맞지 않나요? 페이지번호가 그런거 같은데요 부록 : 1 베이즈 정리(Bayes Theorem) 부록 : 1 MLE & MAP 부록 : 1 사전확률 &사후확률

  • python
  • MATLAB
  • 선형대수학
  • kalman-filter
  • 확률과-통계
문병훈 댓글 1 좋아요 1 조회수 162

하나의 채팅방만 만들어보려고 하는데 잘 안되고 있습니다.

미해결

파이썬/장고로 웹채팅 서비스 만들기 (Feat. Channels) - 기본편

안녕하세요 선생님. 인증받지 않은 유저의 웹소켓 접근을 거부하려고 하는데요, Traceback (most recent call last): File "/Users/sunnnwo/workspace/pongchatT/venv/lib/python3.11/site-packages/django/contrib/staticfiles/handlers.py", line 101, in __call__ return await self.application(scope, receive, send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/Users/sunnnwo/workspace/pongchatT/venv/lib/python3.11/site-packages/channels/routing.py", line 62, in __call__ return await application(scope, receive, send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/Users/sunnnwo/workspace/pongchatT/venv/lib/python3.11/site-packages/channels/sessions.py", line 47, in __call__ return await self.inner(dict(scope, cookies=cookies), receive, send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/Users/sunnnwo/workspace/pongchatT/venv/lib/python3.11/site-packages/channels/sessions.py", line 263, in __call__ return await self.inner(wrapper.scope, receive, wrapper.send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/Users/sunnnwo/workspace/pongchatT/venv/lib/python3.11/site-packages/channels/auth.py", line 185, in __call__ return await super().__call__(scope, receive, send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/Users/sunnnwo/workspace/pongchatT/venv/lib/python3.11/site-packages/channels/middleware.py", line 24, in __call__ return await self.inner(scope, receive, send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ TypeError: 'list' object is not callable WebSocket DISCONNECT /ws/chat/test/chat/ [127.0.0.1:61013] HTTP GET /chat/ 200 [0.01, 127.0.0.1:61007] /Users/sunnnwo/workspace/pongchat/mysite/asgi.py changed, reloading. Watching for file changes with StatReloader 아래와 같이 설정하고 실행해봤는데, 위와 같은 에러가 발생했습니다. AuthMiddlewareStack을 이용하여 인증된 사용자만 채팅할 수 있게 하려면 어느 부분을 수정해야할까요. 감사합니다. 좋은 하루되세요. asgi.py application = ProtocolTypeRouter({ "http" : django_asgi_app, "websocket" : AuthMiddlewareStack( app.routing.websocket_urlpatterns + chat.routing.websocket_urlpatterns, ), }) consumers.py from asgiref.sync import async_to_sync from channels.generic.websocket import JsonWebsocketConsumer # 모든 유저가 고정된 채널 레이어 그룹을 가질것. class ChatConsumer(JsonWebsocketConsumer): SQUARE_GROUP_NAME = "square" groups = [SQUARE_GROUP_NAME] def receive_json(self, content, **kwargs): # user = self.scope["user"] user = self.scope["user"] _type = content["type"] if not user.is_authenticated: self.close() else: if _type == "chat.message": message = content["message"] async_to_sync(self.channel_layer.group_send)( self.SQUARE_GROUP_NAME, { "type": "chat.message", "message": message, } ) else: print(f"Invalid message type : ${_type}") def chat_message(self, message_dict): self.send_json({ "type": "chat.message", "message": message_dict["message"], }) chat/routing.py from django.urls import path, re_path from chat import consumers websocket_urlpatterns = [ path("ws/chat/<str:room_name>/chat/", consumers.ChatConsumer.as_asgi()), ] chat/urls.py urlpatterns=[ path("", views.index, name = "index"), path("<str:room_name>/chat/", views.room_chat, name = "room_chat" ), ]

  • python
  • django
  • django-channels
sunnnwo 댓글 1 좋아요 0 조회수 140

한글 수식을 자동으로 넣는 코드를 만들었는데, 수식 사이의 간격이 계속 벌어집니다.

미해결

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

선생님 강의랑 블로그 참고해서, 문서 내 특정 문자들을 찾아서 수식으로 바꾸는 작업을 진행했습니다. A라는 문자가 문서 내에 있으면, 찾기 기능으로 찾은 뒤에 수식 편집기를 열어서 rm A로 바꿔주는 작업을 합니다. 그런데 문자를 전부 수식으로 바꾸고 나니 글자들의 간격이 다 벌어져있네요... 수식을 누르고 방향키로 빠져나오거나, 개체 속성에 들어갔다 나오면 다시 돌아오는 상황입니다. 왜 이런 일이 발생하는지 잘 모르겠고, 어떻게 해결할 수 있을까요? https://employeecoding.tistory.com/194 수식 넣을 때 코드는 이 게시글에 있는 코드를 사용했습니다.

  • python
  • 한컴오피스
손주환 댓글 1 좋아요 1 조회수 793

vite + react <MainPage/> intelij

미해결

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

안녕하세요 인텔리제이 사용중인데 create react app으로 하게 되면 더이상 지원하지 않는다 하여 vite + react로 적용해서 프로젝트 만들어서 하고 있습니다 현재 2강 React-Router 이용해서 메인 페이지 띄우는 작업중인데 오류가 발생하여 진행이 안됩니다 그리고 매번 강의 때마다 오류 수정하느라 강의가 원활하지 않습니다 강의는 더이상 업데이트 계획이 없으실까요? 리액트 프로젝트 생성부터 막혀서 진행이 원할하게 되지않습니다 환불하고 싶은데 기간도 지나서 환불도 안되고 답답하네요 매번 이런식으로 물어보면서 수정해야 하나요?? 매뉴얼이라도 만들어주세요 정말 불편합니다

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
신승록 댓글 2 좋아요 0 조회수 165

리코일이 업데이트가 안된지 오래됐다고하네요

미해결

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

계속 오류가 발생해서 알아보니까 리액트19 버전쓰시는 분들은 리코일 못쓰실거같아요 대신 jotai 이 라이브러리로 대체해서 사용해보세요 문법도 리코일이랑 비슷하네요

  • react
  • redux
  • node.js
  • sass
  • swr
more j 댓글 1 좋아요 3 조회수 473

여행 숙박 사이트 부분 질문있습니다.

해결됨

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

안녕하세요 강의를 듣다가 여행 숙박 사이트 부분의 강의를 보고 싶은데 이 부분은 어디서부터 보면 되나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 113

[감정 일기 프로젝트] 방금 생성한 일기를 수정하였을 경우 오류 발생

해결됨

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

감정 일기 프로젝트에서 "Edit 페이지 구현하기"까지 공부한 상황입니다. 구현하고 나서 강사님 설명대로 동작 시켜 보니 잘 동작하더군요. 그런데 제가 이것 저것 동작을 체크하면서 방금 생성한 일기를 다시 수정하고 나서 작성완료 버튼을 눌렀더니, Diary list에 방금 수정한 목록이 두 개가 나타나고, 이전 달의 Diary list가 사라지는 현상이 발생하였습니다. 그래서 제가 어느 부분을 잘못 코딩하였는지 확인하고자 강사님이 제공한 Git 사이트의 코드와 제가 작성한 코드를 일일이 비교해 보았지만 차이점을 발견하지 못하였습니다. 강사님은 이런 현상이 발생하지 않았는지요? 또한 어떻게 이 문제를 해결할 수 있을까요?

  • javascript
  • react
  • node.js
똘똘이 댓글 2 좋아요 0 조회수 263

선생님 리뷰 에디터의 input관련 질문드립니다.

해결됨

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

선생님 review-editor.tsx 파일에서 기존 리액트와는 다른게 onChange나 value useState를 활용하여 input의 상태값을 따로 설정 안하는데 이건 왜 안하는걸까요? search-bar에서는 그렇게 동작하도록 한거 같은데 무슨 차이인지 설명좀 부탁드려도 될까요?! 여러 지식들이 이제 막 충돌하기 시작했습니다 ㅠㅠ

  • react
  • typescript
  • next.js
uphoon 댓글 2 좋아요 0 조회수 139

수강평 인증 이벤트 끝났나요?

해결됨

38군데 합격 비법, 2026 코딩테스트 필수 알고리즘

1. 현재 학습 진도 몇 챕터/몇 강을 수강 중이신가요? 어떤 알고리즘을 학습하고 계신가요? 여기까지 이해하신 내용은 무엇인가요? 2. 어려움을 겪는 부분 어느 부분에서 막히셨나요? 코드의 어떤 로직이 이해가 안 되시나요? 어떤 개념이 헷갈리시나요? 3. 시도해보신 내용 문제 해결을 위해 어떤 시도를 해보셨나요? 에러가 발생했다면 어떤 에러인가요? 현재 작성하신 코드를 공유해주세요 이렇게 구체적으로 알려주시면, 더 정확하고 도움이 되는 답변을 드릴 수 있습니다! 😊

  • python
  • 코딩-테스트
  • 알고리즘
  • data-structure
댓글 2 좋아요 0 조회수 215

보유 특허 검색 페이지에서 검색이 되지 않습니다.

미해결

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

8-1. 사이트의 글목록을 크롤링하여 엑셀에 담기 강의 관련입니다. 예전에 흘려듣기 식으로 이 강의를 봤을 때는 분명 강의 내용과 같이 연세대학교 산학협력단의 보유 특허 검색 페이지에서 검색이 되었었는데요. 본격적으로 따라하며 익혀보려고 해당 웹페이지에 가보니 예전과 달리 검색이 되지 않습니다.(아래와 같이 보임) 연세대학교 산학협력단 홈페이지의 문제라면 일코님의 문제가 아니긴 하지만 해당 홈페이지를 이용하여 실습하는 입장에서는, 기존에 멀쩡하던 강의가 실용성을 확 잃게 되는 듯한 안타까움이 있습니다. 제가 확인한 것처럼 현재는 보유 특허 검색이 안되는 것이 맞는지 한 번 확인 부탁드립니다. 또한 이 상태로 동일한 내용을 따라하기 실습이 가능한지를 확인 부탁드립니다. 동일하게 따라하기 실습을 못한다면 이 챕터는 넘겨야 될 거 같습니다. 제가 크롤링 경험이 많고 능숙하다면 어떻게든 도움이 되겠으나, 아직 전혀 모르는 분야인 크롤링에서 정처없이 헤맬 거 같아서 그렇습니다. 일단, 요 챕터 말고 실습이 가능한 다른 부분 부터 공부해 볼게요. 감사합니다.

  • python
  • 한컴오피스
  • 레벨업
learner 댓글 1 좋아요 1 조회수 157

9강 kakao api로 아이디 생성 후 오류

미해결

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

9강 리액트 사용자 정보 수정 중에 kakao api 연동해서 그전까지 잘되는데, 디비에 카카오 사용자 정보가 없는 상태에서 로그인을 하면 디비에 member와 member_member_role_list 두 테이블 사용자가 잘 생성됩니다. 서버에는 getClaims 함수실행에서 오류가 발생하고 DTO에 정보를 못찾는다는거 같은 오류인거 같은데 화면상에는 이렇게 나옵니다. 새로고침 후의 상태이고 그냥 localhost:3000 으로 다시 들어가서 로그인을 하면 디비에는 카카오사용자가 생성이 된 상태라 로그인이 잘됩니다.... 원인이 무엇일까요 @GetMapping("/api/member/kakao") public Map<String, Object> getMemberFromKakao(String accessToken) { log.info("access Token : {}", accessToken); MemberDTO memberDTO = memberService.getKakaoMember(accessToken); Map<String, Object> claims = memberDTO.getClaims(); String jwtAccessToken = JWTUtil.generateToken(claims, 10); String jwtRefreshToken = JWTUtil.generateToken(claims, 60 * 24); claims.put("accessToken", jwtAccessToken); claims.put("refreshToken", jwtRefreshToken); return claims; } public Map<String, Object> getClaims() { Map<String, Object> dataMap = new HashMap<>(); dataMap.put("email", email); dataMap.put("pw", pw); dataMap.put("nickname", nickname); dataMap.put("social", social); dataMap.put("roleNames", roleNames); return dataMap; } import axios from "axios" import { API_SERVER_HOST } from "./todoApi" const rest_api_key = `` const redirect_uri = `http://localhost:3000/member/kakao` const auth_code_path = `https://kauth.kakao.com/oauth/authorize` const access_token_url =`https://kauth.kakao.com/oauth/token` export const getKakaoLoginLink = () => { const kakaoURL = `${auth_code_path}?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code` return kakaoURL } export const getAccessToken = async (authCode) => { const header = { headers: { "Content-Type": "application/x-www-form-urlencoded", } } const params = { grant_type: "authorization_code", client_id: rest_api_key, redirect_uri: redirect_uri, code: authCode } const res = await axios.post(access_token_url, params, header) const accessToken = res.data.access_token return accessToken } export const getMemberWithAccessToken = async (accessToken) => { const res = await axios.get(`${API_SERVER_HOST}/api/member/kakao?accessToken=${accessToken}`) return res.data } rest_api_key에 restkey입력되어있습니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
지루한 하마 댓글 2 좋아요 0 조회수 153

Direct connection / Transaction pooler / Session pooler 차이가 무엇인가요?

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

Supabase 가 업데이트 되면서, 강의 화면과 다른 부분이 있어서 질문드립니다. Direct connection / Transaction pooler / Session pooler 차이가 무엇인가요? 강의를 따라가기 위해 Transaction pooler 를 사용해서 연결은 하긴 했습니다.

  • react
  • 클론코딩
  • next.js
  • supabase
박종혁 댓글 2 좋아요 1 조회수 655

맥북 사용하시는 분 들 단축키 알려 드립니다.

미해결

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

맥북 사용하시는 분들 Command + L Command + O 누르면 Live Server가 자동으로 오픈됩니다.

  • javascript
  • react
  • node.js
꿀잼사슴 댓글 2 좋아요 0 조회수 190

공유자님 이 강의 공부 방법에 대한 질문입니다.

미해결

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

이 강의는 어떤 식으로 접근해야 되나요? 이런 것이 있구나~ 라고 생각하고 넘어가야 하나요? 아니면 하나하나 다 알아가면서 넘어가는 것이 좋나요?

  • react
  • python
  • django
  • web-api
  • htmx
주인국 댓글 2 좋아요 0 조회수 222

tailwind css 버젼 다름문제

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

노션에 링크에 들어가면 https://tailwindcss.com/docs/installation/using-vite 여기로 옮겨지는데 강의 내용과 완전히 다른 터미널 명령어를 알려줍니다. 홈페이지말고 강의 처럼 따라하니깐 init 부분에서 npm error could not determine executable to run npm error A complete log of this run can be found in: C:\Users\shin\AppData\Local\npm-cache\_logs\2025-02-11T09_22_29_046Z-debug-0.log 이런 오류가 뜨는데 새로 변경된 홈페이지를 따라해야하나요? 따라해야한다면 어떻게 하면될까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
신상 댓글 3 좋아요 0 조회수 4150

인기 태그

인프런 TOP Writers

주간 인기글