SW Academy 2기 프론트엔드 과정

5 minute read

Day06

1. 개발환경 구축

1.1. Node.js 설치

  • https://nodejs.org/ko/
  • LTS 버전으로 설치

    1.2. 웹에서 간단한 코드 작성

  • https://jsfiddle.net/

    1.3. IDE

  • Visual Studio Code (무료)
  • https://code.visualstudio.com/
  • Webstorm (유료, 30일 무료)
  • https://www.jetbrains.com/ko-kr/webstorm/

    1.4. Visual Studio Code 추천 플러그인

    Auto Rename Tag

  • HTML 문서에서 태그를 수정할 때 여는 태그, 닫는 태그를 동시에 수정해주는 플러그인

    Bracket Pair Colorizer 2

  • 괄호가 여러 개 중첩되어 있다면 알아보기 힘들다. 그런 경우에 이 플러그인을 설치하면 시각적으로 잘 표시해준다.

    Color Highlight

  • 코드 내에 rgb나 16진수 값을 입력하면 해당 하는 색상을 코드에 표시해준다.

    Prettier

  • 양식에 맞게 자동으로 코드를 정렬해준다. 코드를 더럽게 짜더라도 정해놓은 규칙대로 코드가 다시 포맷팅된다.

    Highlight Matching Tag

  • 현재 커서가 가르키고 있는 태그를 하이라이팅 해준다. 태그가 중첩되어 있을 때 편하다.

    vscode-icons

  • 좌측 디렉토리 네비게이터에서 디렉토리를 이름에 맞춰 아이콘으로 바꿔준다.

    GitLens

  • 소스 코드에서 마우스로 클릭한 라인에 대한 마지막 커밋 로그를 보여준다. 그 외에도 Git을 이용한 기능을 부가적으로 제공해준다.

2. JavaScript의 역사와 프론트엔드 개발자의 역할

2.1. JavaScript의 탄생 배경

  • 최초의 상용 브라우저는 Netscape - Navigator이다. Navigator는 HTML로 작성된 문서를 보여주는 툴에 불과하였다.
  • 따라서 좀 더 동적인 기능을 지원하고자 프로그래밍 언어를 브라우저에 내장하고자 결정하였다.
  • 그래서 Brendan Eich라는 사람에게 scheme이라는 언어를 만들어 달라 했지만 그는 그게 마음에 안들었는지 10일만에 언어를 만들었고 그는 그것을 최초에는 Mocha라고 이름 붙였고 나중에 LiveScript로 명칭을 변경하였다.
  • 그 해 Java가 큰 인기를 끌었고 그는 마켓팅 효과를 얻고자 JavaScript로 이름을 바꾸게 되었고 결과적으로 성공하였다.

    2.2. JavaScript로 할 수 있는 일

  • 이벤트가 발생했을 때 특정 동작, 버튼을 눌렀을 때 DOM 조작

    2.3. 브라우저의 동작 원리

    1. 통신
    • 브라우저는 서버에 요청을 보내고 서버는 브라우저에게 요청에 따른 응답을 보내줌 2. 렌더링
    • DOM을 화면에 그린다. 3. 스크립트 실행
    • JavaScript를 실행

      2.4. 프론트엔드 개발자의 역할

  • 디자인팀, 백엔드팀, 고객과의 소통이 상당히 중요하다.

3. 변수, 상수, 자료형, 메모리

3.1. 변수

  • var : ES6 이전에 사용되던 변수 선언 키워드(권장 x)
  • let : ES6 이후로 사용되는 변수 선언 키워드(권장 o)

    3.2. 상수

  • const : 상수를 선언하는 키워드, 이후에 값 재할당이 불가

    3.3. 자료형

  • Number : 숫자
  • String : 문자열
  • Boolean : 참, 거짓
  • Object : 키-값의 쌍으로 묶여있는 자료형
  • Array : 여러 값을 가질 수 있는 타입, index로 값을 찾을 수 있음
  • Function : 함수
  • Undefined : 변수, 상수가 선언되었지만 아무런 값도 없을 때
  • null : 프로그래머가 해당 변수가 비어있음을 의도적으로 나타낼 때 사용하는 값

    3.4. 메모리

  • 할당 → 사용 → 해제
  • Garbage Collector를 사용하여 사용하지 않는 메모리를 정리함.

4. 메모리 심화

  • JavaScript에서 원시 타입의 값은 변경 불가라서 새로운 값이 할당되면 새로운 메모리 공간을 사용한다.
  • 배열은 Heap 공간을 사용한다.
  • Mark and Sweep Algorithm : 닿을 수 없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘
  • closure가 가능한 것도 메모리를 참조하기 덕분이다.

5. 표현식과 연산자

5.1. 표현식이란?

  • 표현식이란 어떠한 결과 값으로 평가되는 식이다.
  • 숫자, 문자열, 논리값 같은 원시 값을 포함하여 변수, 상수, 함수 호출 등으로 조합할 수 있다.

    5.2. 연산자의 종류

  • 할당 연산자 : 오른쪽 표현식을 왼쪽 피연산자에 값을 핟당하는 연산자
  • 비교 연산자 : 좌측 피연산자와 우측 피연산자를 비교하는 연산자
  • 덧셈, 뺄셈, 곱셈, 나눗셈을 하는 연산자, Number를 반환함.
  • 비트 연산자 : 비트를 직접 조작하는 연산자
  • 논리 연산자 : Boolean을 통해 참과 거짓을 검증하는 연산자
  • 삼항 연산자 : 조건에 따라 값을 선택하는 연산자, 조건 ? 참 : 거짓 형태를 가진다.
  • 관계 연산자 : 객체에 속성이 있는지 확인하기 위한 연산자, in
  • typeof : 피연산자의 타입을 반환하는 연산자, 문자열로 반환된다.

