[포스코x코딩온]웹개발 풀스택 코스 9주차 회고 feat. MongoDB, AWS React

이제 슬슬 막바지를 향해 달려가는 KDT교육!

이번 주는 크게 3가지 정도를 배운거 같다.

 

1. 비-관계형DB인 MongoDB사용법!

2. AWS를 통한 배포

3. React 시작!

 

강사님께서 아주 컴팩트하게 핵심들을 설명해주시고 진도도 빠르게 나가서 그런지 이번 주는 많은 걸 배운거 같다.

수업시간에는 개념에 대한 이해를 하고 그 개념의 바탕으로 집에서는 코드에 익숙해지는 법을 기른다.

그렇게 되면 짧은 시간에도 많은 것을 학습하고 체득할 수 있는 거 같다.

확실히 수업시간에 개념이나 데이터흐름을 잡고 가니 집에서 복습하기도 좋았고, 여러 가지 응용을 해 볼 수 있는 용기도 가지게 되었다.

그럼 지금부터 수업시간에 배운 것들을 개괄적으로 정리해 보려고 한다.

 

---

 

1. 비-관계형DB인 MongoDB사용법!

저번 주 MySql을 마무리하고, 이번주는 MongoDB 사용법을 학습했다.

MongoDB의 Atlas라는 클라우드 데이터베이스를 다루었다. 아무래도 클라우드 기반이니 배포시에도 편리하게 설정 할 수 있었다.

MogoDB의 형태

위 사진 처럼 MongoDB는 비-관계형이라 테이블 형식은 아니다.

Mongo의 경우 문서형 데이터베이스여서 자료의 모양이 마치 하나의 객체 처럼 표현된다.

그런 면에서 이런 자료 형태는 우리한테 더욱 친숙하게 느껴졌다.

 

컨트롤러에서 MongoDB를 커넥트한 코드

위 사진처럼 내가 연결하고 싶은 서버에 위와 같이 코드를 짜서 MongoDB와 연결해 준다.

그 다음에

 

그 다음 사진과 같이 기능들에 데이터를 불러오거나 찾아오거나 업데이트를 한다.

여기서 MySql과 조금 다르게 코드를 짜준다. MySql은 쿼리(query)라는 형태의 명령어를 데이터베이스로 보내서 명령어를 실행하고 데이터를 가져오는 형식이었다면,

MongoDB는 .findOne() 혹은 insertOne()등의 함수로 실행시켜 준다.

updateOne()의 경우 첫 번째 인자로 찾을 자료의 조건을 만들어주고, 두번째 인자에 $set: {}을 입력하여 바꾸고 싶은 키를 입력 후 바꿔준다.

 

실습하면서 느낀 것은 확실히 MySql의 쿼리(query)명령어 보다 간결한 느낌을 받았다. 그리고 좀 더 직관적인 느낌이 들었다.

처음 연결하는 것이 조금 복잡해서 MySql이 더 낫다고 생각을 했었는데, 더 깊숙하게 사용을 하다보면 MongoDB가 확실히 편하다는 느낌을 받았다.

 

---

 

2. AWS 배포

MongoDB에서 자료를 연결하는 코드를 모두 완성 한 후 우리는 게시판을 실제로 배포해 보았다.

배포라는 것은, www.naver.com과 같이 주소를 입력하면 어디서든 누구나 접속이 가능하도록 하는 것이다.

우리는 아직 도메인 주소를 구매하진 않아서 '54.0.10.5:4000' 이런식으로 조금은 낮선 퍼블릭 IP형태로 접속할 수 있다.

 

역기서 신기했던 점은 AWS라는 것이 가상의 서버컴퓨터인 점이다.

AWS인스턴스를 생성하는 모습

사진과 같이 인스턴스라는 것을 만들 때 저렇게 다양한 인터페이스와 메모리, cpu구성 등을 세팅 할 수 있다.

인스턴스를 생성하면서 가상의 컴퓨터를 만드는 구나 라는 느낌을 받았다.

그래서 24시간 꺼지지 않는 컴퓨터를 만들어놓고, 저기에 내가 만든 페이지와 서버를 24시간 켜져 있도록 만드는 것이다.

여기서 중요한 패키지가 있다.

pm2라는 건데, 이걸 npm으로 AWS내에서 설치를 해주고, 'pm2 start 파일명' 명령어로 실행해주면, 내가 만든 서버가 24시간 동안 가동 할 수 있게 해준다. 

 

이렇게 AWS를 이용해서 배포를 해보니, 내가 사용하는 웹페이지와 같이 아무데서나 접속이 가능했다. 친구에게 내가 만든 웹페이지를 공유하여 방명록을 남길 수 있게 했다. 친구가 쓴 방명록이 실시간으로 업데이트되어 보이니 정말 신기했고 재미있었다.

 

---

 

3. React 시작!

금요일부터는 React를 시작했다.

React에 대한 기본 개념을 배우고, React세팅을 통해 어떻게 홈페이지를 만들어가는지 배웠다.

이번주 React수업에서 가장 중요한 것은 컴포넌트(component)를 배운것이라고 생각되어진다.

이 컴포넌트 개념이 싱글페이지 기능을 이해하는 포인트였다.

컴포넌트를 넣은 모습

컴포넌트를 생성한 코드

위와 첫 번째 사진에 대문자로 시작하는 초록색 태그가 컴포넌트이다. 이 컴포넌트 내부는 두 번째 사진에서 확인할 수 있다.

저렇게 function 기능으로 컴포넌트를 생성한다. return()안에 그려주고 싶은 HTML태그를 넣는다.

ES6문법으로 export를 해주고, 첫 번째 사진 처럼 사용하고 싶은 jsx에서 import하여 태그로 넣어주면 된다.

 

지렇게 컴포넌트를 만들어준다면 같은 레이아웃을 가지는, 반복되는 레이아웃을 간편하게 불러와 사용 할 수 있고, 코드의 길이도 줄어든다.

기존 HTML이었다면, function BtnToNaver() 안에 있는 a태그를 3번 복사붙여넣기 했어야 했다.

그런데 컴포넌트로 묶어 두면, <BtnToNaver /> 이렇게만 써줘도 저 태그들이 그려지는 것이다.

보기도 편하고, 정리도 잘 되고, 관리도 잘 된다.

 

일단 이번주는 컴포넌트까지만 학습을 했다.

컴포넌트만 배웠는데도, 리액트의 기동력과 파워풀한 기능들이 너무나 크게 느껴졌다.

그래서 다음 주 리액트 수업이 기대가 된다. 얼마나 더 많은 기능들이 있을지 궁금해졌다.