내 로컬에서 프로젝트를 실행시키고, 같은 망을 사용하는 팀원들에게 내가 만든 페이지를 공유해주고 싶었다. 그렇게 하려면 클라우드 등에 배포를 해서 보여줄 수도 있지만, 나는 그냥 바로 보여주고 싶었기에 <code spellcheck="false">localhost</code>대신 내 IP를 붙여 공유 했다.Mac 에서 내 IP를 알아내는 명령어는 다음과 같다.<pre spellcheck="false"><code class="language-bash"># ethernet 연결일 경우
ipconfig getifaddr en0

# wireless 연결일 경우
ipconfig getifaddr en1</code></pre>매번 확인이 필요할 때마다 터미널을 들어가서 저 명령어를 치고.. 명령어를 까먹어서 다시 검색해서 찾고, 결과를 복사해서 포트를 붙이고.. 다시 복사하고를 반복했다.생각보다 내 아이피를 확인할 일이 많았고, 명령어가 길고 복잡했기에 간단한 명령어로 내 IP를 알아낸 후 바로 클립보드로 복사되게끔 만들었다.<h1>Shell Script 작성</h1><pre spellcheck="false"><code class="language-shell">#!/bin/bash

# IP 주소 가져오기
ip=$(ipconfig getifaddr en0)

# 포트 번호가 주어지면 ip:port 형식으로 출력 및 클립보드에 Copy
if [ -n "$1" ]; then
 echo "$ip:$1" | pbcopy
 echo "Public IP with port: $ip:$1"
else
 echo "$ip" | pbcopy
 echo "Public IP: $ip"
fi</code></pre>위 Script 내용을 요약하면 다음과 같다.<ul><li>실행 하면 <code spellcheck="false">ipconfig getifaddr en0</code> 명령어를 이용하여 내 IP를 불러온 뒤, 바로 클립보드에 넣는다.</li><li>포트 번호를 인수로 받으면 <code spellcheck="false">&lt;IP Adress&gt;:&lt;port&gt;</code> 식으로 클립보드에 들어간다.</li></ul>작성 후 이 파일을 실행 시킬 수 있도록 권한을 줘야한다.<pre spellcheck="false"><code class="language-shell">chmod +x get_ip.sh</code></pre><h1>Alias 작성</h1>이제 작성한 스크립트를 터미널에서 간단한 명령어로 실행시킬 수 있게 alias를 작성해보자. 그러기 위해서는 <code spellcheck="false">.zshrc</code>를 편집해야 한다.<pre spellcheck="false"><code class="language-bash"> vim ~/.zshrc</code></pre>맨 마지막 줄에 다음과 같이 추가하고 <code spellcheck="false">:wq</code> 명령어를 통해 빠져나온다. alias 뒤에 들어갈 텍스트는 자유다. 나는 getip로 정했다.<pre spellcheck="false"><code class="language-bash">alias getip='get_ip.sh 파일 위치'</code></pre>아래 명령어로 변경 사항을 적용 시킨다.<pre spellcheck="false"><code class="language-bash">source ~/.zshrc</code></pre><h1>실행!</h1>이제 터미널에서 지정한 alias를 바로 쳐보자. 그럼 터미널에 내 아이피가 출력되고, 클립보드에도 바로 들어간걸 확인할 수 있다.<img src="https://image.until.blog/love/article/1723038819891" alt="until-1188">

내 IP주소를 가져오고 바로 복사까지 해보자

터미널에서 내 IP 주소 바로 가져오기

<h1>게으른 초기화 (lazy initialization) 이란?</h1>React에서 게으른 초기화는 상태(state) 초기화 시점에서 초기화 작업이 비용이 많이 들거나 시간이 오래 걸릴 때 유용하게 사용할 수 있는 기술이다.예를 들어 다음과 같은 코드를 보자.<pre spellcheck="false"><code class="language-typescript">const veryHeavyWork = () =&gt; {
 let expensiveValue = 1;

 console.log('very heavy work called');

 // 연산 비용이 아주 비싼 함수
 // ......
 return expensiveValue;
};

export const LazyInitComponent = () =&gt; {
 const [expensiveState, setexpensiveState] = useState(veryHeavyWork());
 const [count, setCount] = useState(0);

 useEffect(() =&gt; {
 console.log('rerender');
 }, [count]);

 return (
 &lt;div&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;click me&lt;/button&gt;
 &lt;/div&gt;
 );
};
</code></pre>위의 코드에서 컴포넌트 안의 state(<code spellcheck="false">count</code>)를 변화 시킬 때 마다 리렌더링이 일어난다. 리렌더링이 일어날 때, <code spellcheck="false">expensiveState</code>에 초깃값으로 들어가기 위해 사용된 <code spellcheck="false">veryHeavyWork</code> 함수가 계속해서 호출된다.<img src="https://image.until.blog/love/article/1721747266590" alt="until-917">이런 경우 게으른 초기화를 사용하면, 리렌더링이 되더라도 초깃값으로 설정 되었다면, 값이 비싼 함수를 다시 실행시키지 않을 수 있다.<pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(() =&gt; veryHeavyWork());
</code></pre>방법은 위와 같이 간단하다. 함수를 실행한 결과값을 전달하는 것이 아닌, 함수를 반환하는 함수를 전달하면 된다.<img src="https://image.until.blog/love/article/1721747296968" alt="until-918"><h2>무슨 차이점이지?</h2>자바스크립트의 실행 순서와 리액트가 초깃값이 있는지를 판단하는 순서에 따라 다르다.<pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(veryHeavyWork());
</code></pre>위와 같은 경우는 <code spellcheck="false">useState</code>에 초깃값이 있는지 없는지를 판단하기 전에 <code spellcheck="false">veryHeavyWork</code>라는 함수를 실행시킨다. 함수를 실행 후, 반환 값을 <code spellcheck="false">useState</code>에 넣으려 했지만, 이미 초깃값이 있기 때문에 무시된다.<pre spellcheck="false"><code class="language-typescript">const [expensiveState, setexpensiveState] = useState(() =&gt; veryHeavyWork());
</code></pre>그러나 위와 같이 작성한다면, <code spellcheck="false">veryHeavyWork</code>함수를 실행하기 전에 <code spellcheck="false">useState</code>에 함수를 반환하는 함수 그 자체가 전달된다. 따라서 함수라는 초깃값이 이미 할당되어있기에 안의 내용은 무시되고 <code spellcheck="false">veryHeavyWork</code> 함수는 실행되지 않는다.<h2>언제 쓰면 좋을까?</h2>위에서 계속 설명한 것과 같이 초깃값을 생성하는데 연산이 오래 걸릴 경우에 쓰면 좋다. 예를 들어, <code spellcheck="false">localStorage</code>나 <code spellcheck="false">sessionStorage</code>에 접근할 때, 배열에 관한 메서드를 사용할 때 등이다.<h1>useEffect를 이용한 초기화와의 차이</h1><code spellcheck="false">useState</code>의 게으른 초기화와 <code spellcheck="false">useEffect</code>를 통해 컴포넌트가 렌더링 될 때 state를 초기화 하는 것 사이에는 몇 가지 차이가 있다.<h3>초기화 시점</h3><ul><li>게으른 초기화: state 변수 선언 시점에 직접 값을 설정한다. 컴포넌트가 처음 렌더링되기 전에 값이 설정되므로, 컴포넌트가 마운트되고 첫 렌더링이 일어나기 전에 값을 사용할 수 있다.</li><li>useEffect: 컴포넌트가 렌더링 된 이후 초기화</li></ul><h3>용도</h3><ul><li>게으른 초기화: 컴포넌트가 마운트되기 전에 값을 사용해야 하는 경우</li><li>useEffect: 비동기 작업이나 side effect가 발생할 경우</li></ul>

게으른 초기화에 대해 알아보자

React의 게으른 초기화 (lazy initialization)

#2. npm create vite@latest &amp; first hooks#챕터 목차npm create vite@latestHello World Reactbasic hooks : useStatebasic hooks : useEffectVirtual DOM &amp; StrictModeComponents &amp; PropsReact Dev-Toolsf

#2. npm create vite@latest & first hooks

