dnd-side-project / dnd-mentee-3rd-8-traview

국내 여행 사진 소셜 리뷰 서비스

Traview

전에 없던 한국

• 웹 사이트 바로가기

업데이트 내역

• 0.0.1

  • 개발 환경 구축

• 1.0.0

  • 구글 로그인
  • 사진 업로드
  • 댓글 작성
  • 지역 검색
  • 분위기 분류

• 1.0.1

  • 팔로우
  • 신기해요
  • 찜목록
  • 유저 페이지
  • 프로필 편집
  • 팔로워 Pick

정보

• Notion 주소

• 개발 팀원

• 개발 규칙

dnd-mentee-3rd-8-traview's Issues

마이페이지 제작

목적

유저들이 내가 쓴글, 회원 정보를 볼 수 있는 마이페이지를 제작한다.

작업 상세 내용

• 내가 쓴 글 목록 버튼
• 비밀번호 변경
• 회원정보 변경

참고사항

백엔드 프로젝트 세팅

목적

작업 시작을 위한 프로젝트 세팅

작업 상세 내용

• Express 프로젝트 생성
• Models, Routes 폴더 생성
• 필요한 패키지 설치

참고사항

• https://www.youtube.com/watch?v=7sHWMkFOR7c&list=PL9a7QRYt5fqkZC9jc7jntD1WuAogjo_9T&index=2

Banner, BestPictures 코드 리뷰

살짝 둘러보고 있는 중인데요, 그때 그때 간단하게 코드리뷰 이슈 올려보려고 합니다.
'내가 리뷰해주는대로 바꿔라!'는건 절대 아니구요 ^^;; 자유롭게 의견 교환 되었으면 좋겠습니다!
(근데 Label에 붙어있는 아이콘은 어디서 가져온건가요? ㅋㅋ)

Banner

https://github.com/dnd-mentee-3rd/dnd-mentee-3rd-8-traview/blob/9b8ac2741479a8c27b3386e82e0b24d791c14596/client/src/components/Banner/Banner.js#L136-L147

props로 일일이 넘겨주기보다는 data 자체를 넘기고, 받는 쪽에서 destructuring하면 어떨까요?

const BestPictures = ({ data }) => {
    const {num,interest, like, user, username, imagePath, location} = data;
   
    ...
}

...
<BestPicture data={data} />
...

BestPictures.js

https://github.com/dnd-mentee-3rd/dnd-mentee-3rd-8-traview/blob/9b8ac2741479a8c27b3386e82e0b24d791c14596/client/src/components/Banner/BestPictures.js#L146-L191

props의 상태에 따라 다른 View를 보여줘야 하는 상황 같은데요! 가독성이 조금 더 고려되면 좋을 것 같습니다.
아래와 같은 구조는 어떤가요?
(Props 네이밍도 조금 더 명시적으로 바꾸면 좋을 것 같습니다! 예를 들면 pictureNo라던가 ... )

const BestPicture = () => {
    return 윗부분;
}

const Picture = () => {
    return 아랫부분;
}

export default const BestPictures = ({ num }) => {
    const isFirstPicture = num === 0;

    return isFirstPicture ? <BestPicture/> : <Picture />;

}

Pick 모아보기 제작

목적

최신, 팔로워, 신기한 사진 분류에 따라 사진을 볼 수 있게한다.

작업 상세 내용

• 최신사진 Pick
• 팔로워 Pick
• 신기한 Pick

참고사항

• 세부사항은 지역페이지와 동일

배너 제작

목적

서비스를 위한 메인화면의 배너를 제작한다

작업 상세 내용

• 최고의 사진들 List
• 최고의 사진들 Mouser Hover Event
• Baneer Background Image
• 관련리뷰보기 Button

참고사항

Footer View 제작

현재 구체적으로 정해지지 않음

NavBar View 제작

• Logo 이미지
• 검색 View
• 지역
• 사진 업로드 버튼
• 로그인 버튼

Board 기능 구현

• 제목 및 내용 업로드 기능 구현

• 신기해요 기능 및 별점 (5단계) 기능 구현

