-
Web 백엔드 (1) / 서버 공부 전, 알아야 할 내용들 (+프론트엔드)Programming/Web Programming 2023. 5. 10. 03:54
프론트엔드 공부를 마쳤으니 백엔드도 시작해보자!
왠지 서버개발이라는 말만 들어도 어려운 느낌이다..
그래도 그저 하다보면 끝나있을거라 믿는다. 화이팅!
아래 주소의 강좌를 듣고 있으며 작성된 내용은 해당 강좌를 기반으로 한다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무!
https://class101.net/ko/products/5fac071c1105fb001383cd2a
[웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! | 개발자 사관학교
웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 대체 뭐부터 개발해야 할지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작할지 모르기 때문에 막막합니다. 개발 방향성이 없으니 그걸 잡아
class101.net
CHAPTER 1: 백엔드를 배우기 전 워밍업!
[1. 본격 서버 개발 전, 서버 & 백엔드 개념 큰 그림 잡기]
- 백엔드와 서버개발은 웹 개발에서 거의 같은 의미이다.
서버개발(Server) == 백엔드(Backend)
- 백엔드 개발이란, .html 파일과 주소와 데이터를 연결하는 작업이다.
= 어떤 주소를 타고 들어갔을때 어떤 데이터를 연결해주겠다.
- 백엔드 개발에서 자주 쓰이는 표현: 요청과 응답
주소를 치고 들어가 그림파일이나 데이터를 요청(Request)한다.
해당 주소에서 요청하는 그림파일이나 데이터를 보여주는 것을 응답(Response)이라고 한다.
- 주소 맨 앞의 HTTP 또는 HTTPS는 무슨 의미일까?
HTTP(Hypertext Transfer Protocol)
HTTPS(Hypertext Transfer Protocol Secure)
-> secure이 붙은 https가 조금 더 보안성이 강한 주소.
http와 https는 단순히 www 웹에서 정보를 주고 받을때 사용하는 약속(=프로토콜)이다.
둘은 각각 컴퓨터에서 다음과 같은 포트를 사용하고 있다.
HTTP: 80포트(Port)
HTTPS: 443포트(Port)
- 포트란 무엇일까?
포트는 일종의 서버라는 집에 들어가기 위한 대문같은 것이다.
다음은 이해를 돕기 위한 예제이다.
HTTP 가라사대! -> 80포트(Port) -> 일반 톨게이트
HTTPS RKFKTKEO! -> 443포트(Port) -> 검문하고 있는 톨게이트
'가라사대'라는 주소가 있다고 하면 https의 경우 그대로 주소를 노출해서 넘겨주는 것이 아닌,
보안을 높여 암호화해서 보내준다.
해당 주소들은 각각 보안성에 맞게 다른 포트의 문을 거쳐 들어간다.
(포트 넘버는 각각 주소에 숨겨져있다.)
- 라우터(Route)란 무엇일까?
문에 거쳐 들어오면 포트넘버, 그리고 주소에 따라 각각 적합한 데이터가 준비되어있는 방으로 안내해준다.
이때 이 안내자의 역할을 담당하는 존재가 라우터이다.
라우터란 주소에 따라 사용자를 특정 방(=주소)으로 안내하는 친구, 즉 주소를 만드는 친구이다.
- 웹 서버를 만든다는 것
1. 어떤 포트(프로토콜)로 사용자 요청을 받을 것인지
2. 어떤 방을 이용하면, (주소의 방을 이용하면)
3. 어떠한 데이터를 보여줄 것인지 응답 (그림파일, 데이터)
=> 서버를 만든다는 것은 주소를 만들고 내용을 연결하는 것
=> 서버를 만든다는 것은 폴더와 자바스크립트 파일을 만드는 것 (Node.js의 경우)
=> 서버를 만든다는 것은 나만의 집을 만드는 것
이후에는 만든 집(서버)에 집주소(공인IP->도메인)을 달아줘야 한다.
주소는 아마존, 마이크로소프트에서 서버 컴퓨터를 임대해 받을 수 있다.
이 내용은 프론트엔드 강좌 초반 부분에서 정리했기 때문에 해당 내용을 참고하면 좋을 듯하다.
[2. 명령어로 컴퓨터 공부 폴더 만들기]
명령어는 지난 프론트엔드에서 다뤘었다.
프론트엔드 공부때 작성했던 내용! [3. 깃허브 프로젝트 생성 및 공부 폴더 연결 (코드관리)]
깃허브 관련 내용 역시 프론트엔드 공부때 자세히 다루었었다.
아래의 포스팅을 참고하면 깃허브 연결까지 가능하다.
Web 프론트엔드 (1) / Git Hub 환경 세팅
데이터 아트 작업 중에서 관객이 직접 그 데이터에 관여하는 작업을 만들고 싶어졌다. 그 과정에서 웹/데이터베이스/서버... 등의 공부의 필요성을 느껴 당분간은 개발 공부만 해야할 것 같다. T-
leere.tistory.com
[4. vscode 사용법 속성 강좌]
vscode를 이용해 node.j도 이어서 공부할 예정이다.
프론트엔드에서 사용했던 것처럼 그대로 사용하면 된다.
아래 내용 중 앞부분이 도움이 될 것 같다.
https://leere.tistory.com/25?category=1081458
Web 프론트엔드 (2) / 웹 개발 이론 및 배포 과정
이어서 남은 Chapter1 부분을 공부해본다. 클래스 101 [유료강좌] 개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무! https://class101.net/ko/products/5f53ae772e3e0d001cd99667 [웹 개발
leere.tistory.com
또한 vscode내에서 Terminal - new Terminal을 누르면 터미널 사용이 가능하다.
따라서 vscode내에서 바로 코드들을 깃허브에 업로드할 수 있다.
vscode내에서 터미널을 열경우 우리가 작업중인 폴더를 바로 열어준다는 것 외에 다른 차이점은 없으니
편하게 똑같이 사용하면 된다!
위 명령어들을 통해 바로 업로드 가능하다. (일반 터미널 명령어와 동일) [5. 백엔드 학습을 위한 HTML 속성 강좌]
백엔드 공부를 위해서는 기본적인 html도 익혀두어야 한다!
중복되는 내용은 빼고 간단하게 짚고 넘어가보자.
<head> 태그는 주로 웹사이트의 중요한 정보가 담긴다.
특히 <meta> 태그에는 해당 html파일의 정보라든지,
사람들이 google같은 검색엔진에 검색했을때 대표적으로 보여주고 싶은 내용 같은 것들을 적는다.
<body>태그에는 실제로 웹사이트에 보여주고 싶은 내용들을 작성해준다.
<h1>, <p> 또는 <img>태그 등 다양한 태그들을 이용해 구현이 가능하다.
[6. 백엔드 학습을 위한 CSS 속성 강좌]
CSS는 html에 스타일을 입히는 언어이다.
선택자를 통해 html의 특정한 태그들을 선택해 디자인을 입힐 수 있다.
Bootstrap을 이용해 빠른 제작이 가능하다!
자세한 내용은 지난 프론트엔드 내용을 참고하면 좋을 것 같다.
[7. 백엔드 학습을 위한 JS 속성 강좌]
자바스크립트는 화면의 움직임을 나타내기 위해 만들어진 언어이다.
하지만 지금은 프론트 뿐만 아니라 백엔드까지 웹개발 전체를 아울러 사용된다.
그렇기 때문에 백엔드 개발에만 관심을 두더라도 자바스크립트는 꽤 중요해보인다.
- 외부파일로 js 파일 연결하기
CSS파일을 외부에 따로 만들고 html에 연결했듯이 javaScript파일도 외부에 만들고 연결해줄 수 있다.
HTML <head>태그 안에 다음과 같이 적으면 연결이 가능하다.
- let변수와 const변수의 차이
let: 중간의 값을 변경할 수 있다.
const: 한번 선언한 값에서 변경이 불가하다.
(바뀌면 안되는 key값, 등을 선언하는데 유용하다.)
예를 만들어 보았다.
let 변수인 a와 const 변수인 b 안에 처음 선언한 값과 다른 값을 넣어보았다.
a는 변경된 값이 잘 출력되지만 b는 에러가 난다.
에러메시지에서 알 수 있듯이 constant variable은 값이 재할당이 안된다.
- 리스트와 딕셔너리/객체(Dictionary) 자료형
*리스트에서 값 추가하기: arr.push[원하는값]
*리스트에서 값 호출하기: arr[원하는 인덱스]
*딕셔너리에서 값 추가하기: dic.이름 = 값 또는 dic[이름] = 값
*딕셔너리에서 값 호출: dic.객체 (.으로 접근한다.)
= 이름 그대로 사전처럼 key와 value가 쌍을 이루는 것이 특징.
리스트 안에 딕셔너리, 딕셔너리 안에 리스트 등 서로를 내부값으로도 가질 수 있다.
Q. 자바스크립트에서 배열은 무엇인지, 리스트는 무엇인지가 헷갈린다. 리스트=배열인가?
이부분에 대해 공부가 더 필요한 것 같다.
다음 강의부터는 본격적으로 서버 공부에 관한 내용이다!
혹시 이 내용들이 프론트엔드를 이해하기에 조금 부족하다면,
전에 포스팅한 Web 프론트엔드 내용들이 도움이 될 것 같다.
자바스크립트에 대해서는 아직 아는게 많지 않다보니
언젠가 꼭 자바스크립트만 공부할 기회를 만들어야 할 것 같다.
출처: 클래스101 / [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 백엔드 (3) / express, middleware, supervisor 사용해보기 (0) 2023.05.12 Web 백엔드 (2) / node.js와 npm 설치하기, 기본 구조 설계하기 (0) 2023.05.10 Web 프론트엔드 (12) / 영화 리뷰 사이트 만들기 3 (3) 2023.05.08 Web 프론트엔드 (11) / 영화 리뷰 사이트 만들기 2 (0) 2023.05.08 Web 프론트엔드 (10) / 영화 리뷰 사이트 만들기 1 (1) 2023.05.08