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

매일 공부하는 습관을 만들기 위해 도전

(0917) TIL

<p>Git과 GitHub에 대해서는 학교 오픈소스 수업을 통해 잠깐 배웠었다.<br><br>그때 알게 된 것도 늦은 감이 있지만.. 제대로 공부 안 하고 학기를 끝냈다.</p><p><br><br>그냥 보면 대충 이건가 하고 사용하는 정도였다.<br><br>토이프젝을 깃허브에 커밋하고 푸시 하려다가 엉켜버렸다.<br><br>해결하려고 이거저거 누르고 시도하다가 나도 모르게 커밋 한 내용들을 푸시 하기 전에 다 삭제해버린 것 같다. 갑자기 vscode에 있던 코드들이 다 사라졌다... 이런,,</p><p></p><p>그래서 이번 기회에.. 제대로 git과 github를 제대로 알고 기존에 하던 hcj, 토이프젝을 시작하려고 한다.</p><p></p><p>공부를 하기 위해 방법을 찾다가 인프런에 들어갔다.</p><p><s>유튜브에 강의가 많았다. 너무 많아서 뭐가 좋은지 모르겠다..</s></p><p>일단 인프런에서 무료로 강의하는 git 관련 강의들을 다 관심을 누르고 다 확인한 결과</p><p>수강평도 많은 <strong>Git과 GitHub 시작하기를 수강신청했다. </strong><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/hscr">https://inf.run/hscr</a></p><p>이 강의를 완강한 후에는 아래 강의들에서 모르거나 더 필요 부분만 듣고, 깃헙 블로그는 한번 도전해 봐야겠다.</p><p>괜찮으면 글을 업로드해야겠다..ㅎㅎㅎ</p><img src="https://image.until.blog/swmg03/article/1718213519870" alt="until-469"><img src="https://image.until.blog/swmg03/article/1718213542730" alt="until-472"><p></p><img src="https://image.until.blog/swmg03/article/1718215736376" alt="until-474"><p>공부하다가 공유할 부분만 해야지,, 이걸 아직 제대로 알지 못했다니,,</p><p>후회는 그만하고 공부하자</p><p></p><p></p><p></p>

코드 날리고 깃 제대로 공부하기

Git과  GitHub

🍎 Mac

<p>맥북에서 터미널에서 code 커맨드라인을 지정해두고 해당 명령어를 통해 vscode를 실행하는데 실행할 때마다 dock에 vscode가 중복으로 생성되는 문제가 있었다.</p><img src="https://image.until.blog/morethanmin/article/1715356082565" alt="until-3"><p>한동안 습관적으로 지워주면서 사용하고 있다가 매번 귀찮다는 생각이 들어서 원인을 찾아보았다.</p><p>vscode 레포에서 동일한 증상을 겪고 있다는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/microsoft/vscode/issues/60579">이슈</a>를 발견해서 찾아보니, vscode와 관계없이 <strong>실행중인 상태의 애플리케이션을 터미널을 통해 실행하는 경우</strong> 발생하는 이슈라는 것을 알게 되었다.</p><p>해결책은 크게 두가지가 있었다.</p><h2>Disable "Show suggested and recent apps in Dock"</h2><p>최근 사용한 앱을 독에 띄워주는 기능 자체를 끄는 것이다.</p><p>해당 기능 자체를 끄는 것이기에 해당 영역자체가 사라진다.</p><h2>Edit <code spellcheck="false">code</code> function</h2><p>기존 code 명령어를 수정함으로써 해결이 가능하다.</p><p><code spellcheck="false">vim ~/.zshrc</code> 를 입력해 기존 <code spellcheck="false">code</code> 명령어를 아래와 같이 수정해보자.</p><pre spellcheck="false"><code class="language-auto">code() {
    if [ -t 1 ] &amp;&amp; [ -t 0 ]; then
        open -a Visual\\ Studio\\ Code.app "$@"
    else
        open -a Visual\\ Studio\\ Code.app -f
    fi
}</code></pre><p>위 코드를 해석하면 아래와 같다. (채찍피티 인용)</p><blockquote><p>ChatGPT 왈:<br>이 코드는 <code spellcheck="false">~/.zshrc</code> 파일에 작성되어 있는데, 이 파일은 Zsh 셸의 설정 파일입니다. 여기서 정의된 <code spellcheck="false">code()</code> 함수는 주로 Visual Studio Code를 실행하는 데 사용됩니다.</p><p>이 함수는 두 부분으로 나뉘어 있습니다. 첫 번째는 <code spellcheck="false">if</code> 문으로 시작하여 터미널에서 실행 중인지(<code spellcheck="false">-t 1</code>과 <code spellcheck="false">-t 0</code>를 통해 확인) 확인하고, 그렇다면 주어진 파일이나 디렉토리를 Visual Studio Code로 엽니다. 두 번째 부분은 이와 반대로 터미널이 아닌 상황에서 Visual Studio Code를 엽니다.</p><p>여기서 <code spellcheck="false">open</code>은 macOS에서 파일을 열거나 애플리케이션을 실행하는 명령입니다. <code spellcheck="false">-a</code> 플래그는 특정 애플리케이션을 지정하여 파일을 열도록 합니다. <code spellcheck="false">Visual\\ Studio\\ Code.app</code>은 Visual Studio Code 애플리케이션의 경로를 나타냅니다. 공백을 포함하는 이름을 사용할 때는 이스케이프 문자(<code spellcheck="false">\\</code>)를 사용하여 공백을 인식하게 합니다.</p><p>따라서 이 코드는 Zsh 셸에서 <code spellcheck="false">code</code> 명령어를 입력하면, Visual Studio Code가 실행되며, 터미널에서 실행 중인 경우에는 주어진 파일이나 디렉토리를 열도록 하며, 터미널이 아닌 경우에는 그냥 Visual Studio Code를 엽니다.</p></blockquote><hr><p>나는 애초에 최근앱 기능을 잘 사용하지 않다보니 첫번째 방법을 사용해서 해결했다.</p>

맥북에서 터미널에서 code 커맨드라인을 지정해두고 해당 명령어를 통해 vscode를 실행하는데 실행할 때마다 dock에 vscode가 중복으로 생성되는 문제가 있었다.한동안 습관적으로 지워주면서 사용하고 있다가 매번 귀찮다는 생각이 들어서 원인을 찾아보았다.vscode 레포에서 동일한 증상을 겪고 있다는 이슈를 발견해서 찾아보니, vscode와 관계없이 

mac dock에 vscode가 중복 생성되는 이슈

⚛️ React

<p>개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.</p><p>https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.</p><p>해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.</p><h1>mkcert?</h1><p>레포에서는 아래와 같이 설명하고 있다.</p><blockquote><p>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</p></blockquote><p>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.</p><h1>mkcert 설치</h1><h2>window</h2><p><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.</p><p>아래 명령어를 입력해주자.</p><pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2><p>homebrew로 설치해주면 된다.</p><pre spellcheck="false"><code>brew install mkcert</code></pre><hr><p>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.</p><pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2><p>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.</p><p>본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.</p><p>나는 dev.until.blog를 적용했다.</p><pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host
localhost name resolution is handled within DNS itself.127.0.0.1       localhost::1             localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2><p>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.</p><pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.</p><pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre><p>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.</p><pre spellcheck="false"><code>  ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre><p></p>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

<img src="https://image.until.blog/morethanmin/article/1715876172847" alt="until-47"><blockquote><p>이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.</p></blockquote><p>리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)</p><p>react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 되면서 퍼포먼스가 구려지는 이슈가 있어서 원인을 찾아보았다.</p><h2>watch API</h2><p>watch란 무엇일까? 공식문서를 확인해보자.</p><blockquote><p>This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render by condition.</p></blockquote><p>아래와 같이 사용할 수 있다.</p><pre spellcheck="false"><code class="language-typescript">// ...
const Summary: FC = () =&gt; {
  const { watch } = useFormContext&lt;Values&gt;();

  const value = watch();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};

