inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

채팅에 대해서 질문이 있습니다. ㅠㅠ

미해결

... // WebSocket 연결 및 STOMP 클라이언트 설정 useEffect(() => { const token = sessionStorage.getItem("accessToken"); // 세션에서 액세스 토큰을 가져옴 const socket = new SockJS(`http://localhost:8080/ws/chat`); // WebSocket 연결 const client = Stomp.over(socket); stompClientRef.current = client; // STOMP 연결 client.connect( { Authorization: `Bearer ${token}` }, (frame) => { setConnected(true); console.log("STOMP 연결 성공", frame); // 해당 채팅방에 대한 메시지 구독 client.subscribe(`/exchange/chat.exchange/room.${roomId}`, (msg) => { const receivedMessage = JSON.parse(msg.body); if (receivedMessage.type === "PLACE") { const place = JSON.parse(receivedMessage.message); setMessages((prev) => [...prev, { type: "PLACE", place }]); } else { setMessages((prev) => [...prev, receivedMessage]); } }); }, (error) => { console.error("STOMP 연결 실패:", error); alert("STOMP 연결 실패! 서버가 실행 중인지 확인하세요."); } ); // 채팅방 목록 가져오기 fetch(`${BASE_URL}/chat/rooms`, { headers: { Authorization: `Bearer ${token}`, }, }) .then((res) => res.json()) .then((data) => setChatRooms(data)) .catch((error) => console.error("채팅방 목록 가져오기 실패:", error)); return () => { if (client.connected) client.disconnect(); }; }, [roomId]); // 메시지 보내는 기능 const sendMessage = (message, type = "TALK") => { const token = localStorage.getItem("accessToken"); stompClientRef.current?.send( `/pub/chat.message.${roomId}`, { Authorization: `Bearer ${token}` }, JSON.stringify({ sender: currentUser, message, roomId, type, timestamp: new Date().toISOString(), }) ); if (type === "TALK") setNewMessage(""); }; ... 리액트는 다음과 같이 구성하고 @Controller @RequiredArgsConstructor @Log4j2 public class ChatController implements ChatControllerDocs { private static final String CHAT_EXCHANGE_NAME = " chat.exchange "; private final static String CHAT_QUEUE_NAME = "chat.queue"; private final ChatService chatService; private final RabbitTemplate rabbitTemplate; @Override // 클라이언트에서 서버로 보낸 메시지를 메시지를 라우팅 // @MessageMapping("chat.message")로 설정하여 클라이언트로부터 /pub/chat.message 목적지로 전송된 STOMP 메시지를 처리한다. /*RabbitMQ*/ @MessageMapping("chat.message.{roomId}") /*STOMP*/ // @MessageMapping("/{roomId}") // 구독한 클라이언트에게 response를 제공할 url 정의 // @SendTo("/topic/{roomId}") public ResponseEntity<?> sendMessage( // @Payload: 메시지의 body를 정의한 객체에 매핑합니다. @Payload ChatMessageDTO message, // @DestinationVariable: 구독 및 메시징의 동적 url 변수를 설정. RestAPI의 @PathValue와 같다. @DestinationVariable int roomId) { try { ChatMessageDTO msg = chatService.sendMessage(message); log.info ("Sent message: {}", msg); if (msg != null) { // RabbitMQ으로 메시지 전송 // template.convertAndSend() 메소드를 사용하여 메시지를 RabbitMQ로 전송한다. // 메시지는 chat.exchange 로 전송되며, 라우팅 키는 room. + 메시지의 방 ID로 구성된다. rabbitTemplate.convertAndSend(CHAT_EXCHANGE_NAME, "room." + roomId, message); } else { log.error("Failed to create chat message. User might not be in the chat room. User: {}, Room: {}", message.getSender(), message.getRoomId()); } return ResponseEntity.ok().body(msg); } catch (Exception e) { log.error("Error processing message: ", e); throw new ChatException(e.getMessage()); } } @Configuration @EnableRabbit @RequiredArgsConstructor public class RabbitConfig { // Queue (큐): RabbitMQ에서 메시지를 저장하는 장소 private static final String CHAT_QUEUE_NAME = "chat.queue"; // Exchange (교환기): 메시지를 Queue로 라우팅(보내는) 역할 private static final String CHAT_EXCHANGE_NAME = "chat.exchange"; // Routing Key (라우팅 키): Exchange가 메시지를 어떤 Queue로 보낼지를 결정하는 데 사용 private static final String ROUTING_KEY = "room.*"; @Value("${spring.rabbitmq.host}") private String host; @Value("${spring.rabbitmq.port}") private int port; @Value("${spring.rabbitmq.username}") private String userName; @Value("${spring.rabbitmq.password}") private String password; // Queue 등록 @Bean public Queue queue() { return new Queue(CHAT_QUEUE_NAME, true); } // Exchange 등록 @Bean public TopicExchange exchange() { return new TopicExchange(CHAT_EXCHANGE_NAME); } // Exchange와 Queue바인딩 @Bean public Binding binding(Queue queue, TopicExchange exchange) { return BindingBuilder .bind(queue) .to(exchange) .with(ROUTING_KEY); } // RabbitMQ와의 메시지 통신을 담당하는 클래스 @Bean public RabbitTemplate rabbitTemplate() { RabbitTemplate rabbitTemplate = new RabbitTemplate(connectionFactory()); rabbitTemplate.setMessageConverter(jsonMessageConverter()); rabbitTemplate.setRoutingKey(ROUTING_KEY); return rabbitTemplate; } // RabbitMQ와의 연결을 관리하는 클래스 @Bean public ConnectionFactory connectionFactory() { CachingConnectionFactory factory = new CachingConnectionFactory(); factory.setHost(host); factory.setPort(port); factory.setVirtualHost("/"); factory.setUsername(userName); factory.setPassword(password); return factory; } // Queue를 구독(Subscribe)하는 걸 어떻게 처리하느냐에 따라 필요함. 당장은 없어도 됨. @Bean public SimpleRabbitListenerContainerFactory simpleRabbitListenerContainerFactory(ConnectionFactory connectionFactory, MessageConverter messageConverter) { SimpleRabbitListenerContainerFactory factory = new SimpleRabbitListenerContainerFactory(); factory.setConnectionFactory(connectionFactory); factory.setMessageConverter(messageConverter); return factory; } @Bean public RabbitMessagingTemplate rabbitMessagingTemplate(RabbitTemplate rabbitTemplate) { return new RabbitMessagingTemplate(rabbitTemplate); } // 메시지를 JSON형식으로 직렬화하고 역직렬화하는데 사용되는 변환기 // RabbitMQ 메시지를 JSON형식으로 보내고 받을 수 있음 @Bean public Jackson2JsonMessageConverter jsonMessageConverter() { //LocalDateTime serializable을 위해 ObjectMapper objectMapper = new ObjectMapper(); objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, true); objectMapper.registerModule(dateTimeModule()); Jackson2JsonMessageConverter converter = new Jackson2JsonMessageConverter(objectMapper); return converter; } @Bean public Module dateTimeModule() { return new JavaTimeModule(); } } ... @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry .setErrorHandler(stompExceptionHandler) // 소켓 연결 URI다. 소켓을 연결할 때 다음과 같은 통신이 이루어짐 .addEndpoint("/ws/chat") .setAllowedOriginPatterns("http://localhost:5173") // SocketJS를 통해 연결 지원 .withSockJS(); } @Override public void configureClientInboundChannel(ChannelRegistration registration) { log.info("--------------"); log.info("동작함"); registration.interceptors(stompHandler); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { // url을 chat/room/3 -> chat.room.3으로 참조하기 위한 설정 registry.setPathMatcher(new AntPathMatcher(".")); registry.setUserDestinationPrefix("/sub"); // 클라이언트 구독 경로 // RabbitMQ 브로커 리레이 설정 registry.enableStompBrokerRelay("/exchange", "/queue", "/topic") .setRelayHost(host) .setRelayPort(61613) .setClientLogin(userName) .setSystemPasscode(password) .setSystemLogin(userName) .setSystemPasscode(password); } ... } 이렇게 구성했는데 rabbitMQ는 도커 컴포즈로 구성했습니다. 근데 다음과 같은 문제가 발생했는데 Chat.jsx:31 GET http://localhost:8080/ws/chat/285/4mxcvol4/jsonp?c=_jp.apvvzrr net::ERR_ABORTED 404 (Not Found) chat:1 Refused to execute script from ' http://localhost:8080/ws/chat/285/4mxcvol4/jsonp?c=_jp.apvvzrr ' because its MIME type ('') is not executable, and strict MIME type checking is enabled. 이렇게 계속해서 연결이 끊깁니다 어떻게 해야하나요?

  • rabbitmq
  • react
  • stomp
  • websocket
  • springboot
  • restapi
  • jwt
  • socketjs
