프론트엔드 개발자 조병규입니다. 👋

✔ 이름: 조병규
✔ 생년: 1991
✔ 직군: Web-Frontend
✔ 경력: 2018 ~ 현재
✔ 학력: 대졸 (한국교통대학교, 기계공학)
✔ 병역: 육군 만기제대(11.09 ~ 13.06)
✔ 거주지: 서울시 동작구
✔ E-mail: bgcho.dev@gmail.com

⚙️ Skill
💻 Front: React(+Redux), Typescript, ES6+, Scss
⌨ Back: Node.js, Mysql, Java
🔗 Etc: Git, Webpack, Babel, Jenkin

비지니스를 위한 개발과 관리비용을 최소화할 수 있는 제품을 기업에 제공하는 것을 핵심가치로 생각합니다.
투명한 커뮤니케이션을 지향하며 더 나은 개발문화를 위해 고민하고 행동합니다.

📌 목차

• Career
• Projects
• Skill
• Core Value
  • 1.프론트엔드는 어떤 역할이라 생각하는지?
  • 2.업무에서 중요하게 생각하는 것이 있다면?
  • 3.기술 선정에서 중요하게 생각하는 것은?
  • 4.코드리뷰시 중요하게 생각하는 가치는?
  • 5.개발에서 중요하게 여기는 가치가 있다면?
  • 6.팀 플레이에서 중요하게 생각하는 것이 있다면?
  • 7.개발 문화 개선을 위해 행동한 것이 있다면?
  • 8.올해(2022년) 어떤 생각을 하고 있는지?

Career

스페이스워크

• 소개: 인공지능 기반으로 토지가치를 분석해주는 건축설계 자동화 서비스를 제공하는 프롭테크 기업
• 기간: 21.04~현재
• 작업:
  1. 랜드북 3.0
  2. 웹 결제 (아임포트)
  3. 인앱결제 (revenueCat)

하이어엑스

• 소개: 비대면 업무관리 서비스 기업
• 기간: 20.07~21.03
• 작업:
  1. 제품 개발 및 유지보수 (CEO 웹)
  2. 메인 홈페이지 리뉴얼(메인 홈페이지)

인스웨이브시스템즈

• 소개: JavaScript 기반의 web framework, Websquare 솔루션 기업.
• 기간: 18.03~20.05
• 작업:
  1. 마이그레이션 솔루션 기능개선 및 관리(w-craft)
  2. 워크플로우 솔루션 기능개선 및 관리.(x-Touch)
  3. 신규 구축 프로젝트 투입.

---

Projects

Landbook

• 소개: 조건에 맞는 토지를 찾아주는 매물 서비스와 사업성을 예측하는 분석 서비스
• 링크: https://www.landbook.net
• 기간: 21.04~현재
• 사용기술: React, Typescript, redux, redux-toolkit, styled-component, react-query, Jest
• 상세보기: 🔍보기
• 작업내용:
  • 랜드북 3.0
  • 컴포넌트 개발(Tooltip, Tab, BottomSheet, Swiper)
  • 서비스 기능개발
    • 웹 결제(naver-pay)
    • 인앱결제(IAP) 연동
    • kakao API를 이용한 주소검색
    • 홈 배너

하이어엑스 CEO WEB

• 소개: 비대면 매장관리 서비스
• 링크: https://manager.wkdk.kr
• 기간: 20.07 ~ 21.03
• 사용기술: React, Typescript, Redux, redux-saga, scss, Webpack, Jest, React-testing-library
• 작업 범위: react환경 셋팅, 퍼블리싱, 비지니스 로직 개발
• 상세보기: 🔍보기
• 작업 내용
  • Webpack 번들링 설정
  • Jest, react-testing-library를 이용한 테스트 자동화
  • Payple카드 등록 기능 연동
  • JWT기반 사용자 인증

KB증권 디지털 자산관리 플랫폼

