Portfolio

Contact

Email | kocon135@gmail.com

Project | https://bit.ly/outwater-projects

Github | https://github.com/Outwater

Blog | https://bit.ly/outwater-blog

🧑🏽‍💻 소개

문제를 발견하고 해결할 수 있는 개발자 서인수입니다.

나, 그리고 다른 사람들이 겪고 있는 문제를 발견하고 해결하는 것에 즐거움을 느끼고 진심을 다 합니다.

개발 이전 ‘저렴하다는 이유로 유해한 목재로 만든 가구’가 유행하는 것에 문제를 느끼고, 원목 가구를 직접 만들고 유통과정을 줄여 실제 판매까지 해본 경험이 있습니다.

‘대학생을 위한 새로운 네트워킹’에 대한 고민으로 ‘홍개팅’ 서비스를 기획/개발하여 1500명의 학생을 대상으로 운영한 경험이 있습니다.

작은 프로젝트라도 ‘실제 존재하는 문제를 해결할 수 있는가’를 고민하고 집중합니다.

동료를 존중하며 같이 성장하는 것을 지향합니다.

내가 속한 팀이 성과를 내고 앞으로 나아갈 때 즐거움을 느끼고 동기를 얻습니다.

중요도가 낮지만 필요한 일을 찾아 수행하고, 그레이 존에 있는 업무를 인지하고 소통합니다.

서로 간 배울 점이 많다는 것을 이해하며, 동료에게 긍정적 영향력을 줄 수 있도록 노력합니다.

문제 해결이라는 공통 목표 달성을 위한 이야기들, 치열한 토론의 과정 자체를 즐기고 있습니다.

🛠 스택

[React]

React 공식문서를 읽고 정리하며 기술의 등장 배경과 핵심을 이해했습니다.

React의 라이프 사이클과 재조정(Reconciliation) 과정을 이해하고 있습니다.

요구사항에 따라 필요한 컴포넌트 및 사용자 정의 Hook을 개발할 수 있습니다.

Context API와 Hooks를 통한 상태 관리를 할 수 있으며, 필요 시 Redux 및 Recoil 라이브러리를 사용할 수 있습니다.

[Javascript]

ES6+ 문법(const/let, 템플릿 리터럴, 비구조화 등)을 이해하고 적극적으로 사용합니다.

다른 라이브러리 없이 VaniilaJS만을 사용하여 동작하는 App을 구현할 수 있습니다.

JS의 핵심 개념(동작원리 및 실행컨텍스트)을 이해하고 있습니다.

JS를 클린하게 사용하는 케이스를 공부하고, 적용하려고 시도하고 있습니다.

[Typescript]

에러의 사전 방지와 개발 생산성 향상을 위해 Typescript를 적극적으로 사용합니다.

[Next.js]

Next.js에서 사용할 수 있는 4가지 data-fetching 방법(CSR, SSG, SSR, ISR)의 개념을 이해하고 차이를 설명할 수 있습니다.

[기타]

코딩 컨벤션의 필요와 효과를 이해하고 팀룰, prettier, husky 를 통해 적극적으로 사용합니다.

Slack, Discord, Gmail 등 업무용 메신저를 통한 비동기 커뮤니케이션에 능숙합니다.

Notion을 통해 진행 중인 사항을 항상 문서화하고, 이를 통해 협업 시 소통 비용을 낮추려고 노력합니다.

💻 역량

역량1. 역할과 책임(관심사)이 분리된 컴포넌트/Hook 개발 역량

[동양 식자재 마트 프로젝트] Headless 형태의 DataTable 컴포넌트 구현 (👉🏻 구현과정 및 코드)

상태 관리와 스타일 사용의 분리를 통한 관심사 분리에 초점
DX 측면에서의 인터페이스 고민

[CheQuiz 프로젝트] useModal Hook 구현(👉🏻 구현과정 및 코드)

파편화되어 있는 모달 관리 코드로 인해 중복 코드가 발생하고 관련 코드의 응집도가 떨어지는 문제를 ContextAPI를 통한 중앙 관리를 통해 해결

역량2. 리팩토링을 통한 렌더링 성능 개선 역량

[Naver 인턴] Lighthouse 기반 Performance 점수 평균 40점에서 90점으로 개선

webpack-bundle-analyzer로 분석 후 bundle 사이즈(3.98MB → 1.62MB) 2배 이상 감소
렌더링 전 차트의 크기를 알 수 없어 CLS 지표가 떨어지는 문제 개선

차트의 너비와 비율을 통해 높이를 사전에 계산하여 로딩 전후의 레이아웃 변화 최소화

React.memo, useMemo, useCallback, debounce 적용을 통한 렌더링 최적화 시도

역량3. 문제를 발견/정의하고 해결을 시도하는 역량