유요한 댓글 1 좋아요 0 조회수 77

5-1 학습링크

미해결

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

pdf에서 5-1링크 클릭햇는데 codeSandBox 페이지가 없다고 뜹니다. 새로운 링크 없나요??ㅠㅠ

  • react
  • redux
  • node.js
  • sass
  • swr
댓글 1 좋아요 1 조회수 284

useState vs useEffect 활용관련 문의

해결됨

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

useState는 componet의 구성요소의 상태값일 관리하고 상태변환시에 biz처리 및 관련된 자식 구성요소로 props 전달을 하고자 할때 사용하는 것으로 강의를 이해했습니다. 반면 useErrect는 라이프싸이클을 통해 biz 로직을 구현하고자 할때 사용하는 것으로 아래 이했습니다. mount - 초기 실행시 (초기 데이터 설정-db select통한 값을 설정 처리 등) update - state에서 관리되는 상태에 대한 실시간 확인과 처리(useState의 setXXXX는 비동기로 실시간 값이 어려워 useEffect를 활용해 v실시간 alidation을 체크하는데 있을것으로 이해하였습니다. 질문) 실무에서 useEffect의 어떻게 활용하나요? 지금은 hook을 배우는 단계라 실무에서 어떻게 사용될지도 많이 궁금합니다.

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