• 소개: workFlow 솔루션의 기술지원 및 안정화
• 기간: 2019.07~2020.01
• 참고: xTouch
• 상세보기: 🔍보기
• 작업내용:
  • 워크플로우 솔루션(xTouch) 커스터마이징 및 기능개선.
  • 상품가입 이어가기
  • 화면 뒤로가기

롯데손해보험 채권앱 어드민 개발

• 소개: 수행사에서 사용하는 template 프로젝트를 기반으로 어드민 개발
• 기간: 2019.05~2019.06
• 사용기술: OracleDB, Spring, Websquare
• 상세보기: 🔍보기
• 작업내용:
  • WRM(WebSquare5 Reference Model, 웹스퀘어 프로젝트 표준 모델)을 기반으로 관리자 프로젝트 개발.
  • 구글OTP를 이용한 인증 처리

마이그레이션 솔루션 플렛폼 추가 개발

• 소개: 소프트베이스 사의 xframe을 인스웨이브의 websquare 파일로 전환하는 로직 구현
• 기간: 2019.03~2019.05
• 사용기술: Node.js, MongoDB, Express, ES6
• 세부내용: 🔍보기
• 작업내용:
  • xFrame 대한 전환룰(컴포넌트, script)을 작성
  • 기존 전환툴에 전환을 위한 Core 로직은 작성된 상황이라 큰 어려움은 없었음.

광주은행 모바일 웹

• 소개: REST API를 이용한 모바일 웹뱅킹 구축.
• 기간: 2018.06~2018.12
• 사용기술: Websquare, javascript, Spring
• 세부내용: 🔍보기
• 뉴스: 광주은행 모바일웹뱅킹 구축
• 참고: 광주은행 모바일웹
• 작업내용
  • 금융상품 3종 (KJB 주거래통장, Y통장, 멀티통화외화예금)
  • 서비스 5종 (이체한도변경, 장기미사용해제, 광주은행 지점찾기, 번호표뽑기, 입출금 알림서비스)
  • Daum map API를 이용한 은행지점 찾기 서비스

---

Skill

Overall

• 가독성 좋은 코드가 유지보수하기 쉬운 코드라고 생각합니다
• 제품 관리비용 최소화를 중요하게 생각합니다.
• 커리어를 위한 개발이 아닌 비지니스 가치를 극대화할 수 있는 개발을 코어 가치로 생각합니다.

Communication

• 동료와 투명한 커뮤니케이션을 중요하게 생각합니다.
• 상대방의 언어로 말하며 디자이너와 기획자와 원활한 커뮤니케이션을 할 수 있도록 노력합니다.
• 기술을 좋아하지만, 생산성과 효용성을 고려하며 맹목적 기술 추종을 경계합니다.

HTML/CSS

• Semantic Web을 지향합니다.
• 반응형 웹을 구현할 수 있습니다.
• 미디어 쿼리를 이용한 멀티 브라우징을 구현할 수 있습니다.
• CSS 프레임워크는 Bootstrap과 Material-UI를 사용해봤습니다.

Javascript

• ES6+ 문법에 익숙합니다.
• prototype기반 OOP를 충분히 이해하고 있습니다.
• 라이브러리없이 DOM을 조작하는데 능숙합니다.
• 비동기 작업을 하는데 익숙합니다. (promise, async await)

Typescript

• 상황에 맞는 정적 타입체크를 유연하게 적용할 수 있습니다.
• Util type과 타입 추론을 통해 불필요한 타입 선언을 최소화합니다.
• 제네릭 타입을 이용한 타입 추론을 적극 활용합니다.

React

• 렌더링과 재사용성을 기준으로 컴포넌트를 분리합니다.
• Hooks를 능숙하게 사용합니다.
• Redux를 이용한 전역 상태관리와 관련 미들웨어 사용에 익숙합니다.
  • (redux-saga, redux-thunk, connected-react-router)
• 컴포넌트 라이프사이클을 이해하고 상황에 맞게 사용할 수 있습니다.
• 상태관리 라이브러리를 이용할 때, 서버 데이터와 클라이언트 데이터를 구분합니다.

