🖥 백엔드

<p>서버 프로젝트를 진행하다보면 숨겨야 할 키들이 다양하게 생기게 된다.</p><ul><li><p>DB URL, username, password</p></li><li><p>외부 API 키</p></li><li><p>jwt 키</p></li><li><p>oAuth 클라이언트 시크릿</p></li><li><p>등등..</p></li></ul><p>그리고 이런 요소들은 보통 다음과 같이 <code spellcheck="false">application.yml</code> 파일에 작성된다.</p><pre spellcheck="false"><code class="language-yaml">  datasource:
    url: {url}
    username: {username}
    password: {password}
    driver-class-name: {driver}</code></pre><p>프로젝트의 코드에 이런 비밀번호가 적혀있다면 타인에게 소스코드를 공개할 수 없을 뿐 아니라, 보안 상 문제가 생길 수도 있다.</p><p>물론 어플리케이션에서 환경변수로 입력받을 수도 있다. 하지만 이런 키들이 많아질 수록 설정해야하는 환경 변수의 양도 너무 많아지고 번잡해지게 된다.</p><p></p><h1>Jasypt로 프로퍼티 암호화하기</h1><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.jasypt.org/">http://www.jasypt.org/</a></p><p>Jasypt는 개발자가 암호화 작동 방식에 대한 깊은 지식이 없어도 최소한의 노력으로 프로젝트에 기본적인 암호화 기능을 추가할 수 있는 자바 라이브러리다.</p><p>홈페이지에서 직접 스프링, 스프링 시큐리티와 통합하기 편리하다고 적혀있는데, 스프링 부트가 아니라 스프링에 대해 설명이 적혀있는 관계로 조금 설정이 복잡하다.<br><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.jasypt.org/spring31.html">http://www.jasypt.org/spring31.html</a></p><p>따라서 스프링 부트 버전으로 확인해보려고 한다.</p><p></p><h2>Spring Boot와 통합하기</h2><a data-type="bookmark" href="https://github.com/ulisesbocchio/jasypt-spring-boot" target="_blank"><div class="content"><div><div class="title">GitHub - ulisesbocchio/jasypt-spring-boot: Jasypt integration for Spring boot</div><div class="description">Jasypt integration for Spring boot. Contribute to ulisesbocchio/jasypt-spring-boot development by creating an account on GitHub.</div></div><div class="href">https://github.com/ulisesbocchio/jasypt-spring-boot</div></div><img src="https://opengraph.githubassets.com/5a1525ebf0a112f523ebf883aa65198ec94f17dea82658022b70ef7af28783b8/ulisesbocchio/jasypt-spring-boot"></a><p>다음의 멋진 깃허브 레포지토리를 참고한 내용이다.</p><p></p><h3>라이브러리 추가하기</h3><pre spellcheck="false"><code class="language-kotlin">implementation 'com.github.ulisesbocchio:jasypt-spring-boot-starter:3.0.5'</code></pre><p>먼저 이 플러그인을 <code spellcheck="false">build.gradle</code>에 추가해준다.</p><p></p><h3>Jasypt 설정 추가하기</h3><pre spellcheck="false"><code class="language-java">@Configuration
@EnableEncryptableProperties
public class JasyptConfig {
    @Value("${jasypt.encryptor.password}")
    private String password;