export default Summary;
</code></pre><p>동작은 하지만 <code spellcheck="false">Summary</code>컴포넌트 상위의 Root 컴포넌트까지 전부 리렌더가 발생한다. 음... 내가 생각한 의도에 맞는 것 같은데... 좀만 더 읽어보자.</p><blockquote><ul><li><p>This API will trigger re-render at the root of your app or form, consider using a callback or the <a target="_blank" rel="noopener noreferrer nofollow" href="https://react-hook-form.com/docs/usewatch">useWatch</a> api if you are experiencing performance issues.</p></li><li><p><code spellcheck="false">watch</code> result is optimised for render phase instead of <code spellcheck="false">useEffect</code>'s deps, to detect value update you may want to use an external custom hook for value comparison.</p></li></ul></blockquote><p>헉... watch를 쓰면 root부터 리렌더가 발생한다고한다. 실제 사용하는 경우에는 컴포넌트의 리렌더가 발생할 수 있으니 useEffect의 deps로써 활용할 수 있도록 최적화 되어있고, 실제 예시와 같은 사용방식에서는 적합하지 않은 것 같다.</p><p>그럼 문서에 나와있는 useWatch를 알아보자.</p><h2>useWatch API</h2><p>문서를 읽어보면 다음과 같이 설명하고 있다.</p><blockquote><p>Behaves similarly to the <code spellcheck="false">watch</code> API, however, this will isolate re-rendering at the custom hook level and potentially result in better performance for your application.</p></blockquote><p>음... 그럼 전체 리렌더링이 발생하는 <code spellcheck="false">watch</code>를 사용했을 때 얻는 이점은 뭐지..? 일단 적용해보았다.</p><pre spellcheck="false"><code class="language-typescript">// ...

const Summary: FC = () =&gt; {
  const values = useWatch&lt;Values&gt;();

  if (values.type === 'a') return &lt;Result {...getAResultProps(values)} /&gt;;
  if (values.type === 'b') return &lt;Result {...getBResultProps(values)} /&gt;;
  return &lt;Result 판매금액={0} 최종손익={0} /&gt;;
};
export default Summary; 

// ...</code></pre><p>Root에 존재하는 form은 리렌더하지 않고 <code spellcheck="false">Summary</code> rootLevel부터 리렌더되는 이슈는 해결되는 것을 확인할 수 있었다. 👍</p><h2>useWatch의 deep partial type 이슈</h2><p>한가지 문제가 더 있었다. <code spellcheck="false">useWatch</code>를 사용한 경우 (정확히는 parmeterless한 <code spellcheck="false">useWatch</code>를 사용한 경우) <code spellcheck="false">watch</code>와 다르게 deepPartial이 적용된 타입이 적용된다는 것이다.</p><p>이 문제는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/orgs/react-hook-form/discussions/10610">해당 논의</a>와 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/react-hook-form/react-hook-form/issues/9954">이슈</a>에서도 확인해보면 알 수 있다.</p><p>결론적으로 <code spellcheck="false">watch</code>와 다르게 <code spellcheck="false">useWatch</code> 의 타입이 정의되어있는 것은 v8 버전에서 resolve가 된다고 한다.</p><h3>그럼 지금은 어떻게 대응해야할까?</h3><p>아래와 같이 하거나... 필요한 필드만 뽑아서 사용해야할 것 같다.</p><pre spellcheck="false"><code class="language-typescript">const values = useWatch() as Values</code></pre><h2>결론</h2><p><code spellcheck="false">watch</code>와 <code spellcheck="false">useWatch</code>의 네이밍만보고 동작하는 방식이 같을 것이라고 생각하고 로직안에 오류가 있다고 생각해서 해결하기까지 생각보다 시간을 썼던 것 같다. 문서를 자주 봐야겠다.</p><p></p><p></p><p></p>

이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 

react-hook-form의 useWatch와 watch의 차이점

🖥 백엔드

<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를 이용해서 프로퍼티의 시크릿 유출을 보호하기

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88"><p>react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.</p><h2>staleTime</h2><blockquote><ul><li><p>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</p></li><li><p>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</p></li></ul></blockquote><p><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.</p><p>기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.</p><p>데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.</p><p>아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.</p><pre spellcheck="false"><code class="language-typescript">import { useSuspenseQuery } from '@tanstack/react-query'
import { GetBlogResponse, createGetBlog } from 'src/apis/blog/[username]'
import { queryKeys } from 'src/constants/queryKeys'

const useBlogQuery = () =&gt; {
  const username = useUsername();
  const { data } = useSuspenseQuery&lt;GetBlogResponse&gt;({
    queryKey: queryKeys.blog.username.body(username),
    queryFn: createGetBlog(username),
    staleTime: Infinity,
  })
  return data
}

export default useBlogQuery</code></pre><p>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?</p><p>기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.</p><p>프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.</p><p>물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.</p><p>아래 예시는 게시글 리스트를 가져오는 훅이다.</p><pre spellcheck="false"><code>import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
import { queryKeys } from 'src/constants/queryKeys'
import {
  GetArticlesParams,
  createGetUserArticles,
} from 'src/apis/blog/[username]/articles'
import useBlogData from 'src/blog/hooks/useBlogData'
import useArticleParams from './useArticleParams'

const useArticlesInfiniteQuery = () =&gt; {
  const blogData = useBlogData()
  const { order, query, tag } = useArticleParams()

  const params: GetArticlesParams = {
    order: order || undefined,
    query: query || undefined,
    tagSlug: tag || undefined,
  }

  const { data, ...infiniteQuery } = useSuspenseInfiniteQuery({
    queryKey: queryKeys.blog.username.articles.list(blogData.username, params),
    queryFn: async ({ pageParam }) =&gt; {
      const getUserArticles = createGetUserArticles(blogData.username)

      return await getUserArticles({ page: pageParam, ...params })
    },
    initialPageParam: 0,
    getNextPageParam: (data) =&gt; (data.hasMore ? data.page + 1 : undefined),
  })

  if (!data) throw new Error('Suspense Error')

  return { data, ...infiniteQuery }
}

export default useArticlesInfiniteQuery
</code></pre><p>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.</p><p>그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다</p><h2>gcTime (cacheTime)</h2><blockquote><ul><li><p>The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.</p></li></ul></blockquote><p><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, <strong>서버사이드에서는 Infinity</strong>로 지정된다.</p><p>일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.</p><p>데이터 패칭에 직접적인 영향을 주지 않기 때문이다.</p><p>다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.</p><h2>결론</h2><p>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.</p><p>데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.</p><p></p><p></p><p></p><p></p>

react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define

react-query의 staleTime과 gcTime

🧑‍💻 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

<img src="https://image.until.blog/morethanmin/article/1716653810238" data-width="50%" data-align="center" alt="until-223"><p>나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.</p><p>그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.</p><h1>PowerToys?</h1><p>마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.</p><p>매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라면 꼭 설치하길 추천한다.</p><p>이 아티클에서는 대표적으로 몇가지만 소개해보겠다.</p><h2>PowerToys Run</h2><p><code spellcheck="false">Alt</code> + <code spellcheck="false">Space</code> 를 통해 아래와 같은 검색창을 띄워준다. 맥하고 비슷하게 생겼다.</p><img src="https://image.until.blog/morethanmin/article/1716654162354" data-width="100%" data-align="center" alt="until-225"><h2>Keyboard Manager</h2><p>키보드 키 및 단축키들을 쉽게 매핑해줄 수 있다. 우리는 이것을 사용해서 맥 단축키들을 적용시키면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716654104729" data-width="100%" data-align="center" alt="until-224"><h2>환경 변수</h2><p>환경변수를 GUI에서 쉽게 변경가능하다. 개꿀이다.</p><img src="https://image.until.blog/morethanmin/article/1716654251418" data-width="100%" data-align="center" alt="until-226"><h2>호스트 파일 편집기</h2><p>호스트 파일을 GUI에서 변경이 가능하다.</p><img src="https://image.until.blog/morethanmin/article/1716654321543" data-width="100%" data-align="center" alt="until-227"><h1>설치하기</h1><p>PowerShell에 아래 커맨드를 입력하면 된다.</p><pre spellcheck="false"><code>winget install Microsoft.PowerToys --source winget</code></pre><h1>적용</h1><p>사실 모든 단축키를 매핑할 순 없다보니, 적당한 수준에서 본인이 주로 사용하는 단축키를 설정해주면 된다.</p><p>나는 아래와 같이 적용했다. 귀찮은 사람은 참고하면 좋을뜻</p><img src="https://image.until.blog/morethanmin/article/1716654467615" data-width="100%" data-align="center" alt="until-228"><p></p><p></p>

나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.PowerToys?마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라