Dynamic Array 의 size 정보가 저장되는 곳

해결됨

코딩테스트 [ ALL IN ONE ]

안녕하세요 좋은 강의 감사드립니다! 강의 9:20 "우리는 Dynamic Array의 size를 미리 알고 있기 때문에" 문장에서 궁금증이 생겼습니다. 우리는 Dynamic Array의 size를 머리속에 기억 하고 있기 때문에 a.append(4) 를 했을때 O(1)인것을 알지만 컴퓨터의 경우 a.append(4)를 했을때 Dynamic Array의 size를 어떻게 알고 값을 저장할까요?? 따로 저장이 될까요? size를 아는 경우 배열 포인터(배열 변수)에 저장된 초기 주소값 + size*Byte(자료형에 따라 다름) 으로 바로 접근 가능 하여 O(1) 이라고 납득이 되지만 size를 모를 경우 마지막 데이터가 있는 주소값으로 바로 가려면 array 를 전부 훑어서 O(n)이 될 수 있지 않을까 궁금했습니다. a 라는 배열 포인터에 초기 주소값과 size 정보를 저장해놓는다. 배열 포인터가 아닌 다른곳에 정보를 저장한다. array를 전부 훑는건 O(1)이다. 1번, 2번, 3번 중에 어떤 걸까요?? 그리고 검색하다 size와 capacity 에 대한 내용을 봤는데 capacity가 Dynamic array에서 처음 선언할때 비어 있는 index를 포함한 크기 로 알고있습니다. 위 제가 판단한것에서 1번, 2번 일경우 size 뿐만 아니라 capacity 정보도 저장해놔야 할것 같은데 저장한다면 어디에 저장 하는 걸까요?? 저장을 안한다면(3번) 직접 빠르게 훑어보고 값을 추가 or 삭제 하는 걸까요?? 강의 후반부에 설명해 주시는 내용이라면 죄송합니다.. 항상 감사합니다!

  • python
  • 코딩-테스트
  • 알고리즘
s3490147 댓글 2 좋아요 2 조회수 178

