내 로컬에서 프로젝트를 실행시키고, 같은 망을 사용하는 팀원들에게 내가 만든 페이지를 공유해주고 싶었다. 그렇게 하려면 클라우드 등에 배포를 해서 보여줄 수도 있지만, 나는 그냥 바로 보여주고 싶었기에 <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을 사용하는 컴포넌트 전체가 리렌더링 