🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71"><p>항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.</p><h2>fnm이란?</h2><p>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.</p><h2>winget으로 fnm 설치하기</h2><p>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.</p><pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3><p>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3><p>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.</p><p><code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.</p><pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3><p>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.</p><p>관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.</p><pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3><p>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.</p><pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr><p>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.</p><p></p><p></p><p></p><p></p>

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

<p>WebSocket을 통해서 실시간 채팅을 넣기 위해 이 긴 이야기를 시작해야겠다.</p><p>먼저 HTTP와 WebSocket의 차이를 이해해야 한다. 이를 위해서는 두 가지를 비교해서 보여주는 요청&amp;응답 흐름을 보면 좋다. HTTP는 클라이언트가 요청을 보내면 서버가 응답을 반환한 뒤 연결을 끊는 구조로, Stateless한 방식이다. 반면 WebSocket은 클라이언트와 서버 간의 연결을 유지하면서 양방향으로 데이터를 주고받는 구조다. 실시간 채팅이나 알림 시스템에 웹소켓이 많이 쓰일 수밖에 없는 이유이다.</p><img src="https://image.until.blog/mushroombud/article/1731002142789.png" data-width="100%" data-align="center" alt="2005"><p>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://apidog.com/blog/what-is-websocket-and-how-it-works/">APIDOG</a></p><p><strong>Django Channels</strong></p><p>장고에서 에서 웹소켓 연결을 구축할 수 있도록 해주는 라이브러리다. 좀더 정확히 찾아보니 "비동기 통신" 을 핵심적으로 지원하는 라이브러리라고 한다. 채널의 핵심 구성 요소는 'Consumer'와 Channels Layer인데, Consumer는 기존 템플릿 엔진에서의 View와 비슷하게 특정 이벤트를 처리하는 역할을 하고, Channels Layer는 Consumer 간에 메시지를 주고받게 한다.</p><p>챗지피티의 도움을 받아 웹소켓을 적용하는 간단한 예제 코드를 가져와봤다. 이 코드에서 connect와 disconnect 메서드는 각각 연결이 열릴 때와 닫힐 때 호출되고, receive는 메시지를 받을 때 호출된다. 이 구조 덕분에 장고에서도 실시간 채팅 같은 기능을 구현할 수 있다.</p><pre spellcheck="false"><code>from channels.generic.websocket import AsyncWebsocketConsumer
import json

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()

    async def disconnect(self, close_code):
        pass

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        await self.send(text_data=json.dumps({
            'message': message
        }))</code></pre><p></p><p><strong>React에서 웹소켓 쓰는 법?!</strong></p><p>React에서는 useWebSocket Hook을 사용해 WebSocket을 쉽게 다룰 수 있다. 이 Hook은 서버와의 연결 상태를 관리하고, 메시지를 주고받는 기능을 제공한다. 아래 코드는 useWebSocket을 사용해 버튼 클릭 시 서버에 메시지를 보내고, 서버에서 받은 메시지를 화면에 표시하는 예제다. readyState는 WebSocket 연결 상태를 나타내며, 연결이 잘 되어 있는지 확인할 때 유용하다.</p><pre spellcheck="false"><code>import React, { useState, useCallback, useEffect } from 'react';
import useWebSocket from 'react-use-websocket';

export const WebSocketDemo = () =&gt; {

  const [socketUrl, setSocketUrl] = useState('wss://echo.websocket.org');
	const options = {
	  onOpen: () =&gt; console.log('연결이 성공적으로 열렸습니다.'),
	  onClose: () =&gt; console.log('연결이 닫혔습니다.'),
	  onError: (error) =&gt; console.error('웹소켓 에러:', error),
	  onMessage: (message) =&gt; console.log('수신된 메시지:', message.data),
	};
  const { sendJsonMessage } = useWebSocket(socketUrl, options, reconnectInterval: 1000,share: true,);</code></pre><p>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://enshrined-couch-1f4.notion.site/6-1d4a192e787b41bc8d0bbe79b07b0449#3f8ece29e3e34268a9ad6011d43e546b">멋쟁이사자처럼 세미나 자료 </a><s>아무리 찾아도 이만한게 없다</s></p><p>이렇게 하면 웹소켓 연결과 메시지 송수신을 단 몇 줄로 구현할 수 있다. sendMessage로 서버에 메시지를 보내고, lastMessage로 서버에서 받은 메시지를 즉시 확인할 수 있다.</p><p></p><p><s>useWebsocket 짱</s></p>

웹소켓 정복하기, 장고와 리액트에서 어떻게 구현되는지