Web 프론트엔드 (2) / 웹 개발 이론 및 배포 과정

이어서 남은 Chapter1 부분을 공부해본다.

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

https://class101.net/ko/products/5f53ae772e3e0d001cd99667

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

 

 

 

CHAPTER1 : 개발하기 전 준비 및 워밍업

 

[5. 친해져야 할 에디어 vscode 사용법]

 

편리한 개발을 위한 에디터는 여러가지가 있지만,

vscode (visual studio code)를 사용한다고 해서 오랜만에 다시 vscode를 열었다.

설치가 되어있지 않다면 아래 링크에서 다운받을 수 있다.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

 

처음 들어가면 이런 화면이 나오는데 

나의 경우, 지난 강의에서 web-study폴더를 만든 뒤 이미 깃허브와 연결해두었기 때문에

open 버튼을 통해 해당 폴더를 열어주었다.

 

 

 

 

그리고 나면 해당 폴더가 열린다.

Terminal - New Terminal (아마 처음 열면 그냥 Terminal이라고 떴던 것 같다.)

을 누르면 하단에 터미널창이 나타나는 것을 볼 수 있다.

전에 터미널을 이용한 것과 마찬가지로 명령어를 입력하면 똑같이 사용할 수 있다.

vscode 내에서 터미널을 이용하면 바로 코드들에 깃허브에 업로드 할 수 있다. 

 

 

 

 

실제 터미널에서 사용했던 명령문이 여기서도 잘 작동하는 것을 알 수 있다.

* 윈도우의 경우, Terminal Select Default Profile을 Git bash로 바꿔주어야 한다고 한다.

기본 설정된 터미널이 맥과 다르다 보니 한단계 더 설정해주어야 하는 모양이다..

 

 

 

 

간단히 vscode에서 맨 왼족에 제공하는 인터페이스를 살펴보자면

(1) 돋보기는 파일 내에서 자신이 원하는 부분을 찾을 수 있다. (키워드로 검색)

(2) 동그라미 세개 연결된 아이콘, 밑에 재생 버튼같은 아이콘은 지금은 신경쓰지 않아도 된다. 

(3) 아래 네모들이 모여있는 아이콘을 누르면 자신의 기호에 맞게 vscode에서 필요한 추가 기능들을 다운로드 받을 수 있다.

 

 

 

예를 들어 material을 검색해 맨 위에 뜨는 Material Icon Theme를 눌러 다운받아 본다.

 

 

 

 

install한 뒤에 돌아와 폴더와 html 파일과 css 파일을 하나 만들어보았다.

아이콘이 각각 폴더, html과 css로고로 설정되어 파일이 만들어지는 것을 볼 수 있다.

 

이처럼 추가적으로 기능을 다운받을 수 있다! 

다시 취소하고 싶으면 아까 다운받은 창에 들어가 uninstall을 다시 눌러주면 되는듯 하다.

 

 

 

 

 

 

 

 

 

 

 

 

CHAPTER2 : 웹과 서버의 동작 방식 이해하기

 

[1. 웹과 서버의 동작 방식 이해하기]

 

본격적으로 프론트엔드 공부에 들어가기 전에 웹(프론트엔드)과 서버(백엔드)가 어떤식으로

데이터를 주고받는지 알아볼 필요가 있다.

 

강사분께서는 야구에 비유해주셨는데 프론트는 투수, 백엔드는 포수라고 이해할 수 있다.

프론트에서 공을 던지면 백엔드에서 받고 서로 공이라는 데이터를 주고 받는다.

 

하지만 마구잡이로 데이터를 주고 받는게 아니라

정해진 규칙에 따라 그림파일 또는 텍스트 데이터를 주고 받아야 한다.

여기서 정해진 규칙이란 API를 의미하고 이는 주소를 뜻한다.

즉, 주소의 형태로 데이터를 주고 받고 한다는 의미인 것 같다.

 

또한 프론트에서 벡엔드로 정보를 줄때에는

GET 방식과 POST 방식으로 나뉜다.

 

(웹 프로그래밍에 경험이 없어 완전히 이해가지는 않지만 큰 틀부터 이해하도록 노력해본다.)

 

 

 

 

 

 

 

[2. 알고 시작하면 편한 API와 통신방식 GET, POST]

 

앞서 적었던 GET 방식과 POST 방식에 대해 더 자세히 알아보려 한다.

 

1. GET 방식

GET방식은 보통 주소 뒤에 ?를 붙인뒤 key=valaue라는 작성 방식으로

key값과 value값을 전달한다.

코드에서가 아닌, 사용자가 직접 주소를 통해 데이터를 보낼 수도 있다.

(우리가 구글 주소를 쳐서 구글로 들어가듯이)

데이터를 조회하거나 그림파일을 요청할 때 쓰이는 방식으로

안전하지 않아도 되는 데이터를 전달할때 주로 사용한다.

 

 

 

2. POST 방식

POST 방식에서는 데이터를 전송하고 저장하는 역할을 담당한다. 

민감한 데이터를 전달할때 사용하는 방식이기 때문에 코드단에서 

Ajax라는 도구로만 데이터 전달이 가능하다.

 

이후에 javascript를 공부하면서 직접 데이터를 주고 받아보면

이 부분에 대한 이해가 훨씬 빠를 것이라고 한다.

지금은 이 정도까지만 이해하고 넘어가도 될 듯하다!

 

 

 

 

 

 

 

[3. 빠르게 흝어보는 웹 서비스 배포과정]

 

웹 서비스 배포 과정은 어떻게 이루어질까?

일반적으로 아래와 같은 과정을 거친다.

 

