gist를 embed 할 때 사용했던 패키지가 최신 버전을 지원하지 않아, 직접 만들고 배포했습니다.

• github gist를 보다 쉽게 embed 할 수 있도록 개발 및 npm 배포
• 최신 문법으로 작성되어 React의 최신 버전을 지원하며, Rollup 번들러로 패키지를 관리
• 주간 다운로드 수 800 달성
• 현재 블로그에서 직접 만든 패키지로 대체하였음
• 다사다난했던 npm 패키지 배포(iframe, embed등)

기존에 사용하던 블로그 서비스를 대체하고, 개발했던 프로덕트를 한 곳에 모아보기 위해 개발한 사이트입니다.

• 마크 다운 파일 기반 정적 블로그 서비스
• 백엔드로부터 자유롭게 개발 진행(firbase store를 이용한 피드백 페이지, utterances api issue 기반 댓글 시스템, 외부 api를 활용한 조회수 기능 등)
• 느린 초기 로딩속도 개선을 위한 페이지 분석 및 개선 작업 진행 (번들 파일 분석 및 코드 스플리팅으로 번들 크기 축소, 리소스 분석을 통한 요청 리소스 파일 크기 최적화)
• web vital 성능 점수를 60 → 90점으로 50% 개선
• vercel analytics, ga를 통한 유입 관리 및 web vital 체킹
• 사용성 경험을 개선하기 위한 작업 및 리팩토링 진행 중(블로그에 진행 사항을 기록 중에 있습니다.)

링크

• 블로그 이주하기 - 자체 서비스를 만들기 위한 첫 걸음
• 블로그를 만들면서 마주쳤던 어려움들
• 블로그 가독성 개선하기
• 블로그 다크모드 적용기
• 백엔드 없이 블로그 추가 기능 구현하기(feat. 댓글과 조회수기능, 추천 포스트)
• 클로저를 활용하여 커스텀 알림창 구현하기

개발자를 위한 간단한 지식 체크 서비스를 제공합니다. RPG적 요소와 퀴즈를 합쳐서 보다 재미있게 풀 수 있도록 시도해 보았습니다.

• 면담을 통해 팀원의 관심사와 성향을 파악, 친밀감 형성
• 자유로운 의견 제안 환경을 위해 팀 페이지 내 화이트보드 도입, 데일리 스크럼 시간 단축
• 서비스에 필요한 유스케이스를 산출 및 우선순위 부여, 주어진 시간 내에 핵심 기능들 우선 구현
• TypeScript 장점을 팀원들과 공유 및 도입 제안
• Webpack과 Babel 기반 React 스캐폴딩 구축
• 팀 컨벤션 기반 eslint 및 prettier 구축 및 husky, lint-staged를 통한 개발 프로세스 개선
• React 스캐폴딩 템플릿 구성 및 유지 보수
• REST API 기반 퀴즈 풀기 및 해결 페이지 구현
• 사용자가 다양한 문제를 경험할 수 있도록 셔플 알고리즘 도입, 편향되지 않도록 퀴즈 풀 생성
• 가독성 개선을 위해 담당 부분 리팩토링 진행

링크

• 추후 리액트 환경 구성시 빠르게 세팅이 가능하도록 만든 react 스캐폴딩 템플릿
• 체퀴즈온더코드블록 프로젝트 회고

오직 Vanilla JS만을 사용하여 노션의 사이드바와 에디터를 구현하는 프로젝트입니다. 개발 후 TypeScript로 재작성 하였습니다.

• 순수 JavaScript 기반 상태 기반 렌더링 구현, 상태 기반 렌더링 컴포넌트, 라우팅 및 API요청 처리
• 컴포넌트 복잡도를 해결하기 위해 상태 코드를 컴포넌트 외부로 분리
• Observer pattern 기반 전역 상태 관리 구현, 상태 변경 시 렌더링 처리
• App 컴포넌트 300라인의 코드를 약 66% 간소화
• 실시간 자동 저장 기능 구현을 위한 debounce 도입, 500ms의 debounce를 적용하여 불필요한 api 요청 횟수 개선
• TypeScript를 학습하며 기존에 작성했던 JavaScript 코드 리라이팅 진행

링크

• 바닐라 에디터 프로젝트 회고

프로그래머스에서 진행하는 프론트엔드 데브코스에 참여하였습니다.

• 스스로 학습 목표를 세우고, 일일 스크럼을 통한 목표 공유 및 학습 내용을 정리
• 팀 단위로 설계부터 배포까지 참여하며 한 사이클의 개발 과정을 경험

링크

• 데브코스 회고

유기신소재 파이버공학과(신소재공학과)

공부를 하면서 배웠던 지식들을 기록하고 생각을 정리하기 위한 블로그를 운영하고 있습니다.

링크

• 코딩테스트 준비 플랫폼 비교. 나에게는 어떤 플랫폼이 어울릴까?
• React에서 재사용 가능한 버튼 컴포넌트 만들어보기
• [TIL] IntersectionObserver에 대해 알아보자

개발을 본격적으로 시작하게 된 계기가 된, 알고리즘 문제 해결을 취미로 진행하고 있습니다.

• 백준 플랫폼에서 약 650문제를 해결, 현재 플래티넘 5단계
• 해결 여부와 관계 없이 다른 사람들의 풀이를 참고하며 로직의 다양성과 유연한 사고에 대해 학습
• 풀이시 프로젝트 진행과 다른 패러다임으로 의도적으로 접근(iteration → recursion)
• 팀원을 대상으로 그래프, 트리, 탐색 알고리즘 지식 공유 세션 진행

링크

• Baekjoon Profile

함께 주제를 선정하고 공부하며 질답 방식을 통해 학습 내용을 정리하는 스터디에 참여했습니다.

• 스터디 팀원으로 참여하였으며, 운영진으로서 활동
• 주기적으로 회고를 진행하며 스터디 시간을 효율적으로 사용하고, 팀원의 부담감을 낮추는 방향으로 진행 방식을 개선

열린 수업 프로젝트 에세이 공모전 최우수상(총장상)

• 2019학년도 2학기에 진행한 수업 참여율 개선을 위한 프로젝트(보고서 작성)에서 최우수상(총장상)을 받았습니다.