컴굥일지

대망의 프로젝트 마지막 날이 되었다. 첫날과 다른 장소에 모이게 되었지만, 집에서 약간은 더 가까워졌기 때문에 오히려 좋았다. 새벽까지 ppt를 만들고 발표 대본을 쓰느라 2시간 자고 서울을 나가야 했다. 도착해보니 다른 팀원들도 거의 밤을 새다시피 하고 왔더라 ㅎㅎ 5주간의 프로젝트를 마치고, 모든 팀이 자신들의 결과물을 보여주는 발표가 진행됐다. 당연하게도 4주차 발표때보다 다들 많이 발전해서 왔다. 우리 팀은 마지막에서 두번째로 발표했는데, 그래서 그런지 더 많이 떨렸던 것 같다. 발표에 반응형 화면을 보여주기 위해 gif도 넣고, 전반적인 흐름을 보여주기 위해 시연영상도 넣었는데, 이 결정이 우리 팀의 결과물을 효과적으로 보여주는 것 같아서 좋았다. 발표 자료 링크: https://www.canv..

오늘에서야 백엔드 배포가 되었다. 계획보다 좀 늦어지기는 했지만, 발표 전에 완료되어서 정말 다행이었다. 하지만, 배포를 하고 정식으로 테스트를 해보면서 프론트 쪽에 에러가 있었다는 것을 알게 되었다. 하하하.... 발표 전날에 저런 에러를 맞닥뜨리니 사람이 되게 초조해졌다. 에러가 나는 부분을 찾아보니, waiting화면에서 크롬의 공룡 게임 부분이 저런 에러를 발생시키고 있었다. 저 에러를 해결하기 위해 엄청난 구글링을 했지만... 내가 할 수 있는 것은 없었다. 나는 크롬 공룡 게임을 리액트에서 사용하기 위해, react-chrome-dino 라이브러리를 설치해서 사용했었다. 사용하기에 매우 간단하지만, 내가 수정할 수 있는 부분이 없어서 자유도가 떨어졌다. 즉, 위에서 만난 에러를 내 힘으로 해결..

어제 프론트엔드를 배포하고 나서, 약간의 수정사항이 발생했다. 백엔드와 axios로 통신할 때 필드 이름이 약간 안 맞아서 수정을 했고, 프론트는 https인데 백은 http라서 연결에 문제가 있다고 에러가 나서 수정을 했다. 위 에러는 생각보다 되게 쉽게 해결할 수 있었다. index.html의 head 부분에 아래 코드를 삽입하면 된다. 그러나 이 코드는 그리 좋은 방법은 아닌 것 같다. https 사이트에서 http와 통신하는 것은 권장되지 않기 때문이다. https를 사용하여 보안환경을 만들어도, http를 통해 https 보안 규칙을 위반한 채 침입할 수 있기 때문이다. 이걸 해결하려면 백엔드 쪽에서 https로 배포를 했어야 하는 것 같은데 지금 그걸 하기에는 시간이 부족해서 그냥 위 코드로 ..

오늘은 프론트엔드 배포를 진행해보았다. 예전에 프론트엔드를 맡아봤던 팀원의 조언으로 Netlify라는 플랫폼을 통해 배포를 진행해보았다. https://velog.io/@ksmfou98/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Netlify%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 React 프로젝트 Netlify에 배포하기 오늘은 React 프로젝트를 Netlify 에 배포하는 방법을 알아보자 !🙄프로젝트를 배포하기 위해서는 우선 Netlify의 계정이 있어야 하고, 해당 프로젝트가 Github repository에 올라와 있어야 한다.로그인 velog.io 위 링크를 참고하여 배포를 진행했다. CLI를 쓸 것도 없이 매우 쉽..

