자유/대외 활동

패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #7.5주차 학습후기

Chipmunks 2019. 5. 4.

728x90

패스트캠퍼스 프로그래밍첫걸음 5주차 학습이 끝났다.

다음 주까지 학습하면 절반에 도달할 것 같다.

HTML, CSS, BootStrap 다음으로 JavaScript 파트로 넘어왔다.

JavaScript 강의가 모든 파트 통틀어서 가장 많다.

총 19강 중에 5강을 들었다.

차근차근 한 걸음 한 걸음을 걸어 자바스크립트까지 정복해보자!

프로그래밍첫걸음 자바스크립트 강의가 다른 강의와의 차별점들이 있다.

그 중에 첫 번째로 바로 자바스크립트를 실습할 때 Firebase를 이용한다는 것이다.

첫 강의로 Firebase를 소개하고 첫 과제로 Firebase 프로젝트를 생성하는 실습을 한다.

자바스크립트 후반부에 Firebase를 이용해 배포 실습을 할 예정이다.

두 번째로 강의로만 그치지 않고 조금씩 변경을 해보게 하는 과제들이 있다.

강의만 듣게 되면은 어느 순간 집중력도 떨어지기 마련인데, 강의가 끝나면 퀴즈와 과제가 있으니

동기부여가 되고 다시 집중력도 살아난다. 모르는 점은 강의 댓글에 달면 강사님이 친절하게 답변 해주신다.

5주차 진도에서는

01. JAVASCRIPT 소개
02. 구글 Firebase 소개 및 프로젝트 생성
과제1. 구글 Firebase 프로젝트 생성하고 웹 프로젝트 시작하기
03. JAVASCRIPT 기초
과제2. 인터프리터/컴파일 이해하기
04. JAVASCRIPT 구조
과제3. 렌더링 순서 바꿔보기
05. JAVASCRIPT 변수
과제4. 변수의 스코프 이해하기

를 학습했다.

JavaScript 강의 초반부로 가벼운 내용들이다.

앞선 강의들에 비해서 외워야할 내용도 없고 강사님의 강의를 보며 이해하면 되었다.

JavaScript 기초 정리해보자.

01. JAVASCRIPT 소개

앞서 HTML, CSS 그리고 BootStrap 까지 실습했다.

즉 웹 문서의 구조를 만들고 그 구조에 외관을 익혔다.

이제는 사용자의 행동(키 입력, 마우스 클릭 등의 이벤트)에 반응하여 웹 문서에 행동을 주는 자바스크립트를 배울 차례다.

02. 구글 Firebase 소개 및 프로젝트 생성

HTML 시간에서 클라이언트와 웹 서버간의 관계를 이해했다.

클라이언트는 우리가 만들 수 있지만, 웹 서버까지 만들기에는 웹 서버 전용 언어를 배워야하니 시간이 오래 걸린다.

웹 서버를 대신해 줄 클라우드 서비스가 존재한다.

바로 대표적으로 구글에서 운영하는 Firebase이다.

Firebase가 웹 서버 역할을 대신해주게 된다.

Firebase는 구글 클라우드 플랫폼이다.

Firebase 플랫폼 중에서 정적 사이트 호스팅 기능을 이용할 예정이다.

구글 Firebase의 장점과 단점은 다음과 같다.

장점은 우리가 직접 서비스를 만들지 않고도 구글 Firebase에서 제공하는 기능들을 쓸 수 있다.

단점은 우리가 직접 코드로 작성할 수 없고, 제공되는 기능들만 쓸 수 있다는 점이다.

이런 단점에도 다양한 기능들을 빠르게 제공해주기 때문에 구글 Firebase를 쓰게 된다.

[ QUIZ ]

'Firebase'는 구글 클라우드 플랫폼이다.
파이어베이스(Firebase)서비스는 '정적 페이지' 호스팅만 가능하다.
서버측 프로그램을 '대신' 해준다

과제1. 구글 Firebase 프로젝트 생성하고 웹 프로젝트 시작하기

구글 Firebase Console 창에서 프로젝트를 생성해보는 실습이다.

프로젝트 추가 버튼을 눌러 위와 같이 프로젝트 이름을 설정하고 애널리틱스 위치를 대한민국으로 바꾸고

아래 약관을 체크하여 프로젝트를 손쉽게 만들었다.

프로젝트를 클릭하여 대쉬보드에 들어가면 위와 같은 화면이 나타난다.

잠깐 둘러보면, 좌측 메뉴에서 인증, 데이터베이스, 저장소, 호스팅, 함수, 머신러닝 기능을 제공해준다는 것을 알 수 있다.

개발 기능 뿐만 아니라 애널리틱스 기능까지 제공해준다.

저장소를 클릭했을 때의 화면이다.

