230607(수)

🎄 성장일지 4.0

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

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

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

🔑 오늘의 학습 키워드

styled-components

이번에 새롭게 시작되는 프로젝트에서는 대표적인 CSS in JS 라이브러리인 styled components를 사용하기로 했다. 사실 내가 좋아하는 TailwindCSS와 비교했을 때 성능면에서 좋지 않다고 하여 가능하면 사용하지 않으려 했다. JS 코드 내에서 CSS와 관련된 로직이 있으므로 결국엔 이 코드를 CSS 파일로 컴파일해야하고 그에 따라 성능저하가 발생하기 때문이다. 하지만 리액트의 컴포넌트 구조를 배우고 학습하는 데에는 styled components가 도움이 된다고 하여 사용하기로 했다.

styled-components 공식문서 - Motivation

스타일드 컴포넌트를 사용하기 전 공식문서에 들어가 간단하게 라이브러리에 대한 설명을 읽어보았다.(개인적으로 공식문서에서 제공하는 get started 등의 라이브러리를 다루기 위한 설명도 좋지만 왜 이 라이브러리를 만들었는지 보여주는 내용들이 정말 좋다고 생각한다.)

Motivation

스타일드 컴포넌트는 어떻게 리액트의 컴포넌트 체계를 스타일링하기 위한 CSS를 강화할 수 있을까에 대한 의문에 대한 결과이다. 아래와 같은 기능을 제공한다.

• Automatic critical CSS: 스타일드 컴포넌트는 페이지에서 렌더링된 컴포넌트의 스타일만 주입하여 최소한의 코드만 사용자가 로드하게 한다. 코드 스플리팅과 함께 사용하면 사용자가 필요로 하는 코드양을 최소화할 수 있다.
• No class name bugs: 스타일드 컴포넌트는 스타일에 대한 고유한 클래스 이름을 생성한다. 따라서 클래스 이름 중복, 중첩 혹은 철자 오류에 대해 걱정할 필요가 없다.
• Easier deletion of CSS: 일반적인 코드베이스에서 클래 스이름이 어디에서 사용되었는지 알기 어렵다. 하지만 스타일드 컴포넌트는 모든 스타일링이 특정 컴포넌트에 연결되기 때문에 명확하다.

특정 컴포넌트가 사용되지 않고 삭제되면 해당 컴포넌트의 스타일도 모두 함께 삭제된다.

• Simple dynamic styling: 컴포넌트의 속성이나 상태에 따라 스타일을 동적으로 변경할 수 있다.
• Painless maintanence: 당신의 컴포넌트에 영향을 주는 스타일을 찾기 위해 다른 파일을 찾아다니지 않아도 된다. 따라서 유지보수가 굉장히 편리하다.
• Automatic vendor prefixing: 현재 표준에 맞게 CSS를 작성하고 스타일즈 컴포넌트가 나머지 처리를 담당한다.

Global Style

styled components에서는 createGlobalStyle을 통해 전역 스타일을 설정할 수 있다. createGlobalStyle은 styled components에서 제공하는 컴포넌트이다. 아래와 같이 사용할 수 있으며 보통 GlobalStyles.style.ts와 같은 파일을 만들어서 사용한다. 또한 createGlobalStyle을 통해 css에서 reset css 역할을 하는 코드를 작성하기도 한다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
  }
`;

export default GlobalStyles;

Github project의 workflow

함께 공부하는 중인 iOS의 노아에게 Github project의 workflow 설명을 듣게 되었다. workflow를 통해 project의 칸반을 좀더 자동화하여 편리하게 관리할 수 있다.

• 오른쪽 상단 … 에서 workflow를 세팅할 수 있다.
  • trigger ⇒ when
  • action ⇒ then
  • ex) when: 이슈가 생성되었을 때, then: 이슈를 TODO에다가 옮겨라

Github action

• yml 파일로 스크립트 짜서 다양한 동작을 수행할 수 있다.
• 이번 프로젝트에서는 적용해볼지 고민을 해봐야겠지만, 어떤 issue에 대한 브랜치를 자동으로 만들어주는 등의 동작을 수행할 수 있을 것 같다.

📝 요약 및 하루 간단 회고

진짜 함께 하는 동료들 덕분에 많은 자극을 받는 것 같다. 나보다 잘하는 동료를 보면 의기소침해지는 것이 아니라 어떤 점을 배울 수 있을지 찾아보게 된다..! 앞으로도 더 좋은 동료들과 함께 성장하고 싶다.(그전에 내가 먼저 좋은 사람이 되어야겠지..?!)

오늘의 잘한 점

• 백로그를 완성한 점
• 협업하면서 진행한 점

오늘의 아쉬운 점

• 없다.

참고

• styled-components