[코드잇] 프로그래밍 기초 in JavaScript / 토픽 1 (완강)

  토픽1. 프로그래밍 시작하기 in JavaScript  

  1-1. 자바스크립트 첫 걸음  

01. 자바스크립트 프로그래밍?

 

• 웹은 1989년부터 등장해서 차츰 보편화되기 시작함.
• 처음에는 인기가 없었지만 2015년부터 급속도로 인기 얻음.
• 웹개발뿐만 아니라 다양한 분야에서 사용하게 됨.

 

• 코드잇의 과정 목표 2가지:
• 1. 프로그래밍의 기본개념과 원리 이해하기
• 2. 자바스크립트를 익히고 사용할 수 있는 능력 기르기

02. [설명] 준비하기

 

• 1. VSCode 설치하기
• (Visual Studio Code, Visual Studio는 다르다.)
• 2. 크롬 브라우저 설치하기

03. Hello Codeit!

 

• vscode에서 index.html, index.js 만들고 실행해보기
• console.log("Hello!"): 웹브라우저 개발자도구 콘솔창에서 실행됨

04. [실습] 프로그래밍 첫걸음 떼기

 

• console.log() 사용하기

  1-2. 프로그래밍 맛보기  

01. 세미콜론

 

• 자바스크립트는 한 줄에 코드 한 줄만 있을 경우 자동으로 세미콜론을 붙여줌.
• 초보자는 계속 문장 끝에 세미콜론 쓰는 연습을 하자.

02. 코멘트

 

• 코멘트(주석): // OR /* */

03. 자료형 개요

자바스크립트의 자료형(Data type)의 종류

 

• 숫자(Number): 정수(Integer), 소수(Floating point)
• 문자열(String): "", +로 연결가능.
• 불린(Boolean): 참(True), 거짓(False). 조건의 결괏값으로 사용됨.

04. 추상화 개요

 

• 추상화(Abstraction): 복잡한 것들을 목적에 맞게 단순화하는 것.
• 목적은 명확히, 불필요한 것은 숨기기, 핵심만 드러내기.
• ex) 지도, 영화 줄거리 등

05. 변수

 

• 변수(variable): 어떤 값을 담기 위해 이름을 붙은 상자
• 자바스크립트 변수 선언: let 변수명 = 변수값;
• 등호 =: 할당 연산자

var, let의 차이

 

• var: 함수 레벨 스코프.
• 호이스팅되면서 초기값이 없으면 자동으로 undefined를 초기값으로 하여 메모리 할당함.
• 선언 전에 해당 변수 사용하려고 해도, 메모리에 해당 변수가 존재하기 때문에 에러 발생 X.

 

• let, const: 블럭 레벨 스코프.
• 호이스팅되면서 초기값 없으면 var처럼 자동으로 초기값 할당하지 않음.
• const 경우 선언 시 초기값 할당하지 않으면 문법 에러가 난다.

 

• var의 경우 버그 발생과 메모리 누수 위험이 있기 때문에 let, const 사용하는 것이 좋음.

06. [설명] 작명 가이드

꼭 지켜야하는 룰

 

1. 자바스크립트 식별자는 문자, 밑줄, 달러 기호로 시작해야 함. 두 번째 글자는 숫자도 가능.
2. 대문자, 소문자는 구별함.
3. 예약어(자바스크립트)가 찜해놓은 단어는 사용하지 말 것.

지키면 좋은 룰

 

1. 의미 없는 이름은 좋지 않음.
2. 너무 추상적인 이름은 좋지 않음.
3. 모든 변수 이름은 camelCase로 쓰는 것이 좋음. (파이썬은 파스칼(_) 표기법 추천)

코딩컨벤션, 스타일 가이드

 

• 코딩컨벤션, 스타일 가이드: 더 좋은 코드 스타일을 위해 만든 다양한 약속.
• Airbnb의 자바스크립트 스타일 가이드
• Google의 자바스크립트 스타일 가이드
• w3schools.com 스타일 가이드
• StandardJS
• Idiomatic.JS

들여쓰기

 

• 들여쓰기(indentation): 자바스크립트 가이드 대부분은 들여쓰기를 space 2칸으로 권장함.
• vscode에서 간단하게 indentation 설정하는 방법:
• 1. 설정창(settings, ctrl + ,) 열고 editor tab 검색.
• 2. Editor: Detect Indentation은 체크 해제.
• 3. Editor: Tab Size는 2로 변경하기.
• 4. Editor: Insert Spaces 부분 체크 확인.
• 5. 기존 작성한 파일 전체 선택 후, 우클릭 Fomat Document(Shift + Alt + F) 클릭.

07. [실습] 칼로리 계산기

• 변수 선언해서 문제 해결.

(출처: 관련질문) var, let의 차이:

 

• 자바스크립트는 ECMA에서 표준을 정함.
• var는 예전 버전부터 있었고, let은 ECMA 6에서 생긴 문법임.

function askQuestion() {
 let answer = "나는 밖으로 못나가요.";
 var answer1 = "나는 밖으로도 나갈수 있어요";
  }

• scope: 해당 코드가 사용될 수 있는 범위. (let은 block scope임)
• 그러나, var는 함수 밖에서도 호출 가능함. 예기치 못한 문제들 발생 가능.
• 또한 var로 선언된 코드는 선언되기 전에 작성해도 호출이 가능함.
• 문제는 Internet explorer가 let을 지원하지 않음.
• 평소에는 let, const 쓰다가 IE가 존재하면 var 사용하도록.

08. 함수

 

• 변수: 값을 저장하는 것.
• 함수: 명령들을 저장하는 것.

function 함수명() {
	명령;
    명령;
};

• 함수호출: 함수명();

09. [실습] 자랑스러운 애국가

 

• console.log()로 애국가 후렴구 함수 만들어서 출력하기.

10. 파라미터

function 함수명(파라미터) {
	console.log(파라미터)
};

11. [실습] 내 노트북 용량은?

 

• 해결

12. 여러 개의 파라미터

 

• 파라미터 여러 개 사용하기.

13. [실습] 나의 체질량 지수는?

 

• 파라미터 여러 개 사용해서 문제 해결.

14. return문

 

• return: 함수를 호출한 자리에 값을 반환해준다.

15. [실습] 1년 뒤엔 얼마를 받을까?

 

• 파라미터 있는 함수 작성해서 문제 해결.

16. 퀴즈로 복습하기

 

• 해결