미리보기

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

• 사용 기술: HTML, CSS, JavaScript

• 경력 사항

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

  • 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) 업무를 겸하여 진행

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

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

사용 기술

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 활용

Dynoup은 SPA용 프론트엔드 프레임워크를 구현하는 프로젝트입니다. (포트폴리오 링크)

사용 기술

TypeScript

구현 내용 요약

• UI 문법을 제공하기 위한 트랜스파일러 구현 (관련 포스팅 링크)
  • 문제 상황: 컴포넌트를 선언적으로 작성할 수 있도록 JSX 같은 자체 UI 문법을 제공해야 함
  • 해결 방안: JSX 유사 문법 개발, String.prototype.replace() 메서드를 활용한 임시 태그 변환, 재귀 순회로 임시 태그를 실제 DOM으로 변환

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

사용 기술

HTML, CSS Module, JavaScript

구현 내용 요약

• 효율적인 협업을 위한 프로세스 체계화
  • 문제 상황: 짧은 기간 안에 프로젝트를 완료하기 위해 팀원 간의 원활한 일정 조율, 역할 분배, 명료한 코드 작성 및 소통이 필요함
  • 해결 방안: GitHub Issue 활용, 매일 아침 10분간 스프린트 진행, git flow 전략 도입, JSDoc 활용
• 로그인, 회원가입 유효성 검사 구현
  • 문제 상황: 유저가 올바른 입력값을 작성했는지 확인하기 위한 효율적인 유효성 검사 로직이 필요함
  • 해결 방안: 유효성 검사 객체(schema) 구현, get 접근자 프로퍼티로 사용성 향상, 다른 필드 값 참조를 위한 this 접근자 활용
• 렌더링 사이클을 고려한 데이터 패칭 구현
  • 문제 상황: 컴포넌트 초기 렌더링 시에만 데이터 패칭이 이뤄지도록 구현이 필요함
  • 해결 방안: 클래스의 constructor 활용, 클로저 구현, async/await 활용

• 컴퓨터 과학의 핵심 원리를 체계적으로 이해하고 개발에 활용 가능한 역량을 키우기 위한 학습 진행
• 현재 도서 [쉽게 배우는 운영체제] 를 읽고 운영체제에 대한 지식을 익히고 있으며, 순차적으로 네트워크, 알고리즘까지 진행할 예정

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

• 꾸준한 학습 습관을 기르고 자기 주도적인 학습 능력을 향상시키기 위한 스터디
• 모든 스터디원(프론트엔드 1명, 백엔드 1명, 풀스택 2)이 주 4회 이상 꾸준히 참여하고, 현재까지도 진행되고 있음

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