Server

• Express에서 REST API를 작성할 수 있습니다.
• JWT 인증을 사용하여 브라우저 쿠키에 저장하고 세션 처리를 할 수 있습니다
• Express를 활용하여 RESTful API를 작성할 수 있습니다.

Tools

• Webpack (+Babel)
• Rollup.js
• Slack
• Notion
• VS Code
• Jira
• Confluence

---

Core value

1.프론트엔드는 어떤 역할이라 생각하는지?

고객에게 물 흐르듯 자연스러운 경험을 제공하며 이탈을 최소화는 것

고객이 제품을 만나는 첫 순간이 프론트엔드입니다.
그렇기 때문에 프론트엔드 개발자에게 가장 중요한 것은 엔드 유저의 경험을 공감하는 것이라 생각합니다.
사용자 관점에서 자연스러운 사고 흐름에 기반한 기능을 제공하는 것과 부드러운 인터렉션을 경험하게 하는 것을 가장 중요하게 생각합니다.

제가 생각하는 프론트 엔드의 역할은 서비스를 이용하는 사용자의 마음에 공감하고 물흐르듯 자연스러운 경험을 제공하는 것입니다.

2.업무에서 중요하게 생각하는 것이 있다면?

• 팀워크를 최우선합니다.

  • 개인의 퍼포먼스보다 중요한 것은 팀 퍼포먼스라 생각합니다.

• 동료의 페인 포인트를 기술과 시스템 개선으로 해결합니다.

  • "PR 가독성이 떨어져요" → PR 템플릿 도입, gif or 동영상 첨부
  • "redux에서 서버 데이터를 처리하기 번거로워요" → reat-query
  • "공통 컴포넌트 여부를 알기 어렵고 사용방법을 이해하기 어려워요" → storybook
  • "실패 케이스와 성공 케이스가 혼재되서 코드가 복잡해요" → Errorboundary

• 동료의 시간을 아껴주는 것을 중요하게 생각합니다.

  • 문서화로 같은 시행착오가 반복되는 것을 막습니다.
  • 빈번하게 반복되는 커뮤니케이션을 템플릿으로 해결합니다 (지라, github pr)
  • util함수처럼 사용빈도가 높은 코드는 단위테스트를 거쳐 배포합니다.

• 간결하고 명확한 커뮤니케이션을 추구합니다.

  • 텍스트 기반 커뮤니케이션시 이미지 첨부
  • 기술이나 코드 변경을 제안할 경우 판단에 참고할 레퍼런스 첨부

• 유지보수를 최소화할 수 있는 코드를 생산합니다.

  • 누구든 유지보수할 수 있는 코드를 목표합니다.
  • 코드에 대한 오너십을 분산시킵니다.

3.기술 선정에서 중요하게 생각하는 것은?

1. 기술을 통해 해결하고자 하는 문제점이 무엇인지?
2. 직접 구현했을 때의 문제점이 있다면?
3. 기획 요구사항을 충족하는지?
4. 커뮤니티가 활성화되어 있는지?
5. 비교 라이브러리와 비교시 어떤 이점이 있는지?
6. 국내 채용시장의 사용자풀이 확보됐는지? (유지보수 관점)

4.코드리뷰시 중요하게 생각하는 가치는?

1. 작성자의 의도를 이해하고 존중하는 것.

2. 리뷰어가 선한 마음으로 더 나은 결과를 위해 리뷰를 했다는 믿음을 갖는 것.

3. 내 생각이 틀렸을 수 있다는 수용의 여지를 남기는 것.

4. 레퍼런스를 통해 객관적 판단 근거를 제공하는 것.

5. 주관적이고 모호한 표현을 지양하며 구체적 개선 포인트, 리스크 요인을 설명하는 것.

   "이 props이 이 컴포넌트에서 어떤 역할을 수행하는지 애매하네요. 이렇게 이름을 바꿔보면 어떨까요?"
   "의존성 배열에 이 요소 때문에 effect함수가 불필요하게 실행될 것 같은데 이렇게 바꿔보면 어떨까요?"

