[수풀] 프로젝트 레이아웃 잡기

📚 오늘 한 것 

1. stack 이미지 적용
2. json dummy data 작성
3. Board 전체 틀 css 작성

---

 Stack 이미지 적용

stack을 array 형태로 저장한 다음 map 메소드를 사용하고 리터럴 문법을 이용해
서버에서 가져오는 string형태의 스택을 기준으로 적절한 이미지가 나오도록 작성함

---

json dummy data 작성

멘토님께서 백엔드측에서 API 구현해주는 것을 기다리는 것이 아니라
구성된 API 명세서를 기반으로 dummmy data를 작성해서 빨리빨리 페이지에
디자인된 화면을 퍼블리싱하는 것이 우선이라고 하셔서
적극 반영해서 API처럼 작동하는 json server에 더미를 작성해주고 페이지에 띄우는 것을 시작했다

API가 완성되기 전에 백에서 오는 Json 형태의 데이터를 어떻게 사용할지 미리 생각해보고
페이지를 구현해볼 수 있어서 나중에 API가 완성된 후에도 적용하기 쉬울 것이라 생각들었다.

---

🤔 느낀점 

생각보다 CSS 레이아웃을 정확하게 잡고 코드를 작성하는 것이 꽤 많이 중요하다는 것을 깨달았다.
그냥 대충 설계된 페이지 구조는 컴포넌트들을 적절한 곳에 위치시키는데 큰 도움이 되지 못했다.
처음부터 그냥 막 코드를 작성해보니 구상했던 페이지와는 다른 형태의 페이지가 나오는 것을 보고
무턱대고 코드를 치면서 위치를 잡아가는 것 보다는 처음에 고민하는 시간을 아까워하지말고
마지막 자식요소의 div의 위치까지도 확실하게 구조를 파악한 뒤에 코드 작성을 시작하는 것이 훨씬 효율적이라는 것을 깨달았다.