윈도우에서 맥 단축키 적용하기(PowerToys)

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/15649">15649.N과 M(1)</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 :</p></li><li><p>풀이시간 :</p></li><li><p>유형 : 백트래킹 , DFS</p></li></ul><h2>문제</h2><p>자연수 N과 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오.</p><ul><li><p>1부터 N까지&nbsp;자연수 중에서 중복 없이 M개를 고른 수열</p></li></ul><h2>입력</h2><p>첫째 줄에 자연수 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8)</p><h2>출력</h2><p>한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다.</p><p>수열은 사전 순으로 증가하는 순서로 출력해야 한다.</p><h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>3 1
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>1
2
3
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>4 2
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>1 2
1 3
1 4
2 1
2 3
2 4
3 1
3 2
3 4
4 1
4 2
4 3
</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>4 4
</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>1 2 3 4
1 2 4 3
1 3 2 4
1 3 4 2
1 4 2 3
1 4 3 2
2 1 3 4
2 1 4 3
2 3 1 4
2 3 4 1
2 4 1 3
2 4 3 1
3 1 2 4
3 1 4 2
3 2 1 4
3 2 4 1
3 4 1 2
3 4 2 1
4 1 2 3
4 1 3 2
4 2 1 3
4 2 3 1
4 3 1 2
4 3 2 1
</code></pre><h3>문제 풀이 접근</h3><p>문제를 일고 처음 생각해낸 아이디어는 전체 수열을 구하는 것과 같이, Pos 와 Depth를 스왑해주면서 인덱스를 늘려나가 전체 순열을 구하는 방식이었다. <br>문제를 푸는 방식은 10974.모든순열 문제를 풀고나서 같은 방식으로 풀면 된다고 생각하여 바로 작성하였는데, 문제 방식에 차이점이 있었다. <br>- 모든 순열 : N이 주어지면 1 ~ N 의 전체 순열을 사전순으로 출력함<br>- N과 M(1) : N이 주어지면, 1 ~ N 중에 M 개의 부분 순열을 사전순으로 출력함. <br><br>이 차이에 의해 인덱싱 오류가 계속 발생했고, 이 방식으로 문제를 풀 수 없다 라는 결론을 내렸다. <br><br>변경된 방식은 DFS로 Visited 에 관한 값을 추가해 내가 현재 방문하고 있는 숫자는 패스할 수 있도록 작성했다. </p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code class="language-csharp">using System;
using System.Collections;
using System.Collections.Generic;
using System.Xml.Linq;
using static CodingTestProj.Program;

///*
// * Difficulty : 
// * URL : https://www.acmicpc.net/problem/15649
//  * Time : 
// */

namespace CodingTestProj
{
    internal class Program
    {
        static void Main(string[] args)
        {
            Solution solu = new Solution();
            solu.solve();
        }
    }

    public class Solution
    {
        public const int _max = 9;
        public int _n;
        public int _m;

        public int[] _per;
        public int[] _arr;

        public int _curPos;

        public bool[] _isVisit;

        public void solve()
        {
            string[] _input = Console.ReadLine().Split(' ');
            _n = int.Parse(_input[0]);
            _m = int.Parse(_input[1]);

            _isVisit = new bool[_max];
            _arr = new int[_max];
            _per = new int[_max];

            for (int i = 0; i &lt; 9; ++i)
                _arr[i] = i + 1;

            dfs(0);
        }

        public void dfs(int _cnt)
        {
            if (_cnt &gt;= _m)
            {
                for(int i = 0; i &lt; _cnt; ++i)
                {
                    Console.Write(_per[i]);

                    if (i != _cnt)
                        Console.Write(" ");
                }

                Console.WriteLine();
            }
            else
            {

                for (int i = 0; i &lt; _n; ++i)
                {
                    if (_isVisit[i] == false)
                    {
                        _isVisit[i] = true;
                        _per[_cnt] = _arr[i];
                        dfs(_cnt + 1);
                        _isVisit[i] = false;
                    }
                }
            }
        }
    }
}
</code></pre><h3>코드 결과</h3><ul><li><p>시간 초과로 인해 문제를 풀지 못했다..</p></li></ul><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 57

코딩테스트 준비 _ F - N과 M(1)

<p>서비스를 운영하다보면 이메일을 발송해야 하는 다양한 경우들이 종종 존재합니다. </p><p>개인 대 개인으로 이메일을 주고 받는 경우에는 단순히 이메일 서비스에서 제공하는 에디터를 통해 이메일을 작성하면 되지만, 서비스에서는 이미 만들어진 템플릿이 존재해야하죠.</p><p>언틸에서 사용하고 있는 몇가지 사례를 소개해보자면.. 아래 사진처럼 이메일 로그인을 시도하거나,</p><img src="https://image.until.blog/morethanmin/article/1731746431184.png" data-width="75%" data-align="center" alt="2165"><p>이메일 회원가입을 시도하는 경우에 이메일을 발송하게 됩니다.</p><img src="https://image.until.blog/morethanmin/article/1731746474123.png" data-width="75%" data-align="center" alt="2166"><p>이런 이메일 템플릿은 어떻게 만들어질까요?</p><h2>이메일 템플릿을 만드는 방법</h2><p>우선 이메일에서는 일반적으로 <strong>JavaScript를 포함하거나 실행할 수 없습니다</strong>. 이는 보안 및 사용자 경험 문제를 방지하기 위해 대부분의 이메일 클라이언트(Gmail, Outlook 등)에서 JavaScript 실행을 차단하기 때문입니다.</p><p>아래는 until에서 사용하는 회원가입 이메일 html 양식입니다.</p><pre spellcheck="false"><code class="language-xml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html dir="ltr" lang="en"&gt;

  &lt;head&gt;
    &lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
  &lt;/head&gt;
  &lt;div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"&gt;until 회원가입 인증 요청&lt;div&gt;&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&nbsp;‌​‍‎‏﻿&lt;/div&gt;
  &lt;/div&gt;

  &lt;body style="background-color:#ffffff;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,&amp;quot;Segoe UI&amp;quot;,Helvetica,Arial,sans-serif,&amp;quot;Apple Color Emoji&amp;quot;,&amp;quot;Segoe UI Emoji&amp;quot;"&gt;
    &lt;table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:480px;margin:0 auto;padding:20px 0 48px"&gt;
      &lt;tbody&gt;
        &lt;tr style="width:100%"&gt;
          &lt;td&gt;&lt;img alt="Until" height="48" src="https://static.until.blog/logo.png" style="display:block;outline:none;border:none;text-decoration:none;border-radius:50%;margin:0 auto" width="48" /&gt;
            &lt;p style="font-size:24px;line-height:1.25;margin:16px 0;text-align:center;font-weight:bold"&gt;회원가입 인증 요청&lt;/p&gt;
            &lt;table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:24px;border:solid 1px #dedede;border-radius:5px;text-align:center"&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;환영합니다!&lt;/p&gt;
                    &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;회원가입을 계속하려면 아래 버튼을 클릭해주세요. 만약 이 요청을 하지 않으셨다면 무시하셔도 됩니다. 만약 계정에 문제가 있다면 문의해주세요.&lt;/p&gt;&lt;a href="https://until.blog/login" style="line-height:1.75;text-decoration:none;display:inline-block;max-width:100%;margin:20px 0;font-size:14px;background-color:color(display-p3 0.276 0.384 0.837);color:#fff;border-radius:0.5em;padding:6px 16px 6px 16px" target="_blank"&gt;&lt;span&gt;&lt;!--[if mso]&gt;&lt;i style="letter-spacing: 16px;mso-font-width:-100%;mso-text-raise:9" hidden&gt;&amp;nbsp;&lt;/i&gt;&lt;![endif]--&gt;&lt;/span&gt;&lt;span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:4.5px"&gt;회원가입 인증&lt;/span&gt;&lt;span&gt;&lt;!--[if mso]&gt;&lt;i style="letter-spacing: 16px;mso-font-width:-100%" hidden&gt;&amp;nbsp;&lt;/i&gt;&lt;![endif]--&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;p style="font-size:14px;line-height:24px;margin:0 0 10px 0;text-align:left"&gt;또는 아래 링크를 브라우저에 입력해주세요. &lt;br /&gt;&lt;a href="https://until.blog/login" style="color:#0366d6;text-decoration:none;font-size:12px" target="_blank"&gt;https://until.blog/login&lt;/a&gt;&lt;/p&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre><p>이런 html 템플릿을 직접 만든다면 재사용성도 떨어지고, 크로스 브라우징 이슈가 발생할 수도 있는 등 다양한 문제를 야기하게 됩니다.</p><p>만약 이런 템플릿의 개수가 늘어날수록 관리하기는 점점더 힘들어지겠죠.</p><p>그 외에도 모던 웹 개발환경을 사용하지 못함으로써 생기는 모든 단점들이 발생할것입니다.</p><h2>React 환경에서 이메일 템플릿을 만들 수 있도록 해주는, React-Email</h2><p>이런 문제를 해결하기 위해 만들어진 서비스가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://react.email/">React-Email</a>입니다. </p><p>React-email에서 제공하는 컴포넌트를 통해 이메일 템플릿을 만들면, 알아서 email에서 사용할 수 있는 html로 변환해주고 손쉽게 관리할 수 있도록 도와줍니다.</p><p>언틸에서도 아래와 같이 React-Email을 사용해 템플릿을 관리하고 있습니다.</p><img src="https://image.until.blog/morethanmin/article/1731747646091.png" data-width="100%" data-align="center" alt="2167"><p>이 아티클에서는 React-Email을 사용하는 방법을 간략히 설명하겠습니다. 구체적인 가이드는 공식 문서를 참고해보시면 좋겠습니다. </p><h3>사용법</h3><p>아래 커맨드를 터미널에 입력하여 React-Email 프로젝트를 init할 수 있습니다.</p><pre spellcheck="false"><code class="language-bash">npx create-email@latest</code></pre><p>프로젝트를 열고 <code spellcheck="false">emails</code> 폴더 안에 컴포넌트 정의하듯이 만들고자 하는 이메일 템플릿을 만들면 됩니다. </p><p>아래는 react-email을 통해 만든 until 회원가입 템플릿입니다.</p><pre spellcheck="false"><code class="language-typescript">import {
  Body,
  Button,
  Container,
  Head,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Text,
} from '@react-email/components'
import * as React from 'react'

