inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

로그인과 인증 관련 질문드립니다!

미해결

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

안녕하세요. 강의를 마치고 혼자 구현을 해보고 있는데, 로그인과 인증 관련해서 궁금한 부분이 있습니다. 프론트에 로그인한 유저인지의 판단을 미들웨어에서 auth함수로 next 서버를 통해 하고있는데,로그인 후에 접속 가능한 페이지를 이동할때마다 무조건 서버에 체크를 해주어야 하나요? 데이터 페칭은 리액트 쿼리를 설명하며 말씀해주신것 처럼 컨텐츠에 따라 판단해서 캐싱하고 새로 받아오고의 개념이 이해가 되었는데, 세션체크라고 해야 할까요? 로그인 후에 이 유저가 로그인이 되어있는지에 대한 체크를 서버에 얼마나 자주 해주어야 하는지 모르겠습니다. 현재는 미들웨어에서 로그인이 필요한 페이지에 auth함수를 호출하여 프론트 서버에서 체크를 하고, api를 호출할때는 쿠키에 next-auth의 세션 토큰과 서버에서 발급한 세션 아이디를 담아서 서버에서 로그인과 인증 확인을 하고있는것으로 이해를 했습니다. 현재는 혼자서 nestjs를 통해 jwt 토큰 2개 (access,refresh)을 발급해서 구현을 해보고있는데, 로그인이 필요한 페이지로 이동한다면 무조건 미들웨어에서 토큰 확인을 서버를 통해 해주어야 하는건가 잘 모르겠어서 질문 드립니다.. 강의 정말 잘 듣고 도움이 많이 됐습니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
JunWoo Kim 댓글 1 좋아요 0 조회수 96

오픈채팅방 참여 인원수

해결됨

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

안녕하세요. 오픈 채팅방에 참여하려 하는데 인원수가 꽉 찬 거 같습니다ㅜㅜ

  • javascript
  • react
  • node.js
유성원 댓글 2 좋아요 0 조회수 176

안녕하세요, onopen() 문제로 질문드립니다.

미해결

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