    @Bean("jasyptStringEncryptor")
    public StringEncryptor stringEncryptor() {
        PooledPBEStringEncryptor encryptor = new PooledPBEStringEncryptor();
        SimpleStringPBEConfig config = new SimpleStringPBEConfig();
        config.setPassword("password");
        config.setAlgorithm("PBEWITHHMACSHA512ANDAES_256");
        config.setKeyObtentionIterations("1000");
        config.setPoolSize("1");
        config.setProviderName("SunJCE");
        config.setSaltGenerator(new RandomSaltGenerator());
        config.setIvGenerator(new RandomIvGenerator());
        encryptor.setConfig(config);

        return encryptor;
    }
}</code></pre><p>다음과 같이 Config 파일을 추가해준다.<br>(깃허브 레포지토리의 공식 설명에 적혀있는 코드에서, 몇 중복 설정이나 불필요한 리플렉션을 대체했다)</p><p></p><h3>프로퍼티 암호화하기</h3><p>이제 프로퍼티를 암호화할 시간이다. 암호화는 다음 주소에서 사용할 수 있다.</p><a data-type="bookmark" href="https://www.devglan.com/online-tools/jasypt-online-encryption-decryption" target="_blank"><div class="content"><div><div class="title">Jasypt Encryption and Decryption Online</div><div class="description">Jasypt online free tool for encryption and decryption.This tool supports one way and two way password encryptor using Jasypt as well as matching encrypted password using Jasypt. </div></div><div class="href">https://www.devglan.com/online-tools/jasypt-online-encryption-decryption</div></div><img src="https://destatic.blob.core.windows.net/images/logo.webp"></a><pre spellcheck="false"><code class="language-yml">cloud:
  aws:
    region: ap-northeast-2
    credentials:
      access-key: ABCDEFGHIJKLMNOP</code></pre><p>다음과 같은 설정이 있었다고 가정해보자.</p><img src="https://image.until.blog/octoping/article/1729676336649.png" data-width="100%" data-align="center" alt="1867"><p>다음과 같이 <code spellcheck="false">Enter Plain Text To Encrypt</code> 부분에 암호화 하고 싶은 텍스트를 넣는다. 그 후 Type은 <code spellcheck="false">Two Way Encryption</code>을 지정해주고 (스프링에서 다시 복호화해서 쓸 수 있어야 하니..) <code spellcheck="false">Enter Secret Key</code>에 내가 원하는 암호화 키를 적어주자.</p><p>마무리로 암호화 버튼을 눌러주면 내가 지정해준 암호화 키로 풀 수 있는 암호화된 문자열이 생성된다.</p><pre spellcheck="false"><code class="language-yaml">cloud:
  aws:
    region: ap-northeast-2
    credentials:
      access-key: ENC(Q8X55qnH5/9b1H+9yWOdFXqqkbFvgsjjn8FVrv9xazg=)</code></pre><p>이 문자열을 다음과 같이 대체해주자. <code spellcheck="false">ENC(암호화 결과)</code> 와 같이 ENC()로 감싸서 넣어주면 된다.</p><p></p><h3>환경변수로 암호화 키 지정하기</h3><p>마지막으로, 암호화에 사용했던 시크릿 키를 환경변수로 넣어주자.</p><p>앞에서 <code spellcheck="false">@Value("${jasypt.encryptor.password}")</code>라고 코드를 작성했는데, 이와 같이 <code spellcheck="false">jasypt.encryptor.password</code>를 환경변수로 지정해주면 자동으로 해당 값이 @Value에 들어가게 된다.</p><p></p><img src="https://image.until.blog/octoping/article/1729913693066.png" data-width="100%" data-align="center" alt="1885"><p>인텔리제이 기준으로 다음과 같이 구성 편집에 들어가자.</p><img src="https://image.until.blog/octoping/article/1729913867231.png" data-width="100%" data-align="center" alt="1886"><p>그 다음 이렇게 자기가 사용했던 시크릿 키를 환경변수로 지정해주면 된다.</p><p>그러면 끝!</p><p></p><h3>마무리</h3><p>설정들을 전부 암호화 완료했다면, 서버를 구동해서 제대로 동작하는지 확인하여 마무리해보자</p>

백엔드도 public 레포지토리가 가능하다!!

Jasypt를 이용해서 프로퍼티의 시크릿 유출을 보호하기

Experience

