인프랩 프론트엔드 개발자 소개 (React, VaniilaJS)

인프랩

2년 ago

안녕하세요?
인프런과 랠릿 서비스를 운영하고 있는 인프랩의 CTO 향로입니다.

카카오 이모티콘

올해초 인프랩 팀은 IT인들을 위한 채용 서비스인 랠릿을 오픈했는데요.
신규 서비스의 런칭과 함께 기존 서비스인 인프런의 2~3배 성장, 100만 회원 달성 등 담당하는 서비스들의 폭발적인 성장을 경험하고 있습니다. 그리고 개발팀 역시 여러 도전적인 과제들을 만나고 있습니다.

이제 본격적으로 서비스를 확장하고 안정성을 높이기 위해 적극적으로 개발자 채용을 시작하게 되었습니다.

지원하고자하는 회사의 프론트엔드 개발자 채용 공고를 본다면 일반적으로 다음과 같은 궁금증이 생깁니다.

– 코드리뷰는 하고 있는걸까? 서비스 개발하기 바빠서 각개전투 하는건 아닐까?
– 테스트 코드를 작성하고 있을까?
– 리팩토링 / 생산성 향상 등에 관심이 있을까?
– 성장을 위한 피드백 문화가 있을까?
– 구성원의 성장을 위해 회사에서는 어떤 지원을 해줄까?

개발자의 성장에 있어 가장 중요한건 개인의 노력인데요.
그렇다면 회사에서 해줄 수 있는 것은 무엇일까요?
제 생각에는 그 사람이 성장할 수 있는 좋은 재료와 환경을 제공해주는 것이 아닐까 싶습니다.

지금부터는 인프런의 프론트엔드 파트를 소개드리려고 합니다.
이런 환경이라면 좋은 개발자로 성장할 수 있지 않을까 생각해보는 시간이 되셨으면 합니다.

직군 소개

인프런의 프론트엔드 개발자는 다양한 기기/브라우저에 맞춰 사용자를 위한 웹 / 앱 (React Native) 개발을 담당합니다.

출처: https://www.instagram.com/p/CQXLFvODOfF/

VanillaJS (ES6) 를 기반으로 인프런의 웹 프론트를 개발하고 배포합니다.
React Native를 기반으로 앱 서비스를 개발하고 배포합니다.
Server Rendering과 Client Rendering을 위한 마크업을 개발합니다.
사용자를 위한 UI/UX 개선을 고민하고 적용합니다.
여러 프론트엔드 개발자들이 협업하기 좋은 코드로 지속적으로 리팩토링합니다.
시스템 전반의 성능 최적화를 위해 API 호출 최소화 / 렌더링 최적화 / 번들링 최적화 등을 상시로 진행합니다.
Jeniffer Front Monitoring APM을 통해 사용자 브라우저에서 발생하는 에러에 대해서 추적하고 해결합니다.

기술 스택

현재 프론트엔드 기술 스택은 다음과 같습니다.

VanillaJS
FxJS / FxDOM
- Fx 라이브러리를 이용한 함수형 프로그래밍으로 대부분의 코드가 구성되어있습니다.
Mantine, emotion, SCSS
Webpack, Vite
React, React Native, NextJs
Yarn, Turborepo
CircleCI, Jenkins
Datadog for Monitoring
Git / GitHub

조금은 생소한 라이브러리들도 있으실텐데요.

인프런 서비스는 초기에 빠르게 성장하기 위해 가장 익숙한 방법으로 열심히 달려왔습니다.

원피스 – 고잉 메리 호

시간이 지나 조금 더 규모가 있는 서비스로 확장하려다보니 다음과 같은 고민을 하게 되었습니다.

신규 입사자의 러닝커브
타입안정성
개발자 시장 Pool
Third Party 라이브러리 호환성
규모가 있는 커뮤니티

그래서 다음 항해(?)를 위해 차기 애플리케이션 스택 전환을 진행중입니다.

원피스 – 사우전드 써니 호

