'남들이 다 쓰니까'라는 이유는 없다! - 프론트엔드 편

김채은·2022년 3월 23일
1
post-thumbnail

🗓️ 2022. 03. 08.

프로미서의 개발을 위해 이전의 프로젝트에서 사용하지 않던 기술을 채택했다. 남들이 다 쓰니까 말고, 내가 이 기술을 왜 채택했는지 알아야 이 기술을 더욱 효율적으로 사용하고, 공부할 수 있을 것이라고 생각한다.

사용 기술 🛠️

Front-end

CategoryStack
LanguageTypescript
Framework(Library)React
CSSStyled Components
  • Typescript

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있어서 버그를 사전에 예방할 수 있다. 또한 미리 타입을 결정하기 때문에 메모리 낭비를 줄일 수 있고 실행 속도가 빠르다.

좋은 코드의 중요한 조건 중 하나는 읽기 좋은 코드를 짜는 것이다. 내가 쓴 코드를 언제나 내가 유지보수 한다는 보장은 없다. 타입스크립트는 어떤 데이터 형식이 넘어오는지 코드를 보고 바로 알 수 있고, 바꾼 코드로 인해 생길 수 있는 side effect를 알 수 있다. 따라서 새로운 담당자가 코드를 마주해도 수월하게 기능 개발과 유지보수를 할 수 있다. 현재 프론트엔드 개발자는 한명이지만, 프로젝트를 실제로 운영하며 확장해갈 계획이 있기 때문에 기술 선택에 있어서 유지보수 측면을 가장 중요하게 고려했다.

  • React

리액트는 자바스크립트 라이브러리의 하나로, 동적인 웹 페이지 개발을 위해 사용된다. 컴포넌트 단위로 코드를 작성하고, 하나의 컴포넌트를 여러 부분에서 사용할 수 있다.

애플리케이션 개발이라는 문제가 주어졌을 때, 이를 한번에 해결할 수는 없다. 페이지, 조직, 컴포넌트 등 단계에 걸쳐 작게 쪼개어 문제를 해결하고 다시 합치는 과정을 반복했을 때 이 거대하고 복잡한 문제를 해결할 수 있게 된다. 거대하고 복잡한 UI를 컴포넌트를 통해 기능별로 캡슐화하면 유지보수 측면에서 유리하게 작용할 수 있다.

또한 리액트는 매우 널리 사용되는 라이브러리이기 때문에 에러가 발생했을 때 도서, 국내외 사이트 등 도움을 얻을 만한 소스가 다양하다는 장점이 있다.

  • Styled Components

스타일 컴포넌트는 CSS가 지정된 HTML 요소를 생성하는 라이브러리이다. 요소의 이름을 사용자가 설정할 수 있기 때문에 다른 사람이 봤을 때도 이 컴포넌트가 어떤 기능을 하는지 한눈에 알 수 있다. 이는 HTML 요소만으로 코드를 구성하는 것보다 유지보수 측면에서 훨씬 유리하게 작용할 수 있다.

또한 스타일 컴포넌트는 상속을 통해 스타일을 재사용할 수 있다. 본격적으로 애플리케이션을 개발하기 전 필요한 컴포넌트를 설계하고 자주 사용될 것으로 예상되는 컴포넌트 스타일을 일반화해 만들어둔다면, 일반화한 컴포넌트를 재사용함으로써 개발 속도가 굉장히 빨라지고 메모리도 절약할 수 있다.

Back-end

CategoryStack
Framework- Spring Boot 2.6.3
Test- JUnit 5
Infra- Nginx 1.14.0
- AWS EC2 18.04.1
- Jenkins 2.305
- Sonarqube 9.0.1
Database- MySql
- 공공데이터

TEAM 우아한 남매들  👨‍👨‍👧‍👦

팀원역할Github
고산하Project Leader / Back End@headF1rst
김채은Project Manager / Front End@chchaeun
이준석Infra / Back End@juy4556
황승환DBA / Back End@xx0hn

profile
배워서 남주는 개발자 김채은입니다 ( •̀ .̫ •́ )✧

0개의 댓글