About Me

저의 가치관을 소개합니다

사용자 경험‘사용자 경험’을 최우선으로 개발합니다

오너십서비스에 대한 오너십을 가지고 주도적으로 일합니다

성격항상 놓친 부분이 없는지 꼼꼼히 살핍니다

성장동료와 함께하는 꾸준한 성장을 목표로 일합니다

Projects

Hustlers

터닝 앱 개편 프로젝트

터닝 앱 개편 프로젝트에서 SwiftUI를 이용해 다양한 화면 및 기능 개발

허슬러즈 홈페이지 개발

Next.js, Strapi를 이용한 회사 홈페이지 및 블로그 개발

시대생

시대생 메인 앱 개발 및 유지보수

React와 Node.js를 사용한 개인 작업 관리 애플리케이션.

시대생 신규서비스 개발

다양한 서비스(도서관 좌석 예약·랭킹, 이용 내역 Recap, 숨은 학점 등)와 시대팅(webview)·팀페이지·블로그·백오피스까지 전반 개발

도서관 이용시간 알림 기능

Native Module을 이용해 도서관 이용시간을 알림을 통해 실시간으로 알려주는 기능

시대생 라이브러리 (사내 패키지)

시대생팀에서 사용하는 여러 기능(webview bridge, design system, etc...)을 관리하는 팀 내부 라이브러리

외주

Poker Hand History

텍사스 홀덤 포커의 패 기록 및 커뮤니티 공유 앱

Popcorn List

TMDB API를 이용한 영화 & TV 시리즈 평가 및 추천 커뮤니티 앱

개인

만나 앱

기독교 소그룹 공동체를 위한 소통 앱

tistory-react

Tistory 스킨을 React 문법을 이용해 개발할 수 있는 환경을 제공하는 프레임워크

tiny-equal

가장 빠른 성능을 제공하는 equal 함수 오픈소스 패키지

Skills

HTML / CSS

· Sementic markup을 준수하며 CSS를 다루는데 능숙합니다.
· styled-component, emotion과 같은 css-in-js 라이브러리를 다루는데 능숙합니다.

Javascript

· ES6+ 이후의 문법에 익숙하며 Reduce, Map과 같은 고차함수를 적극적으로 사용합니다.
· promise를 이용한 비동기 작업에 익숙합니다.

Typescript

· 문법을 잘 이해하고 적절한 타입을 활용하며 Generic에 익숙합니다.
· 타입 안정성과 높은 생산성 때문에 선호합니다.

React

· 리액트의 Atomic, Compound pattern, custom hook 등을 이해하고 잘 다룹니다.
· justand, jotai 등의 상태관리 라이브러리를 사용하는데 익숙합니다.
· 서비스에 맞는 좋은 구조에 대해 항상 고민합니다.

TailwindCSS & Emotion

· 빠른 스타일링과 높은 생산성을 위해 Tailwind CSS를 주로 사용합니다.
· 코드의 일관성을 유지하기 위해 주로 Component 기반으로 스타일을 구성하지만, css prop을 활용한 유연한 스타일링이 가능하다는 점에서 Emotion도 종종 사용합니다.

Etc

· React Native, Next.js, SwiftUI
· Cursor, Windsurf
· Jotai, React-query, Vite, Storybook

Recommend Articles

Deep dive into webpack CSS order issue

많은 사람들이 Webpack에서 CSS의 순서가 예상과 다르게 동작해 스타일이 올바르게 적용되지 않는 문제를 겪고 있다고 보고합니다. 사실 Webpack에서 CSS의 순서는 splitChunks 설정과 관련이 있으며, 매우 불안정합니다. 예를 들어, JS 모듈이 a.css를 먼저 import한 후 b.css를 import하더라도, splitChunks를 설정하면 최종적으로 a와 b의 순서가 import 순서와 완전히 다를 수 있습니다.

SwiftUI

@State는 변화가 생기면 해당 변수의 값을 읽거나 새로 쓸 수 있음을 의미하는 property wrapper이다.

JS V8 Engine

기본적으로 JavaScript Enginge은 자바스크립트를 해석하여 AST(Abstract Syntax Tree, 추상적 구문 트리)를 생성한다. 그리고 AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드(intermediate code)인 byte code를 생성하여 실행한다.

Javascript

실행 컨텍스트(execution context)는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다.