<h2>크롬 익스텐션</h2><ul class="tight" data-tight="true"><li>user agent switcher: user agent 변경 (PC에서 모바일 화면을 볼 수 있음)</li><li>awesome screenshot: 스크롤 캡쳐, 부분 캡쳐 및 녹화 등 가능 (가입 필요)</li><li>svg export: 해당 사이트의 svg 이미지를 다운로드 할 수 있게 함</li><li>image downloader: 해당 사이트의 이미지를 가져와 다운로드 할 수 있게 함</li><li>openwax: 접근성 테스트, 문제가 있는 부분을 알려주고 경고함</li><li>React developer Tool: React로 개발된 사이트에 접속할 시 아이콘에 색이 생김</li><li>vue devtools: vue로 개발된 사이트에 접속할 시 아이콘에 색이 생김</li></ul><hr><h2>윈도우 응용 프로그램</h2><ul class="tight" data-tight="true"><li>SVG Viewer Extension for Windows: 윈도우 탐색기에서 svg 이미지를 미리보기 하게 함</li></ul><hr><h2>vs code 익스텐션</h2><ul class="tight" data-tight="true"><li>Atom One Dark Theme: 화면의 코드 컬러를 보기 좋게 변경함</li><li>live server: 새로고침을 하지 않아도 저장할 시 바로 사이트에 반영됨</li><li>beautify: html, css formatter</li><li>prettier: 코드 formatter. 자바스크립트 코드 포멧 자동 변경</li></ul><h3>beautify 기본 설정</h3><ul class="tight" data-tight="true"><li>beautify selection 단축키지정(alt+b)</li><li>join lines 단축키지정(alt+j)</li></ul><h3>prettier 기본 설정</h3><ul class="tight" data-tight="true"><li>default formatter → prettier로 변경</li><li>settings → format on save 체크</li><li>prettier.singleQuote(default:false)<ul class="tight" data-tight="true"><li>체크, 문자열은 홑따옴표로 통일 (변수에 html이 있을 경우 쌍따옴표가 포함됨)</li></ul></li><li>css, html파일에서도 prettier가 적용되어 한줄로 작성이 불가능하다.<ul class="tight" data-tight="true"><li>이 경우 오히려 가독성이 떨어짐.</li><li>javascript를 위해서 사용한다고 생각하면 됨.</li></ul></li><li>위 문제를 해결하기 위해 .prettierignore 파일을 프로젝트 루트 폴더에 만들고 무시 규칙을 작성.<ul class="tight" data-tight="true"><li>무시 규칙</li></ul></li></ul><pre spellcheck="false"><code>#Ignore all HTML files:
\**/**.html#Ignore all css files:\**/**.css</code></pre><hr><h2>vs code 단축키</h2><ul class="tight" data-tight="true"><li>f2 : 파일명 변경</li><li>ctrl+/ : 주석으로 변경</li><li>alt+shift+A : 부분주석</li><li>alt+shift+방향키 상하 : 해당 줄 복사</li><li>shift+del : 해당 줄 지우기</li><li>alt+방향키 상하 : 해당 줄 옮기기</li><li>alt+shift+방향키 좌우 : 확장 선택</li><li>tab, shift+tab : 들여쓰기, 내어쓰기</li><li>ctrl+alt+방향키 상하 : 멀티 커서</li><li>ctrl+D : 다음 같은 단어에 멀티커서</li><li>alt+클릭 : 멀티 커서</li></ul><hr><h2>사이트</h2><h3>유용한 사이트</h3><ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.dbcut.com/">[디비컷]</a>: 웹디자인 참고 사이트</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://caniuse.com/">[can i use]</a>: 크로스브라우징 도움 사이트</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.dothome.co.kr/">[닷홈]</a>: 무료 호스팅 사이트 (유료 호스팅 가능)</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.spritecow.com/">[Sprite Cow]</a>: 스프라잇 이미지의 범위를 알려줌</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://yesviz.com/">[yesviz]</a>: 기기들의 viewprot를 모두 확인할 수 있음</li></ul><h3>Flex, Grid 설명</h3><ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://studiomeal.com/archives/197">[이번에야 말로 CSS Flex를 익혀보자]</a>: Flex 설명 - 1분 코딩</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://studiomeal.com/archives/533">[이번에야 말로 CSS Grid를 익혀보자]</a>: Grid 설명 - 1분 코딩</li></ul><h3>연습 게임</h3><ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://flukeout.github.io/">[CSS Dinner]</a>: CSS 선택자 연습 사이트</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://flexboxfroggy.com/#ko">[Flexbox Frog]</a>: flex 연습 게임 사이트</li></ul><hr><h2>기타 팁</h2><ul class="tight" data-tight="true"><li>닷홈 서버에 올릴 때는 html(루트 폴더)에만 넣어야함.</li></ul>

프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트 등 이전 게시글 백업

프론트엔드 개발 시 유용한 크롬 익스텐션, 응용프로그램, vs code 익스텐션, 단축키, 사이트

Next.js에 mixpanel을 적용하기 위해 사용한 방법들을 소개하고자 한다.<h3>SDK 설치</h3>우선 mixpanel 공식에서 제공해주는 브라우저용 SDK를 설치하자.<pre spellcheck="false"><code class="language-shell">yarn add mixpanel-browser
# or
npm install --save mixpanel-browser</code></pre><h3>하고자 하는 목표</h3>Docs에서 제공하는 아래와 같은 코드로 초기화를 진행하면 별다른 설정 없이 페이지 단위로 Tracking이 진행된다.<pre spellcheck="false"><code class="language-javascript">mixpanel.init('YOUR_TOKEN', {debug: true, track_pageview: true, persistence: 'localStorage'});</code></pre>그러나 나는 로그인한 유저에 대해 정보를 부여하고, 그에 따른 데이터를 더 보고 싶었다. 따라서 <code spellcheck="false">mixpanel.identify</code> 메서드와 <code spellcheck="false">mixpanel.people.set</code> 메서드가 필요했다.또한 나중에라도 언제 어느 곳에서 다른 액션에 대한 추가 정보를 tracking 해야 할 것 같아서 액션들을 묶는 클래스로 만들어 재사용이 용이하게 하고 싶었다.<h3>이를 위한 코드</h3><pre spellcheck="false"><code class="language-typescript">import mixpanel from "mixpanel-browser";

class MixpanelService {
 private static instance: MixpanelService;
 private isProduction = process.env.NODE_ENV === "production";

 constructor() {
 if (this.isProduction) {
 mixpanel.init(`${process.env.NEXT_PUBLIC_MIXPANEL_TOKEN}`, {
 debug: true,
 track_pageview: true,
 persistence: "localStorage",
 });
 }
 }

 // 생략 ....
 public setIdentity(id: string) {
 if (this.isProduction) mixpanel.identify(id);
 }

 public setUser(userInfo: UserInfo) {
 if (this.isProduction) {
 mixpanel.people.set({
 $name: userInfo.name,
 });
 }
 }

 public reset() {
 if (this.isProduction) {
 mixpanel.reset();
 }
 }
}</code></pre>Class로 만들 경우 문제점이 어디선가는 <code spellcheck="false">mixpanel.init</code>를 호출해야 하는데, Class내의 메서드들을 따로 호출하지 않는다면 초기화가 되지 않는다. 따라서 지금과 같은 경우에는 로그인을 하지 않으면 추적 코드가 심어지지 않는다.따라서 단순히 <code spellcheck="false">mixpanel.init</code>을 호출하기 만을 위한 메서드를 추가 작성하여야 한다.<pre spellcheck="false"><code class="language-typescript">class MixpanelService {
 // ...
 public static getInstance(): MixpanelService {
 if (!MixpanelService.instance) {
 MixpanelService.instance = new MixpanelService();
 }
 return MixpanelService.instance;
 }
}</code></pre>나의 경우에는 우선 로그인 하는 쪽에만 코드를 심어주면 되었다.<pre spellcheck="false"><code class="language-typescript">if (loginUser) {
 MixpanelService.setIdentity(loginUser.id);
 MixpanelService.setUser(loginUser);
} else {
 MixpanelService.getInstance();
}</code></pre>혹시 더 나은 방법이 있다면 알려주세요!!

Next.js에 mixpanel을 적용하기 위해 사용한 방법들을 소개하고자 한다.

Next.js에 mixpanel 연동하기

Cloud Issue