TypeScript
React & Next.js
- 이미 일부는 React가 적용되어있습니다.
Lerna & yarn workspace
- Mono Repo & Multi Package (Multi Module) 을 도입하려고 합니다.
Jest & Cypress
Docker Compose를 통한 개발환경

기존의 기술 스택을 신규 기술스택으로 전환하는 과정을 제대로 경험해보실 수 있습니다. 현재도 구성원분들과 함께 신규 기술 스택에 대한 스터디를 진행하고 있습니다.

자격요건

JavaScript 에 대한 이해가 있으신 분
HTML, CSS 등 마크업에 대한 충분한 이해도가 있으신 분
React, Vue, Angular 등 프론트엔드 라이브러리 또는 프레임워크에 대한 이해가 있으신 분
반응형 웹 개발에 대한 이해가 있으신분
HTTP 통신에 대해 기본적인 이해가 있으신 분
Git과 Github에 대한 기본적인 사용법을 알고 있고, Git Flow를 이해하고 계신 분

우대조건

우대 조건은 아래 조건을 모두 할 수 있는 분을 의미하진 않습니다.

이 중 일부라도 해당하는 분이시면 즐거운 마음으로 관련 대화를 나눠볼 수 있을것 같습니다.

아래 관점으로 프론트엔드 개발파트가 지향하고 있다고 봐주시면 좋을것 같습니다.

웹표준 또는 웹접근성 등 퍼블리싱과 관련된 이해 또는 경험이 있으신 분
Webpack이나 Rollup 같은 번들러를 직접 구성하거나 사용하면서 생긴 문제를 해결해본 경험이 있으신 분
Vanilla JavaScript를 통해 웹 페이지를 만들어본 경험이 있으신 분
브라우저 별 다양한 트러블 슈팅 경험이 있으신 분
React Native 혹은 Flutter 등 크로스플랫폼 애플리케이션 개발 경험이 있으신 분
정적 타입 언어를 사용했거나, TypeScript에 대한 깊은 이해가 있으신 분
Jest, Mocha 등 테스트 프레임워크를 통해 단위 테스트 코드를 작성해오신 분
UI 테스트에 대한 경험이 있으신 분
OOP 에 대한 기본적인 이해와 객체/상태/메세지 등에 대해 고려하면서 개발을 해오신 분
함수형에 대한 기본적인 이해가 있으시거나 아래 함수형 강좌를 수강해보신 분
- 함수형 프로그래밍과 JavaScript ES6+
- 함수형 프로그래밍과 JavaScript ES6+ 응용편
본인이 만든 애플리케이션을 실제 서비스, 운영까지 해보신 분
웹 서비스 성능 개선을 진행해본 경험 혹은 노하우가 있으신 분
서버 개발자와 협업한 경험이 있으며, 서버 업무에 대한 최소한의 이해도가 있으신 분
(주니어분들이라면) 위 언급되어있는 개념들을 몰라도 빠르게 내 것으로 만들수 있는 나만의 학습법을 가지고 계신 분
(경력무관) 운영/기획파트 등 개발자가 아닌 분들께 상황을 설명할 때 그들의 입장에서/그들의 언어로 이야기하는게 당연하신 분
(경력무관) 대화보다 하나의 문서를 작성하고 공유하길 좋아하시는 분

업무 방식

스타트업 특유의 빠른 제품 릴리즈와 서비스 안정성 이라는 2마리 토끼를 최소한의 인원으로 잡기 위해 적절히 업무 균형을 유지하고 있습니다.

Confluence cloud / Jira를 도입하여 문서화를 적극적으로 진행하고 있습니다.
- 설치형을 사용하지 않고, Cloud 버전을 사용해 관리 리소스를 최소화 하고 있습니다.
- 프론트엔드 파트의 개발규칙을 문서화해, 신규 입사자분들의 심리적 안정감과 일관된 코드스타일을 유지하려고 노력하고 있습니다.