<p>오늘은, 그동안 미뤄왔던 게임잼에서 만든 게임인 "MeMiMiC" 데모판을 인디게임들이 많은 해외 사이트인 <a target="_blank" rel="noopener noreferrer nofollow" href="http://Itch.io">Itch.io</a> 에 올려보려고 합니다.<br><br>간략하게 <a target="_blank" rel="noopener noreferrer nofollow" href="http://Itch.io">Itch.io</a> 가 무엇이냐면 인디 게임 유통 사이트라고하고, 누구나 올릴 수 있고 ,누구나 게임을 해볼 수도 있어서, 참신한 것들도 많고, 개인 습작이나 토이 프로젝트 용으로 만들어진 게임을 많이 업로드 하고 있습니다.<br><br>그리고, 상당한 규모의 온라인 게임잼이 이 사이트를 통해서도 몇몇개는 이루어 지고 있는 것으로 알고 있습니다.<br>게임쪽으로 예전에 많이 보고 배운 유투버 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/@Brackeys"><strong>Brackeys</strong></a><strong> </strong>가 올해 게임잼을 주최했던것으로도 알고 있습니다.</p><p>지금부터 인디 게임쪽으로는 유명한 사이트에 만들었던 미미믹을 올려보도록 하겠습니다.<br><br>들어가서 우상단에서 먼저 회원가입을 하고 로그인을 하면 초기 화면은 아래와 같습니다.</p><img src="https://image.until.blog/sin0105/article/1732122775895.png" data-width="100%" data-align="center" alt="2223"><p>가장먼저 사이트에 들어가면 DashBoard가 있습니다. <br>클릭하면 자신의 프로젝트 대시보드를 볼 수 있습니다.</p><img src="https://image.until.blog/sin0105/article/1732122809729.png" data-width="100%" data-align="center" alt="2224"><p>Create New Project를 누르면 여러 설정들이 나옵니다.<br>차근차근 설명해드리도록 하겠습니다.</p><img src="https://image.until.blog/sin0105/article/1732122880676.png" data-width="100%" data-align="center" alt="2225"><p>1. 타이틀 설정, 제목을 설정해줍니다.<br>2. Project URL 설정, 자동으로 정해줍니다. 보통은 본인아이디.itch.io/{프로젝트명} 으로 설정됩니다.<br>3. 커버 이미지 (대표이미지)를 설정할 수 있습니다. 여기서 대표 이미지를 설정하도록 해줍시다.<br>4. 게임 내 스크린 샷 이미지 및 홍보 이미지를 추가하는 버튼입니다. 되도록 추가해줍니다.</p><img src="https://image.until.blog/sin0105/article/1732122998255.png" data-width="100%" data-align="center" alt="2226"><ol start="5"><li><p>Pricing은 그대로 가격입니다. 무료로 배포할 것이라면, 0 or Donate를 선택합니다.</p></li><li><p>Upload 할 파일을 선택하는 것, 보통 zip으로 압축해서 올립니다.</p></li><li><p>게임에 대한 설명을 작성하는 공간, 키 세팅, 설명, 간단한 시놉시스 등을 작성할 수 있습니다.</p><img src="https://image.until.blog/sin0105/article/1732123090989.png" data-width="100%" data-align="center" alt="2228"></li><li><p>게임의 장르를 설정할 수 있습니다. ex) Action, Platformer 등등</p></li><li><p>게임의 태그를 설정할 수 있습니다. ex) Pixel-art, Indie 등등</p></li><li><p>코멘트를 달거나 하는 기능에 대한 설정인 것 같습니다. 따로 건들지 않았습니다.</p></li><li><p>Visibility &amp; Access 는 접근하거나 볼 수 있는 권한에 대한 설정인 것으로 보입니다. <br>Draft(초안) - 프로젝트를 편집할 수 있는 사람만 페이지를 볼 수 있습니다.<br>Restricted(제한) - 소유자 및 승인된 사용자만 페이지를 볼 수 있습니다.<br>Public(공개) - 누구나 페이지를 볼 수 있습니다.<br><br>우리의 목적은 웹포팅을 해서 더 많은 사람에게 접근성을 높이는 것이 목표기 때문에 Public으로 설정해주도록 합니다.</p></li></ol><p></p><p>** 간혹 이미지처럼 Public이 비활성화 된 경우가 있는데, Draft로 초안 발행한 뒤에 다시 Edit을 클릭하여 다시 프로젝트 세팅을 하면 활성화됩니다. <br>Public으로 세팅해주도록 합니다.</p><img src="https://image.until.blog/sin0105/article/1732123760672.png" data-width="100%" data-align="center" alt="2230"><p></p><p>이렇게, 만든 게임을 인디게임 사이트에 올려서 보다 많은 유저들에게 접근성을 높일 수 있는 가이드를 알려드렸습니다. <br><br>부디 도움되는 내용이 되었길 바랍니다. <br>감사합니다!<br><br>제가 추가해놓은 주소도 남기고 가도록 하겠습니다!<br>웹 버전은 PC에서 설치없이 즐기실 수 있습니다!</p><p><strong>- 빌드 다운로드 버전</strong></p><a data-type="bookmark" href="https://jongho105.itch.io/memimic" target="_blank"><div class="content"><div><div class="title">MeMiMiC by jongho105</div><div class="description"></div></div><div class="href">https://jongho105.itch.io/memimic</div></div><img src="https://img.itch.zone/aW1nLzE4NjYwMzg0LnBuZw==/original/hKB15Q.png"></a><p><strong>- 웹 버전 (무설치 버전)</strong></p><a data-type="bookmark" href="https://jongho105.itch.io/memimic-html" target="_blank"><div class="content"><div><div class="title">MeMiMiC_HTML by jongho105</div><div class="description"></div></div><div class="href">https://jongho105.itch.io/memimic-html</div></div><img src="https://img.itch.zone/aW1nLzE4NjYwNTc4LnBuZw==/original/FFEDjT.png"></a><p></p>

