[STOCAT] vanilla-extract 타이포그래피 토큰, 3줄 -> 1줄로 줄이기

[STOCAT] vanilla-extract 타이포그래피 토큰, 3줄 -> 1줄로 줄이기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며STOCAT 프로젝트에 vanilla-extract로 디자인 토큰 체계를 새로 구축하는 작업을 했다.색상 토큰(color.role.css.ts)과 타이포그래피 토큰(typography.css.ts)을 정의하고,기존 컴포넌트들에 순차적으로 적용하는 작업이었다.그런데 적용하다 보니 반복되는 패턴이 눈에 들어왔다.// 이게 7개 파일에 걸쳐, 최대 5군데에서 반복되고 있었다fontSize: vars.typography.body3.fontSize,fontWeight: vars.typography.body3.fontWeight,lineHeight: vars.typography.body3.lineHeig..

  • format_list_bulleted 개발 일지/FrontEnd_프론트엔드
  • · 2026. 2. 28.
  • textsms
[STOCAT] Tailwind CSS만 쓰던 나의 vanilla-extract 첫 도전기

[STOCAT] Tailwind CSS만 쓰던 나의 vanilla-extract 첫 도전기

이 글은 STOCAT 프로젝트에서 디자인 시스템 토큰을 정리하면서 발견한 코드 개선 경험을 기록한 글이다.들어가며처음 프론트엔드 스타일링을 접한 게 Tailwind CSS였다. 유틸리티 클래스 기반의 빠른 개발 속도에 만족하면서 쭉 써왔는데, 어느 순간 한 가지 불안이 생겼다."나는 CSS-in-JS 방식을 제대로 모른다." 실무에서는 styled-components, Emotion 같은 CSS-in-JS 라이브러리가 여전히 많이 쓰인다. 채용 공고에서도 이 기술 스택을 요구하는 곳이 적지 않다. Tailwind만 써본 입장에서는 styled.div 같은 문법도, ThemeProvider 패턴도 낯설었다. 이 갭을 메우고 싶었다.CSS-in-JS를 학습하기로 마음먹은 뒤, 여러 선택지를 조사하다가 van..

  • format_list_bulleted 개발 일지/FrontEnd_프론트엔드
  • · 2026. 2. 26.
  • textsms
외국인이랑 해커톤해서 2등한 썰 푼다 😆

외국인이랑 해커톤해서 2등한 썰 푼다 😆

이번 학기는 워낙 벌여놓은 일이 많다보니, 수습하기 바빠서 개인적인 공부할 시간이 많이 부족했다.그래도 진로를 웹 프론트엔드로 결정한 만큼, 공부했던 `React`를 써먹어 볼 좋은 기회가 어디 없나 기회만 엿보고 있었다 🤩..!그러던 중에 마침 좋은 기회를 발견하여 덜컥 신청했다.해커톤 자체가 내 포트폴리오나 이력서에 크게 도움이 될 것 같지 않지만, 요즘 해커톤 참여 자체가 너무 재밌다. 요즘 같은 고환율 시대에 총 상금이 8천 달러라니...?! 행사 공식 홈페이지https://aihackathon.gridge.co.kr/#schedule) SpoonOS & Scoop AI Hackathon aihackathon.gridge.co.kr 대략적인 행사의 정보Neo(네오) 블록체인 플랫폼 에서 Sp..

  • format_list_bulleted Career_커리어/Hackathon _해커톤
  • · 2025. 12. 28.
  • textsms
[TypeScript 정리] Section 02 — 타입스크립트 기본 완벽 정리

[TypeScript 정리] Section 02 — 타입스크립트 기본 완벽 정리

이 글은 이정환 강사님의 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의를 참고하여 개념을 정리했습니다!0. 기본 타입이란?TypeScript의 기본 타입(Basic Types)은 언어가 기본적으로 제공하는 내장 타입을 의미합니다.number, string, boolean, null, undefined 등이 있고any, void, never, unknown처럼 TypeScript에서만 제공되는 타입들도 있습니다.이 타입들은 단순히 나열된 것이 아니라, 서로 부모–자식 관계를 이루는 계층 구조를 가지고 있습니다. 1. 원시 타입과 리터럴 타입원시 타입 (Primitive Type)한 번에 하나의 값만 담을 수 있는 기본 타입입니다.객체나 배열처럼 여러 값을 동시에 저장하는 구조가 아닙니다...

  • format_list_bulleted Study/Typescript
  • · 2025. 11. 7.
  • textsms