TSL : 2020-03-23

SooYoung Kim·2020년 3월 23일
0

Today Swimming Learned

목록 보기
4/13
post-thumbnail

요약

  1. 어제 완성한 헤로쿠 앱 deploy(배포) 하는 법
  2. 웹 디자인 공부

How to deploy Heroku app

짜이요, HSK를 heroku로 배포하였다. 비록 웹 페이지 내 대부분은 아직 콘텐츠가 채워지지 않았지만 404페이지까지 만들어서 모든 접근을 다룰 수 있는 하나의 웹 프로젝트를 완성한 셈이다. 어제 늦게 완성해서 오늘 그 내용을 적어두려고 한다.

  1. server

    우선 server.js에서 기본적인 것들을 세팅해주어야 한다.

    /*1번*/app.set('port', (process.env.PORT || 9000));
    /*2번*/app.use(express.static(path.join(__dirname, 'client/build')));
    // router 처리는 여기서 하고 3번 진행
    /*3번*/app.get('*', (req,res) =>{
        res.sendFile(path.join(__dirname+'/client/build/index.html'));
    });

    1번 : port는 process.env.PORT가 존재할 경우 그 것으로, 아닐 경우 고정된 숫자로 정하게 해준다. 이 때 process.env는 서버의 환경변수를 말한다. 이렇게 하는 이유는 소스코드가 heroku로 올라가면 heroku의 자체 시스템에서 돌릴텐데 그 때의 port 넘버가 따로 정해져 있을 경우(아마 그럴 것이다) 9000으로 고정시켜 놓았다면 오류가 나기 때문이다.

    2, 3번 : 3번은 위 라우터에서 특정한 주소들 빼고 모든 주소들을 react 앱의 index.html로 연결하는 것이고, 2번은 각종 css, image 등 request들을 받을 때 client에 있는 경로로 연결하는 것을 말한다.

  2. 다음으로 수정할 파일들은 server의 package.json이다.

    그 전에 먼저 heroku의 작동원리를 설명하는 것이 좋을 것 같다.

    heroku는 git으로 코드를 푸쉬할 수 있다. 물론 그 전에 heroku 가입, 터미널에서 heroku 로그인 등등의 작업을 다 한 후를 말한다. git push heroku master로 push를 하면 build, compile을 거쳐 slug가 만들어진다. 그리고 dyno라는 것이 그 slug를 받아 웹 상에서 작동하는 어플리케이션으로 만들어준다.

이미지의 원본링크

이미지의 원본링크

  1. slug를 만드는 build과정에서 Procfile이라는 걸 만들어주고 그 안에는 web : (빌드의 시작명령)라는 걸 지정해 줄 수 있다. 만약 Procfile이 없을 경우 heroku git 폴더에 있는 package.json파일의 script 부분의 start명령어가 실행된다.

  2. 또한 동일 package.json의 script 부분에 "heroku-postbuild"라는 property를 추가해 줄 수 있다. 여기서 client의 build를 할 수 있다. 이 부분을 정해주지 않으면 server단까지만 bulid되서 돌아가는 것 같다. 아래는 내가 만든 프로젝트에 server단 package.json script부분이다. 나의 경우는 install 후 npm audit fix를 해 주라고 나와서 그 부분을 heroku-postbuild에 추가해주었다.

    "scripts": {
        "client-install": "npm install --prefix client",
        "start": "node server.js",
        "server": "nodemon server.js",
        "client": "npm start --prefix client",
        "heroku-postbuild": "cd client && npm install --only=dev && npm audit fix && npm install && npm audit fix && npm run build"
      }
  3. 위에 언급한 부분들을 잘 적어주고, 나머지 코드 작동에 문제가 없다면 git push 후 heroku open을 터미널에 입력하면 <앱이름>.herokuapp.com이 자동으로 열릴 것이다. 만약 문제가 있을 경우에는 에러가 뜨고 heroku logs --tail라는 명령어를 입력하여 문제를 확인하라는 안내가 나온다. 에러 로그를 보고 하나씩 문제를 해결하다보면 언젠가 앱이 작동할 것이다. (이 과정에서 정말 많이 배웠다!)

  4. 참고로 mongoDB 등 db를 사용한다면 db를 가져오는 url을 로컬 주소가 아닌, mongoDB Atlas에서 db를 올리고 그 주소를 사용해야 한다.


웹디자인 공부

  1. index page를 만들 때 고려해야 할 요소들

    1. 지금 들어온 사이트가 무슨 사이트인지 명확히 할 것
    2. 이 사이트에서 무엇을 할 수 있는지 명확히 할 것
    3. 이 사이트에는 무슨 내용이 담겨 있는지 명확히 할 것
    4. 어디서부터 봐야 할지 인도할 것
    5. 비슷한 기능을 하는 다른 사이트가 아닌 이 사이트만의 특징을 어필하기
  2. 웹디자인에서 반드시 해야 할 것과 하지 말아야 할 것

    1. 해야 할 일

      • 기기에 상관없이 동일한 경험 제공하기(반응형 웹)

      • 사용하기 쉽고 명확한 내비게이션 디자인하기

      • 방문한 링크의 색상은 바꾸기

      • 페이지를 한 눈에 훑어보기 쉽게 만들기

        디자이너로서 좋은 시각적 계층구조를 디자인하여 그들을 도울 수 있어야 합니다. 시각적 계층구조는 중요도에 따라 요소들을 보여주거나 정렬하는 것을 의미합니다.

      • 모든 링크를 다시 확인해보기(최대한 유저의 접근이 404가 뜨지 않도록 할 것)

      • 클릭 가능한 요소와 불가능한 요소를 명확히 알 수 있게 해주기

    2. 하지 말아야 할 일

      • 내용이 로딩될 때까지 방문자가 기다리게 만들지 않기(로딩 페이지를 예쁘게 만들어도 오래 걸리면 유저는 떠난다)
      • 링크가 새 탭에 열리게 만들지 않기
      • 광고가 눈길을 사로잡지 않게 하기
      • 스크롤 하이재킹(웹사이트에서 스크롤바가 다른 곳과 다를게 작동하도록 조작한 경우, 애플이 대표적)하지 않기
      • 소리까지 같이 자동 재생되는 영상 사용하지 않기
      • 아름다움을 위해 사용성을 희생하지 않기
      • 깜빡이는 텍스트나 광고 사용 자제하기
profile
Enjoy my coding

0개의 댓글