type SignUpProps = {
  url?: string
}

const logoUrl = 'https://static.until.blog/logo.png'

export const SignUp = ({ url }: SignUpProps) =&gt; (
  &lt;Html&gt;
    &lt;Head /&gt;
    &lt;Preview&gt;until 회원가입 인증 요청&lt;/Preview&gt;
    &lt;Body style={main}&gt;
      &lt;Container style={container}&gt;
        &lt;Img
          src={logoUrl}
          width="48"
          height="48"
          style={{ borderRadius: '50%', margin: '0 auto' }}
          alt="Until"
        /&gt;

        &lt;Text
          style={{
            fontSize: '24px',
            lineHeight: 1.25,
            textAlign: 'center',
            fontWeight: 'bold',
          }}
        &gt;
          회원가입 인증 요청
        &lt;/Text&gt;
        &lt;Section style={section}&gt;
          &lt;Text style={text}&gt;환영합니다!&lt;/Text&gt;
          &lt;Text style={text}&gt;
            회원가입을 계속하려면 아래 버튼을 클릭해주세요. 만약 이 요청을 하지
            않으셨다면 무시하셔도 됩니다. 만약 계정에 문제가 있다면
            문의해주세요.
          &lt;/Text&gt;
          &lt;Button style={button} href={url}&gt;
            회원가입 인증
          &lt;/Button&gt;
          &lt;Text style={text}&gt;
            또는 아래 링크를 브라우저에 입력해주세요. &lt;br /&gt;
            &lt;Link style={link} href={url}&gt;
              {url}
            &lt;/Link&gt;
          &lt;/Text&gt;
        &lt;/Section&gt;
      &lt;/Container&gt;
    &lt;/Body&gt;
  &lt;/Html&gt;
)

SignUp.PreviewProps = {
  url: 'https://until.blog/login',
} as SignUpProps

export default SignUp

const main = {
  backgroundColor: '#ffffff',
  color: '#24292e',
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
}

const container = {
  maxWidth: '480px',
  margin: '0 auto',
  padding: '20px 0 48px',
}

const section = {
  padding: '24px',
  border: 'solid 1px #dedede',
  borderRadius: '5px',
  textAlign: 'center' as const,
}

const text = {
  margin: '0 0 10px 0',
  textAlign: 'left' as const,
}

const button = {
  margin: '20px 0',
  fontSize: '14px',
  backgroundColor: 'color(display-p3 0.276 0.384 0.837)',
  color: '#fff',
  lineHeight: 1.75,
  borderRadius: '0.5em',
  padding: '6px 16px',
}

const link = {
  color: '#0366d6',
  fontSize: '12px',
}</code></pre><p>이렇게 만들어진 이메일 템플릿을 개발서버에서 바로 전송해 테스트해볼 수도 있고, html 로 변환된 코드도 확인할 수 있습니다. </p><img src="https://image.until.blog/morethanmin/article/1731748353148.png" data-width="100%" data-align="center" alt="2168"><h2><strong>결론</strong></h2><ul><li><p>이메일 템플릿을 모던 웹 환경에서 체계적으로 관리해야한다면, React-email을 고려해보자</p></li></ul><p></p>

react-email을 사용하여 리액트 환경에서 이메일 템플릿을 편하게 관리하는 방법을 소개합니다.

React로 이메일 템플릿 쉽게 만들고 관리하기 (react-email)

<h2>개요</h2><p>Notion 데이터베이스에 저장된 데이터를 기반으로 Next.js 프로젝트를 만들었던 경험을 토대로,<br>Notion 데이터베이스를 Next.js 프로젝트에 적용하는 방법을 정리해보려고 한다.</p><blockquote><p>※ <code spellcheck="false">Next.js</code> 와 <code spellcheck="false">Notion</code>에 대한 기본적인 이해는 있다고 가정한다.</p></blockquote><h2>구현 방법</h2><ol class="tight" data-tight="true"><li><p>Notion에서 데이터베이스를 생성하고, <code spellcheck="false">API Key</code>를 발급 받는다.</p></li><li><p><code spellcheck="false">Next.js</code>프로젝트를 생성하고, Notion 데이터베이스를 연결한다.</p></li><li><p>컴포넌트 및 페이지를 구현한다.</p></li><li><p>프로젝트를 배포한다.</p></li></ol><p>더 자세한 내용은 아래 링크에서 확인할 수 있다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.woongsnote.dev/blog/how-to-use-notion-database-in-nextjs">https://www.woongsnote.dev/blog/how-to-use-notion-database-in-nextjs</a></p><h2>구현 결과(예시)</h2><img src="https://image.until.blog/woongsnote/article/1715613924287" alt="until-21">

Next.js에서 노션 데이터베이스 사용하기

C++ Code

<h2>Code</h2><pre spellcheck="false"><code class="language-cpp">// 템플릿 함수: 변수명과 값을 출력
template &lt;typename T&gt;
void printVariable(const std::string&amp; name, const T&amp; value) {
  std::cout &lt;&lt; name &lt;&lt; ": " &lt;&lt; value &lt;&lt; std::endl;
}

// 매크로: 변수명과 값을 전달
#define PRINT_VAR(var) printVariable(#var, var)</code></pre><h2>Example</h2><h3>example.cpp</h3><pre spellcheck="false"><code class="language-cpp">#include &lt;iostream&gt;
#include &lt;string&gt;

template &lt;typename T&gt;
void printVariable(const std::string&amp; name, const T&amp; value) {
    std::cout &lt;&lt; name &lt;&lt; ": " &lt;&lt; value &lt;&lt; std::endl;
}

#define PRINT_VAR(var) printVariable(#var, var)

int main() {
    int age = 25;
    double height = 175.5;
    std::string name = "Alice";

    PRINT_VAR(age);
    PRINT_VAR(height);
    PRINT_VAR(name);

    return 0;
}</code></pre><h3>Compile and Run Command</h3><pre spellcheck="false"><code class="language-bash">g++ -o print_example example.cpp &amp;&amp; ./print_example</code></pre><h3>Output</h3><pre spellcheck="false"><code class="language-bash">age: 25
height: 175.5
name: Alice</code></pre>

C++ 템플릿과 매크로를 활용한 변수 출력 함수 구현하기

[C++] 변수명과 값을 출력 🚀

