Tooravel - 에러 수정 2

Doodream·2021년 4월 7일

asset next js

Tooravel 프로젝트

목록 보기

5/6

배포 후 확인되는 에러들

tooravel 사이트를 배포 한 다음 기능상 화면상 에러나는 부분들을 정리해 보았다.

장바구니 수량 추가 제거 이벤트시 총 가격 수정 안됨
✅ 처음 가입시 이미지 깨짐
✅ 투레벨 소개 페이지 이미지 늘림
찾아오기 네이버 지도 페이지 안보임
후기 더보기 버튼 구현
✅ 리뷰 남길 때 이름이 보이지 않음
회원정보 수정시 바로 반영되지 않음

추가 구현 예정

커스텀 alert : 모달 커스텀으로 구현
반응형 웹 적용
채팅 봇 메시지 기능
검색어 메타 데이터 SEO 적용
MVC 디자인패턴 상세적용

❗️처음 가입시 이미지 깨짐

원인

처음 가입시 AuthProvider의 signUP 부분에서 기본 이미지를 삽입하게 되어있다.

const signUp = (data) => Fetch.post('/api/signup/', {
        'name': data.name,
        'email': data.email,
        'password': data.password,
        'image': 'https://lh3.googleusercontent.com/proxy/bHKea4QHqjImDZrvbdH18BrZNDwgsiv_MMw5kRjJivFax3-gzUE_VWPwhuHAiEoaLo3Qt0lVO2sQY9BDw745tuPNSxyKwiI4zezG4RuphUv1IXziDNXE-cC7HdmVpN5x4ZFle5PTp94lu3HGP704Jv5kRfybTZIu1lSgHnsROMHRS4wNbyJcDEb870DVTc2bgThdJLKSaZK2llSCvu6NCCXbW8H1liQoxAjbunL4OZmLJ8Cu_IeXHoi7umZRT_78lsMCxNjN4vY3f7CvjoOHEYpjNtM_AMnEQBGkLmrHQXq3hgjAu1rVVQlCN9CrdrQm5shapRNS9KobygWpnmmrXqd4hbmFHLs7LA'
    }).then(res => router.push('/account/login'));

여기에 삽입된 이미지자체가 깨짐 이미지라서 그렇다. 저렇게 외부에서 참조하는 형태는 좋지 않다. view 에서 로그인 정보에 image가 없다면 내부 이미지를 넣어 렌더링 하는 것이 좋겠다고 생각할 뻔 했다. 모든 view에서 로그인 정보의 image가 없다는 것을 참조해야한다. 따라서 기본 이미지는 서버에 저장해서 받는다.

https://tooravel.be/img/imgfile1617785497822.png
위 이미지는 백엔드 서버에 직접 저장된 이미지이다. 위 경로를 기본이미지로 입히면 원하는대로 될 것이다.

리뷰 댓글의 이미지는 기본 이미지를 항상 상상해야하는데.. , 헤더의 이미지,

생각해보니 클라이언트 내부의 이미지들은 참조 형태이다. 하지만 보완점으로 생각해보면 클라이언트에 삽입된 이미지들을 next js의 asset을 이용해서 내장 시켜놓는것이 이미지 로딩이 훨씬 용이할 것이다.

이 기회에 클라이언트에 이미지들을 참조하는 형태가 아니라 asset형태로 배포시 내부 빌드시켜버리는 것이 좋겠다.

❗️ next js의 에셋 설명 다큐먼트

Before

사용자 이미지가 깨진다.

after

서버에 기본이미지를 저장후 회원가입시 기본 이미지로 넣어서 수정되었다.

const signUp = (data) => Fetch.post('/api/signup/', {
        'name': data.name,
        'email': data.email,
        'password': data.password,
        'image': 'https://tooravel.be/img/imgfile1617785497822.png'
    }).then(res => router.push('/account/login'));

서버에 이미지를 저장하고 해당 이미지를 참조 하도록 했다.

assets 적용전

{
        image: 'https://s3.ap-northeast-2.amazonaws.com/tooravel/rent/item/rent_gopro_sub_7.png',
        title: '헤드스트랩',
        description: '머리에 장착하여 내가 원하는 가장 완벽한 각도로 촬영해보세요. 내부 실리콘 재질은 미끄럼을 방지해준답니다.',
        price: 1000,
        quantity: 0,
    },

위와 같이 https:~ 형태로 다른 서버에 접속해서 이미지를 가져왔다. 당연히 클라이언트 서버 내부에서 가져오는 것보다 시간이 오래 걸린다.

assets 적용후

{
        image: '/product/헤드스트랩.png',
        title: '헤드스트랩',
        description: '머리에 장착하여 내가 원하는 가장 완벽한 각도로 촬영해보세요. 내부 실리콘 재질은 미끄럼을 방지해준답니다.',
        price: 1000,
        quantity: 0,
    },

클라이언트 내부 /public/product/... 의 경로에서 이미지를 가져와서 이미지로딩이 훨씬 빠르다.

// 어플리케이션에 사용되는 정적 파일들
public
├── image
├── css
└── video

// 어플리케이션의 기능에 사용되는 소스들
src
├── component // 컴포넌트와 컨테이너 파일들
│ ├── common // 공통적으로 사용되는 컴포넌트들(ex button, modal)
│ └── layout // 각 페이지들의 전체 레이아웃이자 컴포넌트들의 모임
│ ├── app
│ ├── home
│ └── directory
│
│
├── pages // 페이지를 담당하는 컴포넌트(폴더구조로 url 결정)
│ └── [id]
│
├── core
│ ├── config // 어플리케이션에서 사용되는 설정들 모임
│ ├── provider
│ │ ├── helper // store를 이용하는 공통 로직들 정리
│ │ └── provider // store의 값들을 컨테이너에게 전달해 줌
│ ├── redux // Ducks 패턴으로 redux를 정의
│ └── api // axios를 이용하여 서버와의 통신 로직을 담당
│
└── util
├── hooks // 각 컴포넌트에서 사용되는 공통 로직들을 커스텀 훅으로 관리
└── reduxUtils // redux ducks 패턴에서 사용되는 유틸함수