Frontend

tRPC with Next.js 14

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1716457407086" alt="until-193"><blockquote><p>react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension</p></blockquote><p>최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...</p><p>본인들의 말에 의하면 <strong>리액트 개발 생산성을 8% 증가</strong> 시킬 수 있다고 한다...</p><p>그것은 바로 locator js... 브라우저에서 특정 영역의 컴포넌트 코드 위치를 찾고자 할때 유용하게 사용할 수 있다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">홈페이지</a>에 가면 설치하지 않고 실제로 사용해볼 수 있으니 궁금하면 가서 사용해보자.</p><h1>사용법</h1><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://chromewebstore.google.com/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi">크롬 웹스토어</a>에서 locator js를 설치해주면 설치해주고 홈페이지에 나와있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">가이드</a>를 참고하면 된다.</p><p>본인의 개발환경을 띄우고, 브라우저에서 윈도우에서는 <code spellcheck="false">alt</code> , 맥에서는 <code spellcheck="false">option</code> 을 누르고 특정 영역을 클릭하면 바로 찾아준다.</p><hr><h1>후기</h1><p>근데 devDependency로 설치해줄 만큼 유용한지는 잘 모르겠음</p><p></p>

react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우

브라우저에서 컴포넌트 코드 위치를 찾아주는 extension, Locator JS

📚 BOOK

🎨 PUBLISHING

CI/CD

⚛️ React

<p>until 에서는 현재 os에 따라 <code spellcheck="false">cmd + k</code> 또는 <code spellcheck="false">ctrl + k</code> 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.</p><img src="https://image.until.blog/morethanmin/article/1728463552341.gif" data-width="100%" data-align="center"><p>이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.</p><h2>userAgent</h2><p>navigator.userAgent 의 정보를 활용하면 os정보를 가져올 수 있어요. <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent">MDN</a>에서는 아래와 같이 설명하고 있어요.</p><blockquote><p>The <code spellcheck="false">Navigator.userAgent</code> read-only property returns the user agent string for the current browser.</p></blockquote><p>그럼 간단하게 이 정보를 통해 os 정보를 가져오는 useOs hook을 만들어볼까요?</p><h2>useOs (in Next.js)</h2><p>server side에서 동작할 수 있기 때문에 state로 감싸고 useEffect에서 값을 가져올 수 있도록 처리해주었어요.</p><p>만약 client side에서 동작하는 경우에는 state로 관리될 필요가 없으니 참고해주세요. 언제든 window 객체에 접근할 수 있기 때문이에요.</p><pre spellcheck="false"><code class="language-typescript">import { useEffect, useState } from 'react'

const macosPattern =
  /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)|(iPhone)|(iPad)|(iPod)/i

const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)/i

const getOS = () =&gt; {
  if (typeof window === 'undefined') {
    return null
  }

  const { userAgent } = window.navigator

  if (macosPattern.test(userAgent)) {
    return 'macos'
  }
  if (windowsPattern.test(userAgent)) {
    return 'windows'
  }

  return null
}

const useOs = () =&gt; {
  const [os, setOs] = useState&lt;'macos' | 'windows' | null&gt;(null)

  useEffect(() =&gt; {
    setOs(getOS)
  }, [])

  return os
}

export default useOs</code></pre><h2>주의할 점</h2><p>MDN에서는 이 userAgent를 사용하는 것에 대해서 아래와 같이 주의사항을 안내하고 있어요.</p><blockquote><p>Browser identification based on detecting the user agent string is <strong>unreliable</strong> and <strong>is not recommended</strong>, as the user agent string is user configurable. For example: ...</p></blockquote><p>즉, 이 값은 유저에 의해 쉽게 변경될 수 있는 값이고 수정이 가능하다는 내용이에요.</p><p>따라서 서비스의 동작에 영향을 미칠 수 있는 곳에서는 사용하지 않는 것이 좋겠습니다.</p>

until 에서는 현재 os에 따라 cmd + k 또는 ctrl + k 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.userAgentnavigator.userAgent 의 정보를 활용하면 o

react에서 현재 os 확인하기 (useOs)

🖥 백엔드