<h1>쿼리에서 로직 빼기</h1><p></p><div data-youtube-video=""><iframe width="640" height="480" allowfullscreen="true" autoplay="false" disablekbcontrols="false" enableiframeapi="false" endtime="0" ivloadpolicy="0" loop="false" modestbranding="false" origin="" playlist="" src="https://www.youtube.com/embed/fnH_SR3n9Ew" start="0"></iframe></div><p>내가 좋아하는 최범균님의 영상 중에서, 처음 보고 제일 충격을 받았던 영상이다.</p><p>영상을 다 보면 물론 좋겠지만, 시간 단축을 위해 핵심만 짚어본다.</p><p>ㅤ</p><h2>쿼리에 로직이 들어간 코드</h2><pre spellcheck="false"><code class="language-java">// update member m set m.status = 20 where m.id = ? and status = 10
int cnt = dao.회원탈퇴(id);

if (cnt == 0) {
    // 해당 id에 해당하는 회원이 없음.
    // 변경 건이 없으므로 변경 실패 처리
} else {
    // 변경 성공했으므로 로직
}</code></pre><p>다음은 mybatis로 짜여진 전형적인 코드다.</p><p>Mybatis로 UPDATE나 DELETE 쿼리를 실행하면, 그 결과로 변경된 행의 개수를 int로 반환해준다.</p><p>그걸 이용해서, cnt가 0이면 해당 멤버가 없었다는 것 (혹은 이미 탈퇴 상태라 탈퇴시킬 회원이 없었던 것)이므로 로직 실패 코드를 짜둔 것이다.</p><p>ㅤ</p><p>이렇게 코드를 짜면 SELECT로 멤버를 얻어오고 UPDATE로 값을 변경시키는 2번의 쿼리를 한번으로 줄일 수 있으므로 얼핏 보면 그냥 좋은 코드인 것처럼 보인다.</p><p>하지만 이렇게 로직이 쿼리에 들어가면 (현재 코드는 회원탈퇴를 이미한 유저는 탈퇴할 수 없다는 로직이 쿼리에 있다) 다음과 같은 문제가 생긴다.</p><ul><li><p>주요 로직이 흩어짐</p><ul><li><p>어플리케이션 코드, 쿼리로 분산 -&gt; 코드 분석 어려워짐</p></li></ul></li><li><p>유사한 쿼리를 중복해서 만들게 됨</p><ul><li><p>미세하게 다른 조건으로 다른 변경 처리</p></li></ul></li><li><p>주요 로직을 단위 테스트하기 어려움</p><ul><li><p>쿼리를 실행해야 로직 검증 가능</p></li></ul></li></ul><p>ㅤ</p><h2>이렇게 고치자</h2><pre spellcheck="false"><code class="language-java">Member member = dao.findById(id);

if (member == null) // 실패처리
if (!member.isActive()) // 실패처리

member.탈퇴();
dao.update(member);

/////
class Member {
    public boolean isActive() {
        return this.status == 10;
    }

    public void 탈퇴() {
        this.status = 20;
    }
}</code></pre><p>이렇게 하면 회원 탈퇴에 대한 로직이 어플리케이션 단으로 옮겨지므로 아까의 단점이 해소된다.</p><p><strong>코드의 가독성도 올라가고, 상태 변경 기능과 관련된 쿼리가 단순해진다.</strong></p><p>그러니 쿼리에서 로직을 빼라는 것이다.</p><p>ㅤ</p><h1>그래서, 이걸로 모든 것이 해결됐나요?</h1><img src="https://image.until.blog/octoping/article/1731326346775.png" data-width="50%" data-align="center" alt="2075"><p>명령(Command)에 대한 로직은 쿼리에서 빼내서 어플리케이션 단으로 옮기라는 것. 완벽히 이해했어!</p><p>그렇다면 조회(Query)는 어떨까?</p><p>ㅤ</p><h2>조회에는 로직이 없는가?</h2><p>조회에도 당연히 로직이 있다. 언틸의 예제를 가져와보자.</p><p>언틸에는 그룹 블로그가 있다. 토스, 배민 같은 팀 블로그를 모든 유저가 손쉽고 자유롭게 만들 수 있고, 같이 블로그를 꾸미고 싶은 유저를 초대할 수도 있다. (많이 써주세요)</p><p>아무튼.. 그리고 언틸에는 비공개 글을 작성할 수 있는 로직이 있는데.</p><p>ㅤ</p><h3>언틸 글 공개 로직을 공개합니다</h3><p>그룹 블로그에서 글을 조회하는 로직이 어떻게 될까?</p><ol><li><p>삭제된 그룹의 글은 조회할 수 없다</p></li><li><p>삭제된 글은 아무도 볼 수 없다.</p></li><li><p>그룹의 공개 글은 누구나 볼 수 있다.</p></li><li><p>그룹의 멤버는 비공개 글을 볼 수 있다.</p></li><li><p>그룹에 속해있지 않은 유저는 비공개 글을 볼 수 없다.</p></li><li><p>미로그인 유저도 비공개 글을 볼 수 없다.</p></li><li><p>해당 비공개 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.</p></li></ol><p>ㅤ</p><p>이러한 로직이 있는데.</p><p>그렇다면 그룹 블로그에 접속했을 경우 글 목록이 보여야하는데, 이것은 코드로 어떻게 짤 수 있을까?</p><p>ㅤ</p><h1>조회 쿼리에서 로직 빼기..?</h1><h2>findAll() 후 필터링하기</h2><p>물론 조회 쿼리에서 로직을 빼는 가장 간단한 방법이 있다.</p><p><code spellcheck="false">findAll()</code>로 모든 데이터를 불러온 후, 어플리케이션 단에서 필터링하는 것이다.</p><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    List&lt;Article&gt; articles = articleRepository.findAll();
    Group group = groupRepository.findById(groupId);

    return articles.stream()
        .filter(it -&gt; group.isActive())
        .filter(it -&gt; it.isWrittenIn(group)) 
        .filter(it -&gt; it.isNotDeleted())
        .filter(it -&gt; {
            if (it.isAuthor(requestUserId)) return true;
            if (isMember(group, requestUserId)) return true;

            return false;
        })
        .toList()
        .pagination(start, size); // 이런 메소드는 없지만 있다고 하자
}</code></pre><p>하지만.. 이런 짓을 하기에는 우리의 서버의 컴퓨팅 용량은 충분치 않다.</p><p>전체 게시글이 몇 개인데 이런 짓을 했다간 말아먹기 딱이다.</p><p>ㅤ</p><h2>페이지네이션도 해야해</h2><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    List&lt;Article&gt; articles = articleRepository.findAllWithPage(start, size);
    Group group = groupRepository.findById(groupId);

    return articles.stream()
        .filter(it -&gt; group.isActive())
        .filter(it -&gt; it.isWrittenIn(group))
        .filter(it -&gt; it.isNotDeleted())
        .filter(it -&gt; {
            if (it.isAuthor(requestUserId)) return true;
            if (isMember(group, requestUserId)) return true;

            return false;
        })
        .toList();
}</code></pre><p>전체 데이터를 다 불러와서 어플리케이션 코드로 데이터를 조작하는 건 글렀다.</p><p>어차피 페이지네이션해야하는데, 해당 페이지의 데이터만 먼저 불러오고 어플리케이션에서 필터링할 수는 없을까?</p><p>ㅤ</p><p>당연히 안되죠? 1페이지의 글 30개를 불러왔는데 그 후 로직으로 필터링을 해서 전부 필터링 되어버린다면..</p><p>페이지를 조회했는데 아무 것도 안 나오는 기현상을 마주할 수 있을 것이다.</p><p>ㅤ</p><h1>절충할 수 밖에 없다</h1><p>결국 조회 메소드에선 애초에 DB에서 얻어오는 결과가, 로직이 전부 처리된 데이터여야 한다.</p><p>그렇다고 모든 것을 놓고 쌩 쿼리로 돌아가자는 말은 아니다. 절충할 줄 알아야 한다. 그렇다고 로직을 처리해서 DB에서 값을 얻어올 수 있는, 프로시저를 쓰자는 것도 아니다.</p><p>어떻게 어플리케이션 코드로 최대한 로직을 나타낼 수 있을까?</p><p>ㅤ</p><h2>쿼리에서 로직 조금 빼기</h2><p>일단 아까의 로직을 그냥 쌩 SQL로 나타내보자.</p><pre spellcheck="false"><code class="language-sql">SELECT a.*
 FROM article a
 JOIN profile group ON a.blog_id = group.id
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND group.is_deleted = false
  AND (
    # 그룹의 공개 글은 누구나 볼 수 있다.
    a.is_public or

    # 미로그인 유저는 비공개 글을 볼 수 없다
    :userId IS NOT NULL or

    # 해당 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.
    a.author_id = :userId or 

    # 그룹의 멤버는 비공개 글을 볼 수 있다.
    :userId IN (
      SELECT member_id
        FROM group_member
       WHERE group_id = :groupId
    )
  )</code></pre><p>뭐 서브쿼리도 들어가고 복잡하다.. ㅋㅋ</p><p>회사의 비즈니스 로직급의 요구사항이 될 경우 더더욱 쿼리는 번잡해질 것이다.</p><p>조회에 필요한 몇 몇 부분은 쿼리를 구성하는 데에 필수적이겠지만, 그 중 필수적이지 않은 것들은 최대한 어플리케이션으로 일임하고 쿼리를 단순화하자.</p><p>ㅤ</p><h3>삭제된 그룹의 글은 조회할 수 없다</h3><p>삭제된 그룹의 글을 조회할 수는 없다는 것은 이 쿼리를 구성하는 데에 필수적이지 않은 것 같다.</p><p>미리 그룹을 조회하고, 삭제된 그룹이라면 에러를 미리 던지자.</p><p>그러면 WHERE문도 하나 빠지고, 그룹의 정보를 얻기 위해 JOIN할 필요도 없을 것 같다.</p><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    Group group = groupRepository.findById(groupId);

    if (!group.isActive()) {
        throw new IllegalStateException("존재하지 않는 그룹입니다.");
    }

    return articleRepository.findFromGroupBlog(group, requestUserId);
}</code></pre><pre spellcheck="false"><code class="language-sql">SELECT a.*
 FROM article a
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND (
    # 그룹의 공개 글은 누구나 볼 수 있다.
    a.is_public or

    # 미로그인 유저는 비공개 글을 볼 수 없다
    :userId IS NOT NULL or

    # 해당 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.
    a.author_id = :userId or 

    # 그룹의 멤버는 비공개 글을 볼 수 있다.
    :userId IN (
      SELECT member_id
        FROM group_member
       WHERE group_id = :groupId
    )
  )</code></pre><p>ㅤ</p><h3>그룹의 멤버는 비공개 글을 볼 수 있다.</h3><p>그룹의 멤버는 비공개 글을 볼 수 있다는 것은 쿼리에서 빠지기 힘들어보인다.</p><p>그래도 해당 유저가 미로그인인지, 그룹의 멤버인지 체크하는 것은 어플리케이션에서 할 수 있을 것 같다.</p><pre spellcheck="false"><code class="language-java">public List&lt;Article&gt; getGroupBlogArticles(Long requestUserId, Long groupId) {
    Group group = groupRepository.findById(groupId);

    if (!group.isActive()) {
        throw new IllegalStateException("존재하지 않는 그룹입니다.");
    }

    boolean isMember = isMember(group, requestUserId);

    return articleRepository.findFromGroupBlog(group, isMember);
}

