TIL, 7.17

백엔드와 함께 만드는 미니 프로젝트

프로젝트

. env로 환경변수를  설정하고 게시물 작성 기능 구현 완료한 후 S.A 피드백으로 받은 반응형에 도전했다 종류(웹, 태블릿, 컴퓨터)들끼리도 크기가 다르고 한 종류 자체도 크기가 다양하여 반응형을 어떤 식으로 구현하는 게 좋은지 몰라 일단 % 나 rem을 이용하여 만들었다 그런 후 개발자 도구를 확인하여 부족한 부분을 미디어 쿼리를 이용하여 수정해 주었다 이것이 맞게 하는지 몰라서 완성한 후 중간멘토링 시간에 매니저님께 여쭤보기로 했다 그 후 시간이 남아 무엇을 하면 좋을까 고민하다 가지고 있는 데이터로 할 수 있는 로직을 짜기로 하였다 그래서 만든 프로젝트를 훑으면 있으면 좋은 것이 무엇일까 고민하다 내용이 많아지는 오래된 데이터는 보려면 스크롤은 매우 오래 내려야 한다는 것을 깨달았다 그래서 일단 가지고 있는 데이터를 이용하여 간이 페이지네이션을 구현해 보기로 했다 가져온 데이터를 내가 원하는 만큼 잘라서 보여주는데 페이지 변수를 하나 만들어서 그것이 바뀔 때마다 자르는 부분을 다르게 만들었다 저번 은버지 스터일 때 페이지 네이션을 공부했어서 백엔드랑 만드는 페이지네이션은 아니지만 프런트만으로 페이지네이션을 만들 수 있었다

 

중간멘토링

항해 매니저님께서 모르는 부분이나 프로젝트의 부족한 부분을 알려주셨다 현재 프로젝트의 진도상황이나 완성도는 나쁘지 않으나 몇가지 고쳐야 할 부분이나 잘못 알고 있는 부분에 대해 짚어주셨는데 그중 반응형 구현 변경이 필요하다고 하셨다 반응형을 만들 때 rem이랑 %로 모든 것을 작성했는데 실제로는 vh wh %를 사용하며 rem자체를 크기로 넣는 경우는 거의 없다고 하셨다 그리고 프로젝트 UI를 처음에 피그마의 AI기능을 이용하여 만든 와이어 프레임을 그대로 만들었는데 메인 페이지는 페이지로 되어있는 반면 상세페이지랑 작성페이지는 모달 UI여서 맞지 않다고 하셨다 이런 경우 UI를 변경하여 페이지 UI로 하거나 모달 UI 자체를 그대로 쓰되 페이지가 아닌 모달로 변경하는 것이 좋다고 하셨다 그 외 깃 플로우나 컴포넌트명이 좀 더 직관적이면 좋다는 답변을 주셨다 

 

중간멘토링 후 수정사항

컴포넌트명을 2개 이상의 단어를 조합하여 좀 더 직관적으로 변경하고 페이지에 맞는 UI와 반응형 컴포넌트를 구현하기로 했다 바꿔야 하는 페이지가 두개라서 다르게 하기로 했다 하나는 페이지가 아닌 모달로 바꾸어 구현하고 페이지 하나는 모달 UI에서 페이지 UI로 변경한 후 % 랑 미디어쿼리를 사용해 반응형을 구현하기로 하였다

 

후기

바지락 칼국수 먹고 싶다