팀 프로젝트 2주차 회고..
프론트엔드 팀은 UI하느라 바빴고
백엔드 팀은 CRUD 만드느라 바빴던 2주차였다.
UI를 와이어 프레임으로 전체적인 UI 느낌을 알 수 있게끔 만들었다.
와이어 프레임은 페이지를 구성하는 요소의 구성 방식, 콘텐츠 배치, 작동 방식 등을 파악하거나 설명하는 데 사용되며, User Flow를 기반으로 제작한다.
한마디로 대충 어떻게 흘러가는 UI인지 Prototype을 만들기 전에 진행한다.
그 다음으로 Prototype을 진행해야했다.
프로덕트의 High Fidelity 자료로 제작하여 실제 디자인과 기능을 시뮬레이션할 수 있도록 한 것을 뜻하고,
Wireframe을 기반으로 한 실제 디자인 단계라고 보아도 무방하며, 개발 단계에서는 Prototype을 기준으로 작업하게 된다.
프론트엔드에서는 이 Prototype으로 퍼블리싱을 하기 때문에 배치, 정렬, 색상, 효과 등이 완전히 확정된 상태여야 한다.
우리는 이 Prototype 작업을 figma로 진행하였고,
실제로 css를 진행하는 것도 아닌데 시간이 엄청 오래걸렸다.
와이어프레임에서 만들었던 UI와 다른 부분도 있었고, 기능과 함께 생각하다 보니까 시간이 오래 걸렸다.
이 작업을 하면서 동시에 업무를 분배하였고,
Frontend 작업 환경 규칙, 설정을 함께 작성하였다.
우리 프론트엔드 팀은
react, type script, ESLint를 사용하여 일관성있는 코드를 작성할 수 있게 하였다.
리액트를 사용하는 이유는
리액트의 Virtual DOM 기능으로 실제 DOM으로 적용하기 전에 가상 DOM을 만들어 최종 완성된 결과만을 전달하기때문에 브라우저의 연산양을 줄여 성능을 개선시켜서 좋고, 코드의 재사용성이 높기 때문이고
타입스크립트를 사용한 이유는
명시적인 정적타입으로 컴파일 단계에서 오류를 포착하여 코드의 가독성을 높여 디버깅이 쉽기 때문이다.
마지막으로 ESLint를 선정한 이유는
코드의 문제점을 디버깅하여 가독성을 높이면서 일관성 있는 방식으로 구현할 수 있도록 도와주기 때문이고,
팀 프로젝트 진행시 사람마다 코드작성법이 다르기때문에 ESLint를 사용하여 일관성 있는 규칙을 적용하려고 선정하였다.
참고로 수업 시간때도 ESLint는 정말 어려웠다..
그래서인지 이번 프로젝트 때는 꼭 사용해보고 적응해보고 싶었다!!
다음 3주차 때는 아마.. 기능구현하느라 정신 없을 것 같다..
