일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- HTML
- nest.js 순환 종속성
- 리액트 테스트 코드
- TodoList 테스트 코드
- React 테스트코드
- JavaScript
- jest
- 리액트 테스트
- React Testing Library
- react jest
- mock api 사용법
- 첫 코딩
- nest.js forwardRef
- nest.js 순환 참조
- Testing-library/react
- react native 무한스크롤
- mock api를 이용한 react 테스트
- nest.js circular Dependency
- react 테스트
- javascript 테스트
- TDD방식으로 리액트 테스팅
- 첫코딩
- 개발
- FlatList 무한 스크롤
- react
- react testing library 비동기 테스트 사용법
- 프로젝트 배포하기
- 비동기 테스트
- ScrollView 무한 스크롤
- CSS
- Today
- Total
성장을 위한 기록
항해99 사전강의 5주차 회고 본문
본 내용은 항해99 & 스파르타코딩클럽에 강의 내용이 포함되어 있습니다.
문제 시 바로 삭제하겠습니다.
4주차 내용에서 약간 심화된 연습을 한 번더 하고
지금까지 작성한 팬미팅 웹페이지를 AWS에서 구입한 도매인에 올리는 작업을 해봤다.
5주차 목차

버킷리스트
Flask를 이용해 API를 만드는 학습을 이어 5주차에도 한 번더 연습을 했다.
연습을 진행 할 수록 기능적으로 심화되갔다.
화성땅 공동구매에서는
client에서 서버로 이름, 주소, 평수를 전달하고 db에 저장
서버에서 client로 db에 저장된 이름, 주소, 평수를 가져옴
두 가지 기능이 핵심으로 사용했고
스파르피디아(영화 카드)에서는
client에서 서버로 url(url을 이용하여 크롤링을 했다), 별점, 코멘트 그리고 크롤링을 이용한 영화 제목, 설명, 이미지를 전달하고 db에 저장
서버에서 client로 db에 저장된 제목, 설명, 이미지, 별점, 코멘트를 가져옴
화성땅 공동구매에서 크롤링을 포함하여 연습했다.
5주차에서는 버킷리스트를 만들었는데, 크롤링은 없었지만, 버튼을 눌렀을 때 db에 저장된 값을 변경할 수 있어야 했다.
당연하게도 버튼과 text는 연결되지 않았기 때문에 임의의 어떤 값을 통해 연결을 해야했다.
client에서 서버로 text를 전달하고 db에 저장
서버에서 client로 text를 가져옴
(완료 버튼을 누를 때)client에서 서버로 db의 데이터를 변경
아마 위 방식만 보면 정상작동 된다고 생각하지 않을 것이다.
1. client에서는 text 값만 넘겨주지만, 이 text가 완료된 것인지 완료되지 않은 것인지 판단할 수 있는 임의의 값이 있어야한다. 따라서 db에 저장되는 값은 최소 2개가 된다.
2. 서버에서 client로 text를 가져올 때 1번에서 구분짓었던 임의의 값을 통해 완료된 text와 완료되지 않은 text의 표기 방법을 다르게 작성한다 (if문 사용)
3. 완료 버튼이 눌려지면 그 버튼에 해당하는 text의 db에 1번에서 구분지은 임의의 값을 수정해야한다. (비완료 값 > 완료 값으로)
여기서 힘들었던 부분이 버튼이 눌렸을 때 그 버튼에 해당되는 text값을 가져오는게 어려웠다.
강의에서 작성한 방식을 보면 처음 db에 저장할 때 값을 3개를 저장한다. 하나는 텍스트와 연결 할 수 있는 id값이라 볼 수 있다. 따라서 db에 저장할 때 db에 있는 전체 리스트 갯수에 +1된 값을 id로 저장하고 웹페이지에 표시할 때 그 id값을 버튼 함수의 인수로 작성을 하면 버튼과 text를 연결 할 수 있다.( db에서 연결되는 것 같기는 하지만)
나는 db에 저장하는 값을 3개로 늘릴 생각은 못했고, 2개만 저장하는 방법으로 접근해봤다.
처음에는 웹페이지에 보여줄 때 버튼의 인수 값을 i (반복문에 i)로 작성했다. 그리고 함수 실행 시 인수 값을 서버에 넘겨주고 db에 저장된 list를 가져와 list[i]를 통해 해당되는 db에 접근을 했다. (처음에는 안됐는데, i가 서버로 가면서 문자열로 변경된 것을 몰랐고 int() 내장 함수를 통해 숫자열로 변경하여 사용했다.)
두 번째로는 text에 임의의 class 값을 설정하고 class 노드 리스트의 인덱스 번호와 해당되는 버튼의 인수 값을 동일하게 하여 text에 문자를 가져왔다. 불필요한 텍스트도 따라와서 split() 매서드를 통해 원하는 text만 가져와 서버에 넘겨주고 서버에서는 해당 text가 있는 db에 접근하는 방식을 사용했다.
나는 이 부분에 차이점에 대해 계속 고민을 했었다. 그러다 보니 억지스러운 단점(?)을 발견할 수 있었다.
물론 버킷리스트에 기능적으로 db를 삭제하는 요소가 없기 때문에 문제는 없지만, db를 삭제하는 즉 내용을 지울 수 있는 기능이 생긴다면, 혹은 비슷한 기능을 가진 다른 웹페이지를 만든다면 id값 처럼 사용한 값이 반복 될 수 있다.
4번째로 생성된 db는 4를 id 값으로 가진다고 가정을 했을 때 저장을 하고 id값으로 2를 가진 db를 삭제한다면?
다음에 저장되는 db또한 id값을 4로 가지는 db가 생성되는 것이다. (id 값은 db 리스트 갯수 +1)
물론 내가 작성 한 방법 또한 단점이 있고, 사실 더 많을 수도 있다. 많은 경험이 없어 어떤 에러가 발생할 지는 내 스스로 상상하기에 아직 부족하다. 우선 개인적으로 코드가 너무 더러워졌다. 또한 db에 id값에 역할을 하는 값이 없기 때문에 버튼이 아닌 다른 곳에서 db에 접근을 해야한다면, 어떻게든 text값으로 연결해야하기 때문에 더 복잡할 것 같다는 생각이 들었다. 이 밖에 더 많은 부분이 부족할 것 같은데, 아직 많은 시간동안 고민하지 못해서 찾지 못했다. (경험의 부족ㅠ)
배포하기
연습을 마무리하고 과제로 만들던 팬미팅을 도메인에 올리는 방법에 대해 학습했다.
우선 flask를 이용해서 서버를 만들었을 때 우리는 작성한 코드를 끄면(종료하면) 웹페이지가 실행되지 않았다. 하지만 우리는 컴퓨터를 24시간 내내 킬 수는 없다. (과거 회사에서는 서버실 컴퓨터를 24시간 키고있었다는.... ) 그래서 우리는 클라우드 환경을 이용한다.
우선 AWS(아마존)에서 인스턴스를 구입했다. 기본적인 세팅을 하고 키 페어 파일을 다운받았다. ( 이 파일이 중요하다!! )
AWS에서 인스턴스를 만들었는데, 컴퓨터를 구매한 것이라는 표현이 이해에 큰 도움이 됐다. 내가 24시간 킬 수 없으니 AWS컴퓨터 한 대를 구매했다. 다른 웹페이지를 도메인에 올릴려면 인스턴스를 추가 구매하던지, 지금 사용하는 인스턴스를 지우고 새로 만들어야 한다. 이때 인스턴스를 중지상태로 변경하면 컴퓨터를 끈 개념이고, 인스턴스 종료를 해야 삭제가 되는 것이다.
그리고 AWS는 리눅스 os를 이용해서(?) git bash를 통해 명령을 내려 사용했다. 인스턴스를 만들면서 받은 키 페어 파일을 통해 내가 구매한 인스턴스와 연결했다.
그 다음은 서버를 세팅하는 것이다. 기본적으로 5번 세팅을 실시했다.
1. python3 > python python3로 명령해야하는 내용을 python을 사용해서 명령을 내라겠다.
2 ~ 4. pip3 > pip 패키지 설치 마법사(?정확하게 이해하기 어려웠다)를 사용한다.
5. port forwarding port:80으로 접속한 것을 port:5000으로 보낸다.
그 다음은 파일질라를 통해 내가 작성한 파일을 AWS에 올리는 과정이 필요했다.
연결을 위해 AWS에서 구매한 내 인스턴스에 ip(?)같은 주소와 다운 받았던 키 페어 파일을 이용한다.
여기서 올린다고 바로 사용 할 수 없다.
추가적으로 해야할 작업이 있다.
우선 우리가 작성하면서 사용했던 패키지를 설치해야한다. pip install ***으로 git bash를 통해 설치한다. 여기서는 flask, dnspython, pymongo 세 가지가 필요하다.
그리고 우리는 5000으로 서버를 열었지만, AWS에서 5000으로 접속 할 수있는 통로를 만들어야 한다.
그러기 위해서는 AWS 인스턴스에서 인바운드 규칙 설정(Edit inbound rules)를 통해 포트 범위를 5000으로 열어줘야한다.
여기서 우리는 포트 범위를 80으로 하나 더 열었다.
마지막으로 가비아에서 구매했던 도메인에 우리가 만든 팬명록 사이트를 연결하고 og태그를 사용해서 링크 공유할 때 이미지와 제목, 설명이 같이 표시할 수 있도록 설정했다.
5주차 숙제 결과물
레드벨벳 팬명록
응원 한마디 남기고 가세요!
btae.shop
'개발 일기 및 회고 > 회고' 카테고리의 다른 글
WIL 0509~0515 1주차 (0) | 2022.05.15 |
---|---|
3주차 내용 요약 (0) | 2022.04.16 |
항해99 사전강의 4주차 회고 (0) | 2022.04.03 |
항해 99 사전강의 3주차 회고 파이썬, mongodb (0) | 2022.04.02 |
항해99 사전강의 2주차 JQuery, Ajax 회고 (0) | 2022.03.31 |