팀프로젝트 1주차 회고

팀 프로젝트 주제는 행사 open api DB를 이용한 행사 정보 소개 및 동행자를 구하는 커뮤니티 사이트로 정했다.
여행 동행자 구하는 것과 굉장히 유사할 예정..

기획과 디자인에서 난관..

디자이너가 없어서 실제 서비스와 가깝게 디자인하는게 너무 어렵다.
팀원들이 각자 디자인을 하다보니 통일성이 없고 제각각이 되어 결국 다시 디자인을 진행하기로 했다.

와이어프레임과 퍼블리싱 디자인을 직접해야하다보니 figma 사용법을 익힐 수 밖에 없었다. 처음엔 오래걸리고 헤맸는데 유튜브 동영상을 보면서 하다보니까 마지막엔 조금 익숙해졌다.

제일 도움된 영상
1. https://www.youtube.com/watch?v=ESxsgBYuMB8

2.연정 디자이너님 유튜브
https://www.youtube.com/watch?v=GsZk8s5JdWg

통일성 있는 디자인을 위해 기존 사이트 참고를 많이 했다
주제가 행사 정보 보여주기+동행구하는 커뮤니티 사이트라서 주로 여행플랫폼, 웹사이트를 참고했다.
(마이리얼트립,트립소다,...)

그 외에도 상품 판매 및 결제를 위해 쇼핑몰 사이트도 참고하며 ui를 제작했다.

퍼블리싱 개선

1주차는 Mock-Up 만들기를 위한 퍼블리싱이 주가 되어 고도화된 코드를 짜진 않았지만 더 나은 style을 위해 기존에 짜던 코드보다 개선하려고 노력했다.

• 네비게이션 바를 만들고 스크롤을 해도 최상단에 위치하도록 만들기
• 사이드바 고정 fixed와 sticky 중에 고민->
  position: -webkit-sticky; position: sticky; 가 가장 적합해서 sticky로 확정
• 네비게이션 바에서 탭을 누를 때 특정 스크롤 위치로 이동하도록 만들기
• fetch해올 정보가 많을 때는(그리 많지 않은데도..) next.js 렌더링 속도가 너무 느림->개선 필요
• 리액트 lifecycle(useEffect 사용), 가상 DOM(useRef)을 적용은 했지만 더 이해 필요
• grid 스타일 반응형 디자인
  • grid-template-columns 속성을 잘 사용하자
  • grid-gap으로 요소 간의 간격을 조절할 수 있다.

export const GridWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.25rem;
  @media screen and (max-width: 767px) {
    grid-gap: 0.625rem;
  }
`;

(이런식으로 조절해봤다. 모바일 사이즈에서는 grid-gap을 더 좁게 설정했다)

• 이미지 반응형+정사각형으로 만들기

export const ImageWrapper = styled.div`
  width: 100%;
  position: relative;
  ::after {
    display: block;
    content: "";
    padding-bottom: 100%;
  }
  :hover {
    cursor: pointer;
  }
`;
export const Image = styled.img`
  position: absolute;
  width: 100%;
  height: 100%;
`;

그 외

기능적인 면에서 동행 커뮤니티에 실시간 채팅 기능을 넣고 싶어서 간단하게나마 강의를 들으며 공부중이다. socket.io가 JS에서 써먹기 좋을거 같아서 비교적 간단하게 만들 수 있을거 같다는 느낌이 든다! CRUD API 적용이 어느정도 될때쯤 바로 채팅 구현을 시작해봐야겠다.