항해99_WIL 이따금씩 TIL
-
항해99 11주차(2021.5.24-5.28) WIL : 5주 과정 실전프로젝트 5주차, 끝없는 버그 사냥, 마케팅과 피드백, 협력사들 앞에서 발표회항해99_WIL 이따금씩 TIL 2021. 6. 7. 18:34
이번주는 대망의 마지막주! 이번주의 이벤트는 크게 세가지다. 1. 끊임없는 버그 잡기 2. 홍보/마케팅, 그리고 사용자들에게서 받은 피드백을 반영해 수정하고 재배포하기 3. 드디어 마지막 일정 : 협력사 사람들 앞에서 발표회! 1. 끊임없는 버그 사냥 버그는 끊임없이 튀어 나왔다. 지도를 확대하는 버튼이 실은 축소하는 버튼이었다던가, 상세게시물 모달창의 수정을 눌렀더니 하얀 화면이 나오면서 오류가 나오고 먹통이 되는 등(원인은 그 버튼에 콜백함수를 올바르지 않은걸 연결해놔서) 수도 없이 많은 버그가 튀어 나오고 잡으러 다녔다. 버그는 프론트엔드는 물론이고 백엔드분들도 수시로 연락해서 버그 나왔다고 신고를 해주셨다. 역시 초짜들에겐 버그란 피할 수 없는 존재, 처음부터 코드를 잘 만지라고 짚어주는 친구로 ..
-
항해99 11주차(2021.5.17-5.23) WIL : 5주 과정 실전프로젝트 4주차, https로 배포하기.항해99_WIL 이따금씩 TIL 2021. 6. 7. 00:08
지난주까지 최소한으로 목표했던 기능들은 구현했으니, 버그를 잡고 추가 기능들을 덧붙이는 작업들을 했다. 그리고 드디어 https 도메인으로 배포하기까지 했다. 하지만, https로 배포하기까지는 여러 삽질이 동반된 장대한 여정이 필요지만, 알고나니 15분컷으로 바뀌었다. https 배포 : 모르면 삽질 5시간, 알면 15분컷으로 끝 https로 배포하게 된 이유는 크게 두가지이다. 1. html5부터 쓸 수 있게 된 geolocation으로 접속한 위치를 지도상에 표시하고, 접속한 위치로 이동시키는 기능을 구현해 놓았는데, 이걸 쓸 수 있으려면 보안문제로 인해서 https에서만 사용이 가능하다. 2. 이 사이트는 https 도메인을 씀으로써 사용자들에게 보안상 안전함을 알려주기 위해서다. https 도메..
-
항해99 81일차 TIL : https로 배포하기(feat. AWS SSL 인증, ACM, 아마존 클라우드 프론트)항해99_WIL 이따금씩 TIL 2021. 5. 21. 03:46
이번 실전프로젝트로 개발한 서비스를 배포하기에 앞서, 프론트엔드와 백엔드는 https로 배포하기로 합의했다. 왜 굳이 https로 배포하기로 했냐면 http로 하면 보안이 취약하니 https로 보안성을 올리려고 https에서만 쓸 수 있는 geolocation(현재 접속 위치의 위도 경도 좌표를 알려준다) 기능을 쓰기 위해 https가 있어보이니까 이러했다. 이 원대한 포부를 이루기 위해서는 장장 5시간의 화려한 대삽질이 필요했다. 다시는 나와 같은 불행한 개발자 지망생이 나오지 않길 바라는 마음으로, 15분컷으로 끝내는 https 도메인 등록 방법을 알려주겠다. 이 글은 프론트엔드가 https 도메인을 등록하는 방법을 소개하는 글이므로, 백엔드 https 도메인을 등록하는 방법은 다른 블로그를 찾아주세..
-
항해99 11주차(2021.5.10-5.16) WIL : 5주 과정 실전프로젝트 3주차, 어찌어찌 해내는 지도상 기능 구현, 가배포항해99_WIL 이따금씩 TIL 2021. 5. 16. 20:26
이번주는 1. 지도페이지에 접속시 서버와 연결해서 데이터 받고 그걸로 마커 띄우기 2. 정식배포에 앞서 가배포해서 서비스가 구현된 정도를 보여주기. 이 두가지를 목표로 작업을 진행했다. 1. 지도페이지 이야기 지도에서는 무조건!! 이렇게 페이지가 로드되면 마커도 같이 떠야 한다. 그래야 사용자들이 서비스가 사용되고 있다는 걸 알 수 있고 자기도 하고 싶은 마음이 생기기 때문이다. 그러나, 되지 않았다. 지도페이지가 로드되면 마커는 다음처럼 뜨지 않았다. 이렇게 나오니, 사용자들이 어 이거 휑하네? (구려서, 아직 서비스 시작 안 했나보다 등등의 이유로) 사용자들이 아직 없나보다 하고 pass 할 가능성이 높으므로 있어서는 안 될일이었다. 이 문제를 해결하기 위해서 useEffect안의 마커관련 코드들을 ..
-
항해99 75일차 TIL : 지도가 로드될 때, 마커는 바로 뜨지 않는 문제 해결(feat. useEffect)항해99_WIL 이따금씩 TIL 2021. 5. 15. 12:20
오래도록 해결 되지 않은 심각한 문제 : 마커가 바로 뜨지 않는다. 우리조가 개발중인 프로젝트에서는 지도가 로드 되고 마커도 바로 뜨게 해야 하지만, 지도는 로드 되는데 마커는 바로 뜨지 않고, 카테고리의 버튼을 클릭해야 그제서야 마커가 뜨는 문제점이 있었다. 분명 마커 관련 데이터는 서버에서 받아오는데, 그 데이터를 읽고 마커를 올리지 않는 것 같았다. 이 문제는 사용자들에게 처음부터 마커를 보여줘야 한다는 점에서 반드시 해결해야 하는 문제였다. 이렇게 카테고리를 클릭해야 그제서야 마커가 떴다. 그렇다면 데이터는 서버에서 제대로 받아 오는게 맞는데, 처음 페이지가 로드되거나 새로고침 될 때 처음에는 데이터를 갖고 마커를 띄우는 코드가 작동하지 않는다는 것이다. 다만 카테고리 버튼을 눌러야 비로소 코드가..
-
항해99 66일차 TIL : 프로젝트를 진행하면서 깨친 useState의 필요성&유용함 (feat. useState로 변수를 전역으로 관리하기)항해99_WIL 이따금씩 TIL 2021. 5. 9. 15:58
useState, 그 굉장한 유용성. useState라는 리액트 훅은 여러 리액트 훅들 중에서 가장 많이 쓰이는 친구인것 같다. 데이터를 다뤄야 하는 컴포넌트라면 거의 빠지지 않고 등장한다. 그만큼 유용하다는 뜻이다. 그렇지만 아직까지 얼마나 다양한 목적으로 쓰일 수 있는지는 이번주에 우리 실전프로젝트의 여러 코드들을 작성하거나 분석하면서 깨닫게 되었다. useState의 유용성을 깨우친 계기 먼저 아래 코드들을 보자 먼저 이렇게 쓰려는 변수들을 useState를 이용해 할당할 수 있게 설정해 놓았다. 위의 코드에서 118번줄부터 시작하는 geoLocation 함수는 현재 접속한 위치의 위도 경도 좌표를 받아 내는 역할을 한다. 저 위도와 경도값을 알면 현위치를 중심으로 하는 지도가 로드되게 할 수 있다..
-
항해99 60일차 TIL : 지도 API 검색에서 나타나는 400에러 문제 해결법 (feat. query)항해99_WIL 이따금씩 TIL 2021. 5. 9. 15:56
카카오 지도 API를 이용해서 검색 기능을 넣을 때, 다음과 같은 문제가 개발자도구의 콘솔창에 찍혔다. 검색에는 문제는 없지만, 그래도 찜찜해서 이 문제를 해결하고 싶어졌다. 백엔드 분들에게 물어봐도 모르고, 나도 구글링을 해봐도 알 수 없었다. 콘솔창에 나온 저 URL을 검색창에 입력하면 아래와 같이 나왔다. 이걸로도 검색을 해봤는데, query 문제라고 하고 해결하는 코드도 있었다. 하지만 내가 작성한 검색 코드에 그 해결하는 코드를 입력할 수는 없어보였다. 그래서 튜터님에게 물어봤더니, 저 콘솔창에 나오는 URL에 query에 아무것도 입력이 안 된 것이 문제로 보인다고 하셨다. 이 말씀에 나도 나름 추측을 해봤는데, query는 검색해보니 '데이터베이스에 질문을 해서 정보를 요청함'이라고 나왔다...
-
항해99 10주차(2021.5.3-5.9) WIL : 5주 과정 실전프로젝트 2주차, 지도API를 점점 더 잘 다루게 되기, 리액트 사용법 더 잘 익히기항해99_WIL 이따금씩 TIL 2021. 5. 9. 14:58
이번 실전프로젝트 2주차에는 크게 '지도 위의 커스텀오버레이 띄우기'와 '카테고리 종류별로 마커 띄우기'를 구현했다. 1. 지도위에 커스텀오버레이 올리기 커스텀오버레이는 다음과 같은 것이다. apis.map.kakao.com/web/sample/customOverlay2/ 이렇게 지도상의 원하는 위치에 게시물을 올리는 것을 커스텀오버레이라고 한다. 나도 이렇게 구현을 했는데, 우리 경우에는 사진과 장소 이름을 같이 나오게 하는 커스텀오버레이를 만드는 것이다. 결과물을 보자. 굿!!!!!!!! 하지만 문제가 있다. 이 코드는 커스텀오버레이를 만든 코드다. 그런데 여기서는 커스텀오버레이를 순수 HTML로 만들고, 그것을 string으로 만들어서 content 변수에 할당하고 있다. 다시말해 리액트 환경이라 ..