기타

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/2303">2303.숫자게임</a></li><li>사용언어 : C#</li><li>난이도 : 중하</li><li>풀이시간 : 45m</li><li>유형 : 브루트포스</li></ul><h2>문제</h2>N명이 모여 숫자 게임을 하고자 한다. 각 사람에게는 1부터 10사이의 수가 적혀진 다섯 장의 카드가 주어진다. 그 중 세 장의 카드를 골라 합을 구한 후 일의 자리 수가 가장 큰 사람이 게임을 이기게 된다. 세 장의 카드가 (7, 8, 10)인 경우에는 합은 7+8+10 = 25가 되고 일의 자리 수는 5가 된다. 어떤 사람이 받은 카드가 (7, 5, 5, 4, 9)인 경우 (7, 4, 9)를 선택하면 합이 20이 되어 일의 자리 수는 0이 되고, (5, 5, 9)를 선택하면 합이 19가 되어 일의 자리 수는 9가 된다. 게임을 이기기 위해서는 세 장의 카드를 선택할 때 그 합의 일의 자리 수가 가장 크게 되도록 선택하여야 한다.예를 들어, N=3일 때<ul><li>1번 사람이 (7, 5, 5, 4, 9),</li><li>2번 사람이 (1, 1, 1, 1, 1),</li><li>3번 사람이 (2, 3, 3, 2, 10)의&nbsp;</li></ul>카드들을 받았을 경우, 세 수의 합에서 일의 자리 수가 가장 크게 되도록 세 수를 선택하면<ul><li>1번 사람은 (5, 5, 9)에서 9,</li><li>2번 사람은 (1, 1, 1)에서 3,</li><li>3번 사람은 (2, 3, 3)에서 8의</li></ul>결과를 각각 얻을 수 있으므로 첫 번째 사람이 이 게임을 이기게 된다.N명에게 각각 다섯 장의 카드가 주어졌을 때, 세 장의 카드를 골라 합을 구한 후 일의 자리 수가 가장 큰 사람을 찾는 프로그램을 작성하시오. 가장 큰 수를 갖는 사람이 두 명 이상일 경우에는 번호가 가장 큰 사람의 번호를 출력한다.<h2>입력</h2>첫 줄에는 사람의 수를 나타내는 정수 N이 주어진다. N은 2이상 1,000이하이다. 그 다음 N 줄에는 1번부터 N번까지 각 사람이 가진 카드가 주어지는 데, 각 줄에는 1부터 10사이의 정수가 다섯 개씩 주어진다. 각 정수 사이에는 한 개의 빈칸이 있다.<h2>출력</h2>게임에서 이긴 사람의 번호를 첫 번째 줄에 출력한다. 이긴 사람이 두 명 이상일 경우에는 번호가 가장 큰 사람의 번호를 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>3
7 5 5 4 9
1 1 1 1 1
2 3 3 2 10
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>1
</code></pre><h2>문제 풀이 접근</h2>이 문제가 주어진 후, 바로 든 생각은 영락없이 조합 코드 사용해서 갱신해주면 되겠다. 였다. 정수형 2차원 배열인 int[][]로 입력을 구성했고, 사람수 만큼 루프 돌리면서 조합을 갱신하여 1의 자리 숫자가 제일 크면 갱신하고, 갱신되는 상황에서 if 문 한번 더 추가해서 현재 갱신된 사람의 번호보다 새롭게 들어온 사람의 번호가 크다면 갱신하는 방법으로 문제 풀이 방식을 설계했다.<h3>작성 코드 (C#)</h3><pre spellcheck="false"><code class="language-csharp">using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Net.NetworkInformation;
using static CodingTestProj.Program;

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


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

 public class Solution
 {
 public int n;

 public List&lt;int&gt;[] _list;

 int _lastNumb; // 일의 자리 숫자
 int _ret;

 public int[][] _arr;

 public void Solve()
 {
 _ret = 0;
 _lastNumb = 0;
 int n = Int32.Parse(Console.ReadLine());
 _arr = new int[n][];

 for(int i = 0; i &lt; n; ++i)
 {
 _arr[i] = new int[5];
 }

 for (int i = 0; i &lt; n; i++)
 {
 string[] _input = Console.ReadLine().Split(' ');

 for (int j= 0; j &lt; _input.Length; ++j)
 _arr[i][j] = int.Parse(_input[j]);
 }

 for(int i = 0; i &lt; n; ++i)
 {
 int[] _c = new int[5];
 combination(_arr[i], _c, 3, 0, 0, i+1);
 }

 print();
 }

 public void combination(int[] _arr, int[] _com, int r, int pos,int depth, int _person)
 {
 if (r == 0)
 {
 var _val1 = _com[0];
 var _val2 = _com[1];
 var _val3 = _com[2];

 var ret = _val1 + _val2 + _val3;

// while (ret &gt; 10) =&gt; 이 부분이 문제였다.
 while (ret &gt;= 10) 
 {
 ret %= 10;
 }

 if (ret &gt;= _lastNumb)
 {
 _lastNumb = ret;

 if (_ret &lt;= _person)
 _ret = _person;
 }

 return;
 }
 else if (depth == _arr.Length)
 return;
 else
 {
 _com[pos] = _arr[depth];

 combination(_arr, _com, r - 1, pos + 1, depth + 1, _person);
 combination(_arr, _com, r, pos, depth + 1, _person);
 }
 }


 public void print()
 {
 Console.WriteLine(_ret);
 }
 }
}

</code></pre> 정답이라고 생각했고, 7%에서 틀렸는데 게시판에 있는 모든 반례는 통과하고 있어서 의문이다.. 패스 한 후에 다시 포스팅할 예정이다.=&gt; 위에 while(ret &gt; 10) 이 문제였다. 일의 자리수를 구하기 위해서는 10일때도 나눠서 0임을 뽑았어야했는데, 11부터 나누도록 해서 걸리는 케이스가 있었다.<h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1728910760905.png" data-width="100%" data-align="center">

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

코딩테스트 준비 - 숫자 게임

Python

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1726239900445.gif" data-width="100%" data-align="center" alt="until-1342">언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(history.back)로 닫을 수 없었어요.이런 경험은 데스크탑에서는 그렇다 쳐도 모달이 풀페이지로 나타나는 모바일에서는 뒤로가기를 했을 때 아예 페이지가 닫혀버리는 등 유저 경험이 좋지 않았어요.때문에 Route로 동작하는 Modal로 변경하기로 했어요. 어떤 방식으로 구현했는지 간단하게 공유해볼게요.<h2>ArticleCard</h2>우선 ArticleCard는 기존에는 onClick handler를 통해 isOpen state를 변경해주고 있었는데요. 이것을 next/Link 컴포넌트로 변경해주었어요.<pre spellcheck="false"><code class="language-typescript">import { LinkProps } from 'next/link'
import { useRouter } from 'next/router'
import * as _ArticleCard from 'src/components/ArticleCard'
import { ArticleItem } from 'src/types/article'

type Props = {
 data: ArticleItem
}

export const ArticleCard = ({ data }: Props) =&gt; {
 const router = useRouter()

 const href: LinkProps['href'] = {
 query: {
 ...router.query,
 'article-id': data.articleId,
 },
 }

 const as = `@${data.blog.username}/${data.urlSlug}`

 return (
 &lt;_ArticleCard.Root data={data}&gt;
 &lt;_ArticleCard.Thumbnail shallow href={href} as={as} /&gt;
 &lt;_ArticleCard.AuthorInfo showGroup /&gt;
 &lt;_ArticleCard.ArticleInfo shallow href={href} as={as} /&gt;
 &lt;/_ArticleCard.Root&gt;
 )
}</code></pre><code spellcheck="false">Article.Thumbnail</code> 과 <code spellcheck="false">Article.ArticleInfo</code>가 Link의 props을 대신 받아오고 있습니다.이제 아티클 카드를 클릭하면 next/router는 href에 의해서 <code spellcheck="false">until.blog?article-id=219</code> 로 이동하게 되요.또한 as prop을 통해 article-hash-id를 브라우저 검색창에 노출하지 않고 실제 게시글 상세 route인 것처럼 변경해주었어요.<h2>ArticleDetailDialog</h2>이제 서치파라미터에 등록된 article-id를 읽어와서 모달을 띄워주면 돼요.<pre spellcheck="false"><code class="language-typescript">import { useRouter } from 'next/router'
import { Dialog, useCurrentSize } from 'ui'
import Content from './Content'
import { boxStyle } from './styles'