커리큘럼 작업형2 모의문제1 18분:-7지점 문의.

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 제목: 커리큘럼 작업형2 모의문제1 18분:-7지점 문의. 내용: 데이터전처리 & 피처엔지니어링을 합친 코너에 baseline, label, one-hot이 소개되는데 이들이 각각 전처리인지 피처엔지니어링 절차에 해당하는지를 몰라 gpt에 물어보니 baseline은 6) 모델 선택,훈련,평가,최적화 Label은 5) 검증 데이터 분리 및 6) 모델 선택, 훈련, 평가, 최적화 One-hot은 3) 데이터 전처리 및 4) 피처 엔지니어링에 해당한다고 하네요. 이것은 머신러닝 순서라고 하신 아래의 1~7에서 강의에서는 보시다시피 3)~4)단계인 데이터전처리&피처엔지니어링 코너에서 소개하고 있는데 그 내용과 다른 설명 입니다. (강의에서의 절차 정리) 1) 문제정의, 라이브러리/데이터 불러오기(로드) 2) 탐색적 데이터분석(EDA) 3) 데이터 전처리(결측값제거, 이상치제거) 4) 피쳐엔지니어링(모델 성능(예측력) 향상) 5) 검증데이터분리(Train/validation나누기) 6) 모델 선택,훈련,평가,최적화 7) 예측 8) csv파일 생성 그렇다고 강의에서 구분하여 설명하지 않으셨고, 주석으로 설명이 달린 것이 없이 왔다갔다 하면서 설명을 하시니 도대체 각각이 어떤 절차에 해당하는지 그 차이를 모르겠고, 지금 어떤 절차 중인지 혼동되며 정리를 하려는데 정리가 안되고 있습니다. 정리를 하기 위해서는 절차별 업무수행 프로세스를 정리해야 하는데 '지금과 같은 상황(절차별 프로세스가 아닌 동일한 유형을 묶어서 설명'하는 방식에서는 절차에 대한 정리를 할 수 없게 됩니다. 정리를 하면 강의 뒤에 가서는 다시 앞으로 가서 수정하기를 반복하시니 정리 했던 것을 다시 정리해야 하거나 정리가 안되는 현상이 자주 발생합니다. 절차적 프로세스를 정리하는 데 유사한 유형별 모음이라면서 서로 다른 절차에 속한 것들을 묶어서 설명하려면 혼동되지 않도록 설명을 적시해 줘야 하나 반복적으로 그러한 습관이 나타나지 않는 것을 보면 이러한 점을 의식하지 않는 것 같다는 인상입니다. 실무에 대한 이론 정리 보다는 실무적인 접근을 하시는 것으로 보이며 그래서 실수하는 것을 보여주기 위해 위아래를 오르내리며 수정과정을 되풀이 하여 보여주시는 데 동시에 절차(프로세스)대로 이론을 정리하는 입장에서는 앞에서 정리한 것이 매번 날라간다는 것이고 계속 이런 식이면 정리하기가 어려워 지죠. 현재 시점에서 보면 미래에 발생할 것을 먼저 지금 정리하는 것이 되므로 시점이 꼬이므로 혼선스러워 집니다. 이 강의에서는 정리하는 개념에 대한 고민은 없어 보입니다. 일단 chatgpt의 답변이 맞는지부터 확인을 요청 드립니다.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
강민균 댓글 2 좋아요 0 조회수 117

강의 듣다가 유료pycharm에 비해 vscode지원기능이 아쉬워서 확장프로그램 만들었는데 여기 공유해도 될까요?

미해결

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

04-10 장고 기본 CBV API (Generic display views) - ListView 강의를 듣던 중 index.html 에서 {% load django_bootstrap5 %}나 {% bootstrap_pagination %} 를 타고 들어가서 소스를 보는 기능이 전체검색 말고는 vscode에서 다른 방법이 없는 것 같아서 유료버전pycharm 처럼 흉내내서 확장프로그램을 만들어봤습니다. 저만 쓰게 될거같아서.. 필요하신 분들께 알리고 피드백을 받고 싶은 마음에 여기에 링크를 남기고 공유해도 혹시 괜찮을까요? https://github.com/southglory/python-package-definition-navigator https://marketplace.visualstudio.com/items?itemName=QG-devramyun.python-package-definition-navigator 감사합니다.

  • react
  • python
  • django
  • web-api
  • htmx
coolbirds 댓글 1 좋아요 0 조회수 183

npx expo start 오류건...

해결됨

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

터미널에서 npx expo start 하면...아래의 오류가 납니다. 휴대폰 화면은 뜨는데요. 빨간색오류가 뜨면서 Welcome! 화면이 뜨질 않습니다. 무엇일까요?

  • javascript
  • react
  • node.js
  • react-native
  • typescript
nanyahoo 댓글 3 좋아요 0 조회수 357

터미널 npm install -g create-react-app 작성 후 오류

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

터미널에서 npm install -g create-react-app 작성 후에 아래와 같은 메세지가 뜹니다. 이럴 경우 어떻게 해야 하나요?? adminui-MacBook-Pro:grab-market-web admin$ npm install -g create-react-app npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported. npm warn deprecated uid-number@0.0.6: This package is no longer supported. npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated fstream@1.0.12: This package is no longer supported. npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. changed 64 packages in 968ms 4 packages are looking for funding run npm fund for details adminui-MacBook-Pro:grab-market-web admin$

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
새싹 댓글 1 좋아요 0 조회수 441

