2021-06-04 TIL - 짤해 프로젝트 완성

2021-06-04 TIL

• 오늘 한 것

  1. 짤해 프로젝트 짤주머니 삭제 기능, 버튼들 기능 전부 구현, 배포 - 짤 위에 버튼을 얹고 싶었지만 antd의 태그를 div로 감싸는 순간 css가 무너지고 말았다. 이쁘진 않더라도 그 옆에 그냥 배치하기로 했다. 삭제 버튼을 누르면 짤 주머니에서 짤이 삭제되는데 먼저, firebase에서 만든 유니크한 key값이 필요했다. 처음에 db에서 데이터를 받아 뿌려줄때 이 key값도 같이 저장을 해놓고 버튼이 눌린 해당 element의 onClick 이벤트에 이 key값을 넣어 db에서 삭제하는데 성공했다. 그러고 화면에서도 이미지가 삭제되어야하는데 남아있는 이미지들의 key값과 삭제된 key값이 같지 않은 녀석들을 filter로 걸러내어 구현했다. 기능들은 얼추 만들어서 배포를 하기 전에 env 환경변수부터 설정했다. 지금까지 dev.js에 const 값으로 넣어서 사용했는데 process.env로 환경변수를 꺼내는 식으로 바꾸었다. (처음부터 그렇게 할껄..) 문제는 여기서부터 시작이었다. 배포 후 망가진 기능들을 보수하는데 거의 시간을 다 보냈다. http 환경에서 작업한 탓에 https와 같이 사용할 수 없었다. cloudinary에 인증되지 않은 사용자로 업로드를 해서 그런가하고 자료를 찾아봤지만 잘 나오지 않고 심지어 공식문서도 형편없었다. 여기서 한 가지 꼼수를 부려서 http:// 던 https:// 던 // 만 쓰면 환경에 맞춰서 알아서 프로토콜이 지정되는 성질(?)을 이용하기로 했다. 이미지를 호스팅 서버에 올리면 무조건 http:// 로 반환되는데 substring으로 그냥 슬래시 전까지 짤라버렸다. 그렇게 하고 다시 배포를 하니 잘만 돌아간다.
  2. 리액트 tutorial 프로젝트 - infinite scroll 토이 프로젝트를 후딱 만들고 이를 짤해 프로젝트에 적용하기로 했다. 방식은 intersectionObserver도 아니고 react-virtualized도 아닌 scroll event 형식이었지만… 일단 앱이 돌아가게끔 만드는게 최우선이었다.

• 내일 할 것
  1. 짤해 프로젝트 - 최종점검
  2. 리액트 tutorial 프로젝트
  3. 포트폴리오 제작

• 끝으로

급하게 포트폴리오를 만들어야할 일이 생겼다. 취준하려면 어차피 만들어야하는거 이 기회에 제대로 만들어놓아야겠다.

오늘의 한 줄 총평 : 무시무시한 CORS