• 마이페이지 내 게시글 삭제 및 수정 기능 구현

• 게시글 내 댓글 기능 구현

• 지역 선택 및 분위기 선택 기능 구현

• 사진 업로드 기능 구현

User 기능 구현

• 로그인, 회원가입 기능 구현

• 마이페이지 내 개인정보 수정, 게시글 삭제 및 수정 기능 구현

• 관리자 기능 구현(게시글 및 댓글 삭제 기능)

• 유저 간 팔로우 기능 구현

지역 페이지 제작

목적

검색 후 결과에 따른 사진 분류를 보여준다.

작업 상세 내용

• 배너 이미지
• Infinite Scroll
• 분위기 탭
• Firestore 연동
• 검색 결과 없을 시 페이지

참고사항

NavBar 코드리뷰

https://github.com/dnd-mentee-3rd/dnd-mentee-3rd-8-traview/blob/9b8ac2741479a8c27b3386e82e0b24d791c14596/client/src/components/NavBar/NavBar.js#L117-L157

이렇게 반복적으로 같은 엘리먼트가 반복될 경우 데이터를 배열로 정의하고 map을 쓰면 조금 더 가독성이 좋아질 수 있을 것 같아요~

const cityMenuList = [
    { name : '서울', to : '/area/seoul' },
    { name : '부산', to : '/area/busan' },
    { name : '대구', to : '/area/daegu' },
    .... (다 적기는 힘드네요 ㅠㅠ)
]


export default () => {
  return (
    <Container>
      <Title to={'/'}>Traview</Title>
      <NavContainer>
            <AreaContainer>
                    {cityMenuList.map(item => (
                      <ListItem>
                        <AreaLink to={item.to}>{item.name}</AreaLink>
                      </ListItem>
                     )}
            </AreaContainer>
      </NavContainer>
      
      ...
   )
}

MainArea 코드리뷰

MainArea.js

https://github.com/dnd-mentee-3rd/dnd-mentee-3rd-8-traview/blob/9b8ac2741479a8c27b3386e82e0b24d791c14596/client/src/components/MainArea/MainArea.js#L60-L70

변수 선언의 상수화

apiRoot나 accessKey는 이 컴포넌트가 아니더라도 여러군데서 사용될 가능성이 있는 것 같은데요, 그렇다면 지역 변수로 선언하기보다는 공통적으로 사용할 수 있는 상수 파일을 따로 만들어서 import하여 사용하는게 좋을 것 같습니다. 그렇게 했을 때 장점은

• 변경사항이 발생하였을 때 일일이 검색할 필요 없이, 해당 상수 파일만 들여다보면 됨
  • 보통은 IDE에서 Find Usage를 지원하기 때문에, 훨씬 보기 편해집니다
• 마찬가지로 일일이 여러군데 수정해줄 필요 없이 한 군데만 수정하면 됨(관리포인트 단일화)
• 여기저기서 각각 정의하여 사용하면 (아무리 copy&paste를 하더라도) 오타가 발생하는 등의 이슈로 인해 특정 부분에서만 에러가 발생할 여지가 있음
• 기타 등등... 지금 생각나는건 이정도네용

따라서 아래와 같은 구조는 어떨지 고려해보세요 :)

// src/const/apiConst.js
export const API_ROOT = 'https://api.unsplash.com'; 
export const ACCESS_KEY = process.env.REACT_APP_ACCESSKEY; 

// src/components/MainArea/MainArea.js
import { API_ROOT, ACCESS_KEY  } from '../../../const/apiConst.js'

함수 정의

함수를 컴포넌트 내부에서 정의하면 rerender될 때 마다 함수가 새로 정의됩니다.
물론 함수를 정의하는 것이 리소스를 많이 잡아먹지는 않기 때문에 당장 성능상으로 문제가 되지는 않겠지만요,, 때로는 치명적일수도 있습니다.

이럴때는 컴포넌트 바깥에서 함수를 정의하는 간단한 방법으로 회피할 수 있으니 습관화하면 좋을 것 같아요 :)

이런 문제를 해결하기 위해 React에서는 useCallback이라는 훅을 제공해주고 있습니다. 나중에 한번 찾아보셔요 ㅎㅎ

