오늘 배운 것
1. 백엔드-프론트엔드 Architecture
오늘은 브라우저와 프론트엔드, 백엔드, DB가 연결되어있는 구조를 배웠다. 이러한 구조를 Architecture 라고 한다. 개발이란 기본적으로 협업이기 때문에, 서비스를 구동하기 위해 각 서버들이 어떤 방식으로 연결되어있는지 기본적인 구조는 이해하고 있어야 한다. 특히나 서버 사이드 렌더링(SSR) 방식을 사용하거나 모바일 앱 등을 개발하는 경우, 프론트엔드 개발자에게도 서버에 대한 충분한 이해가 필요하다.
프론트엔드, 백엔드, DB(데이터베이스)는 각각의 서버 프로그램이 설치되어 돌아가고 있는 '서버 컴퓨터'이며, '서버 컴퓨터'는 보통 컴퓨터를 생략하고 '서버'라고 부른다.
1. 브라우저가 프론트엔드 서버에 데이터 요청
2. 프론트엔드 서버에서 HTML/CSS/JS를 받아옴
3. 브라우저에 렌더링
4. 프론트엔드 서버의 지시에 따라 브라우저가 백엔드 서버에 데이터 요청 (useQuery 등..)
5. 백엔드가 데이터베이스(이하 DB라 칭함) 서버에 데이터 요청
6. 백엔드가 DB에서 데이터를 받아옴
7. 받아온 데이터를 브라우저로 전송
8. state 등을 이용해서 브라우저에 렌더링 (혹은 리렌더링)
프론트엔드, 백엔드, DB 서버는 각각 다른 포트를 사용하기 때문에 한 대의 동일한 컴퓨터에도 설치가 가능하다. 하지만 현대 웹에서는 프론트엔드, 백엔드, DB에 각각 한 대 이상의 컴퓨터를 할당하는 것을 기본으로 한다. (각각의 서버가 쓸 수 있는 메모리를 넉넉하게 확보하기 위해)
2. Open API 사용하는 방법 학습
axios를 활용해 Open API를 사용하는 방법을 배웠다. 현대의 Open AI나 Public API는 아직도 JSON 혹은 XML 형태의 Rest-API로 되어있는 경우가 많기 때문에, Open API를 잘 활용하기 위해서는 Rest API를 끌어와 사용하는 방법도 학습해야 한다.
오늘은 Doc API를 이용해 개 사진을 랜덤으로 보여주는 연습을 했다. 전에도 유사한 형태의 랜덤 이미지 API를 써 본 적이 있는데, 누가 만든 API인지는 몰라도 정말 귀여운 아이디어다.. 힐링됨.
API 주소 : https://dog.ceo/dog-api/
Dog API
Dog CEO's Dog API. Over 20,000 images of dogs programmaticaly accessible by over 120 breeds. Image supplied by the Stanford Dogs Dataset.
dog.ceo
3. DBeaver를 이용한 데이터베이스 관리 (postgreSQL)
DB에는 크게 두 종류가 있다. 엑셀과 같은 표(Table) 형태의 SQL, 그리고 서류봉투(Collection) 형태의 NoSQL.
- SQL 방식은 표(Table)와 행(Row)으로 데이터를 구분한다. 많이 사용되는 SQL에는 mySQL, Oracle, postreSQL, msSQL 등이 있다.
- NoSQL 방식은 Collection과 그 낱장인 Document로 데이터를 구분한다. 많이 사용되는 것에는 MongoDB, Firebase 등이 있다.
- 이 중 mySQL과 MongoDB는 써 본 경험이 있다.
ORM / ODM (Object-Relation-Mapping / Object-Document-Mapping)
프론트엔드에서 백엔드에 접속할 때 axios를 사용했듯이 백엔드에서 DB에 접속하기 위해서도 필요한 툴들이 있다. 이름으로 예상할 수 있듯 ORM은 관계형 DB, ODM은 도큐먼트형 DB에 접속할 때 사용한다. 오늘은 그 중 typeorm이라는 ORM을 사용해서 postgreSQL을 설치하고 관리하는 연습을 했다.
번외!
JS를 사용한다면 sequalize라는 ORM을 많이 쓰고, TS를 사용하는 경우에 typeorm을 많이 쓴다고 함.
많이 쓰는 ODM에는 mongoose가 있다.
DB 관리 프로그램
DB 관리 프로그램에는 DBeaver, MySQL workbench 등이 있으며, IP주소와 포트번호 등의 접속정보를 이용해서 해당 DB를 확인하고 관리할 수 있게 해준다. 실제 DB를 구동하는 서버 프로그램과는 상관이 없다. 다른 프로그램임! 오늘은 이 중 DBeaver라는 관리 프로그램을 이용해서 typeorm으로 만든 내 DB의 table을 확인했다. 관리 프로그램에서 직접 쿼리문을 입력해서 DB를 수정하는것도 가능하다. 하지만 어려움.. 이러한 쿼리문을 전문적으로 다루는 개발자가 따로 있다고 한다.
4. 블로그 테마 변경
노션을 닮은 hELLO 티스토리 스킨을 받아서 블로그에 적용했다. 사이드바가 너무 넓지 않고 깔끔해서 아주 마음에 든다. 사이드바 영역이 정리된 덕분에 게시글 내용이 잘 보이는 것도 좋은 점이라고 생각함. 깃헙에 별도 찍었다..😊
앞으로 할 것
오픈 API 중 내 프로젝트 테마와 어울리는 것을 골라서 신규 페이지 제작. 현재 가장 유력한 후보는 IMdb -API의 영화 랭킹 API다.
'Journal > Today I Learned' 카테고리의 다른 글
| TIL - 2022.02.08 화요일 (0) | 2022.02.08 |
|---|---|
| TIL - 2022.02.07 월요일 (0) | 2022.02.07 |
| TIL - 2022.02.03 목요일 (0) | 2022.02.03 |
| TIL - 2022.01.28 금요일 (0) | 2022.01.28 |
| TIL - 2022.01.27 목요일 (0) | 2022.01.27 |