똑같이 코딩한거같은데 Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING 이런 문제가 생겨 connect()에서 console.log로 this.ws 찍어보니까. readystate가 0에서 바뀌지 않고 onsubmit()에서도 0인걸 확인했습니다. 그래서 웹소켓이 연결되지 않았으니, this.ws.send()에서 걸리는것이라고 생각은하는데, 어디를 고쳐야 될지 모르겠습니다. {# Chat room #} {% extends "chat/base.html" %} {% block extra-style %} <style> .chat-message > div { background-color: #3b3b3b; color: #e1e1e1; border-radius: 0.8em; padding: 0.4em; margin: 0.4em 0; display: inline-block; white-space: pre-wrap; max-width: 80%; word-wrap: break-word; } </style> {% endblock %} {% block content %} <h2>채팅방 :{{ room_name }}</h2> {# 웹소켓으로 실시간 채팅 기능 구현하기 #} <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="card" style="height: 600px;"> <div class="card-header"> 채팅방:{{ room_name }} </div> <div class="card-body overflow-hidden"> <div id="chat_messages" class="w-100 h-100 border-0 overflow-hidden overflow-scroll"></div> </div> <div class="card-footer"> <form id="message_form"> <input type="text" name="message" class="form-control" autofocus autocomplete="off" /> </form> </div> </div> <hr class="my-3" /> <a href="{% url 'chat:index' %}" class="btn btn-primary"> 대기실로 이동 </a> </div> </div> </div> {% endblock %} {% block extra-script %} <script> const handler = { chat_messages_tag: null, ws: null, retry: 0, init(){ console.log("handler.init() 실행됨"); this.chat_messages_tag= document.querySelector("#chat_messages"); document.querySelector("#message_form").addEventListener("submit", this.onsubmit.bind(this)); }, connect(ws_url){ if(this.ws) { this.ws.close(); } this.ws = new WebSocket(ws_url || this.ws?.url); console.log(this.ws, "연결1.") this.ws.onopen = this.onopen.bind(this); this.ws.onclose = this.onclose.bind(this); this.ws.onerror = this.onerror.bind(this); this.ws.onmessage = this.onmessage.bind(this); }, reconnect() { this.connect(); }, onopen(){ console.log("웹소켓 서버와 접속, : Room_chat"); this.retry = 0; }, onclose(event){ if (!event.wasClean) { console.error("웹소켓이 죽었거나, 네트워크 에러"); if (this.retry < 3) { this.retry++; setTimeout(() => { this.reconnect(); console.log(`[${this.retry}] 접속 재시도 ...`); }, 1000 * this.retry) } else { console.log("웹소켓 서버에 접속할수 없습니다. 메인페이지로 이동합니다."); window.location.href = "{% url 'chat:index' %}"; } } }, onerror(){ console.log("웹소켓 에러 발생. 메인페이지로 이동합니다."); window.location.href = "{% url 'chat:index' %}" ; }, onmessage(event){ const message_json = event.data; console.log("메세지 수신 :", message_json); const { type, message } = JSON.parse(message_json); switch (type){ case "chat.message": this.append_message(message); break; default: console.error('Invalid message type: &{type}'); } }, append_message(message){//인자로 받은 채팅 메세지 로그에 추가 const element = document.createElement("div"); element.className = "chat-message"; const wrapper = document.createElement("div"); wrapper.textContent = message; element.appendChild(wrapper); this.chat_messages_tag.appendChild(element); this.chat_messages_tag.scrollTop = this.chat_messages_tag.scrollHeight; }, onsubmit(event){ //입력된 채팅 메세지 문자열을 획득하고, 메세지 로그에 추가. event.preventDefault(); const form_data = new FormData(event.target); //폼필드의 값을 오브젝트로 변환하여 props로 저장하고, 폼필드는 리셋합니다. const props = Object.fromEntries(form_data); event.target.reset(); // reset form const { message } = props; console.log("웹소켓으로 전송할 메세지: ", message); console.log(this.ws, "onsubmit"); {#this.append_message(message);#} this.ws.send(JSON.stringify({ type: "chat.message", message: message, })) } }; handler.init(); const protocol = location.protocol === 'https:' ? 'ws:' : 'wss:'; const ws_url = protocol + "//" + location.host + "/ws" + location.pathname; handler.connect(ws_url); </script> {% endblock %} from django.urls import path from chat import consumers websocket_urlpatterns = [ path("ws/chat/<str:room_name>/chat/", consumers.ChatConsumer.as_asgi()), ] import os from channels.routing import ProtocolTypeRouter, URLRouter from django.core.asgi import get_asgi_application import app.routing import chat.routing os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings') django_asgi_app = get_asgi_application() application = ProtocolTypeRouter({ "http" : django_asgi_app, "websocket" : URLRouter( chat.routing.websocket_urlpatterns + app.routing.websocket_urlpatterns, ) }) from django.shortcuts import render # Create your views here. def index(request): return render(request, "chat/index.html") def room_chat(request, room_name): return render(request, "chat/room_chat.html",{ "room_name": room_name, })

  • python
  • django
  • django-channels
sunnnwo 댓글 2 좋아요 0 조회수 171

코드 결과값이 좀 다릅니다.

미해결

입문자를 위한 LangChain 기초 — v1.0+ 업데이트

멀티체인 부분에서 chain1의 답변이.. 길게 나옵니다. 한 단어로 'future'라는 답변이 나와야 사실 chain2에 english_word라는 변수에 알맞는 값이 들어가는 걸텐데요. 문장으로 답이 나와서 이상한 상황입니다. 무슨 문제가 있어서 이렇게 invoke 결과값이 달라지는지 제가 뭘잘못했는지 모르겠습니다. 제 잘못이 아니라면 이게 무엇 때문인지, 어떻게 해결할 수 있을지 궁금합니다. (chain2도 답변을 영어로 하는 문제도 있습니다.)

  • python
  • llm
  • langchain
  • openai-api
김재형 댓글 2 좋아요 0 조회수 203

Counter 컴포넌트 전부 리렌더링 되는 현상

미해결

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

<Counter onTotal={handleTotal} /> <hr/> <Counter onTotal={handleTotal}/> <hr/> <Counter onTotal={handleTotal}/> 여기서 Counter.jsx에서 console.log 를 추가했고 버튼 세 개 중 하나만 눌러도 <Counter /> 세 개 전체가 리렌더링 됩니다. (log 가 세번찍힘) 왜그런건가요 ?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
rookiezin 댓글 2 좋아요 0 조회수 145

섹션2 ["환경 vs. 설정 vs. 구성"] 강의 자막 문의

해결됨

실리콘밸리 엔지니어가 가르치는 파이썬 기초부터 고급까지

질문은 많으시면 많을수록 좋습니다. 가능한 빠른 답변 드리겠습니다. 원활한 답변을 위해, 자세한 질문 사항 부탁드려요 😋 [33초] 각 단어에 맞는 영어 번역이 잘못된 것 같습니다. 환경 / 구성 / 설정 Environment / Configuration / Setting 로 이해하면 될까요?

  • python
  • 알고리즘
티읕이응 댓글 1 좋아요 0 조회수 158

Suspense질문

해결됨

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

선생님 Suspense는 그러면 언제언제 써야하는건가요?? 어떤 함수일때 빌드시 오류나는지 다 알수는 없으니 빌드시 마다 확인을 해야할까요? 기존 page router와 다른게 뭔가 CSR SSR SSG ISR 이렇게 배우다가 갑자기 정적페이지 동적페이지 하는게 나오는데 랜더링 방식이랑 같은의미인건지... 궁금합니다.

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

12-2 질문

미해결

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

Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined. at currentRendererSupportsUseSyncExternalStore (index.js:505:1) at useRecoilValueLoadable (index.js:5353:1) at useRecoilValue (index.js:5372:1) at CompletionPage (index.js:6:1) at react-stack-bottom-frame (react-dom-client.development.js:22428:1) at renderWithHooks (react-dom-client.development.js:5757:1) at updateFunctionComponent (react-dom-client.development.js:8018:1) at beginWork (react-dom-client.development.js:9683:1) at runWithFiberInDEV (react-dom-client.development.js:543:1) at performUnitOfWork (react-dom-client.development.js:15042:1) 이거 오류뜨는데 리엑트 recoil 지원 중단되서 안되는건가요? 해결방법이 있나요?

  • react
  • redux
  • node.js
  • sass
  • swr
정지현 댓글 3 좋아요 0 조회수 693

잘못된 책 정보 요청이 들어왔을 때

미해결

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

안녕하세요! 수업 잘 듣고 있습니다. 수업 듣던 중 http://localhost:3000/book/34 와 같이 존재하지 않는 책의 상세 정보에 대한 요청에 대한 페이지까지 구현해보고 싶어 혼자 작성하다 문제가 생겨 질문 드립니다. http://localhost:12345/book/333 에서 자동적으로 오류 api 를 주는 것을 보고 해당 객체를 활용하려고 하였으나, id가 13 이상일 때부터는 [id].tsx 파일의 context.parms.id 가 undefiend로 반환되는 문제가 있습니다. 서버측의 문제인지, 제가 설정을 잘못한 건지 잘 모르겠어 질문 드립니다!

  • react
  • typescript
  • next.js
이원현 댓글 2 좋아요 0 조회수 182

소스트리를 따로 쓰는 장점이 뭔가요?

해결됨

실전 활용을 위한 git/github(feat.각종 충돌상황 해결하기)

vs code에서 깃 커맨드를 쓰거나 소스 컨트롤 기능에서 내역을 확인할 수 있는데 깃 GUI프로그램으로 소스트리를 따로 쓰시는 이유가 뭔가요? 그리고 깃헙 데스크탑 GUI프로그램이 있는데 깃헙 연동으로는 이게 더 편리할 거 같은데 소스트리가 더 우수한 이유가 있을까요?

  • git
  • github
  • gitlab
HJ Jeong 댓글 2 좋아요 0 조회수 1011

오류 제보합니다 깃헙!

미해결

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

.cover_img_container::before { position: absolute; top: 0px; left: 0p; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); content: ""; } .cover_img_container::before { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); content: ""; } left: 0p -> left: 0px

  • react
  • typescript
  • next.js
