프로젝트 2일차 팀원들의 분위기가 정말 좋다!!
우리가 제일 좋은 것 같다!!
각자 공부만 하다 팀으로 프로젝트하니까 너무너무 재미있다!!

백엔드에 대한 이야기를 듣는 게 너무 재밌다. 미지의 세계를 조금씩 알아가는 느낌이 랄까?
역시 협업하니 코드가 더 이해하기 좋고 로직이 더 고민할 것들이 많지만 더 잘 정리되는 느낌이다.

오늘한 고민들의 기록

토큰을 어디에 저장할 것인가?

• 처음에는 백에서 토큰을 보낼때
  어차피 유효기간을 주기 때문에 LocalStorage 에 줘도 된다고 했지만

다시 생각해보니
로그아웃이 되어야한다면 sessionStorage 에 토큰을 저장하는 것이 더 적절해 보인다.

(실제로 적용할 때 다시 어떤 부분을 정확하게 구현하고 싶은지 고민해야겠다.)

Back 과의 소통을 위해 프론트 역할 notion에 작성하기

• 역시 notion에 소통되거나 공통으로 알아야하는 부분은 작성해 놓으면
• 찾기도 좋고 알아보기 좋아
• notion을 적극 활용하자!

외곽 레이아웃 정하기

• 각각 다른 페이지를 맡더라도 결국 일관성 있는 UI를 위해 최상위 컴포넌트의 width 값과 padding 을 정했다.
• 반응형을 고려한 media 값도 지금 정하면 좋겠지만 그 부분은 나중에 시행착오를 겪으며 정하기로 한다 :)

근데 역시 초반에 많은 토론이 있으면 나중에 다 만들어진 상태에서 ui 를 고치거나 고치다가 결국 새로 만들어야 하는 불상사를 없앨 수 있어 초반의 많은 토론과 기획이 중요한 것 같다.

상세페이지의 데이터는 무엇으로 할까?

상세 페이지 데이터를 고민하는 이유

• 커머스 사이트의 상세 페이지를 누가 작성하느냐를 고민해 보면 된다.
  대부분 당사의 개발자이기보다는 다양한 판매자들이 각자 원하는 다양한 방식으로 올린다.
  (형식은 있지만 그 내용은 정말 다양하다. 작성자가 다양하다는 게 가장 큰 고려 사항이다.)

그래서 상세 페이지는 요즘 2가지 방법으로 작성된다고 한다.

방법 1. 이미지

• 이 방법은 사실 개발자 입장에서 편하다.
  판매자들(혹은 게시자들)이 작성한 것을 그대로 이미지화해 저장하고 그 크기만 조절해 보여주는 방식이다.

• But!
  사용자가 드래그를 하거나 글자를 읽는 서비스, 글자로 해당 부분을 찾는 서비스 등을 아예 하지 못해,
  제약사항이 사실 너무 많은 방법이다.

방법 2. html 코드

• 이 방법은 블로그 작성하는 편집 프로그램으로 작성자들이 작성을 하고 그 코드를 해당 부분에 뿌려주는 방식이다.

• 이 방법은 react 를 사용하면 dangerouslysetinnerhtml 를 사용하면 된다. (이름이 너무 무시무시하지만..)

• 이 방법을 쓰는 이유
  -> 템플릿이 바뀌더라도 이후 부분만 수정하면 됨

관련된 고민들

• 나는 처음에 html 코드를 값으로 받는다고 했을때, 사실 이해가 되지 않았다.
  아니, 프론트에서 템플릿이 있고 react 컴포넌트처럼 필요한 부분에 해당 정보를 넣어주면 되지 않나?
  하지만 작성자가 한명이 아니고 다양하며 그만큼 원하는 스타일이 다양하기에 태그를 받는 것이다.
• html 코드를 값으로 받는다면 나중에 형식을 바꾸고 싶으면 어떡하나?
  그 부분은 나중에 형식을 바꾼다고 이전의 상세 페이지 데이터로 바꾸지는 않는다고 한다.
  그저 이후의 상세페이지 ui 가 변경된 포멧으로 쓰여지는 것 뿐...
  

프론트팀 공동부분 맞추기

• 색상 맞추기
• 컨텐츠 크기, 여백 맞추기

성장한 코드

• 하나가 선택되는 부분이면 state를 배열이 아닌 숫자로 편하게 관리하면 된다!

예전에 배열로 구현한 코드

const [sortCheck, setSortCheck] = useState([true, false, false]);
setSortCheck(sortCheck.map((_, i) => (i === id ? true : false)));
className={`sortBtn ${sortCheck[i] ? 'checked' : ''}`}

이번에 숫자만 비교한 코드

const [sortCheck, setSortCheck] = useState(0); 
setSortCheck(id);
className={`sortBtn ${sortCheck === i ? 'checked' : ''}`}

프로젝트를 하고 Back 을 더 이해하며 더 큰 그림이 그려지니 코드 작성이 더 재밌고 개발이 너무 재밌다!!!
오랜만에 에너지가 밤인데도 더욱더 넘친다@!