private boolean isMember(Group group, Long userId) {
    if (userId == null) {
        return false;
    }

    return groupMemberRepository.existsByGroupAndUserId(group, userId);
}</code></pre><pre spellcheck="false"><code class="language-sql">SELECT a.*
 FROM article a
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND (
    # 그룹의 공개 글은 누구나 볼 수 있다.
    a.is_public or

    # 해당 글을 작성한 작성자는 탈퇴했더라도 글을 볼 수 있다.
    a.author_id = :userId or

    # 그룹의 멤버는 비공개 글을 볼 수 있다.
    :isMember
  )</code></pre><p>ㅤ</p><h3>최종 결과</h3><pre spellcheck="false"><code class="language-sql"># Before
SELECT a.*
 FROM article a
 JOIN profile group ON a.blog_id = group.id
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND group.is_deleted = false
  AND (
    a.is_public or

    :userId IS NOT NULL or

    a.author_id = :userId or

    :userId IN (
      SELECT member_id
        FROM group_member
       WHERE group_id = :groupId
    )
  )



# After
SELECT a.*
 FROM article a
WHERE a.blog_id = :groupId
  AND a.status = 'PUBLISHED'
  AND (
    a.is_public or
    a.author_id = :userId or
    :isMember
  )</code></pre><p>ㅤ</p><h2>정리</h2><p>물론 쿼리에 로직을 전부 빼진 못했다.</p><p>하지만 좀 더 코드에 가독성이 생겼고, 비즈니스 로직을 수정할 때에도 훨씬 쉬워졌다.</p><p>ㅤ</p><p>조회에 로직을 모두 어플리케이션으로 뺄 수 없다는 단점을 보완하기 위해 QueryDSL과 같은 쿼리 빌더가 존재한다.</p><p>하지만 이것 또한 결국 도메인 레이어가 아니라 영속성 레이어에 비즈니스 로직이 들어간 것이라고 생각한다.</p><p>ㅤ</p><p>따라서 최대한 쿼리 쪽으로 들어가는 로직을 줄이고 이를 파라미터화 해서 외부에서 주입해줄 수 있는 쪽을 선택해보자.</p>

풍부한 비즈니스 레이어를 향하여

'조회' 쿼리에서 로직 빼기

백준

꾸준하게 좋은 기록을 남기는 개발자가 되자. 

vscode

<p></p><p>본인 환경에 따라 단축키가 다를 수 있다.</p><p> <code spellcheck="false">command + p</code> 를 치고 <code spellcheck="false">&gt; open keyboard shortcuts</code> 으로 keyboard shortcut에 설정되어 있는 내용을 참고하자.</p><p></p><hr><p>코드 접기 (fold)</p><p><code spellcheck="false">option + command + [</code></p><p>코드 펼치기 (unfold)</p><p><code spellcheck="false">option + command + ]</code></p><p></p><p></p><p></p>

[vscode] VSCode 능률 높여주는 단축키 (모으는 중...)

🎨 프론트엔드

<blockquote><p>클래스 컴포넌트에 대한 글이 아님을 먼저 남깁니다</p></blockquote><p>자바스크립트는 ES6 환경에서 클래스 문법을 지원하기 시작했다. 물론 그 전에도 클래스처럼 객체를 사용하는 것이 가능했지만..</p><p>아무튼 그럼에도 NestJS 같은 백엔드 환경에선 클래스를 적극적으로 쓰는 것과 별개로, 프론트 환경에서는 클래스를 딱히 쓰지 않고 있는 것 같다.</p><p>왜일까? React에서는 불변성을 중요하게 생각하고 있고, 그렇기 때문에 <code spellcheck="false">useState</code> 같은 상태값에 클래스를 이용하기 어려운 실정이다.</p><p></p><h1>useState에 클래스 객체?</h1><pre spellcheck="false"><code class="language-javascript">function Component() {
  const [cart, setCart] = useState(new ShoppingCart())

  const onClick = (e) =&gt; {
    cart.addItem(e.target.name)
  }

  return (
    &lt;button onClick={onClick}&gt;
      카트에 담기
    &lt;/button&gt;
  )
}

class ShoppingCart {
  constructor(items) {
    this.items = items
  }

  addItem(item) {
    this.items.push(item)
  }
}</code></pre><p>리액트 사용자라면 이 코드가 제대로 동작하지 않을 것임을 알 것이다. <code spellcheck="false">useState</code>로 선언한 상태값은 반드시 <code spellcheck="false">setState</code>로 상태값을 바꿔야하니까.</p><p></p><pre spellcheck="false"><code class="language-javascript">function Component() {
  const [cart, setCart] = useState(new ShoppingCart())

  const onClick = (e) =&gt; {
    cart.addItem(e.target.name)
    setCart(cart)
  }

  return (
    &lt;button onClick={onClick}&gt;
      카트에 담기
    &lt;/button&gt;
  )
}

class ShoppingCart {
  constructor(items) {
    this.items = items
  }

