06.22. 최종 프로젝트 / 프론트 배포 및 백엔드 배포 수정

화요일 완성을 목표로 잡았으나, 목요일(오늘) 도 완성이 되지 않았다. 

화요일부터 계속해서 진행 상태를 체크하였으며 자잘한 오류들을 수정하고, 팀원분들 지원사격에 힘을 쏟았다. 

✅ 오늘 한 일 

전체 취합 ✔️

전체 테스트 ✔️

작업상황 파악 및 정리 (완료, 미완료 페이지 확인 / 트러블슈팅) ✔️

프론트 배포 ✔️

백엔드 배포 준비 ...ing

프론트 & 백엔드 연결

✅ 프론트 배포 (Netlify)

현재 백엔드와 연결은 되지 않은 상태이다.

사용자 피드백이 지나고 발표 전에 S3로 다시 배포해볼 예정이다.

https://gwolnadri.netlify.app/

궐나드리 : 궁궐 관람 및 한복 예약

프론트 배포를 위한 수정

1. html 파일 전부 assets > doc 로 이동. (index는 제외) ✔️
2. html에서 script 위치와 css 위치 수정 ✔️
3. 이미지, 파일을 불러오는 경로를 모두 절대경로로 수정 ✔️ : 절대경로란? / 로 시작한다. 
4. 풋 아이콘이 늘 하단에 위치하도록 변경 ✔️
5. 풋 아이콘 컴포넌트화 ✔️
6. 각 html 별로 상단의 로고 또는 화살표 들어가는 header(nav) 가 다르다. 이를 깔끔하게 정리하고, 제대로 위치하고 작동할 수 있도록 했다. (html, css, js 모두 수정) ✔️
   
   
7. 궐나드리 body에 각자의 wrap에 margin bottom 속성을 주어 하단 풋 아이콘으로 인해 가려지는 부분을 방지하고자 했다. ✔️
8. 프론트 환경변수 완벽하지 않으므로 확인 꼭 해야한다!!  참고 >

scroll 이벤트와 scrollTop 함수를 이용하여 스크롤 값을 받아와서 진행해본 작업.

깔끔한 UX를 위해 이 기능은 사라졌지만, 블로그에 남겨본다.

// 스크롤 시 네비바 색상 변경 및 main-page 높이 축소
const scroll_body = document.querySelector("#Gwolnadri-body");

document.querySelector('#Gwolnadri-body').addEventListener('scroll', (e) => {
    let y = scroll_body.scrollTop

    if (y > 5) {
        document.querySelector('.header').classList.add('on')
        document.querySelector('.main-page .image').style.transition = 'height 0.6s'
        document.querySelector('.main-page .image').style.height = '400px'

    }
    else if (y < 5) {
        document.querySelector('.header').classList.remove('on')
        document.querySelector('.main-page .image').style.height = '600px'
    }
});

 

✅ 백엔드 배포 준비 (AWS EC2)

배포 준비중에도 수시로 변경되고 있어서 배포 준비를 하다가 함께 완성을 하기위해 작업을 진행하였다.

프로젝트 파일 다시 clone 하기

스크랩(크롤링) 파일을 서버가 시작될 때 실행되도록 설정하기

환경변수 설정 (이전 장고 secret key는 장고 프로젝트 내부의 .env를 사용하였으며 db는 우분투의 상위의 .env를 사용했는데 문제없이 잘 연결했다.)

소셜로그인, 결제, 지도와 같은 API 연결 신경쓰기

참고 > 

 

 

✅ 알게된 점

1. getelementsbyclassname 보다는 documentqueryselector로 잡아오는 것이 확실하다.
elements이기 때문에 id나 class가 어딘가에서 겹치면 무조건 오류가 생긴다.

2. serializer에 없는데 blank=true처리가 되어서 필드에 대한 오류가 뜨지 않고 자동적으로 null 값으로 들어가버렸다. (serializer에 image가 없었음에도 포스트맨으로 테스트 시 폼데이터에 image값을 넣어도 정상적으로 보내졌다. 다만 이미지가 무조건 null값으로 들어가고, db에도, 미디어 파일에도 저장이 되지 않았다.)

3. payload에 담는 것에 대해서
# database 정보
# SECRET_KEY

4. url에 int:user_id 가 없어서 
페이지를 그려줄 때 serializer에 id가 있어야 한다(쓴 사람의 id)
payload(토큰) 에 잇는 로그인한 사람의 id와 비교하면 된다.

5.     entrypoint: sh -c "python manage.py collectstatic --no-input && python manage.py migrate && gunicorn drf_project.wsgi --workers=5 -b 0.0.0.0:8000"


6. git commit --amend
git push --force origin <브랜치이름>


4. profile.html
profile-page 에 커서 깜빡감빡 (완) - 내 컴퓨터 설정>접근성의 텍스트 커서로 페이지 탐색이 켜져 있었다.