1. 5주차 프로젝트 진행 (Cont)

어제 글과 이어집니다

기록하기 구현을 했으닌 불러오는걸 구현 해보자

(2) 불러오기 (GET)

• Backend : DB에 저장된 내용을 Json화 하면 됨

• Frontend : Json 파일을 받아와서 해당 내용을 불러오는 tag에 append 해주면 된다.
  • 다만 해당 bucket 수행 여부 (done) 에 따라서 html 코드가 달라진다.

  function show_bucket() {
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    let rows = response['buckets']

                    for (let i = 0 ; i < rows.length; i++){
                        let num = rows[i]['num']
                        let bucket = rows[i]['bucket']
                        let done = rows[i]['done']

                        let temp_html = ``

                        if (done == 0) {
                            temp_html = `
                            <li>
                                <h2>✅ ${bucket}</h2>
                                <buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료!</button>
                            </li>
                            `
                        }
                         else{
                             temp_html = `
                            <li>
                                <h2 class="done">✅ ${bucket}</h2>
                            </li>
                            `
                            }
                         $('#bucket-list').append(temp_html)
                        }
                    }
            });
        }

(3) Bucket 완료 Update 하기 (POST)

• Front에서 Bucket 별 완료 버튼을 눌렀을 때 일어나는 행위

  • 완료 버튼을 누르면 db 값 중 done 값을 0이 아닌 1로 변경
  • done 값이 1인 경우엔 front 에서 취소선으로 해당 bucket 표현 처리

• Frontend

  • 완료 버튼의 onclick 함수 update.
  • Num 값만 넘겨주면 된다

• Backend

  • Front에서 넘긴 Num을 기준으로 DB에서 값을 찾는다
  • 해당 값 중 done 변수를 1로 바꾼다

  

• 여기서 중요한건 request를 통해 넘어온 값은 string으로 받아 오는데, num의 값은 int 이므로 type casting을 거쳐야한다!
  (저거 때문에 혼자할 때 한 10분 정도 삽질함. 기회가 되면 MongoDB 내용 정리해서 포스팅 해야겠다)

2. 프로젝트 서버에 올리기

지금까지 내가 진행한 프로젝트는 localhost에서만 진행했다. 이때 접속하기 위해 웹 주소 창에 localhost:5000 입력을 통해서 접속했다.

local 상태가 아닌 일반 웹 페이지 처럼 언제 어디서나 접속할 수 있는 환경을 만들기 위해선 어떻게 해야할까?

1. PC가 항상 켜져있어야 한다 (클라우드 환경)
   -> AWS에서 서버 빌릴 예정
2. 모두가 접속할 수 있는 공개 IP 주소 형태로 주소를 만들어야 한다.

3. AWS 서버 구매하기(리눅스)

• EC2 콘솔페이지 접속

• 로그인 후 우측 상단 중 서울로 되어있는지 확인

• 좌측 상단에 인스턴스 > 인스턴스 시작 클릭

• 어플리케이션 및 OS 이미지에서 Ubuntu 선택

(프리 티어 사용 가능일 경우 1년 동안 한 대에 대해서 무료)

• 키 페어(로그인) > 새 키페어 생성 클릭

• 새 키페어 생성 선택 후 키 페어 이름 입력후 키페어 생성 클릭
  • 키 페어 파일 다운로드 가능

• 인스턴스 시작 버튼 클릭

• 인스턴스 생성이 완료 되었으면 모든 인스턴스 보기 클릭

• 인스턴스 상태 > 실행 중 확인 (컴퓨터 킨것과 동일하다)

4. AWS 서버 접속하기

• Git bash 실행

• sss -i 입력 후 저장해놨던 키 페어 파일을 git bash 에 끌어다 넣는다

• 그 뒤에 ubuntu@ 입력

• 아까 생성했던 인스턴스 페이지에 가서 퍼블릭 IPv4 주소를 복사 후 @ 뒤에 붙여넣기 한 후 Enter

• yes 클릭 후 Enter

• 접속 완료