🚤 성장일지 6.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/> 🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기!<br/> 🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기.<br/>

• 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자

🌈 오늘의 감정

점점 몰입하는 경험을 하다보니 넘 신난다. 공부하는 것도 재미있고 라이브러리 공식 문서 보는 것도, 코드 까보는 것도 재미있다. 물론 내 코드를 쓰는 건 더 재미있다. 아직 공부해야할 것들 투성이지만 하면서 점점 더 재미있고 알고 싶은 게 많아진다. 이제 어느정도 몰입은 할 수 있으니(더 몰입해야겠지만!), 더 욕심내서 개발하는 시간을 늘려보자.

🫧 오늘의 고민

Redux를 사용할 것인가?

원래는 동생과 함께 진행하는 새로운 프로젝트에 Redux(toolkit)를 사용하려고 했다. 솔직히 프로젝트 초기 단계라 그렇게 복잡한 상태관리는 없지만, 상태관리 라이브러리의 시초격인 Redux를 사용함으로써 상태관리와 Flux 아키텍처에 대한 이해도를 높이고 싶었기 때문이다. 하지만 볼수록 이 프로젝트의 지금 단계에서 Redux를 적용하는 건 맞지 않는다는 판단이 들었고 일단은 Context API와 useReducer를 사용하기로 했다.

Mantine UI만? Emotion과 함께?

Mantine UI는 리액트 기반의 UI 라이브러리로, 새 프로젝트에 적용해보기로 했다. Emotion을 기반으로 한다는 점과 Type 지원이 잘 되어있다는 점이 마음에 들었다. 또, Mantine UI를 사용하되 Emotion으로 wrapping하는 방식을 써볼 수 있다는 게 큰 매력으로 다가왔다. 거기다가 소스코드가 깔끔하게 잘 정리되어있어서 UI 컴포넌트를 구현하는 데에도 많은 도움이 될 것이라 생각이 들었다.

☀️ 오늘의 경험

vite의 ?raw 옵션

오늘 JS 복습 겸 강의를 듣는데, 너무 신기한 걸 발견했다.

import data from './data.json?raw';

console.log(data);

// json 파일의 내용이 그대로 출력된다.
// 문자열로 출력되기 때문에 JSON.parse()를 해줘야 한다.

vite가 자체적으로 제공하는 기능이라고 하는데, 이렇게 간단하게 json을 불러와서 사용할 수 있다는 게 너무 신기했다. 실제 배포 코드에서 사용할 수 있는 로직은 아니지만, 개발 단계에서는 매우 유용하게 사용할 수 있을 것 같다.

(추가) 글을 적다보니 그냥 json도 import가 되는데 굳이 왜 이 방법을 쓰는거지..? 생각이 들었다. 해서 찾아보니 아래와 같은 장점들이 있었다.

• ?raw를 통해 import 하면 json 파일의 내용이 문자열 형태로 가져와진다. 그래서 좀더 유연하게 사용할 수 있다.
• parsing을 좀더 세밀하게 할 수 있고, localStorage에 저장할 때도 문자열 그대로 저장하면 되어서 편리하다.

Tree Shaking 직접 겪어보기

Tree Shaking이 사용하지 않는 코드를 제거해주는 기능인 건 알고 있었지만, 실제로 두 눈으로 확인할 생각을 안했다.(왜 안했지? -_ -) 그래서 직접 해보았다.

if (process.env.NODE_ENV === 'development') {
  console.log('개발 환경입니다.');
} else {
  console.log('배포 환경입니다.');
}

위와 같은 코드가 들어있고 build를 하게 되면, if 문에 해당하는 코드는 제거되어 배포 환경에서는 console.log('배포 환경입니다.')만 남게 된다. 빌드(배포) 환경에서는 개발 환경에서 실행되는 코드가 사용될 일이 없기 때문이다. 즉, Tree Shaking이 이루어진 것이다.

🐾 오늘의 교훈

그래도 JS를 많이 안다고 생각했는데... 아니더라!!! 공부해야할 건 무궁무진하고 더 알아가야할 것도 많다는 걸 잊지말자. 항상 겸손하게 배우는 자세로 나아가자!!!

🪵 참고

• Mantine UI 시작하기
• vite - json

undefined