Web, DB

huni_·2022년 7월 6일
0

브라우저

목록 보기
2/2

웹서비스 구조

웹서비스는 Front-end 서버, Back-end 서버 그리고 DataBase로 이루어져있습니다.

프론트엔드 서버 왠지 낯설지 않나요?

사실 우리는 서버를 꾸준히 사용해 왔지만, 서버는 백엔드만 건드린다고 착각하고 있었습니다.

서버라고 하면, 24시간 켜져있는 서버 프로그램이 동작하고 있는 컴퓨터를 의미합니다.

프론트엔드 서버

yarn dev해서 실행시키면서 생성된 포트가 동작하고 있는 컴퓨터프론트엔드 서버라고 합니다.

💡 프론트엔드 서버 프로그램
yarn dev를 해서 실행시키면 포트가 생성되고, 해당 포트는 누군가 종료하지 않는이상 24시간 동작합니다. 이처럼 24시간 켜져 있는 포트 번호를 서버 프로그램이라고 합니다.

💡 서버 프로그램은 왜 24시간 켜져 있나요?
접속을 기다리기 때문입니다. 바로 바로 응답을 주려면 24시간 켜져 있어야 합니다.

데이터 베이스는 백엔드의 접속을 기다리고 프로트엔드 서버는 브라우저의 접속을 기다립니다.


DataBase(DB)

데이터 베이스란 데이터를 담아두는 저장소입니다.

데이터베이스에 데이터를 담아두는 방식에는 크게 두가지가 있는데 SQL방식NoSQL방식이 있습니다.

우리가 통신을 위해 사용했던 axiosapollo-client처럼 백엔드에도 데이터베이스와 통신을 도와주는 툴이 있습니다.

이 툴은 담아두는 방식(SQL,NoSQL)에 따라 달라집니다. 따라서 툴은 ORM,ODM 2가지가 있습니다.

  • ODM : object document mapping
  • ORM : object relation mapping

SQL 방식

SQL방식은 데이터들을 엑셀과 비슷한 표에 정리해두는 방식 입니다.

SQL방식NoSQL방식과 달리 각각의 표 사이에 관계성을 부여 할 수 있습니다. 관계성을 부여할 수 있기 때문에 mapping해주는 툴을 ORM을 사용합니다.

또한 관계성을 부여하는 데이터베이스를 관계형 데이터 베이스 라고 하며, 대표적으로 Oracle, MySQL, Postgres 이 있습니다.

NoSQL 방식

NoSQL방식서류 봉투에 document를 모아두는 방식입니다.

NoSQL에서는 서류 봉투를 컬렉션이라고 부르며, 통신을 도와주는 툴로는 ODM을 사용합니다.

NoSQL방식을 사용하는 데이터베이스에는 대표적으로 MongoDBFireBase가 있습니다.


DB 관리 프로그램

데이터베이스에는 postgres가 이미 설치 되어있습니다. postgres안의 데이터를 좀 더 편하게 조회 할 수 있도록 도와주는 프로그램이 DB 관리프로그램 입니다.

DB 관리프로그램에는 DBeaver, MySQL webpack 이 있습니다.

‼️ 주의하실 점은 DB 관리 프로그램은 데이터베이스가 아닙니다.

DBeaver 설치

  1. 구글에 DBeaver를 검색해줍니다.(설치링크)

  2. 다운로드클릭 합니다.

  1. 본인 컴퓨터에 따라 다운로드를 해줍니다. (맥 기준)

윈도우는 Windows를 참고해주시면 됩니다.

맥은 본인 컴퓨터가 m1인지 intel인지에 따라서 다운로드 해주시면 됩니다.

  1. 다운로드가 완료되었다면, 프로그램을 열어주세요

DBeaver playground 연동 실습

데이터베이스 관리프로그램을 설치했으니 이제 본격적으로 실습을 들어가보도록 하겠습니다.

  1. DBeaver를 열어주세요
  2. 좌측 상단에 플러그 모양을 클릭해주세요

  1. postgreSQL을 선택해주세요

만일 여기서 뭔가 설치해야 한다고 뜨면 설치하고 넘어와주세요
  1. Host 부분에 localhost 대신 백엔드의 주소를 입력해주세요 ( 34.64.135.149 )

    • 비밀번호는 postgres2021 입니다.
    • localhost는 내컴퓨터 입니다. 내컴퓨터에는 백엔드가 없으므로 백엔드에 접속 할 수 있도록 주소를 입력합니다.
  2. 모두 입력 후 test connection을 눌러주세요. 파란색이 뜨면 완료된 것이니 완료를 눌러주세요.

  3. 완료되면, playground의 데이터베이스를 볼 수 있습니다.


profile
FrontEnd Developer

0개의 댓글