미리보기

• 카페24 쇼핑몰 모듈을 이용한 커스텀 쇼핑몰 퍼블리싱 및 웹 디자인 진행

• 사용 기술: HTML, CSS, JavaScript

• 경력 사항

  • Soft Thumbnail 쇼핑몰(리뉴얼) - 퍼블리싱 (2024.04 ~ 2024.05)

  • Moodn 쇼핑몰 - 퍼블리싱 (2023.12 ~ 2023.12)

  • Soft Thumbnail 쇼핑몰 - 퍼블리싱 (2023.07 ~ 2023.07)

  • 프렌드 광고대행 기업형 - 디자인 및 퍼블리싱 (2023.03 ~ 2023.03)

  • 모노랩 기업형 - 디자인 및 퍼블리싱 (2022.04 ~ 2022.04)

  • James Record 기업형 - 디자인 및 퍼블리싱 (2021.12 ~ 2021.12)

• 웹 에이전시 내 웹 디자이너로 근무.

• 약 6개월 정도의 퍼블리싱(HTML, CSS) 업무를 겸하여 진행

• 의류 브랜드의 디자이너로 근무

Money map 프로젝트는 현재의 연봉, 소비, 저축 비중, 투자 비중, 그리고 연간 투자 수익률 등을 입력하면 미래 자산을 미리보기 할 수 있는 웹사이트를 개발합니다.

사용 기술

Vite, React, Tanstack Router, Tanstack Query, Axios, Styled Component, Vitest, React Testing Library

구현 내용

• 세션 방식 인증인가

정산하자는 모임에서 발생한 지출을 손쉽게 정리하고, 모임 내부에서 정산 과정을 간편화하기 위한 애플리케이션입니다. (포트폴리오 링크)

기술

Vite, React, TypeScript, Emotion(react)

내용

• 합성 컴포넌트 구현으로 재사용성과 UI 변경의 유연성 향상 (관련 포스팅 링크)

  • 문제 상황: 동일 UI 패턴 반복 사용되고 데이터나 분기에 따른 UI 재구성으로 인해 코드 관리에 어려움을 겪음

  • 해결 방안: 합성 컴포넌트 구현, Context API 활용, 아토믹 디자인 시스템 적용 및 기능 단위 분리

• 단계를 효과적으로 관리하는 useFunnel 구현 (관련 포스팅 링크)

  • 문제 상황: 여러 페이지에 걸친 정보수집으로 인해 단계별로 정보를 수집한다는 흐름을 파악하기 어려움

  • 해결 방안: 단계 이동 로직에 대한 추상화, Funnel 합성 컴포넌트를 구현, searchParams를 이용한 히스토리 관리

• 공유 기능 구현 및 효율적인 성공, 에러 처리

  • 문제 상황: 유저 간 정산 내역 공유 기능을 투명성을 위해 구현해야 하며, 기기별 지원 여부를 고려한 처리가 필요

  • 해결 방안: File 객체 활용, Navigator api의 share/clipboard 메서드 활용, 콜백 함수를 이용한 성공/에러 처리

• useModal 커스텀 훅으로 Modal 컴포넌트 사용 코드의 복잡성 및 사용성 개선

  • 문제 상황: 상위 컴포넌트에서 Modal 컴포넌트의 출력 여부를 직접 제어하는 불편함이 있음 (상태 등록 및 props 전달의 번거로움)

  • 해결 방안: 모든 Modal 정보(ID, 컴포넌트, 표시 여부)를 중앙 집중 관리하는 modalList 상태 변수 도입, Modal 생성 과정 간소화하는 createModal 제공

DynoTest는 개인 과제로 진행한 프레임워크 코어 구현 프로젝트입니다. (포트폴리오 링크)

기술

TypeScript

내용

• 코어 컴포넌트 객체의 프로토타입 체이닝을 활용한 컴포넌트 상속 구현

  • 문제 상황: 사용자 컴포넌트들이 동일한 프로세스(렌더링, 상태 관리 등)를 가져야 함

  • 해결 방안: 코어 컴포넌트 객체 구현, Object.create() 메서드를 사용한 프로토타입 체이닝

• 증분 DOM 방식을 활용한 렌더링 구현

  • 문제 상황: 컴포넌트의 상태가 변경되었을 때 변경 사항을 반영한 리렌더링이 일어날 수 있도록 구현이 필요함

  • 해결 방안: 증분 DOM 구현, diffing 알고리즘 구현

• React와 유사한 방식의 useState 구현

  • 문제 상황: 컴포넌트별 상태 저장 및 상태 변경에 따른 리렌더링 로직이 필요함

  • 해결 방안: 클로저를 이용한 상태값 유지

• 옵저버 패턴으로 전역 상태 관리 구현

  • 문제 상황: 컴포넌트 내부 단위가 아닌 여러 컴포넌트들이 하나의 상태를 공유할 수 있어야 함

  • 해결 방안: 옵저버 패턴 적용, provider를 제공하여 전역 상태를 공유하는 범위 설정

• React Router 유사 라우터 구현

  • 문제 상황: 클라이언트에서 페이지 라우팅이 가능해야 함

  • 해결 방안: 라우터 객체를 이용한 URL 관리, History API 활용

외워Voca는 외우고 싶은 단어를 입력하고 저장할 수 있는 순수 자바스크립트 기반 단어장 SPA입니다. (포트폴리오 링크)

기술

HTML, CSS Module, JavaScript

내용

• 리액트 재조정 알고리즘을 모방한 DOM 조작 방식 구현

  • 문제 상황: 연속된 DOM 업데이트가 필요한 상황에서 브라우저의 리플로우/리페인트가 과도하게 발생하는 문제 발생

  • 해결 방안: 메모리상의 가상 DOM 트리를 클래스로 구현하여 실제 DOM과 동기화, diffing 알고리즘 적용

• 렌더링 사이클을 고려한 데이터 패칭 구현

  • 문제 상황: 컴포넌트 초기 렌더링 시에만 데이터 패칭이 이뤄지도록 구현이 필요함

  • 해결 방안: 클래스의 constructor 활용, 클로저 구현, async/await 활용

• 효율적인 협업을 위한 프로세스 체계화

  • 문제 상황: 짧은 기간 안에 프로젝트를 완료하기 위해 팀원 간의 원활한 일정 조율, 역할 분배, 명료한 코드 작성 및 소통이 필요함

  • 해결 방안: GitHub Issue 활용, 매일 아침 10분간 스프린트 진행, git flow 전략 도입, JSDoc 활용

• 컴퓨터 과학의 핵심 원리를 체계적으로 이해하고 개발에 활용 가능한 역량을 키우기 위한 학습 진행

• 도서 [쉽게 배우는 운영체제]와 유튜브 강의 [널널한 개발자 - 운영체제와 시스템 프로그래밍]를 통해 운영체제에 대한 지식을 익힘

• 자바스크립트와 타입스크립트의 차이에 대해 이해하고, 타입스크립트 사용 능력을 향상시키기 위한 학습 진행
• 도서 [우아한 타입스크립트 with 리액트] 를 읽고 타입스크립트를 적용한 Todo List 및 개인 프로젝트 구현

• 도서 [프레임워크 없는 프론트엔드 개발] 을 읽고 frameworkless에 대한 견해를 나눔
• 프레임워크 없이 애플리케이션을 구현하는 전략을 이해하고, 적합한 상황에서 적절한 프레임워크를 선택할 수 있는 역량을 키우기 위한 학습 진행
• YAGNI 원칙을 이해하고, 불필요한 기능을 최소화할 수 있는 능력을 키우기 위한 학습 진행