Final Project DevLog 6

Churro.·2022년 2월 24일

Devlog project

DevLog 👩🏻‍💻 software engineering bootcamp

목록 보기

50/63

0. 우선순위

First Project에서 게시판 형태의 웹을 만들었던지라, 글 post, edit, delete 정도는 이미 구현이 되어있기 때문에
비교적 시간 많은 초반에(2주차~3주차) 새 기능 개발에 주력하기 !

새롭게 개발할 기능 : 실시간 비디오콜, 실시간 채팅, 사진/비디오 업로드, 홈 배너 애니메이션과 preview 기능

다만, 막상 코드를 짜다 보면 우선순위에 따른 시간 배분을 잘 못하게 되는 경험을 했다. 그래서 우리 팀은 KPT 회고시간에 항상 우선순위를 리마인드하고 진행상황 공유 시 서로간 주요 업무 체크타임을 가지고 있다.

1. [Error] node_modules/path-to-regexp

server/node_modules/path-to-regexp/index.js:63
  path = ('^' + path + (strict ? '' : path[path.length - 1] === '/' ? '?' : '/?'))
                                                ^

TypeError: Cannot read properties of undefined (reading 'length')
    at pathtoRegexp 
    (/Users/Desktop/codestates/server/node_modules/path-to-regexp/index.js:63:49)
    at new Layer (/Users/Desktop/codestates/server/node_modules/express/lib/router/layer.js:45:17)
    at Function.route (/Users/Desktop/codestates/server/node_modules/express/lib/router/index.js:500:15)
    at Function.proto.<computed> [as post] (/Users/Desktop/codestates/server/node_modules/express/lib/router/index.js:515:22)
    at Object.<anonymous> (/Users/Desktop/codestates/server/routes/uploadImg.js:24:8)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

라우터 경로를 잘못 설정해줘서 나타나는 에러이다.
나의 경우엔 server/routes/profile.js에 router.post(); 라고 맨 밑에 쓰다 만 코드가 있던 게 에러의 원인이 되었다.
axios로 post 보낼 때 괄호 안에 인자 없이 그냥 app.post() 또는 router.post() 형태로 쓸 수는 없기 때문.
해당 부분을 주석처리하여 해결했다.

전날에는 잘 작동했는데, 갑자기 안돼서 (서버 측 배포과정에서 http -> https 설정하는 시기라 이런저런 변동이 많았다) 배포 서버가 계속 건드려져서 생긴 에러인줄 알고, 심각한 얼굴로 백엔드 팀원에게 공유했지만 큰 문제는 아니여서 다행이었다.

참고 : https://stackoverflow.com/questions/52833169/path-to-regexp-throws-typeerror-cannot-read-property-length-of-undefined
https://zereight.tistory.com/376

2. http -> https 배포 과정

1차적으로 http로 배포 with AWS.
완료 시 http://s3.amazonnews.northeast-pacific-ohio어쩌구 같은 주소가 생긴다. (S3 bucket 사용)
2차적으로 https 배포를 하고 싶다면 도메인 등록을 해줘야 한다. https 배포는 로그인 기능 구현 위해 필수적인데, 그 이유는 cookie를 사용해야 하기 때문이다. http로 로그인 구현하면 보안 문제로 사용자의 비번이 털릴 수가 있어요.
도메인 등록은 '프리넘' https://www.freenom.com/en/index.html?lang=en 과 'Amazon Route 53' https://aws.amazon.com/ko/getting-started/hands-on/get-a-domain/ 을 이용한 방법이 있다.
프리넘은 무료인 대신에 단점이 많다고 들었고 (우리가 츄라이 했을 때 문제가 좀...많아서 결국 해결못하고 Amazon에서 도메인 구입을 선택했다) .ml로 끝난다.
결국 우리가 구해한 도메인은 (.click) 1년에 3달러이다. .link도 있던데 그건 1년에 5달러, .com은 1년에 12달러더라.
S3는 bucket이다. html같은 파일들이 올라오는 곳, 클라우드라고 생각하기.
EC2는 콤퓨타 하나를 대여한 것이라고 생각하기. EC2에서는 우리 서버를 띄워준다. (다른 컴에서 우리 서버가 띄워진다는 개념)
cert.pem, key.pem 은 https를 local에서 사용가능하게 하는 열쇠 역할을 한다. mkcert에서 install 하는데, 유통기한이 없다. 일종의 편법(?)같은 수단인 듯.
header, cookie 설정 시 서버에서 withCredentials를 사용하는데, 그 뜻은 credentials 있는 애들만 받겠다는 뜻. (https)
정적 웹 vs 동적 웹
https://titus94.tistory.com/4
프로젝트 끝나고 개인 웹사이트 만들고 배포할 때, Vercel을 사용해보자. Next.js 와 호환이 잘 된다고 한다 (같은 팀이 만들어서.) 템플릿도 제공해서 편하다고 한다.
gatsby로 블로그 만들기 : https://sooftware.io/react_homepage/
Hugo로 블로그 만들기 : https://ialy1595.github.io/post/blog-construct-1/
https://medium.com/@bjs1616/hugo와-github-page를-이용한-블로그-만들기-9eb1a5b50d91

