[Codestates] Final-Project 후기

김태수·2021년 2월 2일

Mini Project

목록 보기

4/4

Komma

코드스테이츠 Final project를 마치며..

2021/01/06 ~ 2021/02/02 약 4주동안 끊임없이 달려온 코드스테이츠 에서의
마지막 프로젝트가 끝났다.
지난 프로젝트 에서의 팀과 동일하게 진행하되, 좀 더 코드에 집중하고싶은 마음에 이번에는
팀장을 거절하고 팀원으로써 진행하게 되었다.
크게 달라지는것은 없었지만, 적어도 심적인 부담감 만은 조금이나마 덜 수 있었다!
프로젝트를 진행하며 조금 더 디테일있게 완성하고싶은 욕심이 강해
팀원들에게 많은 요구들을 했었는데, 싫은소리 없이 같이 진행해준 팀원들에게 항상 감사하다.

Komma,

Komma는 휴식, 공부, 또는 잠들기 전 언제나 사용할 수 있는
'백색소음' 청취가 가능한 사이트이다.

백색소음
우리 주변에서 들리는 백색음으로는 비 오는 소리, 폭포수 소리, 파도치는 소리, 시냇물 소리, 나뭇가지가 바람에 스치는 소리 등이 있답니다.

출처 네이버 백과

유저는 30개의 백색소음 중 적게는 1개부터 여러개의 소음을 유저가 마음대로 조합하여
청취할 수 있는 사이트 이다.
유저는 본인이 마음에드는 소음과 볼륨의 조합으로 한개의 믹스테잎을 만들어 저장해 두었다가,
언제든 본인이 필요할 시에 꺼내어 청취할 수 있다!
또한 원하는 시간에 종료되는 타이머 기능과, 청각과 함께 마음을 편안하게 해주는
컬러와 애니메이션 기능도 제공된다.
기본적으로 서비스는 비회원 유저도 이용할 수 있게 제작되었으며, 믹스테잎 추가 및 배경컬러 변경
등의 기능을 이용하기 위해서는 로그인이 필요하다.

공통적으로 Typescript로 제작되었으며, 클라이언트는 React Redux Sass, 서버는 TypeORM 등의 기술이 사용되었다.

본인은 이 프로젝트에서 클라이언트, 그 중에서도 메인페이지의 전체를 담당하였다.

프로젝트를 진행하며..

이번 프로젝트의 진행방식은 전에 경험했던 first project와 다르지 않았기에,
지난번 프로젝트의 경험과 다른점을 위주로 기록해 보려 한다.

Typescript
Redux
Sass
프로젝트를 진행하며 느낀 점

Typescript

이번 프로젝트에는 클라이언트, 서버 기본 공용언어로 타입스크립트를 사용하였다!
타입스크립트를 사용하며 느낀점은, ~~번거롭다~~
특히 리덕스 관련 부분에서 타입에러가 많이 발생해 애를먹었다.
계속해서 타입에러를 내보내는 컴파일러가 원망스러웠지만, 타입스크립트 자체에서 미리 에러가 날만한
부분을 체크해서 예상치 못한 에러를 방지해주기 때문에, 결론적으로 수월한 진행에 도움이 되었다!
처음 인터페이스를 정의하고 하나하나 타입을 입력해 주는 과정은 번거롭지만, 후에 더 큰 에러를
방지해 주기 때문에 이제는 타입스크립트가 아니면 불편함을 느낄것 같다!
물론 좀 더 유연함이 필요할땐 상황에 맞게 자바스크립트가 강점이될 수 있다.

Redux

지난번 위아래로 오르락 내리락하던 State와 Prop를 감당할수 없었어서, 이번 프로젝트에서는
React 상태관리 라이브러리로 Redux 를 사용하기로 했다!
리덕스 역시, 기존 Class Component 또는 Function Component 방식의 일반적인 상태관리와
비교하면 굉장히 쉽게 상태를 변경하고, 상속해줄 수 있었다.
하지만 리덕스에서 상태와 그 상태를 핸들링하는 액션을 하나 만들어주기 위해 작성해야 하는 코드가
상당히 많은 편이였고, 이 또한 처음에는 '이게 맞나..?' 싶었다.
이 또한 작업이 계속되면서, 후반부에는 오히려 초반에 고생하길 잘했다는 생각이 들었다!
State가 점점 늘어나며 Redux를 사용하지 않았다면 일어났을 일에대해 생각하기도 싫다.

Sass

Sass에 대해서는 고마운점도, 아쉬운점도 많다.
CSS에 변수, 반복문, 배열 등등의 강력한 기능들을 더한 Sass를 이용하며
비주얼적으로 큰 부분을 차지했던, 주기적인 랜덤 배경컬러 생성이 가능했다.
해당 기능을 JS의 setInterval 로 구현하려했지만
이상하리만치 clearInterval 이 동작하지 않아 애를먹고 있었다.이 부분은 아직도 해결법을 모르겠다.
이때 Sass의 변수 및 list 기능을 사용하여 이 문제를 해결하였다!!

이 외에도 반복문등의 기능을 활용하였지만, CSS와 혼용 가능한 SCSS 문법을 활용한덕에,
그냥 일반적인 CSS문법의 활용이 많아져 많은 강력한 기능을 제대로 사용하지 못한 느낌이라
앞으로 더 공부해봐야겠다.

프로젝트를 진행하며 느낀 점

이번 Komma 프로젝트를 진행하면서, 메인페이지의 대부분의 기능들과 UI/UX를 적용했는데,
작업을 하면서 에러 핸들링과 사용자 피드백에 대해 많이 고민하며 작업하였다.
예를 들어 에러 핸들링 부분에서는 개발자의 의도대로 유저가 따라주지 않기 때문에
완벽히 작업했다 생각 하더라도, 유저가 예상치 못한 행동을 했을때 UI나 로직들이 무너져내리는 경우가 많았다!
이를 해결하기 위해 주변사람한테 이용하게도 시켜보고, 맥북, 22인치 모니터, 핸드폰, 아이패드 등
여러 기기를 돌아다니며 다양한 방면으로 테스트를 시도해 보았고, 에러를 최대한 막아낼 수 있었다!

또한 사용자 피드백에 관해서는, 프론트엔드 개발자가 되기 위해 항상 신경써야 할 디테일이라 생각되었다.
버튼 하나를 만들 때에도, 클릭 했을때의 스타일 변화를 주어 사용자로 하여금 내가 올바르게 클릭을 했구나
라는 인식을 하게 만들어 주어야 할것같았다. 그 외에도 요청 실패시 문구를 띄워주거나, 하다못해
alert 창이라도 띄워서 유저에게 '당신은 어떠한 행동을 하였고, 이래서 이 행동은 실패/성공 하였다'
라는 확신을 주게 만들어 주어야겠다고 생각하였고, 그대로 적용하였다.