프론트엔드의 꽃, 리액트 - 1주차 개발일지(Scope, 웹 동작 방식, 서버리스)

 

 

 

직업상담사님이 구로 청년 이룸에서 진행하는 GD프로젝트를 추천해주셨다.

 

 

 

자세한 내용 [클릭]

 

커리큘럼을 보시면 프론트는 React 백은 스프링에 깊게 배운 후 

공통적으로 알고리즘과 취업관련된 내용을 2달 동안 탄탄하고 알차게 배우는 거 같아 보였다.

 

평소에 React를 좋아하는 저로썬 이건 못참지...ㅋ

저질러 아니 지원해버렸다..

 

 

목차

1. GD프로젝트에 대해

2. 새롭게 배운 내용(javascript scope, 웹 동작 방식, 서버리스)

3. 앞으로의 방향성

---

1. GD프로젝트에 대해

---

GD프로젝트는 스파르타 코딩 클럽이라는 플랫폼을 통해

교육생들에게 온라인 강의 수업을 지원한다.

(원래는 구로 청년 이룸에서 오프라인 수업을 지원할 예정이었는데

시국이 시국인지라 온라인 수업으로 대체된 거 같았다..)

 

어쨌든 온라인 강의 수업을 지원하는 이 스파르타 코딩 클럽은

 

 

 

 

 

 

 

매우 귀엽다

 

 

 

 

 

정해진 시간안에 정해진 교육을 수강하지 않으면 잡아먹는 진도사우루스와 함께하는 진도표

 

귀여운 캐릭터들과 심플한 형태로 구성되어 있다.

 

선생님도 되게 귀여우시다

 

강의자료는 노션으로 제공된다.

 

 

GD프로젝트 수강생들은 이런 귀엽고 심플하고 쾌적한 UI에서 언제 어디서나 온라인 수업을 들을 수 있으며,

 

스파르타 코딩 클럽의 슬랙 단톡 방에 초대되어

질문 & 잡담 & 이벤트 도 참여할 수 있게 된다.

 

무엇보다 이런 모든 것들이 무료라는 것이 대단히 감사할 따름이다.

열심히 수강해서 우수 수료생이 되어 보이겠다.

 

 

 

 

 

 

---

2. 새롭게 배운 점

---

 

사실상 GD프로젝트에 들어가기 이전에 나는 React 그리고 javascript에 대해 기초지식은 알고 있는 상태이다.

그래서 개발일지에는 GD프로젝트에 와서 새롭게 배운 점들을 위주로 기술할 예정이다.

 

 

2 - 1 javascript scope

 

많은 자바스크립트 개발자들이 var를 사용하지 말라했다.

그 이유는 var는 호이스팅이 함수 방식을 따라서

 

console.log(a);
var a = 3;

이렇게 선언 전이여도 사용될 수 있기 때문이다.

(심지어 3이 아닌 undefined가 출력된다...)

 

그래서 코드가 길어지면 var는 유지보수를 어렵게 한다.

그래서 var 작동방식이 좀처럼 확 와닿지 않아서 let만 쓰고 있었는데

튜터님이 이 예시를 통해 쉽게 알려주셨다. 

 

 

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	console.log(a, b, c);
}

출력 결과

이 var는 말했다시피 호이스팅이 함수 방식을 따른다.

그래서 if문 안에 log는 if문 안에 있는 a, b, c를 따르므로 모두 다 1로 출력이 되지만

if문 밖에 있는 log는 if문 밖에 있는 a, b와 if문 안에 있는 c를 따라서 0,0,1로 출력된다.

if문 안에 있는 c는 if문을 나가도 계속 살아있게 된다.

언제 죽냐면 scope 함수가 끝날 때까지 살아있게 된다.

그러므로 2번째 log는 가장 마지막에 초기화되었던 var c = 1을 따르므로 1을 출력하게 된다.

 

아무래도 자바스크립트가 나오기 직전 c++, 자바 언어의 상수, 변수는

자바스크립트의 let과 유사하기 때문에 개발자들은 let을 선호하는 것 같다.