머신러닝 순서 질문 드립니다.

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 학습 커리큘럼에는 데이터불러오기, EDA 전처리 피처엔지니어링 모델링/평가(분류/회귀) 평가지표 머신러닝파트에서 정리하신 순서는 불러오기 EDA 전처리 피처엔지니어링 검증데이터분리 모델학습,평가 등 예측 CSV파일 생성 이렇게 구성되었습니다. 커리큘럼과 학습정리 순서가 왜 다른지? 그럼 둘 중 뭐가 맞는가요? 커리큘럼 작업형2의 모의고사1 에서 머신러닝 풀다보면 불러오기-EDA-전처리-피처엔지니어링-검증데이터분리-모델학습,평가까지만 나가고 이 후 예측 부분을 작업하진 않으신 것 같습니다. 맞는지 확인 바랍니다. 설명이 프로세스대로 구분되지 않고 실습 형태로 위 아래 왔다 갔다 전개되어 단계별 경계를 구분할 수 없습니다.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
강민균 댓글 2 좋아요 0 조회수 132

누름틀 적용항목 vs 엑셀항목 간의 순서관련 질문

해결됨

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

섹션2 [응용] 엑셀문서 값을 필드에 입력하기 안녕하세요....선생님 만약 제가 관리하는 엑셀파일의 열별 정리순서가 ["이름", "주소", "연락처", "성별", "생일", "취미"] 인 파일을 이용하여, 한/글 누름틀 적용하여 ["이름", "성별", "생일", "취미"]만 추출하고자 한다면....어떻게 해야 하는지요? 저는 누름틀을 이용하면 엑셀파일에서 [이름, 성별,생일,취미]에 해당하는 열에서 값을 불러와 한/글로 가져오는 줄 알았습니다만....실제로 해보니 [이름,주소,연락처,성별]로 파일이 생성되더군요. 코딩없이 한/글 메일머지를 이용하면 엑셀의 항목과 한/글의 항목이 일치하는 값을 불러와 주던데...... 누름틀은 그렇지 않은 것인지...아니면 제가 실수한게 있는지 궁금합니다.

  • python
  • 한컴오피스
  • 누름틀
조현우 댓글 2 좋아요 1 조회수 619

붙혀넣기는 좀..

미해결

PySide6 파이썬 GUI

이 강의를 계속 봐도 되는 건가 하는 생각이 들었습니다.

  • python
  • gui
  • pyside6
simpan13 댓글 2 좋아요 0 조회수 136

npm run build 중 에러발생

미해결

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

id와 같이 사용하지 않는 객체를 생성했을 경우 빌드가 진행되지 않습니다. 정환쌤 같은경우 빌드를 하실때 저렇게 //를 하지 않아도 잘 빌드가 가능한데, 저는 에러가 발생하네요. 제가 설정과정을 놓친걸까요?

  • react
  • typescript
  • next.js
리꼬 댓글 3 좋아요 0 조회수 492

4.2.1 매매 시그널 정의 파일 다운로드 경로 문의

미해결

파이썬 주식 매매 봇으로 주식시장 자동사냥하기

4.2.1 매매 시그널 정의 삼성전자 실습데이터 파일 어디서 다운로드 할 수 있나요??

  • python
  • pandas
  • 차트분석
  • 퀀트
  • trading
sangyeop dong 댓글 3 좋아요 0 조회수 286

최근(어제) 질문이 사라졌습니다.

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 어제 제가 올린 질문이 이곳에 노출이 안 되었고, 24년 11월 29일이 마지막 질문으로 11월 29일 이후 질문이 노출 되지 않았습니다.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
강민균 댓글 2 좋아요 0 조회수 86

Streaming을 사용하지 않아도 미리 정적인 컴포넌트들을 서버에서 응답을 받습니다

미해결

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