강프로그래머 댓글 1 좋아요 0 조회수 142

App router 랜더링 방식에 대해 질문 드립니다.

해결됨

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

선생님 데이터 캐시부분 보고 있는데요 page router의 SSG, ISR처럼은 app router에서 동작이 일어나지 않는걸까요? 아니면 동일한건지 궁금합니다. SSG의 경우는 페이지를 build타임에 페이지를 만드는데 app router는 fetching 한 데이터만 캐시하는것 같아 질문 드립니다.

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

페이지가 넘어갈 때 url 변하지 않는 경우

미해결

[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)

안녕하세요 제공해주신 깃허브 홈페이지 url의 경우는 페이지가 넘어갈 때마다 'url/page{page_num}' 형식으로 변하게 되는데 제가 살펴본 네이버 카페의 경우(링크 아래 첨부)는 페이지 수를 넘겨도 페이지 수가 변하지 않았습니다. 네이버 카페 url: https://cafe.naver.com/cantsb 혹시 이러한 경우 페이지 수에 따른 크롤링을 어떻게 하는지 궁금합니다.

  • python
  • 웹-크롤링
fwm8 댓글 1 좋아요 0 조회수 291

여행자 게시판 '트립토크'와 숙박상품에관련한 강의는

해결됨

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

강의는 하이브리드앱에 포함 되어있나요? 아니면 중급 웹프론트엔드앱에 포함되어있나요? 중급 듣고 있는데 언제쯤 나오는지 궁금해서 여쭤봅니다...

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

