230515(월)

🎄 성장일지 4.0

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

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

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

tailwindCSS 전역 설정

프로젝트의 전역에서 사용될 폰트 그리고 폰트의 기본 색상을 정해주고 싶었다. 솔직히 처음엔 정말 정말 간단할 거라 생각했는데, 생각보다 많이 삽질했다.(나만 그런거일지도..? ㅎㅎ)

• index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    @font-face {
        font-family: 'Pretendard Variable';
        src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable.css");
        font-display: swap;
    }
    html {
        font-family: 'Pretendard Variable', sans-serif;
        @apply text-gray-700;
    }
}

지금 되돌아보니, 뭔가 너무 허탈하지만… 이걸 작성하는 시간만 2~3시간 썼다… 나만 그렇게 느끼는지는 모르겠으나 프로젝트 전체 기본 스타일 적용에 대한 건 공식문서도 좀 불친절한 느낌..? (ㅠㅠㅋㅋㅋ)이었다. 그래도 이런 경험을 통해서 확실히 머리에 각인된 것 같아서 좋다.

ReactComponent as svgFile

img 태그의 src를 통해 svg 파일 경로를 받았을 때, 어떻게 dynamic하게 svg의 색상을 변경할 수 있을까? 방법은 있겠지만, 굉장히 지저분(?)하고 비효율적일 것이다.(이전 바닐라 자바스크립트 프로젝트 때는 색상이 다른 svg 파일을 하나 더 생성해서 상테에 따라 다른 파일을 사용하게 구현했었다.)

리액트는 다르다. 아래와 같이 svg 파일을 하나의 리액트 컴포넌트처럼 import 해서 사용할 수 있다.

import { ReactComponent as Logo } from 'assets/logo.svg';

function LogoList() {
  return (
    <div>
      <Logo stroker='#ffffff' /> // 이렇게 하고 svg 파일의 stroke에 대한 value를 "current"로 하면 동적으로 색상 변경이 가능하다.
    </div>
  );
}

📝 요약 및 하루 간단 회고

요즘 진짜 하루 중 2시간..? 을 제외하고는 전부 개발만 하는 것 같다. 조금 피곤하기도 하지만 너무 재미있고 너무 신나고 너무 즐겁다. 이 텐션을 잘 유지해서 계속해서 열심히 나아가는 개발자가 되었으면 좋겠다.

오늘의 잘한 점

• 목표했던 내용들을 거의 다 달성한 점
• 더 편한 방법을 찾으려고 노력한 점

오늘의 아쉬운 점

• 없음

참고

• 없음