const ArticleDetailDialog = () =&gt; {
 const router = useRouter()
 const currentSize = useCurrentSize()

 const articleId =
 typeof router.query['article-id'] === 'string' &amp;&amp;
 router.query['article-id'] !== ''
 ? Number(router.query['article-id'])
 : null

 const handleClose = () =&gt; {
 const query = { ...router.query }
 delete query['article-id']

 router.push(
 {
 query,
 },
 undefined,
 { shallow: true, scroll: false },
 )
 }

 return (
 &lt;Dialog
 open={!!articleId}
 onClose={handleClose}
 align="top"
 alignOffset={currentSize === 'desktop' ? 60 : 40}
 css={{
 maxWidth: '920px',
 width: '100%',
 }}
 &gt;
 &lt;div css={boxStyle}&gt;
 &lt;Content articleId={articleId} onClose={handleClose} /&gt;
 &lt;/div&gt;
 &lt;/Dialog&gt;
 )
}

export default ArticleDetailDialog</code></pre>이를 통해 유저는 새로고침을 하더라도 게시글 상세페이지를 유지할 수 있고, 뒤로가기를 통해서도 모달을 닫을 수 있게 되었습니다. 👍

언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(hist

next.js 에서 라우트로 관리되는 모달 구현하기 (route as modal)

이전에 Java에서 불변 데이터 객체를 만들기 위해서는 여러 보일러플레이트들이 많이 필요했다. 그리고 이런 불편을 해소하기 위해 JDK 14부터 <code spellcheck="false">record</code>라는 녀석이 추가되었다.<code spellcheck="false">getter</code>, <code spellcheck="false">equals</code>, <code spellcheck="false">hashcode</code>, <code spellcheck="false">toString</code> 등을 자동으로 만들어주어, 불변 데이터 객체를 쉽게 만들 수 있게 해주는 효자같은 존재다.하지만 이런 record를 사용할 때 조심해야 할 점이 있다.<h1>record에 배열을 쓸 때 조심해야한다</h1><pre spellcheck="false"><code class="language-java">public record Person(
 String[] names,
 int age
) {
}</code></pre>바로 다음과 같이 레코드의 구성요소에 배열(array)이 있을 경우이다.레코드의 구성요소에 배열이 존재할 경우, 레코드가 보일러플레이트들을 자동으로 생성해줌에도 불구하고 직접 equals, hashcode, toString을 재정의해주어야 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://rules.sonarsource.com/java/?search=Equals%20method%20should%20be%20overridden%20in%20records%20containing%20array%20fields">https://rules.sonarsource.com/java/?search=Equals%20method%20should%20be%20overridden%20in%20records%20containing%20array%20fields</a>실제로 SonarQube에도 관련된 이슈가 major 단계로 등록되어 있다.그렇다면 이제 왜 이런 이슈가 존재하는지 그 이유를 알아보자.<h1>record에 배열을 쓸 때 조심해야 하는 이유</h1><h2>record의 equals 메소드 작동 방식</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Record.html">https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Record.html</a>오라클의 Record 명세를 살펴보자.<img src="https://image.until.blog/octoping/article/1726301665126.png" alt="until-1346">레코드의 equals 메소드는 해당 레코드의 모든 매개변수 인스턴스가 상대 인스턴스와 동등할 때 true를 반환한다.레코드 클래스의 동등성(Equality)을 비교하는 방법은 다음과 같다.<ul><li>레코드 구성요소 c가 참조 타입 (reference type)일 경우, <code spellcheck="false">Objects.equals(this.c, r.c)</code>의 결과로 판단한다</li><li>레코드 구성요소 c가 원시 타입일 경우, 래퍼 클래스로 바꿔서 <code spellcheck="false">Integer.compare(this.c, r.c)</code>와 같이 compare의 결과로 판단한다.</li></ul><img src="https://image.until.blog/octoping/article/1726301722607.png" alt="until-1347">배열(array)은 참조 타입이므로 <code spellcheck="false">Objects::equals</code>의 결과로 동등성을 판단하게 되고, 배열은 참조가 같을 경우에만 true를 반환하기 때문에 레코드의 equals 연산은 우리가 바라던 대로 흘러가지 않게 된다.그리고 이는 <code spellcheck="false">hashcode</code>, <code spellcheck="false">toString</code>에도 똑같은 논리로 적용되어 원치 않는 결과를 만들어낼 수 있다..<h1>해결법</h1><h2>1. 직접 equals, hashcode, toString을 재정의한다</h2>문제에 대한 직관적인 해답이다. 직접 배열에 대응하도록 이 셋을 재정의해주어야 한다.<pre spellcheck="false"><code class="language-java">public record Person(
 String[] names,
 int age
) {
 @Override
 public boolean equals(Object o) {
 if (this == o) return true;
 if (o == null || getClass() != o.getClass()) return false;
 Person person = (Person) o;
 return age == person.age &amp;&amp; Arrays.equals(names, person.names);
 }

 @Override
 public int hashCode() {
 int result = Objects.hash(age);
 result = 31 * result + Arrays.hashCode(names);
 return result;
 }

 @Override
 public String toString() {
 return "Person{" +
 "names=" + Arrays.toString(names) +
 ", age=" + age +
 '}';
 }
}</code></pre>하지만 이렇게 되면 코드가 굉장히 복잡해진다. 또, 자동으로 생성해주는 함수들을 직접 또 만들어야 하니 사실상 Record를 사용하는 맛이 없다.<h2>2. 배열 대신 List를 사용한다</h2>훨씬 간단하고 영리한 방법이다.<code spellcheck="false">Objects::equals</code>를 제대로 지원하지 않는 배열 대신 List를 사용하면 된다.<pre spellcheck="false"><code class="language-java">public record Person(
 List&lt;String&gt; names,
 int age
) {
}</code></pre><img src="https://image.until.blog/octoping/article/1726302032359.png" alt="until-1348"> List 최고!

이전에 Java에서 불변 데이터 객체를 만들기 위해서는 여러 보일러플레이트들이 많이 필요했다. 그리고 이런 불편을 해소하기 위해 JDK 14부터 record라는 녀석이 추가되었다.getter, equals, hashcode, toString 등을 자동으로 만들어주어, 불변 데이터 객체를 쉽게 만들 수 있게 해주는 효자같은 존재다.하지만 이런 record를 

record에서 배열 사용하지 않기

🪟 Window

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

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

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

<code spellcheck="false">.env</code> 파일을 이용하여 환경 변수를 설정하고, 다양한 환경에서 다른 값을 가지고 프로그램을 실행할 수 있다.일반적으로 아래와 같은 <code spellcheck="false">.env</code> 파일들을 생성해 사용한다.<ul><li><code spellcheck="false">.env</code>: 기본 환경 변수 파일</li><li><code spellcheck="false">.env.local</code>: local 환경에서만 실행</li><li><code spellcheck="false">.env.development</code>: 개발 환경에서만 실행</li><li><code spellcheck="false">.env.development.local</code>: 개발 환경에서만 로드되는 local 에서만 실행</li><li><code spellcheck="false">.env.production</code>: 프로덕션 환경에서만 로드되는 환경 변수 파일</li><li><code spellcheck="false">.env.production.local</code>: 프로덕션 환경에서만 로드되는 로컬 환경 변수 파일</li></ul><blockquote>💡 <code spellcheck="false">.local</code>이 붙으면 일반적으로 버전 관리에서 자동 제외되며, 로컬에서만 필요한 설정을 저장 한다.</blockquote>Next.js에서는 환경 변수를 로드할 때 특정 우선순위를 따른다. 우선순위는 다음과 같다.<ol><li><code spellcheck="false">.env.local</code></li><li><code spellcheck="false">.env.[MODE].local</code></li><li><code spellcheck="false">.env.[MODE]</code></li><li><code spellcheck="false">.env</code></li></ol><code spellcheck="false">[MODE]</code> 에 들어올 수 있는 값은 다음과 같다.<ul><li>production (start, build시 자동 지정)</li><li>development (dev시 자동 지정)</li><li>test (test시 자동 지정)</li></ul><h2>특정 env 파일 지정</h2>보통 위와 같이 mode가 자동 지정되는데, build를 하는데 <code spellcheck="false">production.env</code> 파일이 아닌 <code spellcheck="false">development.env</code> 파일에 있는 값을 사용하고 싶을 때가 있다.다양한 방법이 있지만 <code spellcheck="false">env-cmd</code> 라는 라이브러리를 이용해 다음과 같이 사용할 수 있다.<pre spellcheck="false"><code class="language-json">"scripts": {
 "build:dev": "env-cmd -f .env.development.local next build",
},
</code></pre><pre spellcheck="false"><code class="language-bash">yarn build:dev
</code></pre>