렌더링에서 말하는 서버란 무엇인가요?

해결됨

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

안녕하세요. 예전부터 궁금했던게 있습니다. 이번 사전렌더링 강의에서 계속 설명하는 유저-브라우저-서버 개념 에서 서버란 무엇인가요? 단순히 csr은 서버에서 빈껍데기를 먼저주고, 초기접속속도가 느리고, ssr은 빈껍데기가아니라 이미 렌더링된 html을 서버에서 받아서 그대로 렌더링하고... 이런 개념들은 CSR과 SSR 차이만 검색해도 수많은 블로그와 개념이 나오고, 항상 많이 들어왔고 면접준비했을때도 수없이 외워서 알겠습니다만 여기서 항상 의문이 있었는데요. 여기서 말하는 서버란 대체 무엇인가요? 제가 알고있던 서버라는것은 백엔드서버였는데, 이 서버라는 개념이 어려웠습니다.

  • react
  • typescript
  • next.js
타루 댓글 2 좋아요 3 조회수 255

YOLO 학습

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

안녕하세요 강사님 최근에 YOLO를 이용해 이것 저것 연습을 하는데 궁금한 점이 있습니다. 데이터셋의 크기가 너무 커서(2TB) 일단 필요한 부분만 선택해서 학습을 했습니다. 그런데 이렇게 하면 새로운 데이터셋을 추가해서 학습을 시키려면 <기존 1TB + 새로운 데이터셋> 이렇게 합친 데이터셋을 다시 학습을 해야 하나요...? 예를 들어 a, b, c, d를 탐지할 수 있게 학습을 하고 추가적으로 ㄱ, ㄴ, ㄷ, ㄹ도 탐지할 수 있게 데이터를 추가해서 총 a, b, c, d, ㄱ, ㄴ, ㄷ, ㄹ을 모두 탐지할 수 있도록... 마지막 출력 계층만 새롭게 학습을 하는 방법은 기존 데이터셋에 대한 성능이 떨어질 수 있어 좋은 선택은 아닌가요...?

  • python
  • 머신러닝
  • 딥러닝
  • keras
  • tensorflow
  • 컴퓨터-비전
장태훈 댓글 2 좋아요 0 조회수 229

navigation쓸때 오류

미해결

따라하며 배우는 리액트 네이티브 기초

Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. 이런 오류가 나. 아마 호환성문제인거 같은데 어떻게 해결해?

  • react
  • react-native
  • expo
장우진 댓글 1 좋아요 0 조회수 183

새로운 dict를 생성한 이유에 대해서 궁금합니다.

미해결

프로그래밍 시작하기 : 도전! 45가지 파이썬 기초 문법 실습 (Inflearn Original)

d = {'USA': 36, 'Germany': 17,'France':32, 'Australia': 77, 'South Africa': 99, 'India': 108, 'South Korea': 200, 'South Japan':300} print(d.get("France")) t = input("You won't search of contury?").title() print(t,"<<입력값") def add_space(a): if 'South' in a: print(a.find('South')) i = a.find('South') # print(a[i:i+5]) a = a[i:i+5]+' '+a[i+5:len(a)].title() return a # if 'East' in a: # --- # if 'Wset' in a: # --- # if 'North' in a: # --- t = add_space(t) if t == "Usa": t = "USA" else: print(a) country = d.get(t) if not country: print('No results were found for your search.') else: print(country) 안녕하세요 강의 수강 중 궁금한 점이 있어서 질문드립니다. 강의 7:33에서 key가 소문자인 형태로 새로운 dict을 생성하신 이유가 궁금합니다. 문제 해결을 위한 생성 이외에 원본 변수인 'd'의 수정을 방지하기 위함과 지금 예제는 눈으로 모든 값을 확인할 수 있지만 많은 데이터를 가진 시퀀스의 경우에는 어떠한 예외가 발생할지 모르니 그에 대한 대비 제가 생각해 본 이유가 맞는지 또한 다른 이유가 있으신지 궁금합니다. 또한 제 코드에서 'add_space'함수를 매번 실행하는 게 비효율적이라는 생각이 들지만 필요하다고도 생각돼서 선생님의 의견을 여쭤봅니다.

  • python
kingryan9996 댓글 2 좋아요 0 조회수 202

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

해결됨

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요. login, singup, workspace 페이지에서 data 가 있는 경우, Redirect 하려는 함수에서 다음과 같은 에러가 공통으로 나타납니다. => 'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345) 어떻게 해야 할까요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
민유 댓글 2 좋아요 0 조회수 177

인기 태그

인프런 TOP Writers

주간 인기글