[항해99 / 온보딩주차] 🚢 23-03-27 ~ 23-04-02 WIL

 

한 주 돌아보기

이번주에 해낸 것	이번주에 하지 못한 것
😎 미니 프로젝트 잘 끝내기	🤔 Aws Elastic Beanstalk 으로 프로젝트 배포하기
😎 항해 14기 입학시험 통과하기

 

✅ 미니 프로젝트 잘 끝내기

이번 주 월요일부터 목요일까지는 온보딩 때 수강했던 웹개발종합반을 기반으로 풀스택 미니 프로젝트가 진행됐다. 월요일 15시부터 시작해 목요일 18시에 소개 영상 제작 및 발표 준비까지 마치는 일정이었다. 우리 조는 다들 열정 있고 의사소통이 잘되어서 첫날에 주제 선정, 구현할 기능 선별, 디자인 시안까지 모두 마칠 수 있었다.

 

 

 

이튿날부터 본격적인 개발을 시작하기로 했는데, 짧은 기간 내에 기능을 완성하는게 제일 우선이었기 때문에 그나마 코드가 덜 낯선 내가 초기 세팅을 빨리 마치고 다 같이 기능 개발에 집중하는 게 낫지 않을까 하는 생각이 들었다. 그래서 .gitignore나 app.py 기본 코드, 폴더 구조를 정리하고 작업 환경 설정에 도움이 되는 내용을 적은 텍스트 파일도 미리 github에 올려두었다. 확실히 초기 세팅을 자세하게 고지해 두니 다 같이 동일한 환경에서 빨리 작업을 시작할 수 있어 좋았다.

 

 

프로젝트 팀원 중에 UX/UI를 공부하셨던 분이 계셔서 UX적인 부분도 고민하여 요소를 배치했고 피그마로 디자인을 정말 꼼꼼하게 짜주셨다. 기획자와 디자이너 없이 혼자 화면을 만들던 이전 날들이 떠오르며.. 그 분들의 소중함을 여기서 또 한 번 느낄 수 있었다.. 그리고 그 두 역할을 혼자 해내신 팀원분.. 감사합니다🙇🏼 자세한 프로젝트 후기는 따로 작성할 예정!

 

 

 

✅ 항해 14기 입학시험 통과하기

버킷리스트 입학시험 구현 화면

 

프로젝트가 끝난 금요일에는 대망의 입학시험이 있었다. 문제는 웹개발종합반 강의에서 실습했던 버킷리스트에 '완료' 버튼을 추가하고, 버튼 클릭 시 버킷리스트 내역에 '완료!!'를 추가하며 버튼이 보이지 않도록 하는 것이었다.

 

 

데이터 저장하기

버킷리스트 상태를 수정할 수 있도록 버킷리스트를 등록할 때 id(num)값과 상태값(done)을 같이 넣어주었다. id값은 유일해야 하므로 해당 리스트의 length만큼 설정하는 것은 권장되지 않지만, 해당 구현에서 삭제는 넣지 않을 예정이었기 때문에 최대한 간단하게 코드를 구성했다.

 

// app.py
# 저장
@app.route("/bucket", methods=["POST"])
def bucket_post():
  bucket_receive = request.form['bucket_give']
  bucket_list = list(db.bucket.find({}, {'_id': False}))
  count = len(bucket_list) + 1
  doc = {
    'num': count,
    'bucket': bucket_receive,
    'done': 0,
  }
  db.bucket.insert_one(doc)
  return jsonify({'msg': '저장 완료!'})

 

 

데이터 보여주기

저장 후 리스트를 보여줄 때는 app.py에서 모든 데이터를 가져와 JS에서 fetch로 받아주었다. 이때 done값이 0(미완료)인지, 1(완료)인지를 구분해 화면에 버튼 출력 유무를 결정했다.

 