<h1><strong>들어가기 전에</strong></h1><p>Nest.js는 Node.js 진영에서 널리 쓰이고 있는 서버 프레임워크이다.</p><p>그리고 이런 서버를 클라우드 환경에 배포하기 위해서는 AWS EC2, Oracle Cloud 등의 컴퓨팅 인스턴스 위에 올리는 방법이 정석이겠다.</p><p>&nbsp;</p><p>하지만 Nest.js는 서버리스를 지원하고, Vercel은 서버리스를 지원한다.<br>이를 이용해서 무료로 간단히 Vercel에 서버를 배포할 수 있다.</p><p></p><h1>방법</h1><p>방법 자체는 간단하다. 프로젝트 최상단에&nbsp;<code spellcheck="false">vercel.json</code>을 만들고 다음과 같이 작성한다.</p><pre spellcheck="false"><code class="language-json">{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "DELETE"
      ]
    }
  ]
}</code></pre><p><span>그 후 </span><code spellcheck="false">npm install -g vercel</code><span> 을 실행한 후, 프로젝트 최상단 경로에서 </span><code spellcheck="false">vercel .</code><span>를 실행하면 완성된다.</span></p><p></p><h1>트러블 슈팅</h1><h2>Cannot find module</h2><img src="https://image.until.blog/octoping/article/1730787106060.png" data-width="75%" data-align="center" alt="1972"><p><span>배포를 했지만 다음과 같은 오류가 떠서 처음에 큰 고생을 했다.</span></p><p><span>Vercel에서 로그를 확인해보니 아래와 같은 에러 로그가 있었다.</span></p><pre spellcheck="false"><code class="language-log">2023-08-18T17:52:14.322Z	undefined	ERROR	Cannot find module 'src/infra/prisma/PrismaService'
Require stack:
- /var/task/src/feed/feed.module.js
- /var/task/src/app.module.js
- /var/task/src/main.js
2023-08-18T17:52:14.323Z	undefined	ERROR	Did you forget to add it to "dependencies" in `package.json`?
RequestId: 059dec36-4319-4851-9c23-3ecf01978f18 Error: Runtime exited with error: exit status 1
Runtime.ExitError</code></pre><img src="https://image.until.blog/octoping/article/1730787132600.png" data-width="100%" data-align="center" alt="1974"><p>분명 잘 존재하는 모듈을 발견하지 못하고 있다고 에러가 떴다.</p><p>왜;;인지 도저히 알기가 어려워 많이 헤맸는데, 문제는 내 import 문에 있었다.</p><pre spellcheck="false"><code class="language-typescript">import { PrismaService } from '@/infra/prisma/PrismaService';</code></pre><p>다음과 같이 path alias를 사용해서 절대 경로로 import 하는 경우 Vercel이 경로를 인식을 못하는 이슈였다.</p><p></p><p><code spellcheck="false">src/infra/prisma/PrismaService</code>&nbsp;처럼 @를 안 쓰고 절대경로로 쓰더라도 마찬가지였다. 상대경로로 작성해야 한다!</p><p></p><h2>Swagger 페이지 404 에러 (검증 못 해봄)</h2><p><span>다른 페이지는 잘 나오지만 Swagger 페이지만 아무것도 안 나오는 이슈 (404 에러)가 발생한다.</span></p><pre spellcheck="false"><code>Uncaught ReferenceError: SwaggerUIBundle is not defined
    at window.onload</code></pre><p>개발자 도구를 켜보면 이런 로그가 나온다.</p><p>C# 쪽 스웨거에서도 한번 제보된 문제이긴 하다. swagger ui 파일이 서버리스에 올라가기에는 너무 크다는 이슈다.</p><a data-type="bookmark" href="https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb" target="_blank"><div class="content"><div><div class="title">swagger-ui-bundle.js too large for AWS Lambda and ALB</div><div class="description">Updated to .NET Core 3.1 and the latest version of Swashbuckle but found the swagger UI wasn't working correctly.  The swagger-ui-bundle.js was failing to load with a 502.  Tracked this down to a A...</div></div><div class="href">https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb</div></div><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"></a><p>따로 CDN에 swagger js나 css를 올려놓고, 서버리스에 올리는 대신 받아오는 방식으로 사용해볼 수 있겠다는 생각인데.</p><p></p><pre spellcheck="false"><code class="language-typescript">const CSS_URL = "cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css";
swaggerUI.setup(specs, { customCssUrl: CSS_URL })</code></pre><p>이런 방식으로 사용해볼 수 있다는 듯 하다.</p><a data-type="bookmark" href="https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943" target="_blank"><div class="content"><div><div class="title">When deploying swagger on vercel on nodejs it does not show UI · Issue #8461 · swagger-api/swagger-ui</div><div class="description">This is How it does look like this and I do not know how to fix this issue. Q&amp;A (please complete the following information) OS: M1 Pro Browser" Chrome, Safari Version: 22 Method of installation: np...</div></div><div class="href">https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943</div></div><img src="https://opengraph.githubassets.com/3d796af99bd52776acde541aa8b0f43379af9c671dc58fe420ea1314dd1a51a4/swagger-api/swagger-ui/issues/8461"></a><p></p><h1>TMI</h1><p>실제로 until을 처음 개발할 당시에 서버비를 줄이기 위해 다음 방법으로 한동안 개발했었다..</p><p>지금은 AWS + Kotlin Spring으로 넘어갔지만, 그래도 당시에 고려했던 점들을 몇 가지 적어본다.</p><p></p><ol><li><p>NestJS의 경우 서버 실행 초기에 bootstrap하는 과정을 거치는데, 이걸 api가 들어올 때마다 해야한다면 꽤 무거운 작업일 수밖에?</p><p></p></li><li><p>서버리스로 구성할 경우 api가 들어올 때마다 함수가 실행되는 꼴이므로, 트래픽이 몰리는 경우 DB의 커넥션 풀을 굉장히 잡아먹을 가능성이 높다. 이는 서버리스의 고질적 문제이긴 하다.</p><ul><li><p>프로젝트의 persistence 라이브러리로 채택한 Prisma의 경우 이런 문제를 해결해준다고 공식 사이트에 적혀는 있다. 하지만 좀 걱정된다</p><img src="https://image.until.blog/octoping/article/1730788287259.png" data-width="100%" data-align="center" alt="1976"></li></ul></li></ol><p><br></p><p></p>

NestJS를 서버리스로 배포해서 무료로 사용해봅시다

NestJS 서버를 서버리스로 Vercel에 배포하기

<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>

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

[WebSocket] 실시간 Stateful 통신의 세계로

Cotuber에 도입된 AI 자막 생성 기능이 어떤 과정을 거쳐 만들어졌는지 공유합니다.