airbnb에서 사용하는 프론트엔드 기술의 역사

어떠한 질문도 멍청한 질문은 없다. 개발자로서도 굉장히 중요한 자세이다.

1. 프론트엔드 기술의 기원

• HTML의 문서기반의 정보공유에서 시작
• 약 50년정도 밖에 되지 않음

• [ 텍스트 저장 → 문서 양식 저장 ]
• 텍스트 저장 형태에서 문서 양식 저장 형태로의 발전
• 그래픽의 발전과 더해, font, bold, h1, h2, .. 등 기반의 문서 양식 발전

• [ 문서 vs 웹문서 ]
• 실제 서류형태의 문서가 아니라 / 빠르고, 동일 형식의 문서를 전달하기 위한 웹문서로 발전
• 인터넷의 등장으로 가능
• 웹문서를 읽어 화면에 출력하기 위해서, [인터넷 브라우저]가 등장
• 인터넷 브라우저에서 보다 쉽게 문서를 읽기 위해서 규격화된 형식의 [XML]의 등장

• [ 정적서버 vs 동적서버 ]
• 하나의 웹서버에 resourse들을 저장하는 정적서버
• 1년 내내 같은 구글 사이트(정적) → 1년 내내 data가 바뀌는 네이버 사이트(동적)

• [모노리틱 아키텍쳐]
• 하나의 웹 서버에 모든 기능(프론트, 백엔드, 데이터베이스)가 들어있는 기존의 구조
• 서비스규모와 범위가 커져 확장될 때, 유연하게 서비스 운영하는 방법
• [기존] 하나의 게이트웨이에서 부하도가 낮은 웹서버에 해당 요청을 몰아주어 해결
• 전형적인 MVC 구조로 설계

• [SSR → SPA]
• SSR
• 매 요청 시마다 Server로 부터 html파일을 받아 렌더링
• 깜빡임 현상과 같은 사용성 문제
• SPA
• js를 통해
• 빈화면(html)을 받고, 이후 data 요청을 통해, 코드만을 내려받아 화면을 구성한다.
• 브라우저 API를 통해 data로 손쉽게 화면을 렌더링할 수 있게 됨
• 화면을 더 쉽게 그리기 위한 프레임워크들의 등장 (JQuery, …)
• SPA에서의 MVC 패턴 도입
• backbone.js

단순히 화면 출력 이외의 전체 애플리케이션의 핵심을 프론트엔드에서 담당하기 시작

• 웹앱의 발전으로 코드복잡성이 증가하는 문제가 발생
→ [ React ]의 등장
• JSX를 통해, 복잡한 브라우저 API를 고려하지 않고, html을 다루듯이 사용가능



 
• [ 프론트엔드에서의 API 연동과정 ]
• REST 서비스가 자리 잡으면서, API 호출 함수의 형식이 자리잡음
• CRUD 연동 과정을 각각의 함수로 맵핑
• axios.get(…), axios.post(…)
• 같은 규약을 통해 프로젝트들간의 생산성이 향상되고, 개발자들간의 업무효율이 증가됨
 

• [ 상태관리 라이브러리 ]
• 비동기 처리가 어려운 점
• 처리 코드가 어렵기보다는, 여러 곳에서 발생하는 비동기 요청에 대해 끝나는 시점을 확정할 수 없기 때문
• Redux를 통해 비동기 처리를 감시하고, 제한하여 동기적 형식으로 처리
• isLoading 등을 통해
• Redux를 사용한 API 요청 데이터 관리
• 미들웨어: 비동기처리(redux-thunk, redux-pack)
• Devtools: 강력한 디버깅 기능
 
• 로그인 창 하나를 위해 redux, action, redux-saga, redux-form ,… 등
• 프로젝트 초기 비용의 급격한 증가 → 학습장벽
• 코드를 직관적으로 받아드리고 이해하기 위한 기술의 등장-[ React Query, useQuery Hook ]
 
• [ React Query, useSwr, useQueryHook ]
• hook을 통해 세부구현을 숨기고, 실제 사용시에는 필요한 부분만 꺼내서 사용

문제를 쉽게 이해하고, 팀원과 공유하고, 문제를 해결하기 위한 방법으로의 진화임

 

• [ CSS 관리 ]
• 전처리기를 이용한 CSS [SCSS]
• js를 통한 [ css-in-js ] - styled-component, emotion
• css의 classnames들이 굉장히 길 때, js가 배포될 때 해시화를 통해 css 자체의 용량크기를 많이 줄일 수 있다는 큰 장점을 가지고 있다.
• 주의 서버 사이드 렌더링 지원을 하는지 여부를 반드시 체크해야함
• js로 css를 생성하기 때문에, 최초의 js 실행이 반드시 필요한 기술이기 때문에
 

• [ 애니메이션 처리 ]
• css를 이용한 처리 방법
• 기본적으로 css transition을 통한 처리 방법이 선호 됨
• css 호환성이 크고, 더 빠르게 처리되기 때문
• js를 이용한 처리 방법
• 복잡한 애니메이션 처리를 위해 사용
• lottie.js 와 같이 adobe에서 작동하는 애니메이션을 export, import 방식으로 사용
 

• [ 패키징 ]
• 프론트엔드에서 화면을 만드는 것 뿐만 아니라, 패키징을 최적화 하는 업무도 담당하고 있음
 