// index.js
// 버킷리스트 화면에 보여주기
function show_bucket() {
  fetch('/bucket')
  .then(res => res.json())
  .then(data => {
    const rows = data['buckets'];
    rows.forEach(element => {
      const num = element['num'];
      const bucket = element['bucket'];
      const done = element['done'];
      let temp_html = ``;

      if(done === 0) {
        temp_html = `
          <li>
            ✨&nbsp;<h2>${bucket}</h2>
            <button onclick="done_bucket(${num})" type="button" class="btn btn-primary">완료</button>
          </li>
        `;
      } else {
        temp_html = `
          <li>
            ✨&nbsp;<h2>${bucket} 완료!!</h2>
          </li>
        `;
      }

      document.querySelector('#bucket-list').insertAdjacentHTML('beforeend', temp_html)
    })
  })
  .catch(err => {
    console.log(err)
  });
}

 

 

데이터 수정하기

버킷리스트를 미완료에서 완료로 변경하는 경우는 버튼을 클릭했을 때 onclick으로 값을 수정하는 함수를 호출하며 해당 버킷리스트의 id(num)값을 인자로 함께 넘겨주었다. fetch로 데이터를 가공해 보내고, app.py에서 mongoDB의 데이터를 업데이트 처리했다.

 

// index.js
// 버킷리스트 상태 수정 요청하고 결과값 받아오기
function done_bucket(num) {
  let formData = new FormData();
  formData.append('num_give', num);
  fetch('/bucket/done', { method: 'POST', body: formData, })
  .then((response) => response.json())
  .then((data) => {
    alert(data['msg']);
    window.location.reload();
  })
  .catch(err => {
    console.log(err)
  });
}

 

// app.py
// 버킷리스트 상태 업데이트하고 결과값 JS로 보내기
# 수정
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
  num_receive = request.form['num_give']
  db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
  return jsonify({'msg': '꿈을 하나 이뤘어요 🌠'})

 

 

 

❌ Aws Elastic Beanstalk 으로 프로젝트 배포하기

입학시험이 까다로울줄 알았는데 생각보다 간단해서 금방 풀 수 있었다. 다만 직전날 완료했던 프로젝트를 EC2로 배포했었는데, 입학시험 과제물도 AWS로 배포해야 해서 처음엔 Elastic Beanstalk으로 진행할 생각이었다. 그런데 계속 알 수 없는 오류가 떠서 Beanstalk으로 배포를 진행하지 못했다. 심지어 계속 구글링 해봐도 아직 정확한 원인을 못 찾았다.. 계속 도전해 보면서 오류를 파헤쳐 볼 예정이다🥹

 

 

입학시험은 결국 EC2로 배포 방법을 변경했다. 전 날 FileZilla를 이용해 업로드해뒀던 미니 프로젝트 파일을 내리고 입학시험 코드를 업로드했는데, index.html을 찾을 수 없다는 오류가 계속 발생했다! 뭐지? 싶어 파일을 삭제하고 다시 올려도 계속 같은 오류가 났다. 두 눈을 부릅뜨고 오류를 읽어보니 로그 맨 마지막 줄에 jinja2가 파일을 못 찾는 내용을  확인할 수 있었다. 직전에 업로드했었던 프로젝트는 jinja2를 사용해서 EC2에 해당 패키지를 설치해 뒀던 게 설마.. 영향을 주나 싶어 EC2 자체를 내리고 새로 인스턴스를 발급받아 jinja2 패키지 설치 없이 세팅을 진행했다. 그 이후 파일을 업로드해보니 오류 없이 index.html을 잘 찾아갈 수 있었다. 사용하지 않는 패키지 하나 있다고 해당 파일을 찾지 못하다니 신기하기도 했고 역시 오류를 잘 읽어보면 나에게 힌트를 주는구나 싶어 뿌듯했다.

 

 

 

---

이번 주의 문장

휴식은 게으름도, 멈춤도 아니다.

일만 알고 휴식을 모르는 사람은 브레이크 없는 자동차와 같이 위험하기 짝이 없다.

그러나 쉴 줄만 알고 일 할 줄 모르는 사람은 모터 없는 자동차와 마찬가지로 아무 쓸모가 없다.

 

/ Henry Ford

 

지난주, 이번 주 쉼 없이 열심히 달려와서 입학시험이 끝난 주말은 가족들과 나들이를 다니며 푹 쉬었다. 열심히 공부하고 충분히 쉬니 쉬는 시간이 아깝지 않고 잘 리프레시할 수 있었다. 달리기만 하지 말고 쉴 때는 잘 쉬기! 명심하자.