env 파일의 적용 우선 순위 알아보기

env 파일 우선순위

<img src="https://image.until.blog/morethanmin/article/1715876172847" alt="until-47"><blockquote>이 글은 기본적인 react-hook-form의 사용방법을 설명하고 있지 않습니다.</blockquote>리액트에서 폼을 다룰 때 빼놓을 수 없는 react-hook-form. (최근에 확인해보니 토스가 스폰서더라..)react-hook-form을 사용하면서 watch를 통해 values를 가져와 계산하는 컴포넌트를 만들었는데, useForm을 사용하는 컴포넌트 전체가 리렌더링 되면서 퍼포먼스가 구려지는 이슈가 있어서 원인을 찾아보았다.<h2>watch API</h2>watch란 무엇일까? 공식문서를 확인해보자.<blockquote>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.</blockquote>아래와 같이 사용할 수 있다.<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>동작은 하지만 <code spellcheck="false">Summary</code>컴포넌트 상위의 Root 컴포넌트까지 전부 리렌더가 발생한다. 음... 내가 생각한 의도에 맞는 것 같은데... 좀만 더 읽어보자.<blockquote><ul><li>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.</li><li><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.</li></ul></blockquote>헉... watch를 쓰면 root부터 리렌더가 발생한다고한다. 실제 사용하는 경우에는 컴포넌트의 리렌더가 발생할 수 있으니 useEffect의 deps로써 활용할 수 있도록 최적화 되어있고, 실제 예시와 같은 사용방식에서는 적합하지 않은 것 같다.그럼 문서에 나와있는 useWatch를 알아보자.<h2>useWatch API</h2>문서를 읽어보면 다음과 같이 설명하고 있다.<blockquote>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.</blockquote>음... 그럼 전체 리렌더링이 발생하는 <code spellcheck="false">watch</code>를 사용했을 때 얻는 이점은 뭐지..? 일단 적용해보았다.<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>Root에 존재하는 form은 리렌더하지 않고 <code spellcheck="false">Summary</code> rootLevel부터 리렌더되는 이슈는 해결되는 것을 확인할 수 있었다. 👍<h2>useWatch의 deep partial type 이슈</h2>한가지 문제가 더 있었다. <code spellcheck="false">useWatch</code>를 사용한 경우 (정확히는 parmeterless한 <code spellcheck="false">useWatch</code>를 사용한 경우) <code spellcheck="false">watch</code>와 다르게 deepPartial이 적용된 타입이 적용된다는 것이다.이 문제는 <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>에서도 확인해보면 알 수 있다.결론적으로 <code spellcheck="false">watch</code>와 다르게 <code spellcheck="false">useWatch</code> 의 타입이 정의되어있는 것은 v8 버전에서 resolve가 된다고 한다.<h3>그럼 지금은 어떻게 대응해야할까?</h3>아래와 같이 하거나... 필요한 필드만 뽑아서 사용해야할 것 같다.<pre spellcheck="false"><code class="language-typescript">const values = useWatch() as Values</code></pre><h2>결론</h2><code spellcheck="false">watch</code>와 <code spellcheck="false">useWatch</code>의 네이밍만보고 동작하는 방식이 같을 것이라고 생각하고 로직안에 오류가 있다고 생각해서 해결하기까지 생각보다 시간을 썼던 것 같다. 문서를 자주 봐야겠다.

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

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

React에서 전역 상태관리는 뗄레야 뗄 수 없는 부분이다. 동적 웹이 대두된 이래 프론트엔드에서 이만큼 핫한 주제가 있을까 싶은데, Flutter로 프론트엔드를 처음 접한 나로서는 React 생태계의 상태관리를 보고 신기한 부분이 많았다. 일단 Flutter 자체가 나중에 나온 만큼 기존에 있었던 프레임워크들에서 괜찮아 보이는 요소들을 짬뽕해서 집어넣고 생산성을 극한까지 올려준 프레임워크인데, 상태관리 부분은 React에서 좋다는 것만을 취사선택했다고 느꼈다.취미생 정도 수준으로 GetX를 써오던 입장에서 솔직히 상태에 대한 깊은 이해는 필요가 별로 없었다. GetX가 워낙 잘 만들어져 있기도 하고, 엄청나게 쉬운 편이기 때문이다. 그냥 '상태'라는 Variable을 하나 두고, 이 Variable을 바꿀 수 있는 규칙을 지정해준 다음 규칙대로만 하면 상태를 관찰하던 Stateful Widget이 알아서 자신을 리렌더링한다. 얼마나 간단한가?<pre spellcheck="false"><code>class SimpleCounterController extends GetxController {
 var count = 0.obs;

 void increase() =&gt; count++;
 void decrease() =&gt; count--;
}

class SimpleCounter extends StatelessWidget {
 final SimpleCounterController controller = Get.put(SimpleCounterController());

 @override
 Widget build(BuildContext context) {
 return Column(
 children: [
 IconButton(
 icon: Icon(Icons.remove),
 onPressed: controller.decrease,
 ),
 Obx(() =&gt; Text('Count: ${controller.count}')),
 IconButton(
 icon: Icon(Icons.add),
 onPressed: controller.increase,
 ),
 ],
 );
 }
}
</code></pre>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://cherrie.hashnode.dev/flutter-getx-provider-bloc-riverpod">CherrieSSH의 블로그</a><s>아니 until blog는 Dart syntax를 따로 지원을 안하나보다. 플러터 개발자 슬프니까 빨리 만들어주셈</s>코드를 슬쩍 보면 onPressed일 때 controller.decrease를 통해 상태를 조작하게 되어 있다. 그리고 Obx 를 이용하면, State가 변할 때마다 위젯 리렌더링을 진행한다.그렇다면 지금까지 Flutter을 통해 학습할 수 있었던 내용을 요약한다면,<blockquote>Stateful해야 하는 기능들이 있다. 이것들은 "상태(State)"가 변화하면 자동으로 리렌더링된다.전역 State를 관리하는 공간을 정해두고 State 내의 Attribute를 어떻게 Manipulate할지 규칙을 둔 뒤 그대로 수행하면, 이를 관찰하고 있다가 (Observer) 리렌더링을 바로 처리한다.</blockquote>이게 다이다. 그런데 React로 와서 가장 많이 쓰이는 상태관리 라이브러리인 Redux를 훑다 보니 전역 상태관리에 대해서 왜 이렇게 생겨났는지를 더 깊이있게 알게 되었다.만악의 근원은 React는 기본적으로 Child Component의 정보를 Parent Component에 전달할 수가 없다는 점이다. 그래서 Parent Component가 Child로 Props를 끝도 없이 전달하는 문제가 발생한다.<pre spellcheck="false"><code class="language-javascript">import React, { useState } from 'react';

// 최상위 컴포넌트
function App() {
 const [user, setUser] = useState({ name: "Steve" });

 return (
 &lt;div&gt;
 &lt;Navbar /&gt;
 &lt;MainPage user={user} /&gt;
 &lt;/div&gt;
 );
}

// MainPage 컴포넌트
function MainPage({ user }) {
 return (
 &lt;div&gt;
 &lt;h3&gt;Main Page&lt;/h3&gt;
 &lt;Content user={user} /&gt;
 &lt;/div&gt;
 );
}

// Content 컴포넌트
function Content({ user }) {
 return (
 &lt;div&gt;
 &lt;Message user={user} /&gt;
 &lt;/div&gt;
 );
}

// Message 컴포넌트
function Message({ user }) {
 return &lt;p&gt;Welcome {user.name}&lt;/p&gt;;
}