6. 흐름 제어

6.1. Control flow

  • Control flow : Goto, If/then/else, Switch/Case, For/While
  • Data flow : stateless, recursion, Pipe

    6.2. 조건문

  • 조건문 : 특정 조건이 맞을 때만 실행되는 문장(Statements) 문법이다.
  • if : 괄호 안 조건식이 참인 경우 실행되는 문법
  • false 뿐만 아니라 다음의 값들도 거짓이 될 수 있다.(false, undefined, null, 0, NaN, '')
  • switch : 괄호 안 값에 따라 분기되는 문법, case, default와 함께 쓰인다.

    6.3. 반복문

  • for : 가장 기초적인 반복문으로 초기문, 조건문, 증감문으로 이루어져 있다, 조건문의 결과가 거짓이 되면 반복이 종료된다.
  • while: 괄호 안 조건이 거짓이 될 때까지 반복된다.
  • do-while : while문과 다르게 먼저 진입 후 로직을 실행한 다음 조건을 검사한다.

7. 배열과 객체

7.1. 배열

  • 연관된 데이터를 연속적인 형태로 저장하는 복합 타입, 배열에 포함된 원소는 순서대로 번호(index)가 붙는다.
  • new Array() : 새로운 배열을 만듦
  • arr.fill(5) : 배열의 모든 값을 5로 채움
  • arr.length : 문자열의 길이를 알려줌
  • arr.join(',') : 배열의 원소들을 ,을 사용하여 이어붙인 문자열을 돌려줌
  • arr.reverse() : 배열의 순서를 뒤바꿔줌.
  • arr1.concat(arr2) : arr1과 arr2를 이어 붙인 새로운 배열을 돌려줌
  • arr.push(val) : val을 arr의 뒤에 삽입함.
  • arr.pop() : arr의 제일 뒤의 값을 제거하고 돌려줌.
  • arr.shift() : arr의 제일 앞의 값을 제거하고 돌려줌.
  • arr.unshift(val) : val을 arr의 제일 앞에 삽입함.
  • arr.slice(2,5) : arr의 2번째부터 4번째 요소까지를 잘라서 새로운 배열을 돌려줌.
  • arr.splice(2,2) : arr의 2번째 값부터 2개의 요소를 잘라서 새로운 배열을 돌려줌.
  • for of : 배열을 순회할 때 index가 아닌 값만을 가져오고 싶다면 for(const element of arr) 이런 식으로 사용하면 된다.
  • for in : 배열을 순회할 때 값이 아닌 index만을 가져오고 싶다면 for(const element in arr) 이런 식으로 사용하면 된다.
  • arr['key'] = 'value : 이렇게 값을 넣으면 객체처럼 key값을 이용해 접근할 수도 있다. 
    1
2
3
4

    const arr = Array.from(5, function (k,v) {
  return k+1;
})
console.log(arr) // [1,02,3,4,5]

    7.2. 객체

  • 여러 값을 키-값 형태로 결합시킨 복합 타입
  • new Object(), {} : 새로운 객체를 만듦.
  • obj.phone, obj['phone'] : 이렇게 2가지 방법으로 key를 사용하여 value값을 가져올 수 있음
  • delete obj.phone : phone키로 된 값을 객체에서 삭제한다.
  • 'phone' in obj : phone이라는 키가 obj에 존재하는지 확인
  • Object.keys(obj), Object.values(obj), Object,entries(obj) : 객체의 키 배열, 객체의 값 배열, 객체의 [키,값] 배열을 돌려준다.
  • for in : 객체를 순회할 때 for(const key in key) { console.log(obj[key]) } 이런식으로 순회할 수 있다.

    8. 스코프와 클로저

8.1. 스코프

  • 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는지를 뜻한다.

    8.2. 클로저

  • 함수가 선언한 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법
  • 클로저를 이용하여 내부 변수와 함수를 숨길 수 있다. ```javascript function counting() { let i = 0; for(i = 0 ; i < 5 ; i++) { setTimeout(function () { console.log(i); }, i*1000); } }

counting(); /// 출력 결과 : 5 5 5 5 5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

위 코드는 setTimeout의 대기 시간이 끝나기도 전에 이미 for문의 실행이 끝나버려 i가 5가 되었기 때문이다.

- 해결 방법1 : IIFE를 이용한다.
```javascript
function counting() {
    let i = 0;
    for(i = 0 ; i < 5 ; i++) {
        (function (number) {
          setTimeout(function () {
            console.log(number);
          }, number*1000);    
        })(i)
    }
}

counting();
/// 출력 결과 : 0 1 02 3 4
  • 해결 방법2: let은 블록 수준의 scope이므로 매 루프마다 클로저가 생성된다. ```javascript function counting() { for(let i = 0 ; i < 5 ; i++) { setTimeout(function () { console.log(i); }, i*1000); } }

counting(); /// 출력 결과 : 0 1 02 3 4 ```

Categories:

Updated:

You may also enjoy

Nextjs

less than 1 minute read

* 본 강의는 Udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths!)를 바탕으로 제작된 내용입니다. *

Ds06

less than 1 minute read

DS06

Dl06

2 minute read

DL06