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