코딩일지 218

20221219 TIL

오늘의 한 일 최종 프로젝트 - EC2, S3 환경 배포 트러블슈팅 Docker compose를 이용해 이미지를 빌드하던 도중에 작업이 넘어가지 않는 문제 발생 참조 : https://stackoverflow.com/questions/63171780/building-python-wheel-via-docker-compose-on-aws-ec2-gets-stuck Building python wheel via docker-compose on AWS EC2 gets stuck I have a docker container that builds fine on my laptop (iOS) and my PC (Ubuntu 20.4). I am trying to build it on AWS EC2 instance(U..

221218 WIL

이번주 한 일 최종 프로젝트 최종 프로젝트 - 프론트, 백엔드 s3 환경 프론트엔드 배포 http://petso.tk/ petso.tk petso.tk S3를 이용해 정적호스팅으로 프론트엔드 배포는 완료 freenom에서 무료로 구매한 도메인을 사용하는 중인데 https 설정을 어떻게 인증받아야하는지 모르겠다.. 일단 백엔드 연결부터 하고 고려해야할 사안같음 Troubleshooting 배포에서 문제 굉장히 많이 겪는중..

20221216 TIL

오늘의 한 일 최종 프로젝트 - 페이지네이션바, 유저 프로필, 마이프로필 - 북마크 모아보기, 펫 프로필 페이지네이션 바 참조 : https://min-kyung.tistory.com/30 [Javascript] 페이지네이션 구현하기 To do list 페이지네이션 구현 json-server를 활용해서 페이지네이션 구현하겠습니다 json-server: https://github.com/typicode/json-server 페이지네이션을 구현하기 위한 설정값은 총 4개가 필요합니다 currentPage: min-kyung.tistory.com main.js window.onload = async function loadArticleList() { viewset = await getArticleswithPa..

20221215 TIL

오늘의 한 일 최종 프로젝트 - 중간발표 중간 발표 시연 영상 - https://www.youtube.com/watch?v=MLs9ZU12dwo 만들고 보니까 비는 파트들이 많네; 빠릿하게 펫프로필페이지랑 북마크 페이지 만들고 다른 팀원들 개선점 합쳐서 배포쪽 들어가보면 될듯싶다 인상깊게 본 팀 - 배포완료, 글쓰기 창 구현에 텍스트 에디터 사용 와 벌써 배포까지 완료한 팀도 있네 ㄷㄷ; aws 크레딧 신청이 계속 반려되서 실습에 부담이 있어 진행이 더뎠다고 생각되는데 반성하게됩니다.. 참조 : https://ckeditor.com/ WYSIWYG HTML Editor with Collaborative Rich Text Editing Rock-solid, Free WYSIWYG Editor with Co..

20221214 TIL

오늘의 한 일 최종 프로젝트 - 중간발표 준비, aws 배포 공부 중간발표 준비 css작업 이후에 작동되지 않는 자바스크립트 부분들 다시 수정 부트캠프 들어오고 처음 배울때부터 생각했던거지만 대부분의 오류는 오탈자라고 보면 되는것같다 ㅋㅋ 메인 페이지 준비되는대로 시연영상 촬영 예정 AWS 배포 백엔드부분 ec2 - docker-compose 이용해 nginx - gunicorn - postgresql 연동해 도메인 연결 및 https 적용 프론트엔드 부분 s3 - 클라우드 컨트롤 이용해 https 적용, 라우터 53 사용해 도메인 연결 백엔드 settings.py cors 설정에 프론트엔드, 백엔드 도메인 추가 프론트엔드 api.js - const back_end_url, front_end_url 로컬..

20221213 TIL

