자바스크립트 기초 문법

무료

아마존 CEO 제프 베조스는 이런 말을 했습니다. "변하지 않는 것에 주목하라." 변화가 많을수록 본질적인 부분에 집중하라는 의미겠죠. 자바스크립트를 필두로 한 프론트엔드 기술 영역은 웹 기술 분야에서 상대적으로 변화가 빠른 편입니다. 하지만 그 기술 변화의 근간에는 우리가 이번 러닝패스를 통해 배울 자바스크립트로 구현된 코드들이 밑 받치고 있기도 합니다. 이번 시간을 통해 자바스크립트 기초 문법을 잘 다져놓음으로써 앞으로 배울 유용한 JS 프레임워크에 대한 이해에 주축돌을 세워봅시다.

큐레이터의 노트 소개

변수는 비단 자바스크립트뿐만 아니라 다른 프로그래밍 언어에서도 통용되는 개념이에요. 흔히 박스를 대상으로 박스에 붙은 레이블을 변수명, 박스 안의 물건을 변수의 값이라고 비유를 하죠. 조금 원론적으로 접근하면, 변수는 컴퓨터 메모리에 존재하는 공간인데, 저희 같은 개발자는 어떤 정보를 저장하기 위해 그 공간을 사용해요. 그 공간들을 구분할 수 있게 해주는 것이 바로 변수입니다.

테크주니어 님의 학습노트

학습노트 제목: 자바스크립트 기초 강좌 #1 - 변수

Video

자바스크립트 기초 강좌 #1 - 변수

출처: https://youtu.be/P0FY8k916e0

#전체 #개발자 #프론트엔드 #자바스크립트 #javascript #js #es6 #basic #초보 #강좌 #tutorial #변수

큐레이터의 노트 소개

다른 프로그래밍 언어와 마찬가지로 자바스크립트에도 고유 자료형(data type)이 있습니다. 어떤 자료형이냐에 따라 컴퓨터 메모리에서 해당 데이터가 처리되는 방식이 달라집니다. 자바스크립트에는 크게 기본형(Primitive data type)과 참조형(Object data type)으로 분류되는데요. 먼저 본 학습노트를 통해 일부 자료형에 대해 알아본 뒤, 나머지는 뒤의 학습노트에서 살펴보겠습니다.

테크주니어 님의 학습노트

학습노트 제목: 자바스크립트 기초 강좌 #2 - 자료형

Video

자바스크립트 기초 강좌 #2 - 자료형

출처: https://youtu.be/NrVs7ujs6xI

#전체 #개발자 #프론트엔드 #자바스크립트 #javascript #js #es6 #basic #초보 #강좌 #tutorial #자료형 #String #Number #Boolean #null #undefined #문자형 #숫자형 #불린형

큐레이터의 노트 소개

연산자, 조건문, 반복문 등 데이터를 연산하고 프로그램의 흐름을 제어할 수 있도록 도와주는 개념들을 이번 학습노트에서 자바스크립트 코드로 직접 쳐보면서 배워봅시다.

테크주니어 님의 학습노트

학습노트 제목: 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

Video

자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)

출처: https://youtu.be/YBjufjBaxHo

큐레이터의 노트 소개

함수란 특정 기능을 수행하도록 만들어진 코드 블록입니다. 함수라는 게 없어도 어떤 기능을 수행하는 코드들을 쭉 나열해서 원하는 기능을 동작시킬 순 있지만, 함수를 통해 개발자는 코드를 더 읽기 쉽고(가독성), 관리(유지보수)하기 용이하게 만들 수 있습니다. 이러한 유용한 함수를 잘 사용하기 위해서는 함수가 어떻게 동작하는지 그것을 이루는 구성요소를 잘 이해할 필요가 있습니다.

테크주니어 님의 학습노트

학습노트 제목: 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)

Video

자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)

출처: https://youtu.be/e_lU39U-5bQ

큐레이터의 노트 소개

Object, 오브젝트. 다른 프로그래밍 언어와 마찬가지로 자바스크립트의 Object 역시 실제 세계 안의 우리가 만질 수 있는 어떤 대상, 물체와 비교할 수 있습니다. 예를 들어, '자동차'라는 물체는 색상, 무게, 재질 등의 특성(properties)들을 갖습니다. 같은 방식으로 자바스크립트 object를 통해 어떤 대상의 특성들을 우리가 정의할 수 있는데요. 프로그래밍에서 핵심이 되는 기본 동작(operation)인 어떤 정보를 만드는 것, 읽는 것, 수정하고 삭제하는 것을 object를 활용해서 직접 경험해봅시다.

테크주니어 님의 학습노트

학습노트 제목: 자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

Video

자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

출처: https://youtu.be/1Lbr29tzAA8

큐레이터의 노트 소개

위에서 배운 자바스크립트의 변수와 여러 자료형을 가지고 데이터를 다루는데, 비슷해보이는 데이터가 너무 자주 반복되서 코드가 지저분해보이고, 그들 중 특정 데이터를 찾는데도 번거럽고 시간이 오래 걸려요. 예를 들어, 현존하는 자동차 브랜드명을 추가하기 위해 'car1', 'car2', 'car3' ... 이런 식으로 계속 변수를 생성해서 그 안에 문자형으로 브랜드명을 넣는거죠. 만일 필요한 자동차 브랜드명이 3개가 아니라 300개라면 입력해야 할 코드가 너무 많아지겠죠? 이런 경우, 배열이라는 자료구조를 쓰면 코드도 많이 줄어들고, 데이터를 훨씬 효율적으로 다룰 수 있어요. 그걸 어떻게 할 수 있는 지는 아래 학습노트를 통해 살펴봅시다.

테크주니어 님의 학습노트