  addItem(item) {
    this.items.push(item)
  }
}</code></pre><p>이러면 어떨까? 물론 제대로 작동하지 않을 것이다. cart의 <code spellcheck="false">addItem</code> 메소드로 cart의 값을 바꿨지만, 이전의 cart와 동등한 값 ( <code spellcheck="false">Object.is</code> 로 비교했을 때)이기 때문이다.</p><p>따라서 정말 이렇게 써먹고 싶다면 <code spellcheck="false">ShoppingCart</code> 클래스는 새로운 객체를 반환하도록 변경되어야 할 것이다.</p><pre spellcheck="false"><code class="language-javascript">class ShoppingCart {
  items
  
  constructor(items) {
    this.items = items
  }

  addItem(item) {
    return new ShoppingCart([...this.items, item])
  }
}</code></pre><p>하지만 매번 코드를 이렇게 쓰는건 좀 어렵다.</p><p></p><h2>반려생활에서는...</h2><p>반려생활에서는 이런 문제를 해결하기 위해 <code spellcheck="false">valtio</code>라는 라이브러리를 사용한다고 한다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a></p><p>프록시를 이용해서 객체에 값이 바뀔 때에 setState로 전파를 해주는 기능으로 보이는데.</p><p>역시나 외부 라이브러리를 사용하는 방법인지라 접근성이 그렇게 좋지는 않고, 원래 쓰던 방식이 있는데 클래스를 사용하기 위해 굳이 이렇게까지 해야할까 라는 생각이 들기도 한다.</p><p></p><p>그렇다면 클래스는 리액트에서 쓸 일이 없는 도구인걸까?</p><p></p><h1>문제 제기</h1><p>예시를 위해 언틸의 프론트엔드 코드를 조금 가져와보자.</p><p>다음은 언틸의 댓글을 쓸 때 내용을 적는 input form 컴포넌트의 코드다.</p><pre spellcheck="false"><code class="language-typescript">type Props = {
  commentId?: number;
  replyToCommentId?: number;
  initialContent: string;
  onCancel?: () =&gt; void;
}

const WriteForm = ({
  commentId,
  replyToCommentId,
  initialContent = "",
  onCancel = () =&gt; {},
}: Props) =&gt; {
  const { isLoggedIn } = useAuthInfo()
  const [content, setContent] = useState(initialContent)

  const handleSubmit: FormEventHandler = async (e) =&gt; {
    e.preventDefault()

    if (!isLoggedIn || !content) return

    if (!commentId) {
      await postComment({ content, replyToCommentId })
      setContent("")
    }

    if (commentId) {
      await putComment({ content })
    }

    onCancel()
  }

  const submitBtnText = (() =&gt; {
    if (commentId) {
      return "수정하기"
    }

    if (replyToCommentId) {
      return "답글 등록"
    }

    return "댓글 등록"
  })()

  return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;textarea
        autoFocus={!!(commentId || replyToCommentId)}
        disabled={!isLoggedIn}
        value={content}
        onChange={(e) =&gt; setContent(e.target.value)}
      /&gt;
      &lt;div&gt;
        {(commentId || replyToCommentId) &amp;&amp; (
          &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
        )}
        &lt;button type="submit"&gt;{submitBtnText}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  )
}
</code></pre><p>이 컴포넌트에서는 다양한 데이터들이 사용되고 있고,<span> 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다. </span><code spellcheck="false">isLoggedIn</code><span>과 </span><code spellcheck="false">content</code><span>가 비어있다면 댓글을 작성할 수 없고, </span><code spellcheck="false">commentId</code><span>가 있다면 버튼의 텍스트는 '수정하기'이고..</span></p><p>그런데, 왜 <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없는걸까? 왜 <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'일까?</p><p>코드를 읽다보면 동작 방식은 알 수 있어도 자세한 이유와 의미를 생각해보는 데에는 시간이 좀 들게 된다. 결국 이런 코드들이 많아질 수록 코드는 점점 읽기 힘들어지고 의미를 이해하기 힘들어진다.</p><p></p><h2>메소드 분리?</h2><p>클린코드에서는 어떤 함수가 한 가지 일만 하는 것이 아니게 되었다면 함수를 분리해보라고 권장한다.</p><p>하지만 리액트의 컴포넌트에서는 자바의 클래스와 다르게, private 메소드 같은 것이 없다.</p><p><code spellcheck="false">WriteForm</code> 컴포넌트의 <code spellcheck="false">handleSubmit</code>의 로직이 복잡하다고 해서 함수를 분리해봐야 결국 그 함수도 <code spellcheck="false">WriteForm</code>에 생겨날 뿐이다. 결국 컴포넌트만 뚱뚱해지는 셈이다.</p><p></p><h1>클래스는 상태와, 상태와 연관된 동작을 정의한다</h1><blockquote><p><code spellcheck="false">commentId</code>, <code spellcheck="false">replyToCommentId</code>, <code spellcheck="false">isLoggedIn</code> 등등.. 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다.</p><p><code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..</p></blockquote><p>우리는 이럴 때에 클래스를 사용해볼 수 있다. 클래스는 상태들과, 그 상태들과 연관된 동작을 정의할 때 쓰는 틀이다.</p><p>위에 적은 내용을 클래스를 이용해서 맥락이 드러나도록 코드를 만들어볼 수 있지 않을까?</p><pre spellcheck="false"><code class="language-typescript">class CommentWriteStatus {
  constructor(
    private readonly isLoggedIn: boolean,
    private readonly commentId: number | undefined,
    private readonly replyToCommentId: number | undefined,
    private readonly content: string
  ) {}

  isNewComment() {
    return !this.commentId
  }

  isReply() {
    return this.replyToCommentId !== undefined
  }

  canPublish() {
    return this.isLoggedIn &amp;&amp; this.content
  }

  getSubmitBtnText() {
    if (!this.isNewComment()) {
      return "수정하기"
    }

    if (this.isReply()) {
      return "답글 등록"
    }

    return "댓글 등록"
  }
}</code></pre><p>각 상태값들을 받아서, 댓글 입력창에서 취할 수 있는 행동들을 정의했다.</p><p></p><h2>리액트에 클래스 적용하기</h2><pre spellcheck="false"><code class="language-typescript">const WriteForm = ({
  commentId,
  replyToCommentId,
  initialContent = "",
  onCancel = () =&gt; {},
}: Props) =&gt; {
  const { isLoggedIn } = useAuthInfo()
  const [content, setContent] = useState(initialContent)

  const status = new CommentWriteStatus(
    isLoggedIn,
    commentId,
    replyToCommentId,
    content
  )

  // ...
}</code></pre><p>아까 언급한 대로, state에 클래스를 쓰거나 하는 용도는 어렵다. </p><p>하지만 state는 원래의 방식대로 <code spellcheck="false">useState</code>를 이용해서 정의하고, 비즈니스 로직을 위한 함수 발사대의 용도로 불변 클래스를 활용해주자.</p><p>원래도 객체지향에서 중요한 것은 변수값이 아닌, 메소드들이었으니까.</p><p></p><pre spellcheck="false"><code class="language-typescript">const handleSubmit: FormEventHandler = async (e) =&gt; {
  e.preventDefault()

  if (!status.canPublish()) return

  if (status.isNewComment()) {
    await postComment({ content, replyToCommentId })
    setContent("")
  }

  if (!status.isNewComment()) {
    await putComment({ content })
  }

  onCancel()
};</code></pre><p>클래스의 메소드를 이용해서 코드를 교체해줬다.</p><p>우리는 어떤 변수가 true고, 어떤 변수가 빈 문자열이 아닐 때 return을 한다~ 따위의 것이 궁금했던게 아니다. </p><p>그 대신에 비즈니스의 의미가 잘 드러날 수 있도록 코드를 변경해주니 누구라도 이해할 수 있게 되었다.</p><p></p><pre spellcheck="false"><code class="language-typescript"> return (
  &lt;form onSubmit={handleSubmit}&gt;
    &lt;textarea
      autoFocus={!status.isNewComment() || status.isReply()}
      disabled={!isLoggedIn}
      value={content}
      onChange={(e) =&gt; setContent(e.target.value)}
    /&gt;
    &lt;div&gt;
      {(!status.isNewComment() || status.isReply()) &amp;&amp; (
        &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
      )}
      &lt;button type="submit"&gt;{status.getSubmitBtnText()}&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
);</code></pre><p>return 문 쪽도 더 의미가 잘 드러나게 변경된 것 같다.</p><p></p><h2>예시 2</h2><p>언틸에서는 블로그에 유저 블로그와 그룹 블로그라는 두 가지 종류가 있다. 그와 함께 방문하는 유저도 타입이 여러 개 존재하게 되는데.</p><pre spellcheck="false"><code class="language-typescript">  userType:
    | 'guest' // 비로그인
    | 'owner' // 본인
    | 'user' // 다른 유저
    | 'member' // 그룹 멤버
    | 'admin' // 그룹 관리자</code></pre><p>이렇게 blogType과 userType이 여러 개 존재함에 따라 각 타입 별로 권한도 다양하게 존재한다.</p><p></p><pre spellcheck="false"><code class="language-typescript">const FollowButton = () =&gt; {
  const { username, isFollowing, blogType, userType } = useBlogQuery()

  if (blogType === "user" &amp;&amp; userType === "owner") {
    return (
      &lt;Link href={`/@${username}/setting`}&gt;
        &lt;button&gt;프로필 수정&lt;/button&gt;
      &lt;/Link&gt;
    )
  }

  return (
    &lt;LoginDialogWrapper
      onClick={() =&gt; {
        isFollowing ? postUnfollow() : postFollow()
      }}
    &gt;
      &lt;button&gt;{isFollowing ? "팔로잉" : "팔로우"}&lt;/button&gt;
    &lt;/LoginDialogWrapper&gt;
  )
}</code></pre><p>유저 블로그면서 자신이 그 블로그의 주인일 경우, 팔로우를 할 이유가 없기 때문에 팔로우 버튼 대신에 '프로필 수정' 버튼을 보여주게 된다.</p><p>애플리케이션 전체에서 이와 비슷하게 유저/블로그 타입을 통한 로직이 많은데, 이 경우 권한에 대한 내용이 한 곳에 뭉쳐있지 않고 이곳 저곳에 혼재되어 있게 된다.</p><p>따라서 실수로 변경 누락을 하거나 잘못 설정하는 일이 발생할 수도 있다.</p><p></p><pre spellcheck="false"><code class="language-typescript">class BlogUserType {
  constructor(
    private readonly userType:
      | "guest" // 비로그인
      | "owner" // 본인
      | "user" // 다른 유저
      | "member" // 그룹 멤버
      | "admin", // 그룹 관리자
    private readonly blogType: "user" | "group"
  ) {}

  canFollow() {
    return !this.isMyUserBlog()
  }

  canEditAbout() {
    return this.isMyUserBlog() || this.isAdmin()
  }

  private isMyUserBlog() {
    return this.isUserBlog() &amp;&amp; this.userType === "owner"
  }

  private isUserBlog() {
    return this.blogType === "user"
  }

  private isAdmin() {
    return this.userType === "admin" || this.userType === "owner"
  }
}</code></pre><p>이런 느낌으로 권한을 좀 정리해볼 수 있지 않을까.</p><p></p><h1>커스텀 훅</h1><p>물론 예제로 들었던 이것들, 커스텀 훅으로 만들 수 있다. 상태값을 받아서 함수 or 값을 뱉는 것이라면 클래스나 훅이나 똑같다.</p><pre spellcheck="false"><code class="language-typescript">function useCommentWriteStatus(
  isLoggedIn: boolean,
  commentId: number | undefined,
  replyToCommentId: number | undefined,
  content: string
) {
  const isNewComment = !commentId
  const isReply = replyToCommentId !== undefined
  const canPublish = isLoggedIn &amp;&amp; content

  function getSubmitBtnText() {
    if (!isNewComment) {
      return "수정하기"
    }

    if (isReply) {
      return "답글 등록"
    }

    return "댓글 등록"
  }

  return {
    isNewComment,
    isReply,
    canPublish,
    getSubmitBtnText,
  }
}