기획 -> 디자인 -> 개발 -> QA -> 배포 

 

(1) 기획: 웹 서비스의 기능 요건, 명세를 정의한다.

(2) 디자인: 웹 사이트 디자인을 진행한다. 프론트 개발자와 소통하며 개발이 가능한지 상의한다.

(3) 개발: 디자인을 토대로 프론트 개발을 진행한다. 사용자들이 보는 웹 사이트 화면을 개발한다.

- 서버개발자는? 기획과 동시에 API 개발을 진행한다. API 개발이란 기능 개발로, 

이 주소는 GET 방식으로 이 주소는 POST 방식으로 할 것이다. 어떤 정보를 건네줄 것이다. 등등 기능을 개발한다.

 

또한 프론트 개발이 어느정도 진행되었을 때, API 명세를 정리하여 프론트 개발자에게 전달한다.

프론트 개발자는 그 명세를 토대로 어떤 기능과 결과값을 받게 될지 확인하며 프론트 내에서 기능 개발을 진행한다.

이 과정에서 프론트 개발자와 서버 개발자가 함께 협업하며 웹 서비스 개발을 완성한다.

 

(4) QA (Quality Assurance): 배포 전 프러덕트 테스트를 거친다.

개발이 완료된 웹 서비스에 문제가 있는지 없는지, 기획자, 디자이너, 개발자 모두가 참여한다.

또한 전문 업체에 맡겨 수차례 확인을 하기도 한다.

 

(5) 배포: 테스트가 완료되면 웹 서비스가 배포된다.

IP (공인) 주소가 딸린 컴퓨터를 클라우드 업체로부터 빌려서 만든 웹서비스를 업로드 한다.

클라우드 서비스에는 대표적으로 아마존, 마이크로소프트, 네이버 등이 존재한다.

 

 

-> 컴퓨터를 빌린다는 의미가 지금은 잘 이해되지 않는다.

직접 만들고 배포까지 거쳐보며 이해해보면 좋을 것 같다.

 

 

 

 

 

 

 

[4. 빠르게 흝어보는 배포과정까지의 개발 기술 종류들]

웹 서비스 개발에는 Front-End와 Back-End가 있다.

구체적으로 각각 어떤 개발 기술 종류들이 있는지 살펴보자.

 

1. Front-End

프론트엔드는 두가지의 과정이 있다.

우선 디자인을 코드로 옮기는 과정 그리고 API(기능)을 화면에 연결하는 과정이다.

(기능 연결은 없이, 디자인만 코드로 개발자는 웹 퍼블리셔라고 부른다.)

 

디자인을 코드로 바꾸는 과정에서 필요한 기술

- HTML

-CSS

-JavaScript 

 

API를 화면(웹 사이트)에 연결하는 과정에서 필요한 기술

- React

- Angular

- Vue

 

* 위 세가지를 배우는 것은 선택 사항이다. Javascript만으로도 충분히 기능 구현도 가능하다.

하지만 예를 들어 일부 데이터가 수시로 바뀌는 상황에서 (네이버 실검처럼) 매번 모든 화면을

새로고침하는 것은 비효율적이다.

이런 경우와 같이 효율적인 성능/코드 관리를 위해 프레임워크/라이브러리 도구들을(위 세개)배우는 것이다.

 

 

 

2. Back-End

백엔드는 다음과 같은 프로그래밍 언어들로 개발할 수 있다.

- Java

- Python

- Javascript 

- Ruby

(등등... 이 외에도 엄청 많다고 한다.)

 

 

 

물론 위 언어들로 하나부터 열까지 다 개발할 수 있지만

Framework를 이용해서 더욱 편리하고 간편하게 개발할 수 있다.

Framework란 이미 완성품들을 가져다 활용할 수 있도록 하는 도구이다.

각각 다음과 같은 언어와 매치된다.

 

<Framework>

- spring : Java

- Python : diango

- node.js : Javascript 

- Rails : Ruby 

 

 

 

만약 node.js로 서버 개발을 진행한다고 가정했을때

사용자가 너무 많아져서 node.js에 데이터가 과하게 쌓이면 어떻게 될까?

아마 서버유지를 위해 엄청 큰 비용을 지출해야 할 것이다.

이런 비효율성을 방지하기 위해 데이터를 따로 저장하고 꺼내 써오는 Database를 이용한다.

Database도 대표적으로 다음과 같은 종류들이 있다.

 

<Database>

- My SQL

- mongo DB

- Postgre SQL

- Maria DB

 

 

 

이제 웹서비스를 배포하기 위해 서버 컴퓨터를 대여해야 한다.

서버 컴퓨터를 대여할 수 있는 곳은 다음과 같다.

 

- amazon web services

- Google cloud platform

- Microsoft Azure

- Naver cloud platform

 

 

 

이렇게 서버 컴퓨터까지 대여하면 IP를 받게된다.

예를 들어 IP:123.12.123.3과 같은 주소를 받게 되는데

이 주소들을 모든 사용자들이 기억할 수는 없다.

때문에 www.도메인.com 과 같은 도메인 형태로 배포하게 된다. 

 

이와 같은 과정을 거쳐 웹사이트의 제작부터 배포까지 이루어진다.

 

 

 

 

 

 

 

 

 

 

 

이로써 기본적인 이론공부 및 환경세팅이 끝났다.

다음 수업부터는 본격적으로 프론트엔드 개발을 공부하게 된다.

귀로만 익고 정확하게는 몰랐던 정보들이 가지런히 정리되니

깔끔하고 시원한 기분이 든다.

프론트엔드 공부도, 연이어 힘내보자.

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교