자세한 내용을 보기 위해 문서 보기를 클릭해보자.

저장소 문서에서 웹 항목 트리를 클릭한 사진이다.

문서도 깔끔하게 한글로 번역되어 있다.

유투브 동영상 강의와 함께 기능들을 어떻게 사용해야하는지 자세히 알려준다.

구글 Firebase 문서가 굉장히 잘 되어 있어

초보 개발자들도 쉽고 간단하게 사용할 수 있는 것을 확인할 수 있었다.

03. JAVASCRIPT 기초

JavaScript 을 간단하게 정의해보자면 '사용자 동작에 반응하기 위한 언어' 로 정리할 수 있다.

웹 페이지 이동 없이 한 웹 페이지 안에서 사용자의 동작, 이벤트에 반응하여 원하는 결과를 바로 보여준다.

구글 사이트를 예를 들어보면, 메뉴 버튼을 클릭했을 때 자바스크립트의 기능을 확인할 수 있다.

웹 페이지 이동 없이 메뉴 버튼을 누르면, 사용자 행동에 바로 반응하여 바로 화면에 띄워준다.

이런 것들이 바로 자바스크립트가 하는 일이다.

프로그래밍 언어에는 컴파일 언어와 인터프리터 언어가 있다.

컴파일 언어는 exe 파일로 한 번에 프로그램 실행이 가능하다.

반면에 자바스크립트는 인터프리터 언어로 프로그램 코드를 작성된 순서대로 한 줄 한 줄 해석해준다.

[ QUIZ ]

Javascript 코드로 사용자의 '동작'에 반응할 수 있다.
웹 페이지에 일어나는 일들을 '이벤트' 라고 부른다.
Javascript는 '인터프리터' 언어이다.

과제2. 인터프리터/컴파일 이해하기

인터프리터 언어와 컴파일 언어에 대한 문서를 읽는 것이 과제다.

컴파일 언어와 인터프리터 언어의 특징들을 다시 확인할 수 있다.

컴파일 언어는 많은 줄의 코드를 돌릴 때 실행 속도가 빠르고 오류 찾기가 쉽다는 장점이 있다.

인터프리터형 언어는 모든 코드가 기계어로 번역하는 과정이 없다는 장점이 있다.

04. JAVASCRIPT 구조

자바스크립트의 선언은 다음과 같다.

1
2
3
4
5
<script type="text/javascript">
 
코드
 
</script>
cs

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 기초</title>
    <script type="text/javascript">
        document.write("안녕하세요.");
    </script>
</head>
<body>
    
</body>
</html>
cs

script 태그로 CSS 때와 같이 자바스크립트 코드를 넣을 수 있다.

자바스크립트 코드에서 document.write(); 는 화면에 글자를 그대로 출력해준다.

실행하면 다음과 같다.

개발자 도구로 확인하면 아무 태그 없이 "안녕하세요." 가 출력되는 것을 확인할 수 있다.

자바스크립트에서 DOM(Document Object Model) 이라는 개념이 등작한다.

HTML 엘리먼트 안에 또 다른 엘리먼트들을 포함하고 있다는 것을 앞서 HTML 시간에 확인했다.

이 구조를 자바스크립트에서 DOM Tree 라고 부른다.

자바스크립트에서 웹 페이지를 DOM 구조로 다룰 수 있다.

웹 페이지가 웹 브라우저로 나타나는 과정을 간략히 하면 다음과 같다.

HTML 코드에서 엘리먼트들을 DOM Tree 형식으로 분석하고

렌더링으로 실제 페이지를 만든다.

CSS 스타일 코드로 스타일을 적용시켜 재배치하여 우리 눈에 보여지게 된다.

자바스크립트를 외부에서 불러와 실행하는 코드는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 기초</title>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    
</body>
</html>
Colored by Color Scripter
cs

script 태그의 src 속성으로 외부 자바스크립트 파일을 웹 문서에 포함시킬 수 있다.

마지막으로 JavaScript 순서에 대해 알아본다.

main.js 파일에는 "안녕하세요." 를 출력하는 코드가 들어있다.

1
document.write("안녕하세요.");
cs

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 기초</title>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <p>P 태그입니다.</p>
</body>
</html>
Colored by Color Scripter
cs

<p></p> 태그가 나오기 전에

<head></head> 태그 안에 들어가 있는 자바스크립트가 먼저 실행이 되어

"안녕하세요." 가 출력이 된 다음에 p 태그가 나온다.

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 기초</title>
</head>
<body>
    <p>P 태그입니다.</p>
 
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Colored by Color Scripter
cs

그 다음에는 <body></body> 태그가 끝나기 전에 스크립트 코드를 삽입한 코드다.

p 태그가 렌더링이 먼저 된 다음에 자바스크립트 코드가 실행된 모습이다.