[홍개팅 프로젝트] 같은 대학 소개팅 서비스

문제 같은 학교 안에서의 새로운 관계 맺음의 어려움

해결 1:1 소개팅 매칭 서비스 및 셀프 소개팅 플랫폼을 시즌제로 운영

결과 총 3번의 시즌 동안 1500명의 학생을 대상으로 4000+개의 채팅방 개설

[Naver 인턴] 다차원 시각화 리포트 페이지 기획 및 개발

문제 기존 표 형식의 광고 성과 리포트의 떨어지는 직관성 및 기능적인 제약에 대한 문제

해결 Widget 기반의 시각화된 그래프로 직관성과 편리성을 확보하고, 역방향 분석이 가능하도록 drilldown 필터링 기능 개발

결과 기획팀과 미팅을 통해 실제 적용 가능 케이스에 대한 피드백

실제 데이터를 기반으로 개선 액션을 이끌어낼 수 있는 3가지 useCase 제시

[CheQuiz] 퀴즈를 통한 개발 지식 측정 서비스

문제 개발 공부를 하는 사람의 수는 급증했지만, 개발 지식을 정량화할 수 있는 서비스는 부재함

해결 주제별 퀴즈 및 랜덤 퀴즈 기능을 통해 결과를 수치화하여 제공

결과 부트캠프 내 3개의 스터디에서 사용

예습 및 복습을 통한 스터디 연계 도구로의 가능성 제시

🌳 경험

프론트엔드 데브코스 2기

2022.03 - 2022.08

Naver GFA팀 인턴

2021.08 - 2021.10

코드스테이츠 26기 (Code States)

2020.12 - 2021.05

홍익대학교

2016.03 - 2021.08

프로그래머스에서 진행하는 Javascript 중심 교육 과정

‘말하면서 배워요’ 학습 동아리 운영 (👉🏻 스터디 기록)

스터디 리더로서 모든 활동 기록 및 주기적 KPT 회고 진행

Vanilla JS 과제 중심의 실전 학습
백엔드 팀과 협업 프로젝트 진행

광고 지표 분석을 위한 다차원 시각화 페이지 기획/개발

기획팀과 개발팀 대상으로 2번의 프로젝트 발표
광고 지표 분석을 위한 overview/widget 차트 개발
최적화를 위한 리팩토링 시도

CleanCode 도서를 읽고 관련 내용적용
debounce /React.memo를 통한 렌더링 최적화
bundle 사이즈 최적화

Advanced software engineering, Immersive program

Javascript 기반으로 풀스택 과정 학습
프론트엔드 React 중심, 백엔드는 Node.js 중심 학습
20주 동안 매일 알고리즘 문제 풀이 및 강도 높은 과제 수행
페어 프로그래밍과 코드 리뷰 경험
협업 프로젝트 2회 진행

교육학 전공 / 산업공학과 복수전공

코딩 관련 교육 활동 진행 (LG CNS 코딩지니어스 멘토)
창업 동아리 활동 (👉🏻 홍개팅: 같은 대학 소개팅 서비스)

프라이머 배치 16기 킥오프 선정
홍익 비즈 해커톤 1등

🗣 동료 피드백

[👉🏻 더 많은 페어리뷰 보기]

💬

From. 성기동 멘토님

알고리즘이나, 개발 과제등을 수행하는 모습을 보며 기대되는 팀원입니다.

여기서 그치지 않고 개발에 대한 열정도 가득하다는 것을 스터디 개최, 커피챗 시간 등을 통해서 느낄 수 있어서 KDT 과정이 끝나고 가장 기대되는 것 같습니다.

지금처럼만 하신다면 어디서든 훌륭한 개발자가 되실 수 있을 것 같다는 생각이 듭니다.

💬

-인수님을 페어로 뵙고 페어 프로그래밍의 선한 영향력과 순기능을 느꼈습니다. -큰 그림에 대한 이해 후 바로 코드를 작성하지 않고 하나 하나씩 수도 코드를 작성하며 보다 디테일하게 문제에 대한 답을 찾는 과정은 새로운 혜안을 주셨습니다. From. 코드스테이츠 26기 페어

💬

- 같이 하는 페어가 잘 이해하지 못하고 버벅이면 답답하기 마련인데, 전혀 그런 내색없이 침착하게 바른길로 갈수 있게 인도해주셨습니다. - 나무를 보기전에 숲을 볼줄 아는 넓은 시야와, 어떤점을 파악해야 문제를 해결할수 있는지 알아보는 좋은 눈을 가졌습니다. - 어려운 문제건 쉬운 문제건 페어와 '함께' 풀기위해 노력했습니다. From. 코드스테이츠 26기 페어

문제 해결에 즐거움을 느끼는 개발자