• [ 다시 돌아온 SSR ]
• 이유 데이터 페칭을 통해, 화면이 채워질 때 까지 사용자가 화면을 볼 수 없는 근본적인 SPA 문제가 존재함

2. Airbnb의 분산형 구조

• [ 모노리틱 아키텍쳐의 한계 ⇒ 서비스 기반 아키텍쳐 - SOA ]
• 전부 같은 웹서버를 사용하다 보니, 서비스 성격에 맞는 코드 수정이 어려움을 가지게 됨
• 숙박서비스, 유저서비스, 결제서비스 들이 각각 독립적으로 서버를 가지게 됨

• 여러 서비스들로 분산화 되면서, 코드의 복잡도가 올라가게 됨
• 각 서비스마다 담당 개발자가 다르고, 각 서비스들의 접점에서 conflict 가능성 증가
• 따라서 Strongly typed data Object 방식, Thrift IDL (Interface Definition Language) 등으로 서로 다른 언어를 사용하더라도, 스키마를 지정해두었기 때문에, 같은 언어로 변환하여 적용할 수 있도록 함
• 스키마를 공통적으로 지정하고, 해당 스키마를 반영하도록 각각의 서버에서 코드를 구현함

• 이러한 과정에서 GraphQL 이 등장
• 서비스 기반 아키텍쳐 - SOA , Thrift IDL 관점에서 graphQl 등이 등장하게 됨
• 기존 Rest 방식으로는 서로 다른 서버의 3번의 요청을 각각 해야함
• graphQl을 한 번의 요청으로 필요한 데이터를 받아오게 됨 (스키마 단계에서 요청하는 것과 유사)

• [ Server-driven UI ]
문제들





해결 : meta 데이터를 통해, section 단위로 데이터를 묶어놓아 재배치 편의성을 높임
keyword: 섹션컴포넌트, 원소스 멀티 유즈
 

앞으로의 웹 기술?

3. Q&A

• 에어비엔비에서는 airbnb 린트 룰을 전부 지키나요?
• 90% 이상 기본적으로 호환되는 prettier 설정을 공유하여 사용하고 있고,
• 나머지 10%의 경우는 huskey등을 통해 merge 전에 반드시 처리한다.
• lint룰에 더해 access 룰도 정해져 있어서 이것도 지켜야 merge 할 수 있다
• font 명도 몇 이상 등등..
• 단, 담당 팀이 있기 때문에 이러한 부분 통과를 적극적으로 도와주고 있다.
 

• 취업을 위한 공부는 어떻게 할까요?
• 각 단계에 맞는 공부를 해야한다.
• 평소에 프로젝트나 학습을 쌓아두어야하고, 어느정도 쌓였다고 판단할 때, 코딩테스트나 면접 공부 단계로 넘어가 지원과 함께 준비한다.
 

• 해외와 국내 개발 문화의 차이는?
• 평가 방식의 차이에서 오는 차이
• 한국은 위에서 아래를 평가
• 기술명세서가 상세하게 나오고, 이에 맞춰 개발
• 미국은 동료가 동료를 평가
• 러프한 기술명세서를 가지고, 개발 방식을 토의하며 개발
 

• 처음 학습 방법에 대해 말씀해 주실 때 모든 걸 다 할 수 없으니 하나씩 배워나간다! 라고 하셨는데 호준님은 학습하실 때 공식 문서로 시작하시는지, 직접 작은 단위 프로젝트에 적용해나가시는지 궁금합니다!
• 트렌드 위주로 공부한다.
• 즉 트렌드를 즐긴다!
• Twitter, Youtube 등을 통해 hot한 트렌드를 자연스럽게 익힌다.

• 곧 저희가 첫 팀 프로젝트가 진행되는데 현재 배운 것을 기반으로 프로젝트를 진행할지, 혹은 현재 공부하고 있는 것들을 적용하는 프로젝트로 진행할지 고민입니다! 호준님의 개인적인 추천을 듣고 싶습니다 ☺️
• 무조건 현재 잘하는 것을 우선적으로 사용하고, 짧은 프로젝트 기간 이후의 기능 개선이라던가 추가 기능에 있어 새로운 기술을 도입하는 방향을 추천

• 개발자의 목표, 개발할 때 어떤 점이 제일 재밌는지
• 새로운 기술을 통해, 기존의 일을 개선했을 때 너무 재밌다.
• 배운다고 생각하면 개발자의 삶이 너무 힘들다.
• 게임처럼, 강한 스킬을 배워서 몬스터들을 잡는다고 생각하면 즐거운 것

• 저도 언젠가는 세션, 강의등을 통해 지식과 경험의 나눔을 하고 싶은데, 호준님은 언제 어떤마음으로 이런 공유 활동들을 시작하셨는지 궁금합니다. (내질문 ㅎㅎ)
• 우연한 계기로 프론트엔드 기술에 대해 발표할 기회
• 준비하면서 많이 공부도 하게 되었고, 1번의 발표 이후에 여러 곳에서 강의요청이 오게되었다.
• 강의요청과 함께 책제안.. 자연스럽게 잡았지만 많이 힘들었다.
 

• 신입에게 가장 필요한 능력은?
• 질문을 적극적으로 하는 능력
• 자기가 못하는 것을 드러내고 도움을 요청하는 능력