(#3) 기숙사 프로젝트 사용 기술

개발도구

저번에는 소통을 위한 개발도구를 설명했다면 이번에는 프론트엔드가 개발을 위해 사용한 기술을 설명해 보려고 한다.

스프링, java는 백엔드, mysql은 벡엔드에서 사용한 기술이라 정확히 잘 몰라 패스하도록 하겠다. 

 

프론트엔드는 2명이서 제작을 하였으며 디자이너 없이 제작을 하다 보니 많은 어려움이 있었다.

내가 기획한 의도를 정확하게 파악을 하였는지, 잘 진행이 되었는지, 등등 중간중간 확인을 해야 했고, 중간중간 내 의도와 다른 부분은 계속 수정을 요청했다. 

 

React

React 기술

React기술을 사용했는데 React를 사용한 이유는 여러가지가 있었다. 그것을 나열해 보도록 하겠다.

1. 컴포넌트 기반이다 보니 개발분담을 잘 할 수 있었다.
2. 가상 DOM을 사용하여 렌더링 비용을 아낄 수 있다.
3. 새로고침을 줄여 사용자의 몰입을 깨지 않기 위해 사용하였다.

여러 이유가 있지만 대표적인 이유는 위 3가지가 있었다. 

React를 사용하다보니 조금 더 react 구조에 대해 알게 되었고 useMemo, useEffect, React.Memo, CallBack에 대해 조금 더 조사하게 되었고 최적화에 대해서도 조금 더 공부하게 되었다.

 

 

TypeScript

TypeScript

타입스크립트 조합으로 이용하였는데 JavaScript를 이용하지 않고 TypeScript를 이용한 이유는 딱히 크게 없다. 하지만 굳이 얘기하자면

1. javascript보다 typescript가 에러를 찾기 수월하다.
   1. 타입을 지정하다보니 타입에 대한 에러를 미리 찾을 수 있고 우리는 페이지 제작이 많다 보니 그만큼 코드의 양도 많아질 것으로 예상했다. 런타임 에러를 줄이기 위해 썼다.
2. 데이터를 확인하기 수월하다.
   1. 타입지정을 하다보니 데이터 확인이 수월하였음

 

Styled-Components

styled-components

css는 styled-components를 사용했다. 사용한 이유는 컴포넌트별로 CSS를 적용할 수 있는 장점이 있어서 사용하였다.

CSS는 사실 별로 특별한 기술이 아니라 기술할 부분은 없는 것 같다.

 

Vercel

vercel 화면

vercel은 실 배포가아닌 프론트와 벡의 소통을 위해 사용되었다고 할 수 있다. 제작기술이라고 할 수 는없지만 vercel로 배포를 하는 사람들도 있기에 그냥 제작 쪽에 적게 되었다.

 

실제로 벡엔드에서 테스트도 가능하며, github에 marge를 할 경우 자동을로 연동되어 빌드를 하고 자동배포를 한다.

 

 

 

---

프론트에서는 이렇게 진행이 되었다. 다음 편은 후기로 작성하려고 한다.

1차 배포의 마무리를 다음 편에서 다룰 생각이다.