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