백엔드에서 이미지 링크를 보내줄 때, 아래와 같은 url로 보내줬다. /media/user_images/%EC%9D%B4%EB%AF%B8%EC%A7%801_l94F02q.jpg 나는 리액트에서 이미지 다운로드를 a태그를 통해 구현하고 있었는데, 위와 같은 링크는 다운로드가 안되고 그저 새 탭에서 열리기만 했다. 이 문제를 해결하기 위해 열심히 구글링을 해보았으나, 저 url로는 도저히 다운로드를 할 방법을 찾지 못했다. url을 고치지 않고서는 다운로드할 방법이 없다면, url을 바꿔버리면 된다. 예전에 Base64 이미지 링크였을 때는 문제없이 다운로드가 되었던 기억이 떠올랐다. 그래서 나는 저 링크로 사진을 불러와서, canvas에 사진을 그리고, 그다음에 그 canvas를 base64로 인코딩하여 ..

어제 폴더 구조를 세팅하고, 오늘부터 프론트엔드 개발을 시작하기로 했다. Figma로 구성한 UI를 바탕으로, 전체적으로 페이지 파일을 만들었다. CarryCARI는 총 5개의 페이지가 있는데, 이 페이지들을 이동할 수 있도록 route 설정을 해주었다. 폰트도 3가지 종류를 사용해서, 이 부분도 css에 설정을 해주었다. 초반이라 여기 저기에서 긁어오는 코드가 많은 것 같다 ㅎㅎ

오늘은 프론트엔드 세미나를 보면서, 폴더 디렉토리를 어떻게 짜는지를 공부했다. 리액트가 처음이라 구조를 어떻게 해야할 지 고민이 많았다. 4-1학기 HCI 수업을 들으면서 React-Native를 약간 다뤄봤었는데, 이때 했던 프로젝트의 구조를 조금 참고했다. 사진을 담아두는 assets은 따로 두고, 여러 곳에서 쓰이는 공통적인 내용들은 utils에 넣었다. (색깔 팔레트 같은 것들...) 큰 페이지들은 pages에, 그 안에 들어가는 요소들은 components에 넣기로 했다.

어제에 이어서 계속 강의를 들으면 react를 공부했다. 초반에는 그냥 쉽게 따라갔는데, useEffect나 Memo? 이런 것이 나오면서 정리가 제대로 안 되었는지 헷갈리기 시작했다. 나뿐만 아니라 다른 팀원들도 백엔드 강의 듣고, AI 모델 성능 체크하고 다들 바쁜 것 같다.

내가 Frontend를 맡았기 때문에 React를 공부하기 시작했다. 인컴상 수업을 통해 React Native는 아주 살짝 다뤄봤었는데, 그때 아무것도 모르고 그냥 코드를 짰었어서 좀 아쉬웠다. React는 Udemy에 있는 강의를 보면서 공부하기로 했다. 졸프를 같이한 팀원한테 추천받은 강의인데, 초반 부분을 들어보니 지루하지 않고 이해가 잘 되는 것 같다. https://www.udemy.com/course/winterlood-react-basic/ 한입 크기로 잘라 먹는 리액트(React.js) [2022 최신 React 강의] 실전 프로젝트 감정일기를 만들며 배우는 리액트(React) www.udemy.com 마크다운 형식으로 그냥 정리하며 듣고 있는데, 코드 쓰는 게 늘어나니까 정리하기가 힘드..

일요일이기는 하지만 TA님이 특강을 하셔서 오늘도 일찍 일어났다. 특강의 주제는 프론트 + 백 + AI 프로젝트 만들기였다. 개발은 프론트,백,AI 모두 따로 이루어지고, 나중에 이를 연결하게 된다. 원활한 팀 프로젝트를 위해 예제 특강을 해주신 것 같다. 특강에서 어떻게 프론트랑 백을 연결하는지를 미리 알아두면 좋다고 조언해주셨다. 특강이 끝나고 React랑 Django를 로컬에서 연결하는 방법을 찾아봤다. 어려울 줄 알았는데 생각보다 되게 쉬웠다. https://this-programmer.tistory.com/135 간단한 react JS + Django 어플리케이션 만들기 간단한 react JS + Django 어플리케이션 만들기 일단 프로젝트를 시작하기 전에 서론이 길다. react와 djang..