내가 만든 게임의 접근성을 올리는 방법

내가 만든 게임을 Itch.io에 업로드 하기

Frontend

<img src="https://image.until.blog/ninefloor/article/1729926668847.jpeg" data-width="100%" data-align="center" alt="1895"><h1><code spellcheck="false">path alias</code>?</h1><img src="https://image.until.blog/ninefloor/article/1729926632812.png" data-width="75%" data-align="center" alt="1894"><p>상대 경로를 이용하면 프로젝트가 커질수록 <code spellcheck="false">../../src</code> 처럼 복잡하여 구조파악이 어렵고 불편하다. 이를 해결하고 개발 경험을 증진시키는 해결 방법으로 대표되는 것이 path alias이다.</p><p>path alias는 경로에 별칭을 붙인다는 뜻으로, 상대경로로 인해 복잡해지는 import를 간략하게 만드는 방법이다. 보통 모듈 번들러에서 해당 기능을 지원하며, 번들러마다 적용하는 방법이 약간씩 다르지만 맥락은 대부분 비슷하다. TS를 사용하는 경우 추가로 <code spellcheck="false">tsconfig.json</code>에도 작성해주어야 한다.</p><p>path alias를 적용하면 해당 컴포넌트가 어디에 속해있는지 쉽게 파악할 수 있고 import 역시 편해진다.</p><blockquote><p> CRA의 경우 webpack을 사용하는데, webpack config를 따로 정의할 수 없기 때문에 eject하거나 craco와 같은 오버라이딩 라이브러리를 이용해 설정해야 한다.</p></blockquote><h1>Path Alias with Vite</h1><p>번들러 중 하나인 Vite에서도 마찬가지로 지원하는데, <code spellcheck="false">vite.config.js</code> 파일에 아래와 같이 작성하면 된다.</p><pre spellcheck="false"><code class="language-typescript">import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// &lt;https://vitejs.dev/config/&gt;
export default defineConfig({
  plugins: [react()],
  resolve: {
	// find: 해당 경로의 이름. 실제로 import문에 적용된다.
	// replacement: 경로 지정. 이때, path.resolve를 이용한다.
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      {
        find: '@components',
        replacement: path.resolve(__dirname, 'src/components'),
      },
      {
        find: '@assets',
        replacement: path.resolve(__dirname, 'src/assets'),
      },
      {
        find: '@page',
        replacement: path.resolve(__dirname, 'src/page'),
      },
      {
        find: '@util',
        replacement: path.resolve(__dirname, 'src/util'),
      },
      {
        find: '@recoil',
        replacement: path.resolve(__dirname, 'src/recoil'),
      },
    ],
  },
});
</code></pre><h3>VScode 자동완성 설정 (w/ JavaScript)</h3><p>단, 해당 설정을 하고 나면 VSCode는 이를 인지하지 못해 자동완성이 안된다. 이 때는 <code spellcheck="false">jsconfig.json</code>에 아래와 같이 path alias를 정의해주면 정상적으로 자동완성이 동작한다. (TS의 경우 <code spellcheck="false">tsconfig.json</code>)</p><pre spellcheck="false"><code class="language-jsx">{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
</code></pre>

쩜쩜슬래시 지옥을 벗어나보자

Path Alias with Vite (+ 자동완성 설정)

<p>언틸 서비스에는 블로그에 업로드되는 이미지들을 저장하기 위해 AWS의 S3 서비스를 이용하고 있다. 파일을 업로드하면 해당 파일의 이름에 따라 해당 파일에 액세스할 수 있도록 URL을 제공하고 있는데, 언틸에서는 따로 파일의 확장자를 지정하지 않고 저장하고 있었다.</p><p>덕분에 url이 이렇게 나오고 있었다.<br><code spellcheck="false">https://{언틸_S3_URL}/octoping/profile/1722161760968</code></p><p>물론 지금 생각해보면 왜 그랬을까 싶긴 한데... 열심히 개발하면서 아무 생각 없이 저질렀던 것 같다.</p><p></p><h1>코드</h1><pre spellcheck="false"><code class="language-kotlin">@Profile("real")
@Service
class S3ImageUploadService(
    private val s3Config: S3Config,
    private val imageDataSaver: ImageDataSaver,
    private val profileReader: ProfileReader,
) : ImageUploadService {
    override fun uploadImage(request: ImageUploadRequest): ImageUploadResult {
        val blog = profileReader.findById(request.blogId)
        val filePath = createFilePath(blog.username, request.fileType)
        val imgUrl = uploadImageAndGetUrl(filePath, request)
        
        // ...
    }

    private fun createFilePath(username: String, fileType: FileType): String {
        val fileName = System.currentTimeMillis().toString()
        return username + "/" + fileType.storePath + "/" + fileName
    }
}
</code></pre><p>다음이 해당 부분의 코드다.</p><p>블로그의 username과 파일의 타입 (프로필 사진인지, 아티클 사진인지 등)을 받아 저장될 path를 생성하는 함수가 보인다. 여기에서 <code spellcheck="false">fileName</code>은 현재 시각을 통해서 만들고 있는데. 보시다시피 확장자를 따로 삽입해주고 있지 않았다..</p><p>결국 이것들이 S3에 올라간 시점에서는 타입을 구분하기가 어려워진다. </p><p></p><h1>문제</h1><p>저장된 파일의 확장자가 없으니 S3의 url만 가지고는 어떤 파일인지를 알 수 없게 된다. 이것이 이미지인지, 동영상인지, 그냥 파일인지 알 수 없다. 물론 언틸의 경우 지금이야 이미지만 저장하고 있으니 괜찮지 않을까?</p><p></p><h2>WebP 변환 이슈</h2><p>이미지에도 종류가 여러 가지가 있다. jpg, png, webp, gif...</p><p>그 중 WebP는 구글이 웹페이지 로딩 속도를 높이기 위해 개발한 이미지 포맷인데, 기존 포맷들에 비해 용량을 크게 줄일 수 있어 많은 사이트들에서 웹 사이트의 로딩 속도를 향상시키기 위해 사용하고 있다.</p><p></p><p>그리고 보통 이미지의 WebP로의 변환은 <code spellcheck="false">CloudFront</code>의 <code spellcheck="false">Origin Response</code>에서 <code spellcheck="false">Lambda@Edge</code>를 통해 on-the-fly 방식으로 이루어지게 된다.</p><p></p><img src="https://image.until.blog/octoping/article/1729522382526.png" data-width="75%" data-align="center" alt="until-1840"><p>이 WebP로 변환하는 람다 함수에서는 <code spellcheck="false">Sharp</code>라는 라이브러리를 사용한다. 이 라이브러리는 다양한 확장자의 이미지를 지원하지만 그럼에도 지원하지 않는 이미지 포맷이 존재한다. (ex. BMP 파일)</p><p>따라서 WebP 변환을 진행하는 함수에서 확장자 검사를 진행해야 하는데, 앞서 소개한 상황에서는 확장자를 지니고 있지 않으니 다음을 진행할 수가 없다.</p><p></p><h1>해결</h1><pre spellcheck="false"><code class="language-kotlin">// Before
private fun createFilePath(username: String, fileType: FileType): String {
    val fileName = System.currentTimeMillis().toString()
    return username + "/" + fileType.storePath + "/" + fileName
}

// After
private fun createFilePath(username: String, fileType: FileType, contentType: String): String {
   val fileName = System.currentTimeMillis().toString()
   return username + "/" + fileType.storePath + "/" + fileName + "." + contentType.split("/")[1]
}</code></pre><p>다음과 같이 파일 이름에 확장자를 추가해주었다.</p><p><code spellcheck="false">MultipartFile</code>에서 넘어오는 <code spellcheck="false">contentType</code>은 <code spellcheck="false">image/png</code>와 같은 형식으로 주어지므로, <code spellcheck="false">contentType.split("/")[1]</code>와 같은 형식으로 파싱해주면 된다.</p><p></p><img src="https://image.until.blog/octoping/article/1729523218239.png" data-width="100%" data-align="center" alt="until-1841"><p>이제는 확장자가 잘 붙은 것을 볼 수 있다.. 😢<br>다시는 하지 말자 이런 실수</p>

S3에 파일을 업로드할 때는 꼭 확장자도 같이 붙여줍시다

S3에 파일을 업로드할 때 파일 이름에 확장자를 붙이지 않아 생긴 이슈 (feat. 이미지 최적화)

Workthrough for prev. projectForm Basics : Controlled Input &amp; UnControlled InputReact &amp; FormsReact-Hook-FormZod + ResolverForm Component &amp; UI Componentfourth project : React-Hook-Form Proj

#4. Form handling in React

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

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote><p>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.</p><p>최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.</p><p>관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</p></blockquote><h1>오픈 그래프?</h1><p>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.</p><p>일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.</p><blockquote><ul><li><p><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</p></li><li><p><code spellcheck="false">og:type</code> - The <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#types">type</a> of your object, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="http://video.movie">video.movie</a>". Depending on the type you specify, other properties may also be required.</p></li><li><p><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</p></li><li><p><code spellcheck="false">og:url</code> - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.imdb.com/title/tt0117500/">https://www.imdb.com/title/tt0117500/</a>".</p></li></ul></blockquote><p>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a></p><h1>Next.js에 적용하기</h1><p>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.</p><p>오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.</p><h2>정적인 페이지인 경우</h2><p>정적인 경우에는 static하게 적어주기만하면 된다.</p><pre spellcheck="false"><code class="language-typescript">// /pages/index.tsxfunction Feed() {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content="멋쟁이 상민처럼" /&gt;
&lt;meta property="og:description" content="개발자로 일하면서 배운 내용들을 기록합니다." /&gt;
&lt;meta property="og:url" content="&lt;https://morethanmin.com&gt;" /&gt;
&lt;meta
property="og:image"
content="정적인 이미지 경로"
/&gt;
&lt;/Head&gt;
&lt;FeedContainer/&gt;
&lt;/div&gt;
)
}</code></pre><p>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.</p><h2>동적인 페이지인 경우</h2><p>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.</p><pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content={post.title} /&gt;
&lt;meta property="og:description" content={post.summary} /&gt;
&lt;meta property="og:url" content={post.url} /&gt;
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt;
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>동적으로 OG 이미지 생성하기</h1><p>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.</p><img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464"><p>썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?</p><p>그런 오픈소스가 있는지 찾아보았다.</p><p>다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.</p><p>외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, <strong>url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api</strong>가 필요했다. 아래 처럼 말이다...</p><pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
{post.thumbnail ?
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt; :
&lt;meta
property="og:image"
content={https://썸네일-만들어주는-서비스/?title=${post.title}}
/&gt;
}
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>vercel/og-image</h1><p>여기저기 찾아보다 vercel/og-image를 발견했다. 해당 페이지에서 실제로 만들 수도 있고, url상으로 동적으로 생성해주는 기능도 지원하는 오픈소스이다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image.vercel.app/morethan-log.png?theme=light&amp;md=1&amp;fontSize=100px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg">예시</a></p><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1><p>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.</p><img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466"><p>그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.</p><h1>og-image-korean</h1><p>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li><p>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></p></li><li><p>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></p></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468"><p>물론 리서치하고 만드는데 걸린 시간을 생각해본다면…<strong> </strong>진작 게시글 썸네일을 200장 이상 만들었을 것 같다.</p><p>언틸에도 추후 적용해보면 좋을 것 같다.</p><p></p><p></p><p></p><p></p>

이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기

next 서비스에서 동적으로 게시글 썸네일 생성하기 (Open Graph)

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1718723304750" alt="until-541"><p>개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.</p><p>멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.</p><p>기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.</p><h1>마우스를 활용한 멀티 커서 단축키</h1><h2>클릭하여 하나씩 추가</h2><p>우선 가장 기초적인 방법부터 알려드릴게요.</p><p>맥에서는 <code spellcheck="false">Option</code> 키, 윈도우에서는 <code spellcheck="false">Alt</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터로 클릭하여 여러 커서를 추가할 수 있습니다.</p><p>이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일하게 타이핑이 됩니다.</p><p>제거하기 위해서는 커서에 <code spellcheck="false">Option</code> 또는 <code spellcheck="false">Alt</code> 키를 누르신 체로 다시 클릭해주시면 됩니다.</p><p><code spellcheck="false">esc</code> 를 눌러서도 멀티커서를 제거할 수 있어요.</p><h2>그래그하여 추가</h2><p>클릭이 아닌 드래그해서 추가하는 방법도 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift</code> 키, 윈도우에서는 <code spellcheck="false">Alt+Shift</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터를 드래그하여 여러 커서를 추가할 수 있습니다.</p><h1>키보드를 활용한 멀티 커서 단축키</h1><h2>일치하는 텍스트 모두 선택</h2><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+Shift+L</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+Shift+L</code> 키를 누르면 동일한 텍스트들에 모두 커서가 추가됩니다.</p><h2>순차적으로 일치하는 텍스트 선택</h2><p>위 기능의 경우 모든 텍스트가 선택된다면 해당 단축키를 사용하면 순차적으로 원하는 텍스트에 하나씩 커서가 추가됩니다.</p><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+D</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+D</code> 키를 누르면 드래그한 텍스트와 일치하는 다음 텍스트에 커서가 생기고 또 누르면 그 다음 텍스트에 커서가 추가되어요.</p><p>만약에 다시 되돌리기 위해서는 맥에서는 <code spellcheck="false">Command+U</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+U</code> 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있어요.</p><h2>현재 커서 위 또는 아래 줄에 추가</h2><p>현재 커서 위치에서 위 또는 아래 방향으로도 멀터 커서를 연속으로 추가할 수 있어요. 맥에서는 <code spellcheck="false">Command+Option+Up/Down</code>, 윈도우즈에서는 <code spellcheck="false">Ctrl+Alt+Up/Down</code>키를 누르시면 됩니다.</p><h2>그래그한 여러 줄의 맨 마지막에 멀터 커서 추가하기</h2><p>여러줄을 드래그한 상태에서 각 줄의 마지막 라인에 커서를 추가할 수 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift+I</code>, 윈도우에서는 <code spellcheck="false">Alt+Shift+I</code>를 키를 눌러 적용할 수 있어요.</p><p></p>

개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서

VSCode 멀티 커서로 생산성 높이기

📱 Webview

<h1>Problem</h1><p>웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.</p><img src="https://image.until.blog/morethanmin/article/1723285031061" data-width="50%" data-align="center" alt="until-1220"><p>관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.</p><h1>background-image 추가하기</h1><p>아래와 같이 video의 background-image로 poster를 추가해 임시로 대응해줄 수 있었다.</p><pre spellcheck="false"><code class="language-xml">      &lt;video
        src={video}
        poster={poster}
        style={{ width: 260, height: 200 }}
        autoPlay
        loop
        playsInline
        muted
        css={css`
          // mobile safari에서 poster -&gt; video로 전환 시 깜빡임이 발생해 추가
          overflow: hidden;
          background-image: url(${poster});
          background-position: center;
          background-size: cover;
        `}
      /&gt;</code></pre><p>placeholder -&gt; video로 전환될 때의 영역을 background image가 채워줌으로서 깜빡임 현상을 임시로 해결해 줄 수 있었다.</p><p>아래는 결과물이다.</p><img src="https://image.until.blog/morethanmin/article/1723285046176" data-width="50%" data-align="center" alt="until-1221"><p></p>

Problem웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -&gt; video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.background-image 추가하기아래와 같이 video