짧은 자기소개


스무 살 부터 여러 직업을 거치며 일경험을 쌓았습니다. 뒤늦게 진로를 탐색하는 과정에서 프론트엔드 개발을 접하게 됐어요. 프로그래밍은 제가 해왔던 일이나 전공과도 달라 배움 자체가 쉬운 일은 아니었습니다. 어렵긴 했지만 프로그래밍은 저에게 종종 재미있고 꽤나 흥미로워서, 공부를 멈추지 않았습니다. 일과 병행하기도 하면서 천천히 개발 지식을 쌓았습니다. 배운 것들로 몇 개의 프로젝트를 혼자서 진행하기도 하며, 현재는 프론트엔드 개발자로 일하고 있습니다.

저는 다양한 프로그래밍 언어와 프레임워크를 사용해보고 배우는 일에 재미를 느낍니다. 또한 습득력이 빨라서 낯선 언어나 프레임워크도 금방 사용할 수 있습니다. 저의 다양한 경험에 개발 경험을 더해서, 회사의 개발 조직을 좀 더 유연하고 소통하기 쉬운 조직으로 만들 수 있을 것이라 생각합니다. 좋은 개발 경험을 더 많은 사람들과 나누어서, 성과를 이루는 과정에 함께하고 싶습니다.

이력


오토위니(Autowini)

2022.08 ~ 현재

쓰고 있는 기술들


좋아하는 것

  • React
    • 처음으로 사용했던 프레임워크.
    • 처음 배울 때 어려웠고, 지금도 여전히 어렵다.
  • Vue
    • 사내 사이드 프로젝트를 Vue3 기반으로 진행하면서, Vue3 문법에 익숙해지려고 노력 중.
    • Vue를 중심으로 한 생태계가 점점 발전하는 걸 보면서, Vue가 좀 더 많이 쓰이기만 한다면... 하는 기대를 품게 한다.
  • Angular
    • 서드 파티 패키지에 대한 고민을 줄일 수 있어서 좋다.
    • 구글링도 꽤 잘 되는 편이다(오래된 버전에 대한 stackoverflow 답변이 많다는 건 약간 함정).
  • SolidJS
    • 앞으로가 매우 기대 되는 프레임워크.
  • Flutter
    • 간단한 앱을 개발해봤는데, DX가 훌륭하다는 느낌을 받았다(이건 Dart 언어에서 오는 장점일지도 모른다).
  • Typescript
    • Typescript를 쓰기 전과 쓴 후의 개발 경험은 완전히 다른 차원이라고 생각한다.
  • Vite
    • 현 세대에서 Vite보다 빠르게 프로젝트를 시작할 수 있는 방법이 또 있을까?
  • tailwindcss, zustand, Tanstack Query
    • tailwindcss는 모든 사내 프로젝트에 적용하고 싶을 만큼 좋아한다. Recoil, Redux-toolkit를 기반으로 하는 상태 관리는 zustand로 바꾸고 있다. Tanstack Query는 버전이 올라갈 때마다 너무 많은 것이 바뀌어서 조금 혼란스럽긴 하지만, 서버 상태 관리 툴로 거의 모든 프로젝트에 적용하고 있다.
  • Git, Github Actions
    • Git이 없는 세상을 상상하기가 어렵다.
    • Github Actions를 이용해서 CI/CD 스크립트를 내가 직접(세상에!) 작성할 수 있었다(그만큼 쉽다는 뜻).
  • Firebase, Vercel
    • 이 두 가지 도구가 없었다면 나는 사이드 프로젝트를 완성하기 어려웠을 것이다.
    • supabase도 꼭 한번 사용해보고 싶다!
  • Go
    • Go 언어를 이용해 REST API를 만들어보겠다고 강의도 열심히 들었으나, 제대로 만들어보진 못했다.

그 외

  • Next.js
    • 13 버전 이후 App router가 등장하면서 사용하는 데에 있어 고민이 많아진 프레임워크.
    • 사내 특정 프로젝트를 Next.js App router로 마이그레이션 하다가, 작업량이 너무 많아져 포기한 적이 있다. 또한 SSR에 의한, SSR을 위한 프레임워크라고 여겨져서... SSR이 필요하지 않은 SPA에는 다른 대안(특히 Vite)이 있기에 사용을 주저하게 되는 듯하다.
  • Gatsby
    • Gatsby를 이용해서 블로그를 만든 적이 있음.