const fetchImages = (images, setImages) => {
    const apiRoot = 'https://api.unsplash.com';
    const accessKey = process.env.REACT_APP_ACCESSKEY;
    axios
      .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=15`)
      .then((res) => setImages([...images, ...res.data]));
  };

const MainArea = ( ) => {
    const [images, setImages] = useState([]);

    useEffect(() => {
        fetchImages(images, setImages);
    }, []);


}

await의 사용

Axios를 이용해 API를 호출할 때 async&await를 사용해보는건 어떨까요? 물론 지금 방식으로도 잘 동작하겠지만, 코드가 좀 더 깔끔해질거에요!

//AS-IS
const fetchImages = () => { 
   const apiRoot = 'https://api.unsplash.com'; 
   const accessKey = process.env.REACT_APP_ACCESSKEY; 
   axios 
     .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=15`) 
     .then((res) => setImages([...images, ...res.data])); 
 }; 


//TO-BE
const fetchImages = async () => {
    const apiRoot = 'https://api.unsplash.com';
    const accessKey = process.env.REACT_APP_ACCESSKEY;    

    const result = await axios.get(`${apiRoot}/photos/random?client_id=${accessKey}&count=15`); 

    setImages([...images, ...result.data]));
};

Readme 업데이트

목적

Readme에 애플리케이션에 대한 설명과 정보를 추가한다.

작업 상세 내용

• 업데이트 내역
• 정보

참고사항

회원가입 View

목적

유저들이 회원가입 할 수 있는 페이지를 제작한다.

작업 상세 내용

• 이메일
• 패스워드
• 닉네임

참고사항

GlobalStyle 설정

• Font Color
• Font Family
• BackGround Color

마이페이지 제작

목적

내 글을 볼 수 있는 페이지를 제작한다.

작업 상세 내용

• 내 글 리스트
• 내 글 수정
• 내 글 삭제
• 팔로워
• 팔로잉
• 아바타
• 배경사진
• 마이페이지 편집

참고사항

사진 업로드 페이지 제작

목적

사진 업로드를 위한 페이지를 제작한다.

작업 상세 내용

• 제목
• 위치정보(카카오맵)
• 분위기 선택
• 광고
• 리뷰
• 평점
• Firestore 전송
• 사진 업로드 영역 (드래그 앤 드랍 후 사진 미리보기 미구현)

참고사항

게시글 디테일 페이지

목적

사진 클릭시 유저가 볼 수 있는 상세 페이지를 제작한다.

작업 상세 내용

• User Avatar
• 평점
• 카카오맵
• 지역
• 분위기
• 덧글
• 사진
• 신기해요
• 찜

참고사항

로그인페이지 제작

목적

회원가입을 위한 페이지를 제작한다.

작업 상세 내용

• 컴포넌트 배치
• 가입하기 누를시 회원가입페이지로 이동
• 소셜 미디어 배치
• 뒤로가기 버튼
• 구글 로그인
• 비밀번호 찾기
• 카카오 로그인
• 네이버 로그인
• 페이스북 로그인
• 이메일 패스워드 로그인

참고사항

회의 후 수정사항

목적

회의 후 디자인 수정에 따른 작업

작업 상세 내용

• Inner Container 제거한다.(전체 패딩)
• NavBar width와 그 밑 하단 Component들의 Width를 똑같이 한다.
• Banner 이미지에 그라데이션을 넣는다.
• BestPick Border를 Hover전과 Hover후에 같게한다.
• BestPick 속 메타데이터를 마우스 Hover 했을때만 보이게한다.
• NavBar에 지역 마우스 Hover 시 하단에 줄 생기게한다.
• 신기한 장소들의 사진 Column 수를 4줄에서 5줄로 변경한다.
• 신기한 장소들 사진 Hover 시 메타데이터를 보여준다.

참고사항

Home 화면 Grid 제작

목적

서비스를 위한 메인화면을 제작한다.

작업 상세 내용

• Grid 제작
• 사진 Hover 시 메타 데이터
• Infinite Scroll

참고사항