Portfolio

Info.

김선진

Intro.

저는 발생할 수 있는 문제를 미리 파악하고, 이를 선제적으로 해결할 준비를 갖춘 주니어 프론트엔드 개발자입니다.

- 저의 장점은 프론트엔드 개발자로서 다음과 같이 발휘되었습니다.

컴포넌트의 재사용성과 코드의 일관성을 강화하여, 유지보수에 필요한 시간을 줄이고 효율성을 높이기 위해 노력했습니다.

- 저의 장점은 협업할 때 다음과 같이 발휘되었습니다.

개발하면서 겪었던 이슈와 해결하는 과정을 기록하고, 이를 팀원들에게 공유하여 향후 동일한 문제가 발생했을 때 신속하게 대처할 수 있도록 했습니다.

제가 보유하고 있는 기술 스택을 소개합니다.

Skill.

HTML & CSS

- 디자인에 기반하여 웹 페이지의 구조를 결정할 수 있습니다.

- Search Engine Optimization, BEM(Block, Element, Modifier), 반응형 디자인을 적용한 경험이 있습니다.

- SCSS와 Styled Component를 활용하여 스타일을 구성할 수 있습니다.

Javascript & Typescript

- Javascript ES6+와 Typescript를 활용하여 웹 애플리케이션을 개발한 경험이 있습니다.

- React.js 및 Next.js를 활용하여 웹 애플리케이션을 구축했습니다.

- axios를 활용하여 HTTP 비동기 통신을 수행하며, 비동기 처리를 위해 async/await 구문을 적절히 활용할 수 있습니다.

- Recoil 상태 관리 라이브러리를 활용하여 상태를 효율적으로 관리할 수 있습니다.

- 컴포넌트 시각적 테스트를 위해 Storybook을 활용한 경험이 있습니다.

Communication

- 스크럼 회의 기록, 스프린트 회고, 코드 컨벤션 등 ground rule을 수립하여 협업에 도움이 되는 개발 문화를 조성하기 위해 노력했습니다.

- 프로젝트에서 발생하는 여러 이슈와 해결 과정을 기록하고 관리했으며, 타 프로젝트에서 비슷한 이슈가 발생했을 때 자료를 팀원에게 공유하여 시행착오를 줄일 수 있었습니다.

- 서비스를 배포하기 전에 Notion을 활용하여 QA 시트를 작성하고, 코드를 수정하여 사용자 인터페이스와 경험을 개선하는 데 기여했습니다.

Server

- 서비스에서 MySQL 데이터베이스를 활용한 API 설계 및 CRUD 작업에 참여한 경험이 있습니다.

- Sequelize와 MVC 패턴을 활용하여 데이터베이스와 애플리케이션 로직을 분리하여 개발한 경험이 있습니다.

- Node.js를 활용하여 RESTful API를 개발할 수 있습니다.

- AWS의 EC2, RDS를 활용하여 서버를 성공적으로 배포한 경험이 있습니다.

Career.

미래내일일경험 인턴, 엘리스 Product Division Frontend

2024.07.08 ~ 2024.09.10 (주2일 16시간 근무)

Javascript ES6+

React 16+

Typescript

Material UI

업무

올인원 디지털 교육 플랫폼인 엘리스LXP에서 수업을 관리하고 구성하는 페이지들에서 사용된 elice/blocks 컴포넌트를 Material UI 기반의 컴포넌트로 교체하여 코드 베이스를 업데이트하여 UI 일관성 및 개발 생산성 향상

컴포넌트 분석 및 매핑

엘리스에서 자체 제작된 React component library인 elice/blocks 컴포넌트와 Material UI 기반의 컴포넌트를 비교하고 분석하여 대체할 수 있는 컴포넌트로 매핑

코드 베이스 업데이트

엘리스LXP에서 수업 관리자가 수업 정보를 입력하는 페이지, 수업 이수 조건 및 수료증 설정 페이지, 분반 구성 페이지, 수업 정보를 소개하는 내용을 조회하는 페이지에서 사용된 레거시 컴포넌트를 Material UI 컴포넌트로 교체하여 코드 베이스 업데이트

1. 공용 컴포넌트 설계 및 구현

- 배경: 엘리스LXP 플랫폼에서 elice/blocks 라이브러리의 input 컴포넌트에 적용된 글자 수 제한 기능을 Material UI의 TextField로 대체하는 과정에서, TextField가 기본적으로 글자 수 제한 기능을 제공하지 않는 것을 발견

- 문제 인식: 초기에는 수업 정보 입력 페이지에서만 사용할 수 있는 커스텀 기능을 구현할 계획이었으나, 프로젝트 전반에 걸쳐 다양한 페이지에서 글자 수 제한 기능의 필요성 인식

- 해결: 중복된 코드 작성과 유지보수의 어려움을 최소화하기 위해 공용 컴포넌트로서 글자 수 제한 기능을 추가한 커스텀 TextField 컴포넌트를 설계. 이를 엘리스의 코드 컨벤션에 맞춰 구현하여, 여러 페이지에서 재사용 가능하도록 구성

- 성과: 공용 컴포넌트를 통해 다양한 페이지에서 통일된 기능을 제공하고 유지보수의 일관성을 유지하면서도 각 페이지별 요구사항 충족

2. 사용자 경험 개선

- 배경: 엘리스LXP 플랫폼에서 관리자가 분반을 구성하는 페이지를 migration하는 과정에서, 분반 이름을 수정하다가 취소 버튼을 눌렀을 때 수정 사항이 제대로 취소되지 않는 문제 발견

- 문제 인식: 취소 버튼을 눌렀음에도 수정하기 위해 입력했던 내용이 그대로 반영되어 취소가 되지 않은 것처럼 보였지만, 페이지를 새로고침하면 취소가 적용된 상태임을 확인. 이 문제의 원인을 분석한 결과, 취소 버튼 클릭 시 수정 전의 값으로 되돌리는 로직이 구현되지 않았다는 것을 확인

- 해결: 취소 버튼 클릭 시 수정하기 이전 값으로 되돌리는 set 함수를 추가하여, 취소 버튼을 눌렀을 때 즉시 수정 전 내용이 나타나도록 기능 개선

- 성과: 관리자는 취소 버튼을 눌렀을 때 명확하게 수정 이전의 내용을 확인할 수 있게 되었고, 이 기능 개선을 통해 사용자 경험 향상

협업 방식

MUI 컴포넌트 migration 문서화

엘리스LXP 수업 관련 페이지 migration을 담당하는 스쿼드의 팀장으로서, 레거시 컴포넌트를 Material UI 컴포넌트로 전환하는 과정을 문서화하는 작업 주도

- Notion을 활용하여 각 레거시 컴포넌트에 대응하는 Material UI 컴포넌트와 매핑하고 migration하는 과정에서 발생할 수 있는 이슈 및 해결 방안에 대한 설명 추가

- 팀 간 협업을 원활하게 하기 위해, 해당 문서를 제공하여 코드 베이스의 일관성 및 유지보수성 향상에 기여

업무 플로우 문서화

회사 내 업무 시스템과 흐름을 빠르게 이해하기 위해, 업무 시스템을 체계적으로 문서화하고 팀원들과 공유하여 혼란을 최소화하고 효율적인 협업 도모