export default App;</code></pre>출처: 멋쟁이사자처럼 상태관리 세미나 자료 <s>이만큼 문제점을 잘 표현한 자료가 없다</s>따라서 전역 변수와 같이 "전역 상태"의 도입 필요성이 생겨나게 되고, 그렇다면 전역 상태를 보관하는 공간과 이 안에 들어있는 전역 상태 Attribute들에 대한 제약조건이 필요하다. 이때 등장하는 개념이 Flux Architecture이다. <h2>Flux Architecture</h2><img src="https://image.until.blog/mushroombud/article/1727378498805.png" alt="until-1576">Data Flow가 단방향인 것이 핵심이다. State가 Observer인 Controller-Views를 통해 View를 변화시켜야 하고, 그 반대는 안된다. Stores에 저장되는 데이터(State Attribute)를 변경하는 규칙(Dispacher)은 미리 작성되어 있어야 하고, 규칙 외의 변화는 불허한다. <h2>Redux</h2>Flux Architecture을 구현한 Redux의 3원칙을 살펴보자.<ul><li>Single source of truth</li><li>State is read-only</li><li>Changes are made with pure functions</li></ul>Single Source of truth야 Store을 하나만 두겠다는 뜻이고, Read-only개념도 Flux Architecture 그대로이다. Pure Function에 대해서만 조금 더 알아보면, "같은 입력값에 대해 항상 같은 결과값을 반환 &amp; 입력값을 변화시키지 않음" 조건을 만족하는 함수이다. 비슷한 개념으로 CRUD에서 Read, Update, Delete는 계속 실행해도 결과값이 똑같으나 Create의 경우 계속 실행하면 문서가 끝없이 생성되는 것이 있다. return a+b는 가능하나, return ++a, ++b는 안 된다. (입력값에 변화를 줌)역시나 나는 공식 Docs를 좋아하<s>는 척을 하</s>므로, Docs를 통해 자세히 알아보자.출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://react-redux.js.org/tutorials/quick-start">Redux Quick Start</a><pre spellcheck="false"><code class="language-javascript">import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
 reducer: {},
})</code></pre>npm에서 Redux를 가져온 뒤 일단 Store을 하나 생성해준다.<pre spellcheck="false"><code class="language-javascript">import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
 &lt;Provider store={store}&gt;
 &lt;App /&gt;
 &lt;/Provider&gt;,
)</code></pre>아주 간단한 React Component에다가 store을 끼워넣는다. 이제 Store 내에 있는 State를 변화시켜 보자.<pre spellcheck="false"><code>import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
 name: 'counter',
 initialState: {
 value: 0,
 },
 reducers: {
 increment: (state) =&gt; {
 state.value += 1
 },
 decrement: (state) =&gt; {
 state.value -= 1
 },
 incrementByAmount: (state, action) =&gt; {
 state.value += action.payload
 },
 },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer</code></pre>createSlice 또는 createReducer을 사용한다. createSlice가 더 최신식의 편리한 기능이고, 두 가지의 차이점은 아래 표와 같다.<img src="https://image.until.blog/mushroombud/article/1727379846421.png" alt="until-1577">코드에서는 정말 간단하게 counter이라는 State를 설정해보았다. 이제 전역 변수에 변화를 줘볼 차례다.<pre spellcheck="false"><code>import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
 const count = useSelector((state) =&gt; state.counter.value)
 const dispatch = useDispatch()

 return (
 &lt;div&gt;
 &lt;div&gt;
 &lt;button
 aria-label="Increment value"
 onClick={() =&gt; dispatch(increment())}
 &gt;
 Increment
 &lt;/button&gt;
 &lt;span&gt;{count}&lt;/span&gt;
 &lt;button
 aria-label="Decrement value"
 onClick={() =&gt; dispatch(decrement())}
 &gt;
 Decrement
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )
}</code></pre>여기서 중요한 점은 useSelector이다. 좀 독특하다 싶은 기능은 몽땅 훅으로 구현하는 React답게 (Hook이라도 없었으면 그냥 JS 덩어리 수준인듯) useSelector 훅을 사용해서 우리의 타깃 State에 "Subscription"을 하고, 유튜브 구독하듯 보고 있다가 State Change가 일어나면 바로 리렌더링을 날려준다. Redux가 상태에만 집중하면 나머지는 React가 알아서 하는 셈.지금까지 간단하게 Flux Architecture과 Redux에 대해 알아봤다.오늘의 결론: 생산성 면에서 Flutter + GetX 조합을 이길 게 있을까?

Flux Architecture에 대한 이해를 바탕으로 Redux의 철학, 작동방법에 대해 탐구해보자

GetX 쓰다가 Redux 새로 배우기

<h1>Lombok</h1><blockquote>Annotation(어노테이션)을 기반으로 코드를 자동완성 해주는 라이브러리</blockquote><hr><h1>발생한 문제</h1><h2>Lombok의 Annotation 적용이 되지 않는 문제</h2>Lombok을 설치하고 적용하였음에도 불구하고 적용되지 않음.아래와 같이 코드를 작성하였을 때 outline에 getter와 생성자가 생기지 않는 문제.<img src="https://image.until.blog/brightdawn/article/1718853117896" alt="until-622"><h2>사용 환경</h2>SpringToolSuite4, gradle, JDK-17 등lombok.jar 파일을 통해서 SpringToolSuite가 설치된 폴더를 선택해 설치해주었음.build.gradle의 dependencies 내부에 아래와 같이 코드 역시 작성하였음.<pre spellcheck="false"><code>// https://mvnrepository.com/artifact/org.projectlombok/lombok
compileOnly 'org.projectlombok:lombok' 
annotationProcessor 'org.projectlombok:lombok' </code></pre><hr><h1>해결 방법</h1>상단 툴바 → Help → Install New Software<img src="https://image.until.blog/brightdawn/article/1718853539240" alt="until-623">Install 창이 뜨면 아래와 같이 검색해준다.<code spellcheck="false">https://projectlombok.org/p2</code>그럼 아래와 같이 Lombok이 나오는 것을 확인할 수 있다. 그 후 Lombok을 선택해 설치를 진행하고 sts를 재시작하면 된다.<img src="https://image.until.blog/brightdawn/article/1718853625000" alt="until-624"><h2>무사 작동 확인!</h2>오른쪽 Outline에 getter와 생성자가 생긴 것을 확인할 수 있다.<img src="https://image.until.blog/brightdawn/article/1718853745030" alt="until-625">

Lombok 라이브러리 적용 안 되는 오류

[Spring Boot] Lombok 적용 오류

<img src="https://image.until.blog/love/article/1716970878979" alt="until-366"><blockquote>'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다. 대신 가져오기를 추가해 보세요.ts(2686)</blockquote>eslint를 설정하고나니 다음과 같은 오류가 났다. 구글링을 통해 여러가지 솔루션을 찾아봤지만 모두 먹히지 않았다.<ol><li>eslint rules 추가<pre spellcheck="false"><code class="language-json">{
 "rules": {
 "react/jsx-uses-react": "off",
 "react/react-in-jsx-scope": "off",
 }
}</code></pre></li><li>tsconfig.json 설정 파일 추가</li></ol>하지만 문제가 생긴 프로젝트는 타입스크립트가 아닌 순수 자바스크립트로 작성되고, VSCode에서 왜 타입스크립트 오류를 발생시키는지 이해가 되지 않았다.<h2>원인 분석</h2>처음에는 VSCode가 프로젝트를 잘못 인식하고 있다고 생각했다. 하지만 다시 한번 확인해본 결과, VSCode는 자바스크립트 프로젝트를 인식하기 위해 <code spellcheck="false">jsconfig.json</code> 파일이 필요하다는 것을 알게 되었다.<blockquote><a target="_blank" rel="noopener noreferrer nofollow" href="https://code.visualstudio.com/docs/languages/jsconfig">https://code.visualstudio.com/docs/languages/jsconfig</a></blockquote><h2>해결</h2>문제 해결은 간단했다. 프로젝트의 루트 폴더에 <code spellcheck="false">jsconfig.json</code> 파일을 새로 생성하면 된다.

자바스크립트 프로젝트에서 타입스크립트 오류가...