1주 단위의 스프린트로 업무 공유와 회고를 주기적으로 진행합니다.
- 스프린트 방식 자체에 대해서도 주기적으로 회고를 진행합니다.
- 어떤 방식이 가장 효율적이고 성과를 낼 수 있을지 정기적으로 고민하고 논의합니다.

JIRA로 각자 티켓을 생성해서 업무를 진행합니다.
Git Flow를 변형한 저희만의 Git Flow에 맞춰 Branch 를 생성하고 Rebase / Merge 등을 진행합니다.
작업된 코드는 PR을 요청하고 코드리뷰를 진행하여 반영하고 있습니다.

개발된 코드는 테스트서버에 배포를 하여 QA를 진행합니다.
모든 배포는 CircleCI를 통해 dev / master 브랜치 push 시에 자동으로 배포가 진행됩니다.
APM을 통해 사용자 브라우저에서 발생하는 에러를 추적하고 해결합니다.

상시로 시스템 부하를 낮추기 위해, 로컬 캐시를 통한 백엔드 API 호출 최소화 / 브라우저 렌더링 최적화 / 번들링 최적화 등을 진행합니다.

6개월에 한번씩 제품 개발 파트 전체 회고를 진행합니다.
- 진행했던 과제에 대한 소개와 아쉬운점/개선점등을 이야기합니다.
- 다음 반기에 진행할 과제들을 정리합니다.
- 이를 통해 제품 릴리즈에 몰두하느라 방향성을 잃는 일이 없도록 중심을 잡고 있습니다.

프론트엔드 개발자로서 얻을 수 있는 것들

Java / Ruby / Python / NodeJS / Go 등 다양한 애플리케이션 환경이 있는 백엔드와 달리 프론트엔드의 경우에는 JS (TS) 로 언어가 정해져있습니다.

그러다보니 모든 회사의 프론트엔드 개발자분들은 비슷한 기술 스택이라서 언어나 프레임워크로 매력을 어필하기가 어려운데요.

이 글을 보시는 분들이 수많은 시리즈 A이상의 스타트업들과 대기업들 사이에서 인프런 프론트엔드 개발자로 합류해야할 이유는 무엇일까 곰곰히 생각해보았습니다.

바닐라 자바스크립트를 활용한 서비스 제작 경험과 모던한 스택의 서비스 양쪽 모두를 경험해 볼 수 있습니다.
많은 사용자에게 노출되고, 개발자 사용자에게 직접적으로 다양한 피드백을 받을 수 있습니다.
- (개발자들에게는) 설명하지 않아도 되는 서비스입니다
많은 도전 과제가 예정되어 있습니다.
- VanillaJS에서 React & TS 로의 전환
- 순수 FP → OOP & FP 가 조합된 형태
- React Native 고도화
- 자동화된 테스트 / 테스트 코드 고도화
- 인프런 외 신규로 런칭될 서비스
업무 분배 로테이션을 주기적으로 하여 같은 일만 하지 않도록 배려합니다.
- 특정 서비스 담당자가 지정된 채로 매번 같은 일만 하는 일이 없도록, 모든 파트원이 로테이션하며 업무를 분배하고 있습니다.
프론트엔드 파트내에서 정기적 모임을 갖고 있습니다.
- 인클루시브 디자인 패턴 / 타입스크립트 프로그래밍 등 프론트엔드 파트를 위한 스터디등을 진행합니다.

다양한 레거시 개편 경험을 얻을 수 있습니다.
- 이미 안정화된 서비스에서는 개편을 경험하기 쉽지 않은데요.
- 더이상 이 코드와 구조로는 버틸수 없다는 판단하에 레거시를 개편하는 것은 성장하는 스타트업에서만 경험해볼 수 있는 희귀한 경험입니다.
기술 파트 전체가 함께 하는 스터디와 공부문화가 있습니다.
- 현재는 리팩토링2판을 통해 레거시 코드를 효과적으로 개선하는 내용을 매 주마다 공유하고 토론하고 있습니다.
- 팀 전체가 학습하고 성장하는 문화가 시작되고 있어, 같이 시작해볼 수 있습니다.