만약에 자바스크립트에서 DOM 구조를 다뤄야 한다면,

먼저 DOM 들이 렌더링이 되어야 하므로, body 태그가 끝나기 전에 스크립트 코드를 넣어야 잘 작동하게 된다.

이런 렌더링과 자바스크립트 코드 순서에 유의 하여야 한다는 것을 강조하셨다.

[ QUIZ ]

HTML은 'DOM' 구조 형태이다.
Javascript 코드를 작성시 '작성 순서'에 유의 해야 한다.

과제3. 렌더링 순서 바꿔보기

자바스크립트 삽입 코드를 바꿔 그 결과를 확인하는 과제다.

앞서 바로 결과까지 확인하였으므로 자세한 내용은 생략한다.

05. JAVASCRIPT 변수

Javascript 의 변수를 알아보았다.

변수는 언제 쓰는걸까?

주로 수학적 연산과 처리가 필요할 때 쓰이게 된다.

변수를 만드는 방법은 다음과 같다.

1
var 변수명;
cs

var 키워드로 변수를 선언하겠다고 알리고 그 뒤에 원하는 변수명을 지어준다.

변수 선언과 동시에 값을 할당해줄 수 있다.

1
var 변수명 = 값;
cs

등호(=)으로 오른쪽(값)에서 왼쪽(변수)으로 할당을 해준다.

변수를 선언하게 되면, 저장 공간인 메모리에 차곡차곡 쌓이게 된다.

메모리에 저장하였으므로 필요할 때마다 변수를 꺼낼 수 있게 된다.

다음으로 알아볼 내용은 자료형이다.

자료형이란 변수가 갖는 자료의 형태를 말한다.

자바스크립트에서의 자료형은 다음과 같다.

문자형(String)
숫자형(Number)
논리형(Boolean)
undefined
null

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 값이 정해지지 않은 상태 -> undefined
var x;
console.log(x);
 
x = 10;
console.log(x);
 
var y = 10, z = 10;
console.log(y, z);
 
// String(문자형), Number(숫자형), Boolean(논리형)
console.log(typeof x);
 
var str = "문자형";
console.log(typeof str);
 
console.log(typeof true, typeof false);
 
// -- 테스트 --
 
console.log("[테스트]");
 
var a = 10;
var b = 10;
console.log(a, b);
 
var a;
var b;
console.log(a, b);
cs

console.log() 함수로 콘솔 창에 값을 띄울 수 있다.

'typeof 변수명' 으로 그 변수명의 자료형을 알 수 있다.

콘솔창은 개발자 도구로 확인할 수 있다.

과제4. 변수의 스코프 이해하기

1
2
3
4
5
6
7
var a = 10;
var b = 10;
console.log(a, b);
 
var a;
var b;
console.log(a, b);
cs

의 결과를 확인하는 것이 과제다.

위 결과 사진에서 봤듯이 둘다 '10 10' 이 출력된다.

첫 번째 a, b 값을 출력하고 난 후에 a, b 의 변수를 생성해도

이미 해당 변수명이 메모리에 있기 때문에 undefined 가 아닌 이미 저장되어 있는 10이라는 값이 나타난다는 것을 확인할 수 있다.

프로그래밍첫걸음 자바스크립트를 들어가며 본격적으로 프로그래밍을 배우는 것 같다.

변수를 공부하며 컴퓨터 메모리가 어떤 역할을 하는지 쉽게 이해할 수 있었다.

구글 Firebase 가 어떤 플랫폼인지 알 수 있었고 직접 프로젝트를 만들어보았다.

새로운 내용들이 많아 이해하는 데 오래 걸렸지만

차근차근 시간을 들여 복습하며 이해를 하였다.

다음 자바스크립트 강의도 기대된다.

저작자표시

'자유 > 대외 활동' 카테고리의 다른 글

패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #9.7주차 학습후기, 자바스크립트 정복하기! (0)	2019.05.06
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #8.6주차 학습후기, 학습진도 50% 달성! (0)	2019.05.05
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #6.4주차 학습후기 (0)	2019.04.26
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #5.3주차 학습후기 (0)	2019.04.24
패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #4.2주차 학습후기 (0)	2019.04.20

패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #7.5주차 학습후기

5주차 진도에서는

01. JAVASCRIPT 소개

02. 구글 Firebase 소개 및 프로젝트 생성

과제1. 구글 Firebase 프로젝트 생성하고 웹 프로젝트 시작하기

03. JAVASCRIPT 기초

과제2. 인터프리터/컴파일 이해하기

04. JAVASCRIPT 구조

과제3. 렌더링 순서 바꿔보기

05. JAVASCRIPT 변수

과제4. 변수의 스코프 이해하기

'자유 > 대외 활동' 카테고리의 다른 글

댓글

티스토리툴바