[VSCode] TS2686 Error

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</blockquote><h1>오픈 그래프?</h1>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.<blockquote><ul><li><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</li><li><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.</li><li><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</li><li><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>".</li></ul></blockquote>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a><h1>Next.js에 적용하기</h1>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.<h2>정적인 페이지인 경우</h2>정적인 경우에는 static하게 적어주기만하면 된다.<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>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.<h2>동적인 페이지인 경우</h2>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.<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>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.<img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464">썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?그런 오픈소스가 있는지 찾아보았다.다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api가 필요했다. 아래 처럼 말이다...<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>여기저기 찾아보다 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><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.<img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466">그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.<h1>og-image-korean</h1>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.<img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></li><li>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468">물론 리서치하고 만드는데 걸린 시간을 생각해본다면… 진작 게시글 썸네일을 200장 이상 만들었을 것 같다.언틸에도 추후 적용해보면 좋을 것 같다.

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

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

- 뚱땅뚱땅 평화로운(?) 푸시알림 기능 개발 시간 -예약 발송 기능이 필요해 방법을 알아보고 있었다.어찌저찌 구글링을 통해 NestJS Task Scheduling - Dynamic timeouts에 대해 알게 되었다 !스케줄러는 이미 사용해본 경험이 있었는데(매일 @@시 ##분 마다 동작 등), 동적으로 필요에 따라 생성했다 없앴다 할 수도 있었다니 ! (문서를 끝까지 읽어본 적이 없는 사람)사용 방법은 어렵지 않아서 내가 원하는 타이밍에 푸시알림을 발송할 수 있게 되었다. 너무너무 단순하다! <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/techniques/task-scheduling#dynamic-timeouts">진짜로</a>즉시 발송과 예약 발송 모두 잘 작동하는 것을 확인하고 필요한 곳 마다(6~7군데 정도) 알림 발송 코드를 때려 박았는데, 막상 이렇게 해놓고 나니 나중에 수정이 필요하거나 또 푸시알림이 필요한 곳이 생기면 같은 작업을 반복해야한다고 생각하니 좀 간지가 안나는 것 같아서 정리를 좀 하기로 했다.일단 내가 원하는 것이 무엇인가 정리<ul class="tight" data-tight="true"><li>"특정 상황"에 유저에게 푸시알림을 보내야함 (FCM 사용)</li><li>즉시발송/예약발송</li><li>현재는 6~7가지 상황이 있지만 점점 늘어날 수 있음</li><li>특별한 경우를 제외하고 어드민 페이지에서 푸시알림을 관리하고 싶음<ul class="tight" data-tight="true"><li>발송상황, 발송타이밍, 메시지 내용 관리 / 발송 내역 관리 등</li></ul></li><li>위 내용은 단일 대상에게 자동으로 보내는 알림. 다수에게 보내는 수동 알림은 따로 처리</li></ul>필요한 api 마다 푸시알림을 쏘는 코드를 심는 것 보다는 한 지점(?)에서 처리하고 싶었는데 그러기 위해선 어떤 요청이 들어왔는지 구분하고 푸시알림이 필요한 요청 및 상황인지 판단, 알맞은 대상 및 내용 구성을 할 수 있어야 했다.어떤 요청인지("특정 상황")는 요청 end point로 구분할 수 있다.발송 대상은 요청에 jwt 토큰도 있고 앱에서 오는 요청이 아닌 경우(서비스 특성 상 서버가 임베디드와도 통신 중) 식별 가능한 데이터가 함께 담겨 있어 어렵지 않았다.내용 역시 왔다갔다하는 데이터들로 충분히 구성할 수 있다.즉시발송/예약발송은 0초 뒤 발송, n초 뒤 발송 으로 설정이 가능하다.이런 점들을 바탕으로 DB를 꾸려보았다. 푸시알림을 보내길 원하는 상황과 내용을 미리 등록해둘 수 있도록.<pre spellcheck="false"><code class="language-typescript">{
 알림발송상황: "유저가 ~~한 상황";
 endPoint: "/request/endpoint";
 n밀리초뒤발송: 300000;
 푸시알림제목: "이것은";
 푸시알림내용: "name씨에게 보내는 푸시알림";
 내용에들어가는변수이름: ["name"];
 클릭시이동url: "어디어디";
}</code></pre>문제는 한 곳에서 처리하려면 과연 그 한 곳은 어디로 해야 좋을까 였다. 미들웨어, 인터셉터 등 뭔가 이것저것 알긴 아는데 정확한 작동 방식이나 그런 것을 아직 완전히 깨우치지 못한 상태라 GPT씨에게 상담 요청을 했다.위 상황들을 죽 설명하고 어쩌면 좋을지 물어보니 그(?)(그녀?) 역시 미들웨어나 인터셉터에 심을 것을 추천해주었는데, 간단한 테스트와 모든 데이터를 처리한 뒤 응답을 보내기 직전에 푸시알림을 쏘고 싶다는 추가 질문으로 인터셉터를 활용하는 것으로 확정을 지었다.이렇게 내가 원하던 대로 '한 곳' 까지 정해졌다.- 뚱땅뚱땅 코딩 타임 -그렇게 뚱땅뚱땅 코드를 작성해놓고 테스트를 하다보니 문제점들이 발견되었다.<ul class="tight" data-tight="true"><li>n시간 뒤 어떤 사람에게 발송하도록 예약해둔 메시지를 만약 그 사람이 특정 조건을 만족한 경우 예약을 취소해야 함</li><li>예약을 해둔 메시지들이 만약 서버가 재시작되면 스케줄러가 초기화되면서 사라짐</li></ul>여러 고민과 GPT씨와의 상담 끝에 두 가지 문제점 모두 스케줄러와 DB를 함께 활용해 해결할 수 있다는 결론을 내렸다.첫번째 문제는 고유한 예약 번호와 함께 푸시알림 내역을 저장해뒀다가 원하는 상황에 예약을 취소할 수 있도록 했다. 예약을 취소하게 되는 상황은 당장에는 한가지 상황 뿐이라 중앙처리 말고 해당 api에서 하도록 했다.나중에 조금 더 발전시킬 필요가 있을 것 같다.두번째 문제는 발송 상태[발송완료/발송예약/발송취소]를 함께 저장해뒀다가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/fundamentals/lifecycle-events">OnApplicationBootstrap</a>을 사용해 서버가 재시작될 때 발송예약 상태인 메시지들을 다시 스케줄러에 집어넣어주도록 했다.어차피 발송 내역을 저장하기로 해서 DB도 이미 구성해뒀기 때문에 몇 개의 필드만 더 추가하면서 사건을 해결할 수 있었다.대략적인 형태<pre spellcheck="false"><code class="language-typescript">import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
import { firebaseAdmin } from 'src/config/firebase.config';
import { SchedulerRegistry } from '@nestjs/schedule';
@Injectable()
export class PushMessageService implements OnApplicationBootstrap {
	constructor(private readonly schedulerRegistry: SchedulerRegistry) {}
async onApplicationBootstrap() {
	// 발송예약 상태인 메시지들을 다시 스케줄러에 등록
}

async fcmSendMessage(message, sendAfterMilliSeconds, timeoutName, history) {
	const timeout = setTimeout(async () =&amp;gt; {
		await firebaseAdmin
			.messaging()
			.sendEachForMulticast(message)
			.then((res) =&amp;gt; {
				console.log('success: ', res);
		})
		.catch((err) =&amp;gt; {
			console.log('error: ', err);
		}); 
 	// history(발송내역)를 사용해 에약발송인 경우 발송예약 &amp;amp;gt; 발송완료로 업데이트
 	// ~ code ~
	
 	// 발송한 뒤에 스케줄러에서 삭제
		this.schedulerRegistry.deleteTimeout(timeoutName);
		}, sendAfterMilliSeconds);
	this.schedulerRegistry.addTimeout(timeoutName, timeout);
}

async sendAutoPushMessage(endPoint) {
	// 인터셉터에서 호출해 사용
	// 푸시알림 보낼지 말지 판단 후 내용 구성해 발송 예약
}}</code></pre>이런식으로 구현을 해놓았지만 솔직히 지금도 마음에 썩 들지는 않아서 계속 고민 중이다. 조금 더 깔끔하게 할 수 있을 것 같은데 막 아이디어가 떠오르지는 않아서 다른거 할 거 하면서 계속 지켜보는 중이다..

푸시알림 날리기