// 사용 예시
const { canPublish } = useCommentWriteStatus(true, 1, 2, "content")</code></pre><p>사실 리액트를 처음 공부하면서 훅에 대해서 배울 때, "아, 이게 리액트에서 제공하는 클래스구나"라는 생각이 들었다.</p><p>변수값들을 생성자처럼 받아서 훅 내부에서 함수들을 생성한 후 public으로 공개하고 싶은 녀석들만 return하면 그게 클래스지.</p><p></p><p>하... 하지만 클래스 쓰는게 멋있잖아?? 리액트에서 클래스 쓰는 힙한 사람처럼 보일 수 있다는 점에서 장점이 있는 것 같다.</p><p>농담이고, 이런 커스텀 훅을 만들어서 비즈니스 로직을 묶는 것도 좋은 방법이지만 클래스 쪽이 private 메소드 등을 이용해서 좀 더 가독성 있는 코드를 쓸 수 있는 것 같다는 개인적인 생각이 들어서 적절한 때에 잘 이용하고 있다. 살짝 테스트하기도 더 쉬운 것 같기도 하고..</p>

클래스로 뚱뚱한 컴포넌트를 정리해보기

React에서 Class 사용해보기

<img src="https://image.until.blog/steady/article/1727346269489.png" alt="until-1565"><h2>어디에 쓰이나?</h2><hr><p>한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 <u>서로를 특정할 수 있는 공통의 값</u>이 필요하게 되었고 나는 <strong>닉네임</strong>을 필수로 입력받아 이 부분을 처리하려고 했다.</p><p></p><p>하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 <u>회원가입의 과정이 부자연스러웠고</u>, 닉네임을 입력하지 않고 <u>중간에 이탈할 경우의 데이터 처리가 모호</u>해져 우선 무작위 닉네임을 지정하고 추후 변경하는 프로세스를 생각하게 되었다.</p><p></p><p>그때 필요했던 기능이 이 <strong>무작위 닉네임 생성 기능</strong>이었다.</p><p></p><h2>개발 과정</h2><hr><p>가장 먼저 떠올랐던 예시는 썸네일에 사용한 블리자드의 무작위 작명이었다. </p><p>무작위로 주어진 단어들을 조합하여 특정한 닉네임을 만들어내는 단순한 기능이였다.</p><p>우선 내가 개발하는 서비스는 <u>반려동물과 관련된 서비스</u>였기 때문에 <u>동물과 관련된 닉네임</u>을 생성하기로 했고 앞쪽에는 형용사를 뒤쪽에는 동물 이름을 사용해 닉네임을 만들어 보았다.</p><p></p><pre spellcheck="false"><code class="language-java">public class NicknameGenerator {

    // 형용사 배열
    private static final String[] adjectives = {
            "귀여운", "발랄한", "사랑스러운", "똑똑한", "활발한", "졸린", "장난꾸러기", "용감한", "상냥한", "행복한",
            "느긋한", "온화한", "믿음직한", "애교 많은", "웃음 가득한", "엉뚱한", "당당한", "재빠른", "고요한", "부드러운"
    };

    // 동물 이름 배열
    private static final String[] animals = {
            "강아지", "고양이", "햄스터", "토끼", "앵무새", "거북이", "고슴도치", "말티즈", "푸들", "치와와",
            "골든리트리버", "페르시안", "스피츠", "요크셔테리어", "러시안블루", "코뉴어", "페럿", "다람쥐", "이구아나", "비글"
    };

    // 랜덤 닉네임 생성 함수
    public String generateNickname() {
        Random random = new Random();

        // 배열의 길이에 맞춰 랜덤으로 배열 값을 조회
        String adjective = adjectives[random.nextInt(adjectives.length)];
        String animal = animals[random.nextInt(animals.length)];
        // 추가적으로 닉네임 중복을 방지하기 위해 1~999까지의 무작위 숫자 조회
        int number = random.nextInt(1000);

        return adjective + animal + number;
    }
}</code></pre><p>위 처럼 간단한 무작위 닉네임 생성기를 만들어 보았다.</p><p></p><p>하지만 이걸로는 유저의 닉네임 중복을 완벽히 막을 수는 없어서 DB를 통해 해당 <u>닉네임이 존재하는 지 확인 후 재생성하는 과정도 포함</u>시켜야 한다.</p><h2></h2><h2>돌아보며</h2><hr><blockquote><p>개발 후 코드를 보면 간단하지만 차근차근 생각해 나가는 과정이 중요한 것 같다.</p><p>코드 자동화 기술이 워낙 많이 발전해서 이 정도는 간단하게 작성해주겠지만 백지 상태에서 스스로 생각하면서 만들어봐야 더 기억에 오래 남아 추후에 시간을 절약하게 되는 것 같다.</p><p>모든 코드를 백지에서 부터 천천히 만들 순 없겠지만, 미래를 위해 자동으로 작성된 코드라면 천천히 작동 방식을 생각해보며 머릿속에 남기며 공부해 나가보자</p></blockquote><p></p><p></p>

어디에 쓰이나?한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우