5.개발에서 중요하게 여기는 가치가 있다면?

유지보수하기 쉬운 코드
가독성 좋은 코드
건강한 부채를 가진 코드
오래 생존할 수 있는 코드

제가 가장 중요하게 생각하는 것은 오래 생존할 수 있는 코드를 생산하는 것입니다.
그러기 위한 전제 조건은 기업의 생존입니다. 이런 가치를 중요시하기 때문에 코드 레이어를 벗어나 비지니스 문제를 먼저 고민하고 생존을 위한 기술적 부채를 적절히 수용합니다.
그 다음으로 중요한 것이 유지보수입니다. 유지보수하기 쉬우려면 가독성이 좋아야합니다.
가독성 좋다는 것은 새로운 요구사항에 빠르고 유연하게 대처할 수 있다는 것을 의미합니다.
정리하자면 가독성이 좋은 코드가 변화에 적응하며 시장에서 생존할 수 있는 코드라 생각합니다.

6.팀 플레이에서 중요하게 생각하는 것이 있다면?

함께 일하고 싶은 동료가 되는것

• 말을 독점하지 않는것.
• 동료의 기술적 공감대를 존중하는것.
• 동료의 페인 포인트에 공감하는것.
• 동료의 시간을 아껴줄 방법을 고민하는것.
• 동료와 영감을 주고받는것.

7.개발 문화 개선을 위해 행동한 것이 있다면?

코드 컨벤션 도입

• 코드 스타일을 맞추는 것이 코드의 오너십을 분산시키는 방법이라 생각했습니다.

FrontEnd Weekly 도입

• 매주 주제를 선정해 협업시 문제점이나 새로운 기술 검토, 제품 개선 사항에 대해 논의합니다.
• 최근주제: react-query도입 효과, Errorboundary를 이용한 에러 위임

FE 인터뷰 프로세스 개선

• 모집 인재상 구체화
  • (팀에서 원하는 인재는 어떤 사람인지?)
• 타겟팅한 인재상을 알아보기 위한 인터뷰 질문 개선
  • (현재 프로젝트에서 사용되고 있는 기술, 팀이 원하는 핵심 가치, 문제에대한 접근 방식)
• 인터뷰 리뷰를 통해 팀이 원하는 인재상을 재검토
  • (어떤 가치를 중요하게 생각하고 어떤 부분에서 아쉬움을 느끼는지?)

코드 리뷰 문화 개선

• PR탐색을 위한 라벨 도입
• PR 템플릿 도입으로 동료가 PR을 이해하는 시간 단축
• 이해를 단축시키기위해 gif이미지 첨부

FE 트랜드 공유

• 가독성을 높혀줄 코드 표현방식
• 잠재 이슈를 해결할 수 있는 아티클 공유

8.올해(2022년) 어떤 생각을 하고 있는지?

• 개발자로서 넥스트 레벨로 가기 위해선 뭘 해야하나?
  • 기업에 개발자로서 제공하는 서비스를 개선하기 위해선?
  • 사용자에게 더 나은 경험을 제공하기 위해서 뭘 할 수 있는지?
  • 우리 서비스에서 가장 사용자 경험을 헤치는 부분이 있다면?
• 시장에 나를 세일즈할 수 있는 하나의 키워드가 있다면 그게 무엇인지?(강점)
• 팀 플레이에서 퍼포먼스가 좋은 사람은 어떤 사람인지?
• 비지니스 관점에서 제품을 바라보는 시야를 넓히기 위해선?
  • 기획에 대한 이해, 제안
• 더 의미있는 코드리뷰를 하기 위해선?
  • 어떤 코드가 가독성이 좋은 코드인지?
  • 우리 코드에서 가장 가독성을 떨어트리는 것이 있다면?
• 다음 웹 트렌드는 어떻게 될까?