코드스테이츠 Final Project 2주차 (20210111-0115)

아임 레조·2021년 2월 25일
0
post-thumbnail

✔ 프로젝트 아이디어 취합 및 UI 구조 설계

  • 프로젝트 기획자는 프로젝트를 함께할 팀원을 찾을 수 있고, 포트폴리오를 만들고 싶은 개발자는 하고 싶은 프로젝트를 찾고 지원할 수 있는 웹서비스를 만들어보기로 결정
  • 참고할만한 유사한 서비스는 없는지 서칭
  • 페이지는 '메인 페이지', '가이드 페이지', '프로젝트 등록 페이지', '프로젝트 열람 페이지'로 크게 나누고 각 페이지의 UI구조를 설계함
👀 작업한 내용 보기

✔ '메인 페이지' 구현 작업

  • 네브바(navbar)를 제외하고 메인 페이지를 총 3개의 block으로 나누어서 작업하기로 결정
  • 네브바: 각각의 객체에 알맞은 애니메이션 적용
  • first block: 서비스 슬로건과 웹 페이지 이용에 관한 요약 설명란 제작, 클릭 시 '가이드 페이지'로 이동할 수 있는 기능 구현, 무료 아이콘 삽입(icon finder 사용)
  • second block: 프로젝트를 열람할 수 있는 슬라이드 바 기능 구현(React-slick 사용), 제목 클릭 시 '프로젝트 열람 페이지'로 이동할 수 있는 기능 구현
  • third block: 이미지와 클릭함수를 통해 '프로젝트 등록 페이지'로 이동할 수 있는 기능 구현
👀 초기 네브바 보기
👀 초기 first block 보기
👀 초기 second block 보기
👀 초기 third block 보기

✔ '메인 페이지' 컴포넌트(component) 통합 작업 및 CSS 파일 제작

  • 메인 페이지의 각각의 컴포넌트 통합
  • UI 청사진에 맞게끔 CSS 파일 제작

✔ '프로젝트 열람 페이지' 구현 작업

  • 슬라이드 바 기능을 구현하고 해당 슬라이드의 이미지 파일을 선택하면 하나의 프로젝트에 관한 상세 정보를 확인할 수 있는 페이지로 이동할 수 있는 기능 구현
👀 초기 프로젝트 열람 페이지 보기

✔ '프로젝트 등록 페이지' 구현 작업

  • 파이어베이스에서 프로젝트 등록에 필요한 데이터를 가져올 수 있도록 연결해주는 작업
  • 서버에서 가져온 데이터들을 랜더링하기 위한 CSS 스타일링 작업

✔ 파이어스토어 read 메서드 작업

👀 작업한 내용 보기

✔ 테스트 실행 및 파이어베이스 배포


❓ 여기서 잠깐, 우리 팀이 Post CSS를 선택한 이유는?
리액트 프로젝트에서 컴포넌트 스타일링을 할 때 동일한 클래스 네임을 사용하게 되거나, 스코프를 제한할 수 없어서 원하는 스코프에만 CSS 스타일링을 하기 난감한 지점들이 있었다. 이 점을 개선하기 위해서 postCSS를 사용하게 되었다. postCSS는 리액트 프로젝트에서 CSS를 모듈화시키는 방식으로 컴포넌트 스타일링을 할 때 자주 사용하는 방법이다. CSS 클래스를 만들면 자동으로 고유한 클래스네임을 만들게 되고 스코프를 지역적으로 제한할 수 있다는 장점이 있다. (👉 "리액트 컴포넌트 스타일링")
profile
어쩌다보니 백엔드 개발자/ 번아웃 없이 재밌게 개발하고 싶어요

0개의 댓글