loading.tsx나 Suspense를 사용했을 때, Next의 Streaming이 동작하여 병렬적으로 미리 준비된 컴포넌트는 사용자의 브라우저에서 먼저 보이게 되고, fetch가 완료된 이후에 서버에서 데이터를 클라이언트로 보내줘서 사용자가 보이는걸로 알고 있습니다. 하지만, 개발자 도구 Network 탭을 확인해본결과 새로고침을 하였을 때, loading.tsx나 Suspense를 사용을 모두 빼고서 prefetchQuery와 HydrationBoundary, useQuery만을 사용했을 시 Streaming 동작 방식처럼 fetch문 실행이 완료되기 전에 미리 NavMenu나 글자 같이 정적인 요소들이 fetch가 끝나기 전에 이미 브라우저에 도착해있는걸 확인하였습니다. 하지만, 딱 한가지 다른 점은 후자 같은 경우는 정적인 컴포넌트가 브라우저에 도착했음에도 화면에 보이질 않고, 전자 같은 경우는 로딩창이나 다른 정적인 요소들은 이미 화면에 미리 보입니다. 그렇다면, Next 15 공식문서에 있는 fetch 실행이 끝날때까지 HTML 파일을 서버 사이드에서 렌더링 하는 것이 Blocking 된다는 논리가 이해가 되질 않습니다. ( https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming ) 위의 코드는 /home의 추천탭을 기준으로 확인하였습니다. 이러한 현상이 발생하는 원인이 무엇인지 알 수 있을까요?

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

평가지표 문의

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 이 강의를 보면서 이 강의가 학습을 시키기 위한 정식 강의인지, 대충 이런 게 있다고 그냥 넘어가기는 그렇고 적당히 소개하고 말려고 한 강의인가요? 엄청난 속도로 위아래 올라갔다 내려가며 쫓기듯이 강의하시는데... 이것이 최선인건지,, 초심자를 위한 최적화된 강의가 과연 맞는 것인지.. 정신없어서 뭐가 뭔지 손을 못 대겠던데요. 교안으로 제공하면 출력해서 노트하며 복습이라도 할 텐데 이거 뭐 어쩌란 건지 도무지 모르겠습니다. 초급자에게 이 강의를 이해 시키려고 하신 강의 맞으신가요? 또는 이 강의를 이해하지 못하면 어떻게 되는 걸까요? 이 강의를 어떻게 해석해야 하는지 설명을 요청 드립니다. 빅분기가 결국 결과물을 시각화 하는 과정인데 강의에서는 말로만 하고 시각화된 자료도 제공이 되야 효율적이지 않을까 합니다. 따라하는 것도 따라하는 것이지만 머리에 한계가 있잖아요. 강사는 아는 내용을 막힘없이 설명하는 것이고, 초심자는 말하는 족족 그대로 머리에 익혀지지 않잖아요.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
강민균 댓글 2 좋아요 0 조회수 133

7-5. 메모 삭제 기능에 문제가 있습니다.

미해결

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

이슈 함수: deleteMemo 이슈 흐름: "+" 버튼 클릭, 새로운 메모 아이템(Untitled)생성 → memo 2 삭제 → memo 1 삭제 이슈 내용: Untitled 메모 아이템이 있음에도 "메모가 없습니다" 로 처리됨. 이유: 삭제 시 배열의 길이가 달라지면서 index 에 영향이가는데 selectedMemoIndex 값은 그에 따라 변하지 않아서 단순히 index === selectedMemoIndex 의 조건문으로 만족하지 않음. 해결방법: 삭제 시 selectedMemoIndex 에도 새로운 값을 넣어줘야함. 저는 아래와 같이 해결했습니다. if (index > selectedMemoIndex) { setSelectedMemoIndex(selectedMemoIndex + 1); } else if (index < selectedMemoIndex) { setSelectedMemoIndex(selectedMemoIndex - 1); } else if (index === selectedMemoIndex) { setSelectedMemoIndex(0); }

  • react
  • redux
  • node.js
  • sass
  • swr
김찬기 댓글 0 좋아요 1 조회수 251

value_counts와 count 차이

미해결

공공데이터로 파이썬 데이터 분석 시작하기

똑같은 빈도수를 구하는 문제에서도 어떨 때는 value_counts()를 사용하고 어떨 때는 그냥 count()를 사용하시는데 차이가 궁금해요

  • python
  • pandas
  • numpy
댓글 2 좋아요 0 조회수 453

실습링크

미해결

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

실습 링크 들어가니깐 안됩니다.. 새로운 링크 알려주세요

  • react
  • redux
  • node.js
  • sass
  • swr
댓글 1 좋아요 0 조회수 336

인기 태그

인프런 TOP Writers

주간 인기글