하기 전에...
1) 개인적고민
2) 자기소개페이지 만들기 폐지
3) 언어들
자바스크립트 vs 파이썬
코딩을 계속 팔 거라면 무조건 두 언어 중 하나는 해야 합니다.
자바스크립트 -> 웹을 할 거라면 !
파이썬 -> 머신러닝 / 딥러닝 / 데이터 사이언스를 할 것이라면.
물론 파이썬으로도 백엔드 구현은 됩니다만 프론트는 아직 엄청 대단하지는 않은 것 같아요.
어떤 주제를 할 지 고민하다가 이번 주에 아기멋사발표회 피드백을 요청하신 분이 생각났습니다. 웹에 대해 알면 좋겠다는 생각이 들어서 준비해 보았구요.
1) 기획하기
개인적으로는 우리팀에서 집중하고 싶은 것이 기획이냐 구현이냐를 정하는 것이 좋겠습니다.
기획에 초점을 둘 경우 - 프론트 사람들이 웹 페이지를 예쁘고 깔끔하게 잘 만들고 아주 기초적인 기능만 구현합니다. 그 외의 기능들은 비워둬요. 시간이 짧기 때문에 사실 그런다고 뭐라할 사람은 없습니다. ex) 운동음악추천
구현에 초점을 둘 경우 - 기술적인 목표를 정하고, 그걸 깔끔하게 구현하는 것을 목표로 합니다. 기획은 그 기술 수준에 맞게끔 합니다. 원래 웹 기획을 이렇게 하지는 않겠지만, 기술을 처음 배우는 입장에서 이렇게 기획해보는 것도 나쁘지 않다고 생각합니다. 일단 할 수 있다는 기술구현도 해보면 제대로 되지 않는 부분들이 분명 있고, 이왕 개발동아리에 들어왔으면 구현 능력에 집중해보면 좋겠다~ 하는 것도 있고, 기술구현 난이도를 중심으로 구현을 해보면 기획자로서도 좋은 경험이 되지 않을까 생각하기도 하고 그렇습니다.
좋은 예시
http://mail-helper.com/
2) 단순한 형태의 웹
보통 프로젝트를 할 때 여러 가지 방식을 사용합니다.
그리고 이제 정해진 게 아니라서 초심자 입장에서는 엄청 혼란스럽습니다.
어디까지가 프론트의 역할이고, 어디까지가 백의 역할인지...
그런 것들을 좀 알아보겠습니다.
대충 프론트도 지금 백엔드의 여기까지는 알고 있는 것이 전체적인 그림을 그리고 이해하는 데 좋다~ 하는 걸 말씀드리려 합니다.
제가 그린 그림이고, 웹에서는 이게 거의 핵심입니다.
모든 설명이 이 그림을 바탕으로 이루어진다고 생각하시면 됩니다.
지금부터 모든 비유는 음식점으로 하겠습니다.
클라이언트는 손님, 그러니까 밥 먹으러 온 사람이고
서버는 음식점 자체, 그러니까 밥을 주는 사람입니다.
이 두 주체의 관계는 단순합니다.
밥 달라는 요청(Request)을 하면 밥을 주는(Response) 관계입니다.
그럼 밥은 뭘까요 ? 웹 페이지가 되겠습니다.
예를 들어서 네이버 주소창에 www.naver.com 이라고 입력합니다.
엔터를 누르는 순간 클라이언트는 브라우저라는 도구를 사용해서
서버에게 우리가 아는 naver의 웹 페이지를 달라는 요청을 한 셈입니다.
그러면 네이버의 서버가 우리에게 네이버 웹 페이지를 갖다 줍니다.
일단 작년 아기멋사 발표회의 경우, 아주 단순한 정도의 기능만 구현했던 것으로 기억합니다. 프론트엔드 사람들은 html과 css로 웹 페이지를 만들었습니다. 음식점 비유로 따지면 음식을 미리 만들어둔 셈입니다.
그럼 백엔드 사람들은 클라이언트가 A를 요청하면 A를 응답으로 줄 수 있고, B를 요청하면 B를 응답으로 줄 수 있도록 서버를 구성하는 코드를 짰습니다.
사실 이런 형태의 웹은 음식점이라기보다는 자판기에 가깝습니다. A를 원하면 A 버튼을 누릅니다. 그럼 A가 나옵니다. B를 원하면요 ? B를 누르고 그게 나오겠죠. A상품과 B상품은 프론트엔드쪽이 만들고, 버튼을 눌렀을 때 맞는 상품이 나오는 자판기는 백엔드가 만들었습니다.
사실 둘 다 쉬운 작업이 아닙니다만 도와줄 도구들이 많습니다.
프론트의 경우에는 tailwind 정도의 css 툴을 활용해서 코드를 짠 팀도 있었지만, 더 편하게 Bootstrap을 사용한 팀도 있었습니다.
위의 사진은 부트스트랩에서 제공하는 HTML 템플릿입니다.
PPT 템플릿이랑 똑같다고 보시면 됩니다. 이걸 다운받아서 우리가 원하는 사이트로 조금조금씩 코드를 수정하는 방식입니다. 기획했던 사이트에 필요한 웹 페이지를 이런 방식으로 다 완성하고 나면, 그 html파일과 css파일을 백엔드 작업자한테 보내줍니다.
그러면 백엔드 작업자는 요청을 받았을 때 그 요청에 맞는 웹페이지를 띄우는 기능을 개발했습니다. 여러 기능을 구현했지만, 가장 주된 작업은 아마도 라우팅일 것입니다. 라우팅이란 특정 Url에 웹 페이지를 배정하는 작업을 의미합니다.
예를 들자면
www.naver.com 이라는 url에는 네이버의 메인 페이지를 배정합니다.
그래서 www.naver.com을 주소창에 입력하면 
이런 웹사이트가 뜨는 겁니다.
여기서 웹툰을 클릭하면, 웹툰 페이지를 가져다 줍니다.
근데 주소창을 보면 url이 바뀌었습니다.
https://comic.naver.com/index 이라고 나와 있네요.
네이버 웹툰의 메인 페이지는 https://comic.naver.com/index 라는 url에 라우팅이 되어 있는 겁니다.
대충 원리를 아시겠죠 ?
프론트는 네이버 웹툰 페이지, 네이버 메인 페이지를 만드는 일을 합니다.
그러면 백엔드는 네이버 웹툰 페이지를 https://comic.naver.com/index 라는 url 주소에 라우팅하고 네이버 메인 페이지는 https://www.naver.com 이라는 주소에 라우팅합니다.
이게 끝일까요 ? 이게 끝이면 자판기가 아니죠 ??
응답을 받는 부분이 남았습니다.
사실 종류가 더 많지만, 아주 기초적으로 클라이언트가 서버에 보내는 요청은 2가지가 있습니다. Get, Post입니다.
Get은 뭘까요 ? 갖고 오라는 겁니다. 달라는거죠.
Post는 뭘까요 ? 갖고 가라는 겁니다. 서버야 이것좀 가져가~ 하는겁니다. 네이버 블로그 포스팅 생각하시면 됩니다.
Get 요청은 위에서 보여드렸던 것들입니다.
주소창에 www.naver.com을 입력했더니 어떻게 되었죠 ?
네이버 메인 페이지를 가져왔죠 ? get 요청을 한겁니다.
백엔드가 get요청까지만 구현하면 자판기같은 웹이 됩니다.
프론트엔드에서 넘겨준 웹 페이지들을 url에 라우팅해둡니다.
그 후에 get요청이 들어오면 그 요청을 할 때 같이 넘겨준 url주소를 보고
라우팅된 것이 있으면 그 웹페이지를 클라이언트에게 보내줍니다.
없으면요 ? 없다고 말해주면 그만입니다. 여러분이 가끔 보셨을 404 not found error가 바로 그겁니다.
근데 자판기같은 웹은 사실 한계가 명확합니다. 이런건 회사 소개 웹페이지 만들 때나 쓸까말까 합니다. 사실 PPT같은거죠.
이런 회사 페이지같은 경우에
왼쪽에 회사 로고를 누르면 메인 페이지가 나오게 하고
상단 중앙의 company를 누르면 회사 정보 페이지가 나오게 하고
solution을 누르면 제품 정보 페이지가 나오게 하는 식인 겁니다.
근데 이러면 만들 수 있는 웹이 너무 한정적입니다.
사실 그닥 웹 같지도 않아요 그쵸 ?
살짝의 동적인 기능을 구현하기 위해서 !
(회원가입이나 글쓰기 같은 기능들)
POST요청을 사용합니다.
게시글 작성 기능을 예로 들어볼까요 ?
보통 블로그 같은 곳에서 글쓰기 버튼을 눌러서 게시글을 작성하고 업로드 버튼을 누르면 서버에 들어가는 요청은 POST요청입니다.
그 글 정보를 서버에게 보내주는 거죠. 왜요 ? 게시글 작성을 원하니까요.
그러면 서버는 그 요청을 받아서 요청에 포함된 글 정보를 어딘가에 저장합니다. 당근 데이터베이스겠죠 ??
글이 생겼으면 그 게시글 디테일 페이지가 있고, 그 디테일페이지의 URL 주소가 또 필요하겠죠 ?? 일단 백엔드는 누가 글을 올릴 때마다 그 글에 대한 디테일 페이지 url 주소를 생성하고, 거기다 라우팅을 해줍니다.
blog/keyboard/1
blog/keyboard/2
blog/keyboard/3
blog/keyboard/4
blog/keyboard/5
blog/freeboard/1
blog/freeboard/2
blog/freeboard/3
blog/freeboard/4
blog/freeboard/5
그리고 html 파일에는 빈 구멍을 만들어두고, 백엔드가 POST요청을 통해 받은 글을 여기다 채워넣어서 완성하는 식이 됩니다.
아주 단순한 개념이지만 이런 식의 웹을 SSR(Server Side Rendering)이라 합니다. 서버가 페이지를 렌더링해서 그때그때 응답에 맞는 웹을 띄워주는거죠.
이런 식으로 하면 각 웹페이지에 대한 html, css, js코드가 있겠죠?
게시판을 예로 들면
메인 페이지(html, css, js)
코딩게시판(html, css, js)
키보드게시판(html, css, js)
디테일페이지(html, css, js)
이걸 보내주면 백엔드가 라우팅 작업 등등을 마쳐 클라이언트의 요청에 응답할 수 있는 서버개발을 완료합니다.
마지막 개념이 배포입니다.
www.naver.com은 전세계 누구나 브라우저에 www.naver.com을 입력하면 네이버 메인 페이지를 만나볼 수 있습니다. 이렇게 인터넷상에 내 웹사이트를 올리는 걸 배포라고 합니다. 사용하지 않는 컴퓨터가 있다면 그걸 24시간 낸 켜둠으로써 서버컴퓨터로 사용할 수도 있지만, 최소 100만원은 들고 전기세도 대박이겠죠 ?? 그래서 보통은 AWS(아마존의 클라우드 서비스) 등을 활용합니다. 돈이 많아서 컴퓨터를 엄청 많이 가지고 있는 회사의 컴퓨터를 원격으로 사용해서 그걸 내 서버컴퓨터로 사용하는겁니다. 서버컴퓨터에 내가 코딩한 결과물을 넣고 전기사용량 등등에 준하는 서버비를 지출하면 되는 구조입니다.
자판기보다 조금 더 발전한 형태의 웹을 만들 수도 있습니다. 이때부터는 타
리액트를 쓰는 거겠죠 ?? 리액트는 코드 짜는 방식이 쉬워서 쓰는 것도 있지만, SPA 때문에 많이 씁니다.
Single page Application.
다음에 리액트 시작하면 바로 CSR(Client Side Rendering) 설명하겠습니다.
대략 요런 식의 운영이 됩니다.