리팩토링 2판으로 하는 스터디

마무리

저는 종종 KBL이나 생활 농구를 비롯한 농구 소식들을 보곤 하는데요.

꽤 오래전에 작성된 기사이지만, 저희가 중요하게 생각하는 지점을 그대로 표현하고 있어서 공유 드립니다.

팀워크 vs 스타플레이어 무엇이 게임을 승리하게 만드는가

손흥민 선수의 프리미어리그 대활약에 많은 국민들이 박수를 보냈다. 허나 손흥민 선수의 국가대표팀 활약은 미비한 수준이다. 국내 선수 중 손흥민 선수가 프리미어리그에서 가장 좋은 활약을 보이고 있으니 그에게 몰빵 축구를 하면 모든 게 해결될까? 이에 대한 답은 모두가 안다. 절대 그렇지 않다는 것을. 2옵션도 봐야 하고 3옵션 4옵션까지도 염두에 둬야 한다. 그 옵션들을 살릴 선수도 필요하다. 우리가 뛰고 있는 생활체육 농구도 마찬가지다. 화끈한 공격력이 있는 선수 출신 스타플레이어 한 명이 코트를 밟는다고 모든 경기를 이겨주진 못한다. 그를 도울 제2옵션 3옵션을 팀에서 연구하고 준비를 해야 한다.

저는 이 지점이 저희팀이 추구하는 방향과 참 닮았다고 생각했는데요.

슈퍼스타 개인의 퍼포먼스에 기대는 방식은 한계가 너무 명확합니다.

그 분이 퇴사만 해도 회사가 휘청거리기도 하니 더더욱 위험합니다.

그래서 저희는 이미 잘하는 사람이 와서 그 사람이 하자는대로 따라가는게 아닌, 합류한 사람들끼리 같이 성장하고자 하는 문화를 가지고 있습니다.

이런 문화 덕분에 바쁘게 비지니스 요구사항을 진행하는 와중에도 지속적으로 컨벤션 / 구조 / 스터디 등등을 공유하고 정리할 수 있었습니다.

여담이지만 부산 중앙고의 사례를 모티브로 한 웹툰 가비지타임 참 재밌습니다!

스타보다는 팀워크라는 문화 외에도 저희는 레거시를 존중하는 문화를 가지고 있습니다.

레거시를 좋아하는 개발자분들은 많지 않을텐데요.

하지만 어떤 프로젝트라 하더라도 오픈하는 순간 레거시가 됩니다.

그래서 그 당시엔 어쩔 수 없는 상황이 있었음을 모두가 인지하고 있고,

코드의 퀄리티에 대한 불평 보다는,

현재 이 코드에서 지금 당장 할 수 있는 최선의 리팩토링은 무엇일까를 먼저 고민합니다.

아마 합류하신다면 많은 레거시들을 점진적으로 개선하는 방법에 대해서 정말 많은 부분을 배울 수 있을것이라 생각합니다.

그동안 인프런은 창립 이후 적은 인원으로 시작해서 해마다 꾸준하면서도 큰 폭으로 성장해왔습니다.

이 과정에서 구성원 개개인의 역량도 성장하고 새로운 팀원들도 다수 합류하고 있습니다.

하지만 그동안 양적인 성장에 치중하여 소홀히 했던 부분들이 조금씩 눈에 띄기 시작하며 아쉬움이 남았습니다.

앞으로는 양적인 성장과 함께 질적인 성장도 놓치지 않고 사용자들에게 다양한 기능과 훌륭한 사용자 경험을 제공하는 서비스를 만들어보려고 합니다. 인프런 프론트엔드 파트에 오셔서 즐겁게 일하고 함께 많은 걸 이루면 좋겠습니다!

긴 글 끝까지 읽어주셔서 감사합니다.

면접장에서 뵙겠습니다.

여기까지 프론트엔드 개발 파트가 마음에 드셨다면,
아래 지원하기 버튼을 통해 지원해주세요 😉

인프랩 채용 알아보기