미리보기
기본 정보
2년 동안 5개 이상의 개발 프로젝트를 진행하며 협업 경험을 쌓았습니다. 개발 과정에서 의견 차이에 대해 어떻게 하면 상대를 존중하며 설득할 수 있을까 고민하는 자세를 배웠습니다. 설득하기 위해 그림을 그리고, 직접 간단한 코드를 구현하며 설명했습니다. 구현 과정에서 코드 및 깃 컨벤션을 정하고 문서화하며 원활하게 개발을 진행할 수 있었습니다. 또한 코드 리뷰를 하며 더 나은 코드에 대해 고민하며 동료들과 함께 성장한 경험이 있습니다. 수영 강사를 하며 웹서비스를 개발하여 수강생들의 수업 참석률을 8% 상승했습니다. 수강생들과 직접 대화하며 문제점을 파악하여, 3개월 간 기획부터 런칭까지 진행했습니다. 런칭 이후에는 수강생에게 피드백을 받으며 유지 보수를 이어갔습니다. 수강생들의 수업 참석율은 52% 에서 60% 로 상승했고, 현재는 ‘덕분에 목표가 생겼어요’ 와 같은 이야기와 함께 수강생에게 새로운 가치를 전달하고 있습니다.
기술 스택
JavaScript, TypeScript, React, Next.js, NestJS, HTML/CSS, PostgreSQL, Firebase, Docker, docker-compose, Git, GitHub, JIRA, C, C++
프로젝트
1. RIDE THE WAVE
개인
2023.10. ~ 진행 중
소개 : 수영 회원 기록 조회 및 익명게시판 웹서비스
사이트 : Ride-The-Wave - '김재환'으로 로그인
깃허브 : https://github.com/RIDE-THE-WAVE/ver1.0
팀구성 : 1명
기술 스택 : React, JavaScript, HTML/CSS, Redux, Redx Persist, Git & GitHub, Firebase, Firestore
상세 역할 : 웹 서비스 및 서버 개발
상세 내용
- React 를 사용하여 SPA 개발
- CSS module 을 사용하여 classname 중복으로 인한 에러 방지
- Redux 를 이용하여 회원 및 기록 데이터를 전역 상태 관리
- 캐싱 전략으로 redux - persist 와 localStorage 를 사용하여 DB접근 최소화
- CRUD 익명게시판 구현
- Firebase 를 통해 배포
문제 해결
1) 비동기 처리 개선과 데이터 페치 분리로 성능 개선
문제 : 랜딩 페이지에서 DB의 유저, 기록, 게시판 데이터를 페치 및 재가공하기 때문에 초기 로딩 속도가 느린 문제가 있었습니다.
과정 : 크롬 개발자 도구의 네트워크 탭을 확인했습니다. 불필요한 async await 으로 데이터 페치가 워터폴 방식이었고, 이를 제거하여 로딩 시간을 줄였습니다. 이후, 게시판 데이터 페치를 랜딩 페이지에서 게시판 페이지로 분리하며 시간을 줄였습니다.
결과 : 랜딩 페이지 데이터 로딩 시간을 63.15% 감소했고, 적절한 비동기 처리 및 데이터 페치의 중요성을 느꼈습니다.
2) localStorage 를 이용한 로딩 시간 및 API 호출 최적화
문제 : 서비스를 이용하며 유지가 필요한 데이터가 사라지는 문제가 있었습니다. 서비스에 접속할 때마다 데이터 로딩하는 시간으로 사용자가 불편함을 느꼈고, 새로고침 시, 반복적으로 DB 에 API 호출을 보내며 비용이 발생했습니다.
과정 : 캐싱 전략이 필요하다 판단했고, Redux 와 상태를 저장 및 복원하는 redux-persist 를 적용했습니다. 브라우저를 다시 실행해도 데이터가 사라지지 않도록 하기 위해 localStorage 를 활용했습니다.
결과 : 캐싱 전략으로 로딩 시간을 생략하며 사용자의 불편함을 해소했고, API 호출을 줄여 비용 부담이 감소했습니다.
2. Crazy Pong
이노베이션 아카데미, 42서울
소개 : DB, 서버 등에 대한 이해 및 REST 와 Socket API 학습을 위한 핑퐁게임 웹서비스
깃허브 : https://github.com/Gaepo-transcendance-fighters/BACK-END
팀구성 : BE 3명, FE 4명
기술 스택 : TypeScript, NestJS, TypeORM, Socket.IO, PostgreSQL, pgAdmin, Docker, Docker Compose, Git & Github
상세 역할 : 서버 개발
상세 내용
- REST & Socket API 설계
- Nest.js 로 서버 & PostgreSQL 로 DB 구축
- SocketIO 라이브러리 활용하여 실시간 채팅 및 채팅 정책 구현
- Docker 로 개발 환경 구성 & Docker - Compose 로 배포 자동화
문제 해결
1) Docker - Compose 를 통한 배포 자동화
문제 : 서버(Nest.js), 클라이언트(Next.js), DB(PostgreSQL)를 각각 Docker 에 올려서개발을 진행했습니다. 테스트 및 코드 수정하는 과정에서 다중 컨테이너를 실행하고 연결하는 것을 수동으로 하며, 팀의 작업 효율성에 문제가 있었습니다.
과정 : Docker - Compose 를 사용하여 과정을 단축하며 문제를 해결했습니다. depends_on 옵션을 통해 의존성을 걸면서, DB -> 서버 -> 클라이언트 순서로 실행하며 에러를 방지했습니다. 또한 환경변수를 Docker - Compose 에서 반영하며 테스트 과정에서 DB 정보가 바뀌는 등의 상황에서 한번에 반영하며 자동화했습니다.
결과 : 여러 단계를 수동으로 작업했던 부분을 docker-compose up 명령어로 한번으로 자동화하며 팀원들의 불편을 줄이며 작업 효율을높였고, 자동화가 팀에 가져오는 이점을 느꼈습니다.
2) DTO 를 활용한 데이터 명시화 및 유효성 검사
문제 : API 요청을 주고 받는 과정에서 데이터 자료형을 정하지 않아서, 프로그램은 돌아가는데 생각했던 결과가 없고 에러도 발생하지 않는 상황을 겪으며 문제 발견에 어려움을 느꼈습니다.
과정 및 결과 : DTO(데이터 전송 객체)를 활용하여 문제를 해결했습니다. 데이터 구조를 명시화하고 데이터 유효성을 검사하며, 의도하지 않은 데이터가 넘어왔을 때 에러 발생을 유도했습니다.
3. 차다
기타
2022.01. ~ 2022.03.
소개 : 블루투스 및 OBD 모듈을 이용하여 차량 정보를 모바일로 확인 하는 앱 서비스
깃허브 : https://github.com/jae-hwan-kim/Chada_OBD2Application
팀구성 : 3명
기술 스택 : C++, Dart, Flutter, Arduino, Jira, Confluence
상세 역할 : 앱 및 IoT 서비스, 프로젝트 리딩
상세 내용
- Flutter UX/UI 개발
- OBD & 레오나르도 아두이노 & Bluetooth 연결
- Jira & Confluence 를 이용하여 스크럼 개발 프로세스 진행
배운 것
1) 통합 모듈의 단점
상황 : OBD, CAN, 아두이노가 함께 있는 통합 모듈을 사용했습니다. 마무리 작업에서 CAN 모듈이 고장났습니다. 3개의 모듈은 서로 의존성이 있었고, 이로 인해 다른 모듈까지 사용할 수 없었습니다.
배운 것 : 모듈이 서로 의존성을 갖는게 개발 과정에서 편할 수 있지만, 강한 의존성에 의지하다 보면 큰 문제가 발생할 수 있다는 것을 느꼈습니다.
2) 회고의 중요성
상황 : 총 7번의 스프린트를 진행하고, 회고를 했습니다. 팀원의 생각(목표, 협업 방식 등)을 공유하며 좋았던 것, 불편했던 것, 시도할 것에 대해 의견을 나눴습니다. 개발 관련된 것 외에 팀원의 컨디션, 근무 환경 등에 대한 의견을 나누며 출근 시간을 9시에서 8시로 바꾸고 근무지 에 변화를 주기도 했습니다.
배운 것 : DTO(데이터 전송 객체)를 활용하여 문제를 해결했습니다. 데이터 구조를 명시화하고 데이터 유효성을 검사하며, 의도하지 않은 데이터가 넘어왔을 때 에러 발생을 유도했습니다.
4. 42서울 교육 과정
이노베이션 아카데미, 42서울
2021.10. ~ 2023.10.
소개 : 동료 학습과 프로젝트 기반으로 10개 이상의 개인&팀 프로젝트를 진행하는 교육
기술 스택 : C, C++, TypeScript
상세 내용
- Nest.js 를 활용하여, REST 및 Socket API 설계 및 구현
- Docker 및 Docker-Compose 로 개발 환경 구성, 배포 자동화
- C++ 로 kqueue 를 활용하여 HTTP 를 지원하는 WebServer 구현
- C 로 <stdio.h> 메모리, 문자열 관련 함수를 구현하며 CS 학습
- C 로 간소화된 Bash Shell 구현
- 식사하는 철학자 문제를 통해 뮤텍스, 임계영역, 교착상태 학습
- Virtual Machine 사용 경험
대외활동
집현전
이노베이션 아카데미, 42서울
소개 : 42서울이 보유한 1300 여권의 도서를 직접 개발한 사이트 관리하는 동아리
사이트 : 집현전 사이트
깃허브 : https://github.com/jiphyeonjeon-42/frontend
기여한 것 : 도서 관리 웹 서비스 개발에 참여
기술 스택 : React.js, JavaScript
상세 내용
- 도서 좋아요 & 무한 스크롤을 지원하는 도서 리뷰 기능 구현
포트폴리오
URL
교육
42서울 / 이노베이션 아카데미
사설 교육
2021.10. ~ 2023.10. | 졸업
한국체육대학교 (4.12/4.5)
대학교(학사) | 사회체육학과
2013.03. ~ 2020.02. | 졸업
자격증
웹 디자인 기능사 자격증
한국산업인력공단
2020.12.
자기소개
[부족한 것을 찾고 채우는 개발자]
항상 스스로 부족한 점을 찾습니다. 이러한 부분을 채우며 성장할 때 행복합니다. 처음 개발자로서 성장하기 위해 부족하다고 생각한 건 CS 지식과 협업 경험이었습니다. 두 가지를 채우기 위해 C, C++ 로 프로젝트를 진행하며 CS 를 학습하는 42 Seoul 교육 과정에 참여했습니다.
프로세스, 스레드, IPC, 자료구조 등을 학습하는 과정이 어려웠습니다. 하지만 개발 도서와 공식 문서를 참고하고, 인터넷에 검색을 하고, 동료들과 함께 스터디하며 CS 지식을 채워나갔습니다.
협업 경험을 쌓기 위해서 교육 과정에서 제공하는 과정에 의존하기보다, 팀을 구성해서 공모전에 참여하고 도서 관리 동아리에 가입하여 웹서비스 개발 경험도 쌓았습니다. 공모전에서는 OBD & Bluetooth 모듈을 사용하는 IoT 프로젝트를 진행했고, 도서 관리 동아리는 React 를 사용하여 ‘도서 좋아요’ 기능을 구현하고, ‘도서 리뷰’ 기능을 무한 스크롤로 구현하는 웹 애플리케이션 프로젝트를 진행했습니다.
이후 웹 개발자로 더욱 성장하기 위해 고객과 커뮤니케이션 경험이 필요했습니다. 이를 위해 직접 가르치는 수강생과 소통하며 Ride The Wave 개인 프로젝트를 진행했습니다. 배포 후 수강생들의 수업 참석률이 8% 증가하는 효과가 있었습니다.
위 경험을 통해 가장 크게 느꼈던 것은 ‘동료와 함께 하는 힘’ 이었습니다. 혼자만의 노력으로는 한계가 있었지만, 동료들과 함께하며 서로의 아이디어를 공유하고 협력하여 어려움을 극복하는 과정에서 큰 성장을 했습니다. 앞으로도 부족한 것을 찾고 채우며 팀원들과 함께 도전하며 끊임없이 발전하는 개발자가되기 위해 노력할 것입니다.
[소통을 통해 팀이 성장하도록 노력합니다]
스크럼 프로세스로 프로젝트 ‘차다’ 를 진행하며, 정기 회의 및 KPT 회고를 통해 서로 존중하고 이해하며 개선 방법을 함께 논의 및 실행했습니다. 이를 통해 팀은 신뢰를 쌓았고, 나은 방향으로 나아갔습니다.
프로젝트 첫 회의에서 목표에 대한 이야기를 나누며 팀원이 어떤 경험을 원하는지 나누며 ‘기한 내 공모전 제출’이라는 공동의 목표를 세웠습니다. 이후 여러 가지 결정 사항에서 공모전 제출을 우선순위로 빠른 의사소통을 하며 결정 과정에 효율성을 느꼈습니다.
각 스프린트가 종료되고 Keep(좋았던 것), Problem(아쉬웠던 것), Try(시도해 볼 것)에 대해 나눴습니다. 기능 구현에 관한 부분이 아닌, 팀이 더 잘 운영되기 위한 대화였습니다. Try 를 통해, 주 5일 오프라인이였던 근무 시간을 3일 오프라인 & 2일 온라인으로 바꾸기도 하고, 오랜 시간 앉아있어서 허리가 아프다는 의견이 있어서 산책 시간을 만들기도 했습니다.
사소해보이지만 회고를 하지 않았다면 서로 힘든 부분을 알지 못하여 팀에 문제가 생겼겠지만, 정기적인 소통으로 의견을 조율하며 팀의 긍정적인 에너지를 유지하며 공동의 목표를 달성할 수 있었습니다.