사이드 프로젝트


  • both-of-us
    2023-10
    기념일 알려주는 웹 앱
    • Flutter 기반의 웹 앱입니다.
    • 이름과 기념일을 입력하면 해당 기념일의 100일 단위, 연 단위의 기념일을 목록으로 만들어 보여줍니다.
    • 무한 스크롤이 적용되어 있습니다.
    • Firebase와 App Store를 통해 배포되었습니다.
    • Skill Icon
    • Skill Icon
  • image-editor-exam
    2023-03
    IMAGE EDITOR
    • Canvas API를 활용하여 이미지 편집 기능을 구현했습니다.
    • Github Action + Vercel로 CI/CD를 구축했습니다.
    • Skill Icon
    • Skill Icon
    • Skill Icon
    • Skill Icon
  • to-be-published
    2022-07
    출판예정도서 검색기
    • Vue3 + Typescript 기반의 단일 페이지 어플리케이션(SPA, single page application)입니다.
    • 국립중앙도서관의 서지 정보 API를 활용했습니다. 각 출판사에서 직접 등록한 출간 예정 도서를 검색할 수 있습니다.
    • Pinia(Vuex와 거의 똑같은 기능)를 이용하여 전역 상태를 관리합니다.
    • Vercel로 배포 되었습니다.
    • Skill Icon
    • Skill Icon
    • Skill Icon
    • Skill Icon
  • asuwant
    2022-02
    News API를 활용한, 뉴스를 골라보는 웹 앱
    • 2019년에 만든 비슷한 프로젝트를(Pionner) 2022년에 최신 흐름에 맞춰 다시 만들었습니다.
    • 국가와 카테고리를 골라 상위 25개의 뉴스 헤드라인을 데이터로 받아와서 보여줍니다.
    • News API를 활용했습니다.
      (free-tier로 쓰고 있으며 요청을 하루에 100회까지 받을 수 있습니다. 100회 초과시 에러 페이지가 나타납니다.)
    • Create-React-App의 프록시 설정으로 CORS 에러를 방지하고, 이를 통해 News API에서 데이터를 받아올 수 있습니다.
    • 프론트 영역은 Github Pages, Express 서버는 heroku로 배포했습니다.
    • 전역 상태 관리 도구로 zustand, 비동기 데이터 관리 라이브러리로 React Query를 사용했습니다. (22년 7월 업데이트)
    • 모든 코드를 자바스크립트에서 타입스크립트 코드로 변환했습니다. (22년 7월 업데이트)
    • Skill Icon
    • Skill Icon
    • Skill Icon
    • Skill Icon
  • time-to-grow-up
    2022-02
    Next.js 기반의 온라인 이력서
    • Gatsby를 이용해서 블로그를 만든 후, Next.js에도 관심이 생겨서 튜토리얼을 따라해보다가 온라인 CV로 만들게 되었습니다.
    • Vercel을 이용한 배포가 굉장히 편리해서 놀랐습니다.
    • Skill Icon
    • Skill Icon
  • mongnokam
    2021-12
    Github API를 통해 나만의 저장소 리스트를 만들 수 있는 웹 앱
    • Angular를 이용해 작은 프로젝트를 만들고 싶어, 깃헙 저장소를 리스트로 관리해주는 웹 앱을 계획했습니다.
    • 초기에는 angular-material을 이용해 간단하게 드래그 & 드롭을 구현할 계획이었으나, angular-material이 제공하는 드래그 & 드롭 애드온의 작동 방식이 이해가 되지 않았습니다. 결국 HTML 드래그 앤 드롭 API를 이용했습니다.
    • Firebase를 백엔드 서비스로 이용했고, 배포도 Firebase를 활용했습니다.
    • 스타일링, 리스트 삭제 구현 등 업데이트 예정입니다.
    • Skill Icon
    • Skill Icon
  • tyange-dev-blog
    2021-11
    Gatsby 기반 정적 블로그
    • Gatsby를 기반으로, 타입스크립트를 적용해 만들어진 정적 블로그입니다. (22년 7월 업데이트)
    • 전역 상태 관리 도구로 zustand, 스타일링을 위해 styled-components를 사용했습니다. (22년 7월 업데이트)
    • Gatsby Cloud(Vercel과 거의 유사한 배포 플랫폼)로 배포되었습니다.
    • 이 블로그에 개발과 관련된 글을 쓰고 있습니다.
    • Skill Icon
    • Skill Icon
    • Skill Icon
    • Skill Icon
    • Skill Icon
  • burger-finder
    2021-08
    입력한 재료(들)와 가장 비슷한 햄버거를 찾아주는 웹 앱
    • 처음(?) 제대로 만들어본 React 프로젝트로 평소에 피클을 싫어하는 제가 피클이 들어가지 않는 햄버거를 쉽게 찾으려고 만들었습니다.
    • CRA로 프로젝트를 빌드했습니다.
    • Firebase를 REST API 형식으로 활용하며, 배포도 Firebase로 진행했습니다.
    • 유저 등록 및 로그인을 Firebase Authentication으로 구현했습니다.
    • Skill Icon
    • Skill Icon
  • wto
    2020-08
    주문서 작성에 불편함을 덜어주는 초간단 미니 ERP (heroku 배포의 특성상 로딩에 조금 시간이 걸립니다.)
    • IKEA에서 근무할 때 계획하고 개발된 프로젝트입니다.
      (IKEA의 정식 프로젝트는 아닙니다.)
    • IKEA 주방은 수많은 부품의 조합으로 만들어집니다. 이로 인해 팀의 업무가 주문서 작성 & 검증에 집중되어 있었습니다. 각 부품들의 정확한 이름과 제품 번호, 가격 등을 테이블로 정리하고, 이를 활용해 좀 더 쉽게 주문서를 작성하도록 만들었습니다.
    • Express로 만들어졌으며, 템플릿 엔진으로 pug를 사용합니다.
      (여타의 프론트엔드 프레임워크는 사용되지 않았습니다.)
    • heroku로 배포되었습니다.
    • Skill Icon
    • Skill Icon
    • Skill Icon
    • Skill Icon
  • Longtime
    2019-01
    커플 디데이 계산기
    • 바닐라 자바스크립트로 만들어졌습니다.
    • Unsplash의 API를 이용해 커플 키워드가 들어간 사진을 배경으로 띄웁니다.
    • 입력된 데이터는 브라우저의 localStroage에 저장됩니다.
    • 정적인 하나의 페이지로, Github-Pages로 배포되었습니다.
    • Skill Icon
    • Skill Icon
    • Skill Icon