3. 배포 자동화

배포 자동화의 개념과 장점 :
https://www.redhat.com/ko/topics/automation/what-is-deployment-automation

4. multer 로 노드 서버에 이미지/비디오 저장하기

(Frontend)

Dropzone 사용했을 때 다음과 같이 코드를 짜게 된다.

const onDrop = (files) => {
  
    //server에 post req 보낼때 다음 코드를 같이 보내주지 않으면 파일 보낼 때 오류 발생
    let formData = new FormData();
    const config = {
      header: { "content-type": "multipart/form-data" },
    };
    formData.append("file", files[0]);

  
    console.log("첫", files); // [File]
    console.log("둘", files[0]); // File
    console.log("셋", files[0].path); // Cantabria.JPG
  
🍟 서버에 보내는 파일 형태는 이렇게 생겼다. 
   (지금은 [] 안에 객체가 1개이지만, 여러개 보내면 [] 안에 객체가 1개 이상 있을 것)
🍟 [ File {path: 'Cantabria.JPG', name: 'Cantabria.JPG', lastModified: 1644673470000, lastModifiedDate: Sat Feb 12 2022 22:44:30 GMT+0900 (한국 표준시), webkitRelativePath: '', …} ]


   axios.post("/api/video/uploadfiles", formData, config)
     .then(res => {
      if (res.data.success) {

      } else {
        alert('Failed to upload video.')
      }
    })
  };

...

return(
          <Dropzone onDrop={onDrop} multiple={false} maxSize={800000000}>
            {({ getRootProps, getInputProps }) => (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                <Icon type="plus" style={{ fontSize: "3rem" }} />
              </div>
            )}
          </Dropzone>
  )

(Backend)
1. server/routes/video.js 생성해서
router.post("/uploadfiles", (req, res) => { 형식으로 알맞게 routing 구현하기
2. server directory(경로)에 npm install multer --save 로 multer module 설치
3.

5. git : stash, merge, temp

branch : https://www.freecodecamp.org/news/git-checkout-explained/
stash : https://www.freecodecamp.org/news/git-stash-explained/

git stash는 다른 branch를 방문하기 전, 현재 작업 중인 사항을 commit하지 않고 저장한 뒤 이동하고 싶을 때 사용한다.

git stash save "optional message for yourself"
git stash list 로 stash list 조회하면, 다음과 같이 내가 stash한 모든 리스트가 뜬다.

stash@{0}: On UserInfo: Userinfo,index.js,uploadImg.js,uploads/ stash
stash@{1}: WIP on SignIn: 971e368 [Add] Kakao Social Login

이후, 다음 중 택 1 한다.
git stash apply STASH-NAME : applies the changes and leaves a copy in the stash
git stash pop STASH-NAME : applies the changes and removes the files from the stash

이 과정에서 merge 에러가 뜰 가능성이 높다. 그 경우엔 다음 포스팅 참고.
merge : https://www.freecodecamp.org/news/the-ultimate-guide-to-git-merge-and-git-rebase/

stash 삭제는
git stash drop STASH-NAME

아예 temp라는 브랜치를 생성하여 stash를 거기 저장하는 방법도 있다.
git branch -m 브랜치명 temp
git stash -u ➡️ untracked files도 같이 stash하는 기능이라 매우 유용하다.