오늘의 한 일 최종 프로젝트 - ec2 배포 공부 nginx - gunicorn - postgresql AWS 크레딧 배포 관련 참조 : 도커 실무 강의, AWS 강의 백엔드 부분을 docker-compose를 활용해 nginx, gunicorn, postgresql을 백엔드 프로젝트에 연동시켜서 돌리는건 이해가 가는데 결국 우리 프로젝트를 실제로 ec2환경에 올려서 작동시켜야하는데 프론트엔드를 어떻게 연동시키는건지 잘 감이 안잡힌다.. S3에 올려서 도메인과 연동시키면 되는건가? 이러면 cors 설정은 어떻게 적용시켜야 하는거지? 복습하면서 본 이 구조대로면 원래 nginx쪽에 프론트엔드 파일이 들어가는게 맞지않나 하는데 뭔가 감이 전혀 안잡힌다.. 참조 : https://docs.aws.amazon...

20221212 TIL

오늘의 한 일 최종 프로젝트 - 도커 공부, 페이지네이션(백엔드, 프론트엔드), search, aws포인트 신청 Docker 저번 프로젝트때도 팀원분들이 ec2환경에서 프로젝트를 배포하려고 시도했다가 잘 안됐다는 얘기를 들었는데, yolo나 스타일변환같은 머신러닝 모델을 돌리면서 필요한 Pytorch라던가 tensorflow 등을 돌리려면 도커 이미지 파일을 더 신경써서 써야 하는것 같다. 도커 허브에서 yolov5를 검색해보니 이미지 결과가 나오긴 하는데 얘를 가져다 쓰면 되려나? 일단 aws 포인트 신청부터 확정이 나면 실험해보겠는데.. AWS 크레딧 신청 없는 말주변에 최대한 불려가면서 설명 쓰는중.. 왜 안되는건데 흑흑 Pagination 백엔드부분과 프론트 일부분도 이전 유화 프로젝트때 써보았으..

20221211 WIL

이번주 한 일 최종 프로젝트 사물인식 모델 학습 소셜 로그인 자바스크립트 - 네비게이션 바 분리 및 기타등등 소셜 로그인 관련 도대체 소셜로그인 콜백데이터를 프론트엔드에서 어떻게 다룰 수 있을까 고민하다가 리다이렉트URI를 백엔드가 아닌 프론트엔드 부분으로 보내는 방법을 사용 GOOGLE_CALLBACK_URI = 'http://127.0.0.1:5500/templates/login.html' login.html 페이지로 콜백URI를 보내 code를 담도록 만들었다 user.js // 구글 로그인 연습중 async function handlegoogle() { let code = new URL(window.location.href).searchParams.get('code') if (code) { con..

20221209 TIL

오늘의 한 일 최종프로젝트 - 프로필페이지, 수정페이지 연동 / 네비게이션 바 분리 프로필 페이지(myprofile, petprofile), 수정페이지 연결 네비게이션 바 분리 트러블슈팅 TypeError: Cannot read properties of null (reading 'value') getElementById().value를 통해 변수를 지정하려 했는데 자바스크립트가 html보다 먼저 로딩되거나 모종의 이유로 정보를 가져올 수 없을 때 나오는 에러. 이번 경우에는 다행히도 id의 오타로 일어난 헤프닝이여서 금방 해결할 수 있었다 TypeError: Cannot set properties of null (setting 'innerText') 네비게이션 바 분리 도중 로드되지 않은 네비게이션 ht..

20221208 TIL

오늘의 한 일 최종 프로젝트 - 프론트엔드 연결(JS), 소셜 로그인 관련 프론트엔드 연결 이전 유화 프로젝트때 했던 자바스크립트 방식으로 각 페이지에 CRUD 설정을 보내고 받아온 json형태의 response를 원하는대로 조리해서 띄우는 것은 동일했다. 이제 요청을 보내고 받은 데이터를 이용하는건 자연스러워졌는데 역시나 html쪽 css의 문제가.. 데코가 제일어려워 소셜 로그인 관련 소셜 로그인 마지막에 받아오는 access_token과 refresh_token을 우리가 사용하는 방식으로 어떻게 로그인에 사용할 수 있을까 고민하다가 강민철 튜터님께 상의를 드렸다. 우리가 지금 사용하고 있는 로그인 형식은 simpleJWT를 이용하는 백엔드 주소에 자바스크립트로 이메일과 비밀번호로 post 요청을 보..