미리보기

• React, TypeScript를 이용해 공통 컴포넌트를 작성한 경험이 있어요.

  • 모노레포 속 분산된 button placement 로직을 공통 컴포넌트 작성을 통해 중복 코드도 없애고, 버그까지 해결한 경험이 있어요.
  • context api 의존성 주입을 사용하여 sift문법을 사용한 동적인 disabled, visible 로직을 통일시킨 경험이 있어요.

• 사용자 요구에 맞는 컴포넌트를 개발하면서 다양한 상태와 선언적인 코드 작성을 고려한 경험이 있어요.

  • 디자이너의 요구사항에 맞추며 현 플랫폼의 성격에 적절한 client상태관리를 고려하여 url search parameter에 이전 페이지들의 정보를 연쇄적으로 객체배열로 담아 렌더링하는 브레드크럼을 개발했어요.
  • yaml로 새 스펙을 정의하고 zod를 통해 네트워크 단에서 응답이 내려오면 run time에 parsing해서 안전하게 메타데이터에 맞는 로직을 짰고, ts-pattern를 사용해 패턴매칭을 통한 선언적인 typescript코드를 다룬 경험이 있어요.

• 토스 현업 개발자와 디자이너와 협업 경험, 스터디 경험이 있어요.

  • 매 pr마다 코드리뷰를 진행하여 유지보수성을 향상시키기 위한 일관적인 코드 스타일을 공유하였고, hasOwnProperty를 지양해야하는 이유 등 기술적인 지식 공유가 이루어졌어요.
  • jira로 이슈 등록, 스프린트 관리를 하며 현재 저의 진행상황을 적극 공유했어요.
  • Framer로 디자인과 스토리라인을 제공해주는 디자이너와 함께 소통하여 브레드크럼브 컴포넌트를 개발했어요. 현재 저희 플랫폼에서 개발적인 이슈를 공유드리며 개발이 가능한 부분을 의견조율한 경험이 있어요.
  • 매주 수요일, 목요일마다 현업 FE개발자들과 새로운 기술의 튜토리얼을 맞보는 소모임을 진행하고, 해당 주에 새롭게 알게 된 개발 지식을 공유하는 엔지니어링 위클리를 진행한 경험이 있어요.

• aws페이지를 밴치마킹하여 자사 홈페이지의 console페이지를 구현(Next.js, Redux-toolkit)했어요.

  • 직접 카드의 드래그 앤 드롭 기능을 구현하고, 카드 동적 생성(리스트 제거, 리스트 추가, 리스트 리셋) 로직을 redux-toolkit으로 관리하여 비즈니스 로직을 분리한 경험이 있어요.

• 새 프로젝트 세팅 및 퍼블리싱 작업(Next.js, TypeScript, Recoil)을 진행했어요

  • 기존의 오픈소스 코드(jQuery + PHP)로 되어있는 코드를 점진적으로 이관하기 위한 프로젝트 세팅 및 퍼블리싱 작업을 진행했어요. 모든 기능을 옮기기에 한계가 있는 지점은 iframe으로 해당 기능을 구현하고 있는 오픈소스를 도커에 띄우고 window.addEventListener으로 통신을 진행했던 경험이 있어요.
  • Next.js의 페이지 기반 라우팅을 사용하여 사이드바 메뉴 아코디언 UI 구현 + 브레드크럼브 UI를 구현했어요.
  • 검색기능, 페이지네이션, 라디오 테이블 UI가 동적으로 옵셔널하게 들어가는 복잡한 공통 카드 UI를 구현했어요.

Tech Stack

TypeScript, React, Redux-toolkit, SCSS , socket.io

프로젝트 간단 소개

“엘리스 수강생들이 더 편리하게 사용할 수 있는 서비스가 없을까?”라는 물음표에서 시작된 프로젝트예요. 레이서들과 엘리스랩 매니저가 커뮤니티와, 좌석 예약 관리를 더 편하게 이용할 수 있는 모바일 기반 웹사이트에요.

💡 Main Features