var 쓰지 말고 let 쓰자..

 

 

 

2 - 2 웹 동작 방식

웹의 기초이자 중요한 개념 중의 하나이다.

 

웹은 크게 앞에 보이는 클라이언트와 서버로 이루어져 있다.

여러분이 크롬 브라우저로 naver에 들어가면 여러분들의 컴퓨터는

naver 서버에 들어가서 naver페이지에 대한 정보를 요청(request)을 한다.

그럼 naver 서버는 그 요청을 받고 naver페이지의 데이터를 갖고 와서

요청한 클라이언트에게 응답(response)을 한다.

 

쉽게 말해 요청(request)하는 개체는 클라이언트

응답(response)하는 개체는 서버로 보면 된다.

 

또한 응답한 데이터는 html, css, js 파일로 이루어져 있다.

java의 JSP를 배운 사람이라면 알 수 있듯이 모든 웹 프로그래밍의 산출물은 html, css, js 인 것을 알 수 있다.

그 이유는 브라우저들이 궁극적으로 html, css, js파일을 읽고 웹페이지가 동작하는 방식을 결정하기 때문이다.

그리고 이는 http 통신을 통해 온 세상 사람들이 인터넷을 이용하게 되는 것이다.

http 패킷의 데이터를 보면 html 태그로 이루어진 데이터들을 볼 수 있을 것이다.

 

 

html태그들이 유니코드를 통해 16진수로 변환되어 라우터로 푸슝파슝 전송된다.(라우터내에선 2진수)

 

쉽게 말해 웹은

 

누가? 사용자가

언제? 클라이언트가 요청할 때, 서버가 응답할 때,

어디서? 클라이언트와 서버에서

무엇을? html, css, js 파일을

어떻게? http 프로토콜을 통해

왜? 그건 저도 몰라요

 

로 정리된다.

 

 

 

 2 - 3 서버리스

서버리스(ServerLess)는 말만 들어보면 서버 없이 웹을 개발한다?

라고 생각할 수 있을 텐데 자세하게 설명하자면

서버를 살 필요가 없다는 뜻이다.

사지 않고 다른 곳에서 빌려오는 것이다.

요즘은 AWS(아마존 웹 서비스)같이 서버를 클라우드 형식으로

빌려와서 사용하는 추세가 많기 때문이다.

예로 들면

 

---

의류 쇼핑몰 무신사 웹개발팀에서의 대화

---

 

프론트, 백 : 과장님 2021 설날 행사 무신사랑해 이벤트가 모두 준비되었습니다.

 

과장 : 좋군 얼른 진행하게!

 

인프라 담당 : 저기 과장님..? 설날 행사 이벤트가 시작하면 지금 있는 서버로는

많은 트래픽을 감당하지 못하는데요? 서버 좀 추가 구매합시다!

 

과장 : 서버가 무슨 땅 파면 나오는 줄 아나?! 이벤트 때에만 쓰고 평소에는 필요 없잖아!

 

인프라 담당 : 그러면 AWS에서 이벤트 때에만 서버를 빌려오는 것이 어떤가요? 

 

 

 

 

하드웨어적인 서버, 스토리지를 구입하지 않아도 이런 식으로 중요한 순간에 

서버, 스토리지를 더 싼 가격으로 이용할 수 있다는 것이다.

 

하지만 서버를 빌려올 뿐이지 백엔드 로직도 알아서 구현되는 것이 아니니

서버리스가 백엔드 리스가 되진 않는다.

 

 

 

 

---

3. 앞으로의 방향성

---

GD프로젝트 프론트수업에선 React의 router, redux처럼 고차원 개념과 firebase와 AWS로 앱 배포하기 등 

백엔드와 인프라 관련 수업도 다룬다.

현재 캐릭터 심리테스트 웹사이트 만들기 프로젝트에 진행 중인 나는

얼른 빨리 이 부분을 공부해서 적용시키고 싶은 마음뿐이다.

 

 

요번 주에 보는 정처기 실기 시험 합격해주세요...!!