🥖프론트엔드 깃허브 ‣
| 사용 기술 | 기술 설명 |
|---|---|
| React-Query [FE] | 서버 데이터를 캐싱하고 데이터 패칭 시, 로딩 및 에러처리가 쉽게 가능하고 |
| 별도의 설정없이 즉시 사용이 가능하며, 여러번의 요청이 있을 시 중복을 제거해주는 등의 기능을 가지고 있다. | |
| 장점으로는 get한 데이터가 update될때 자동으로 get을 다시 수행하고, 데이터가 오래되었다고 판단하면 다시 get요청을 하며, 비동기 과정을 선언적으로 관리할 수 있고, 추가적으로 Redux-Thunk를 사용할 시 불필요한 BoilerPlate코드가 반복되는 것에 비해 불필요한 코드가 매우줄기 때문에 React-Query를 선택했다. | |
| Recoil [FE] | 상태 관리 라이브러리로 React의 useState 훅과 비슷하게 동작하여 직관적이면서 |
| 간단한 구조를 가지고 있다. 대규모 상태를 관리해야하는 프로젝트라면 redux를 사용하는 것이 적합하다는 생각이 들지만 현재 프로젝트 규모에서는 대규모 데이터를 다루는 것도 아니고, Redux에 비해 상대적으로 적은 코드를 사용하는 recoil을 선택했다. | |
| Styled-Components [FE] | CSS를 컴포넌트 단위로 쪼갤수 있어 사용 빈도가 높은 CSS를 재사용할 수 있고, |
| CSS SCSS와 달리 전역적인 관리를 하지 않아도 되기 때문에 유지 보수에 용이하다는 장점때문에 선택했다. | |
| vercel [FE] | FrontEnd 호스팅 사이트로서 복잡한 절차없이 GitHub 레포지토리를 이용하여 빠른 배포가 가능 하다는 장점이 있어 선택. |
| axios [FE] | response timeout (fetch에는 없는 기능) 처리 방법이 존재 |
| Promise 기반으로 만들어졌기 때문에 데이터를 다루기 편리합니다. | |
| 크로스 브라우징 최적화로 브라우저 호환성(구형 브라우저 지원)이 뛰어납니다. | |
| socket.io[FE/BE] | webSocket의 경우 브라우저 별로 지원 버전이 다르거나 지원하지 않는 경우도 있어서 일관된 서비스를 제공하기 위해서 socket.io를 적용하였습니다. |
| mySql [BE] | 관계형 데이터베이스 관리 시스템으로 사용하기 쉽고 빠르고 안정적인 면과 데이터를 다양한 형식으로 저장하고 고유한 스키마를 정의할 수 있도록 하여 뛰어난 유연성을 제공하기 때문에 사용하게 됐습니다. |
| lambda [BE] | node.js는 비동기 프로그래밍 기반으로 I/O작업에 유리하고 CPU 작업에 불리하기 때문에 CPU 소모가 큰 이미지 리사이징을 lambda를 이용해 독립적인 서버에 함수를 실행시켜 로컬 서버의 부담을 줄이고 함수가 실행되었을 때 제한시간을 두어 동시에 많은 요청을 처리할 수 있다는 점에서 도입하게 되었습니다. |
| redis [BE] | In-Memory 기반의 Dictionary 구조 데이터 관리 Server 시스템으로 비관계형 데이터베이스 이지만 메모리에서 데이터를 처리하기 때문에 작업속도가 빠른 점을 이용해 그룹화면에서 요청이 많은 현재 서비스에 데이터를 캐싱하여 서버에 부담을 줄이기 위해 사용했습니다. |
| git action(CICD) | 반복적 빌드, 테스트 및 배포 작업을 처리하고, 문제가 있으면 경고를 해주는 자동화 파이프라인을 통해 코드 변경을 원활하게 할 수 있어 선택했습니다. |
| 또한, jenkins를 사용하면 내 컴퓨터상에서 관리를 할 수 있는 장점이 있지만 git action을 사용함으로써 github과 통일된 환경에서 cicd를 수행할 수 있고, 보다 친숙한 문법의 yaml파일로 간단하게 파이프라인 구성이 가능하기 때문에 git action을 사용했습니다. | |
| nodemailer [BE] | 회원가입을 할 때 본인 인증이 필요하다고 생각했고, 그러기 위해선 사용자 본인의 이메일 인증이 필요하다고 판단했습니다. 여러 메일서비스들 중 고민하다가 도메인설정이 필요없고, 무료서비스인 nodemailer를 활용한 인증요청방법을 사용했습니다. |
| Nginx [BE] | https를 적용해 사용자가 사이트에 제공하는 정보를 암호화하여 보안을 강화하고 현재 프로젝트의 사이즈와 사용자 수 및 비용적인 면을 고려해 ELB보다 Nginx를 Load Balancer로 사용해 서버의 부하를 분산시키 서버의 스트레스를 줄이기 위해 도입하게 되었습니다. | | sequelize [BE] | 객체지향적 코드로 직관적이며 로직에 더욱 집중할 수 있게 해주고, 유지보수가 좋다는 점 그리고 DBMS에 대한 종속성이 줄어들게 하며 쿼리문을 javascript로 사용할 수 있는 장점이 있어 보다 클린하게 코드를 작성하고 데이터를 가공하는 쪽에 더 집중할 수 있다는 점에서 사용하게 됐습니다. | | artillery[BE] | JMETER라는 툴도 있지만 우리에게 친숙한 코드로 부하테스트를 진행할 수 있다는 점에서 사용하게 됐습니다. |