1. 디스코드 DM대신 관리자와 플랫폼에서 바로 소통할 수 있다.
2. 실시간으로 관리자의 접속상태를 알 수 있다.
3. 체크인 시간 전까지 예약 취소가 가능하다.
4. 잔여좌석 확인이 가능한 레이아웃이다.
5. 엘리서들은 좌석 예약 뿐 아니라 커뮤니티에 글을 공유할 수 있다.

프로젝트 링크

• Notion : https://steep-agreement-07d.notion.site/f8f76155ddab47e390cad91d094432c8?pvs=4
• github : https://github.com/elicefirefighter/seongsudong-elice-FE

맡은 기능

• 실시간 채팅 기능
  
  관리자는 여러명과 대화할 수 있고, 유저는 관리자랑만 대화 가능한 n:1구조의 socket.io를 활용한 실시간 채팅 기능을 구현했어요
  채팅은 어느 페이지에서든지 접근이 가능하도록 모달형태로 구현하였고, 유저의 UX관점에서 채팅 버튼이 화면을 가릴 수도 있으니 drag&drop형식으로 구현했어요.
  해당 기능을 구현하며 겪었던 트러블 슈팅 및 고민들은 아래 블로그 링크에 정리해두었어요.
  react-draggable Drag&Drop 구현
  socket.io로 실시간 채팅 구현 2탄

• 공통 모달 UI(카카오로 보내기, 이메일로 보내기, confirm모달)를 구현하여 여러 페이지에서 재사용 할 수 있게 구현했어요. redux-toolkit으로 모달 상태를 전역에서 관리하여 컴포넌트 내 비즈니스 로직을 줄였어요.

• 카카오 API를 활용하여 카카오로 예약 정보를 공유할 수 있는 기능을 구현했어요.

• 마이페이지 (내 게시판 조회, 내 예약 조회, 로그아웃, 회원 탈퇴) 구현했어요.

Tech Stack

JavaScript, HTML, TailwindCss

프로젝트 간단 소개

JavaScript의 동작방식을 제대로 이해하기 위해 SPA프레임워크나 라이브러리 없이 바닐라JS로 구성한 프로젝트예요. front-end와 back-end의 코드가 한꺼번에 있는 모놀리식 구조로 되어있어요. views 폴더가 front-end의 코드가 존재하는 위치이며, 각 파일들은 페이지에 따라 서로 다른 폴더로 구분되어 있어요.

💡 Main Features

1. 일반 사용자 CRUD
2. 쇼핑몰 카테고리 및 상품 CRUD
3. IndexedDB로 관리하는 장바구니 데이터 CRD
4. 주문 데이터 CRUD

프로젝트 링크

• Notion : https://steep-agreement-07d.notion.site/7b703a1b68aa4a91a1279d1225bcd29b?pvs=4
• github : https://github.com/Green-mate/Green-mate

맡은 기능

• 회원가입/로그인/회원정보 수정,탈퇴 기능

  • JWT 토큰 방식의 로그인 인증 방법으로 회원가입/로그인/회원정보 수정,탈퇴 기능을 구현했어요.

• IndexedDB 주문 기능

  • 타 브라우저 스토리지에 비해 용량이 큰 IndexedDB를 사용하여 클라이언트 사이드의 데이터 저장관리를 경험하고, 장바구니 및 주문 기능을 구현했어요.

• 페이지네이션, 스피너 기능

  • 페이지네이션에서 현재 페이지에 + 1한 값의 데이터를 불러오기 위해 현재 페이지를 전역 상태로 관리하기 위해 queryString을 사용하여 구현했어요.
    바닐라 자바스크립트 페이지네이션 만들기

• 홈화면/카테고리/상품 상세보기 기능구현했어요.

• 주문정보조회/수정/삭제 기능을 구현했어요.

• back-end와 기능 스위치로 좋아요 기능 구현

  • 특정 user의 좋아요를 구현하기 위해 현재 로그인한 User의 Id를 queryParams로 받아서 가입한 user가 맞는지 id대조를 통해 인증을 한 뒤, 특정 게시물에 좋아요한 유저의 id를 배열로 저장하는 로직을 구현했어요.