Final Project 1일차 - 헤더 제작 및 Common Components 구현

📅 TIL #97




🔔 1일차


드디어 파이널 프로젝트 스타트~!!!!! 👏👏👏

오늘은 나와 같이 클라이언트를 맡은 다른 한 분과 하루 종일 페어 프로그래밍을 했다. 그 이유는 클라이언트 개발을 진행하면서 초기 세팅을 서로 맞춰야 했고, 폴더 구조를 같이 설계하기로 했기 때문이다.

그리고 또 재사용되는 컴포넌트들, 예를 들어 Input 태그나 Button 태그같이 자주 사용되는 것들은 컴포넌트화 시키기로 해서 같이 제작했다.

오랜만에 페어 프로그래밍식으로 개발을 해보니 피드백도 바로 주고 받을 수 있고 여러모로 좋았다!




💪 오늘은 어떻게 프로젝트에 기여했나요?


클라이언트 개발 시 필요한 초기세팅을 했다.

그 후, 재사용성이 높은 컴포넌트들을 제작했다. 먼저 워크스페이스(사용자가 로그인 후 칸반보드나 일정, 채팅을 할 수 있는 공간) 페이지를 제외한 모든 페이지에서 사용되는 Header를 제작했다.


init header


짠! 이런식으로 정말 심플하게 헤더를 제작했고, border-bottom 부분에 쉐도우를 주어서 포인트를 넣어주었다.

로고 제작 후에 로고를 적용시키면 더 이쁜 헤더가 될 것 같다!


그 다음은 Button 컴포넌트를 제작했다.

<button size='' buttonType=''>


button


size에는 small, large 값의 따라 크기가 달라지고 buttonType은 basic이냐 cancel이냐에 따라 달라지게 컴포넌트를 만들었다.



그 다음은 Select Box도 직접 커스터마이징을 하였다.


<Select optionData={["안녕", "반가워"]}>우성</Select>


Select


직접 옵션 정보만 넣어주면 옵션 정보들이 밑에 나올 수 있게 직접 디자인을 해보았다!


이렇게 만든 컴포넌트들을 이제 내일부터 마구마구 사용해주면 된다!







🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?


파이널 프로젝트를 시작하기 전에 우리 팀원들은 로그인 인증 로그인 구현 만큼은 테스트할 때 다 같이 해보기로 하였다. 그래서 오늘 바로 구현이 다 되어서 진행을 하였다.


서버분들도 로그인 요청 및 응답 로직을 다 구현하고, 클라이언트인 우리도 로그인 요청 및 응답 로직을 작성하고 생각보다 일찍 마무리를 했다.


아무래도 2주 프로젝트때 한 번 했던 로직이라 금방 할 수 있었던 것 같다.


그러나 나는 팀원이 화면 공유를 한 상태에서 팀원이 어떻게 하는지 보고만 있었기에 놓쳤던 부분들이 많았다.


확실히 내가 직접 코드를 작성하지 않으니 놓치는 부분이 있는 것 같다.


그래서 팀원에게 부탁을 해서 일단 테스팅하기 위해 작성된 로그인 인증 코드를 내가 다시 리펙토링을 해도 되냐고 물었고, 팀원분도 흔쾌히 허락해주셨다.


스스로 리펙토링을 하면서 다시 한 번 로그인 인증 부분을 공부해보려고 한다!







🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?


프로필 페이지 디자인 및 입력 폼 제작

프로필 페이지에 작성된 유저 정보를 서버에 요청