May 9, 2024

240509(목)

🌱 성장일지 Re 1.0

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

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

(1.0) 하루 SoD, EoD를 기록하고 공부한 것을 간단하고 담백하게 기록하자.

Plan

아침

✅ 몸 예열 스트레칭
✅ 뇌 냉각 명상
✅ SoD 쓰기
✅ 신문 읽기
✅ 책: 마이크로 상태 관리 10분 읽기

✅ ⏰ (06:30 ~ 07:00) 기상

오전

✅ 메모장 확인
✅ 코드 리뷰
시스템 안정화
- ✅ Suspense, lazy import 리팩토링 문서 작성 및 공유

✅ ⏰ (10:00 ~ 10:15) Daily Check-in

오후

시스템 안정화
- ✅ (추가) lint 설정 변경
- ✅ lint husky 적용
- ✅ 홈: user state 리팩토링 후 새로고침 시 로그인/회원가입 ui가 보이는 버그(?) 수정
- ❌ 첫 검색 시, focus 사라지는 문제 해결
버그 관리
- 🌱 '프로필에서 이미지 변경 시 하얀색 이미지로 뜸. 새로고침하면 잘 반영되어 있음'
- ❌ '다 읽었는데, 받은 요청에 숫자 "2"가 표시되어있어요.'
기타
- ✅ R&R 더 구체화해서 작성

저녁

✅ 공식문서: GraphQL 'List-off 1: Basics' - Building our schema 공부하기
🌱 프로젝트: 블로그 개발 - 도메인 붙이기
❌ 공식문서: Next.js Learn 12장 공부하기
❌ 기타: 노션 템플릿 만들기(아래 순서대로)
- 헬스
- 주식
- 가계부

✅ ⏰ (19:00 ~ 20:30) 저녁(정윤님) ✅ ⏰ (20:30 ~ 21:00) 걸어서 퇴근하기(종합운동장역)

밤

✅ 하루 뒤돌아보는 감정일기 쓰기
✅ EoD 쓰기

❌ ⏰ (11:00 ~ 11:30) 취침

Learn

GraphQL - apollo server

import gql from 'graphql-tag';

What is this gql thing we're importing? It's a tagged template literal, used for wrapping GraphQL strings like the schema definition we're about to write.

This converts GraphQL strings into the format that Apollo libraries expect when working with operations and schemas, and it also enables syntax highlighting.

import gql from "graphql-tag";

export const typeDefs = gql`
  type Query {
    tracksForHome: [Track!]!
  }
	# Schema definitions go here
  type Track {
    id: ID!
    title: String!
    author: Author!
    thumbnail: String
    length: Int
    modulesCount: Int
  }
  type Author {
    id: ID!
    name: String!
    photo: String
  }
`

type Query의 역할

우리 스키마의 엔트리 포인트를 정의한다.
클라이언트가 우리 스키마에 쿼리할 수 있는 데이터가 무엇인지 정의한다.

Web vital

웹 Vital 지표와 기준

FCP(First Contentful Paint): 페이지가 로드를 시작한 시점부터 의미있는 컨텐츠가 처음 렌더링 되는 시점까지의 시간을 측정하는 지표
LCP(Largest Contentful Paint): 사용자의 뷰포트에서 가장 큰 이미지 혹은 텍스트 블록이 렌더링되는 시간을 측정하는 지표
TBT(Total Blocking Time): TBT는 FCP와 TTI사이의 기간동안 사용자와 상호작용하지 못하는 모든 시간을 합친 지표
TTI(Timte To Interactive): TTI는 사용자와 웹페이지가 안정적인 상호작용을 하기 위해 얼마만큼의 시간이 소요되는가에 대한 지표
CLS(Cumulative Layout Shift): 뷰포트내에 먼저 렌더링 된 요소가 늦게 렌더링 된 다른 요소에 의해 밀리는것과 같은 이유로 기존 위치에서 움직여졌을 때 사용자에게 미치는 영향을 수치화한 지표
SI(Speed Index): 웹 페이지가 얼마나 빨리 컨텐츠를 채우는지를 측정

Review

웹 성능 지표, SEO 등이 얼마나 중요한지 그리고 개선하기 얼마나 쉽지 않은지 알게 되었다.
몇시간 동안 괴롭히던 lint 관련 이슈를 해결했다. cra... 마지막 커밋이 왜 작년인지 알겠따...
웹 개발자로서 좀더 집중해야할 것이 무엇인지 알게 되어 기분 좋은 하루

배울 점이 많은 팀원들과 함께 일한다는 게 얼마나 행운인가? 정말 감사하다. 그리고 오늘 정윤님과의 저녁 식사에서 많은 것을 느끼고 배울 수 있었다. 오히려 주니어일 때, 더 기술적으로 깊이 보고 다뤄보려고 하자. 오히려 연차가 쌓이면 이런 깊이를 다룰 시간이 없다. 그리고 나는 현재 웹 개발자인만큼, 웹 그 자체에 대해 더 깊이 공부하고 이해해야겠다. 그리고 그것이 나의 가치를 높이는 길이라고 생각한다.