<h2>JSX란?</h2><pre spellcheck="false"><code class="language-jsx">const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;;
</code></pre><blockquote>JSX(JavaScript XML), JavaScript에 XML을 추가하여 확장한 문법</blockquote><h3>브라우저는 JSX를 알고있을까?</h3>JSX가 포함된 코드를 아무런 처리 없이 그대로 실행하면 에러가 발생한다.JSXS는 자바스크립트 표준 코드가 아닌 페이즈북이 임의로 만든 새로운 문법이기 때문에 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미있는 코드로 변환된다.JSX는 어떻게 자바스크립트로 변환될까?우선 JS가 JSX로 변환되는 방식을 알려면 리액트에서 JSX를 변환하는 <code spellcheck="false">@babel/plugin-transform-react-jsx</code>플러그인을 알아야 한다.이 플러그인은 JSX 구문을 자바스크립트가 이해할 수 있는 형태로 변환한다.<pre spellcheck="false"><code class="language-jsx">// JSX
const element = (
 &lt;h1 className="greeting"&gt;
 Hello, world!
 &lt;/h1&gt;
);

// JS로 변환된 JSX
const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);
</code></pre><h3>JSX의 설계 목적</h3>다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는데 초점을 두고 있다.<ul class="tight" data-tight="true"><li>트리 구조로 표현하고 싶은 다양한 것들을 작성</li><li>HTML, XML이외에도 다른 구문으로도 확장될 수 있도록, 개발자들에게 친숙함을 느낄 수 있기 위해</li></ul><h2>JSX 정의</h2><h3>1. JSXElement</h3><blockquote>JSX를 구성하는 가장 기본적인 요소로, HTML element와 비슷한 역할을 한다.</blockquote><ul class="tight" data-tight="true"><li>JSXOpeningElement: &lt;div&gt;</li><li>JSXClosingElement: &lt;/div&gt;</li><li>JSXSelfClosingElement: &lt;div /&gt;</li><li>JSXFragment: &lt;&gt;&lt;/&gt;</li></ul>❓ 컴포넌트 명이 대문자로 시작해야 하는 이유는 무엇인가요?리액트에서 HTML 구문 이외 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 사용가능하다. 이는 HTML 태그명과 사용자가 만든 컴포넌트 태그명을 구분 짓기 위해서다.<pre spellcheck="false"><code class="language-jsx">// HTML 태그명
&lt;span&gt;&lt;/span&gt;
// 컴포넌트명
&lt;Span&gt;&lt;/Span&gt;
</code></pre>JSXElementName<blockquote>JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다.</blockquote><ul class="tight" data-tight="true"><li>JSXIdentifier: <code spellcheck="false">$</code>와<code spellcheck="false">_</code> 외에 다른 특수문자나 숫자로 시작할 수 없다.</li><li>JSXNamespacedName: JSXIdentifier:JSXIdentifier의 조합, 두 개 이상은 불가</li><li>JSXMemberExperssion: JSXIdentifier.JSXIdentifier의 조합, 두 개 이상 가능</li></ul><h3>2. JSXAttributes</h3><blockquote>JSXElement에 부여할 수 있는 속성을 의미한다. 필수값이 아니고, 존재하지 않아도 에러가 발생하지 않는다.</blockquote><ul><li>JSXSpreadAttributes<ul class="tight" data-tight="true"><li>{…AssignmentExpression}</li><li>단순히 객체뿐만 아니라 자바스크립트에서 AssignmentExpression로 취급되는 모든 표현식 존재 가능<ul class="tight" data-tight="true"><li>조건문 표현식</li><li>화살표 함수</li><li>할당식</li></ul></li></ul></li><li>JSXAttribute<ul><li>JSXAttributeName - JSXAttributeValue로 짝을 이루어 표현</li><li>JSXAttributeName: 속성의 키 값</li><li>JSXAttributeValue<ul><li>큰 따옴표로 구성된 문자열</li><li>작은 따옴표로 구성된 문자열</li><li>{ AssignmentExpression }</li><li>JSXElement: 값으로 다른 JSX요소가 들어갈 수 있다.&lt;aside&gt; 💡 값을 전달할 때 { }로 감싸는게 리액트의 문법으로 오해하는 개발자들이 있다.이는 리액트의 문법이 아닌 prettier의 규칙이다. prettier 규칙은 태그가 포함된 JSX 구문을 좀 더 읽기 쉽게 만들기 위해 제공된다.<pre spellcheck="false"><code class="language-jsx">&lt;div attribute=&lt;div&gt;hello&lt;/div&gt; /&gt;
&lt;div attribute={&lt;div&gt;hello&lt;/div&gt;} /&gt;
</code></pre>&lt;/aside&gt;</li><li>JSXFragment</li></ul></li></ul></li></ul><h3>3. JSXChildren</h3><blockquote>JSXElement의 자식 값을 나타낸다.</blockquote><ul><li>JSXChild: JSXChildren을 이루는 기본 단위다. JSXChildren은 JSChild가 없어도 상관없다.<ul><li>JSXText: 문자열</li><li>JSXElement: 다른 JSX요소</li><li>JSXFragment: 빈 요소</li><li>{JSXChildExpression (optional)}<pre spellcheck="false"><code class="language-jsx">// 해당 컴포넌트를 렌더링하면 "foo"라는 문자열이 출력된다.
return &lt;&gt;{(()=&gt; 'foo')()}&lt;/&gt;
</code></pre></li></ul></li></ul><h3>4. JSXStrings</h3><blockquote>HTML에서 사용 가능한 문자열은 모두 JSXStrings에서도 가능하다.</blockquote><ul class="tight" data-tight="true"><li>큰따옴표로 구성된 문자열</li><li>작은 따옴표로 구성된 문자열</li><li>JSXText</li></ul>💡 자바스크립트와는 한 가지 중요한 차이점이 발생하는데 바로 <code spellcheck="false">\\</code> 로 시작하는 이스케이프 문자 형태소다.<code spellcheck="false">\\</code> 는 자바스크립트에서 특수문자를 처리할 때 사용되므로 몇 가지 제약사항이 있지만, HTML에서 아무런 제약없이 사용할 수 있다.따라서 JSX에서는 HTML처럼 <code spellcheck="false">\\</code>을 이스케이프 문자열로 처리하고 있지 않다.<h2>마무리</h2>이처럼 JSX는 자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다는 점에 각광받고 있다.물론 JSX가 HTML문법과 자바스크립트 문법이 뒤섞여서 코드의 가독성을 해친다는 의견도 있다. JSX 내부에 자바스크립트 문법이 많아질수록 복잡성이 증대하면서 코드의 가독성도 해칠 것이므로 주의해서 사용해야 한다.

2장 리액트 핵심 요소 깊게 살펴보기

2-1. JSX란?

nextjs

nextjs 의 useSearchParams 를 사용하고, yarn build를 하게 되면<blockquote>useSearchParams() should be wrapped in a suspense boundary at page "/account/find-password". Read more: <a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout">https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout</a></blockquote>이런 오류를 만날수 있다. <h1>해결</h1>next.config.js에서 experimental &gt; missingSuspenseWithCSRBailout 의 값을 false 로 두면 된다. <pre spellcheck="false"><code class="language-javascript">const nextConfig = {
 ...
 experimental: {
 missingSuspenseWithCSRBailout: false,
 },
};
export default nextConfig;
</code></pre>experimental 은 nextjs의 실험적인 기능이 정의되어있고 missingSuspenseWithCSRBailout 옵션은 Suspense 을 강요 여부를 설정한다. Suspense가 누락되면 자동으로 에러를 발생시키는 기능이다. 그럼, 이게 왜 useSearchParams 와 충돌을 일으키느냐 nextjs의 server, client component 와의 관계에서 시작된다.useSearchParams는 url 의 쿼리 파라미터에 접근하는데 사용되는데 이건 클라이언트 컴포넌트에서만 사용할 수 있다. next13 이상에서는 서버컴포넌트가 디폴트이기 때문에 생기는 충돌이다.nextjs는 useSearchParams가 서버컴포넌트 트리에 존재할 경우, 클라이언트 사이드 렌더링으로 전환을 하는데, 그 전환과정에서 missingSuspenseWithCSRBailout 경고가 발생하는 것이다. 이걸 해결하기 위해 use client를 알맞게 선언해줌으로써 해결할수 있다.

nextjs useSearchParams 오류는 왜 은근히 자주 등장할까?