[ 인프런 워밍업 클럽 Study FE 0기 ] Week 1 발자국

들어가기 앞서...

2024년의 첫 해가 밝으며, 지금까지는 단순히 관심만 갖고 있었던 웹 개발에 대한 공부를 시작해보기로 결심했습니다. 먼저 HTML과 CSS의 공부를 마치니 운이 좋게 인프런에서 JS와 ReactJS 스터디를 진행한다는 소식을 듣게 되었습니다. 이런 좋은 기회를 놓치지 않겠다고 생각하고, 워밍업 클럽에 참여하게 되었습니다.

발자국

OT를 참가한지 엊그제 같은데 시간은 정말 순식간에 지나가는 것 같습니다. 벌써 스터디가 시작된 지 1주차가 되었습니다. 이제 그 동안의 강의 내용을 간단하게 요약하고, 회고를 남겨 보려고 합니다. 이번 주 강의는 따라하며 배우는 자바스크립트 A-Z (섹션 0~8) 부분을 진행하였습니다.

요약

Section 01. 자바스크립트 기초

[ Console 객체 ]

자바스크립트의 console 객체는 코드를 작성하고 테스트를 할 때, 사용하기 좋은 함수를 제공해준다. 다음은 강의에서 소개한 주요 Console 객체의 함수들이다.

• console.log(): console에 메시지를 출력한다.

   

• console.table(): console에 배열이나 객체의 데이터를 테이블 형태로 출력한다.

   

• console.error(): console에 에러 메시지를 출력한다.

   

• console.warn(); console에 경고 메시지를 출력한다.

   

• console.time(), console.timeEnd(): 세트로 사용되며, 두 함수 사이의 코드 실행 시간을 측정한다.

   

[ var, let, const과 스코프 ]

변수/상수를 선언할 때 let, const 그리고 var 키워들 사용한다. let과 const는 ES6에 새롭게 추가된 키워드이다. var 키워드는 오래된 선언 키워드로 let과 const 사용을 권장하고 있다.

• let: 변수 키워드, 재선언 X, 재할당O

   

• const: 상수 키워드, 재선언 X, 재할당X

• var: 재선언 O, 재할당 O

   

그리고 사용한 let/const와 var 키워드에 따라 스코프가 다르게 처리된다. 스코프(scope, 유효/참조 범위)란 어떠한 변수를 참조하려고 할 때, 그 변수에 접근 가능한 유효 범위이다.

• let/const: 모든 코드 블록 { } 내부에서 선언된 변수는 코드 블록 내에서만 유효.

   

• var: 함수 내에서 선언된 var 변수는 함수 내에서만 유효하며, 함수 내에서 블록 내·외부에 관계없이 접근 가능.

   

[ 호이스팅 ]

코드가 실행되기 전에 변수 및 함수 선언을 로컬 범위(유효 범위)의 맨 위로 끌어 올려지는 경우를 말한다.

[ 자바스크립트 타입과 타입 변환 ]

자바스크립트의 데이터 타입(자료형)은 다음과 같다.

• 원시 타입: Boolean, String, Number, null, undefined, Symbol

  • 고정된 크기로 Call Stack 메모리에 저장

  • 실제 데이터가 변수에 할당

• 참조 타입: Object, Array

  • 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장

  • 데이터의 값이 Heap에 저장되며 메모리의 주소 값이 할당

     

자바스크립트 변수에 저장된 값은 다른 데이터 유형으로 변환될 수 있다.

• 명시적 데이터 변환(개발자가 직접 함수를 사용해서 변환)

• 자동 데이터 변환(자바스크립트 자체에 의해 자동으로 변환)

   

[ 연산 및 Math ]

• 자바스크립트에서는 기본적인 산술 연산자, 논리 연산자, 비교 연산자를 제공한다.

• Math를 통해 더 많은 연산을 이용할 수 있다.

   

[ Template Literals]
Backtick(`)을 사용하여 문자열을 표현한 것을 템플릿 리터럴이라고 한다. 템플릿 리터럴을 이용하면 다음과 같은 이점이 있다.

• 줄 바꿈이 쉽다.

• ${}을 사용하여 내부에 표현식을 포함할 수 있게 한다.

   

[ Loops ]

• for: 초기식, 조건식, 증감식을 포함하는 반복문으로 주어진 조건이 참일 경우 블록 안의 코드를 반복 실행

• for/in: 객체의 열거 간으한 속성들을 반복하는데 사용.

• while: 주어진 조건이 true일 동안 코드 블록을 계속해서 실행.

• do/while: 먼저 코드 블록을 실행한 후, 조건을 확인한다. 그러고 나서 조건이 true일 동안 반복 실행한다.

Section 02. Window 객체 및 DOM

[ Window 객체 ]

• 브라우저에 의해 자동으로 생성된다. (자바스크립트 객체 X, 브라우저에서 제공 O)

• 이 window 객체는 다음과 같은 역할을 수행한다.

  • 브라우저에 접근 및 조작 가능

  • 자바스크립트 코드의 전역 객체 역할

     

[ DOM ]

• 문서 객체 모델(Document Object Model, DOM)

  • 요소로 이루어진 HTML 파일을 Tree 구조로 표현한 객체 모델

  • 최상단에는 document 노드가 위치해 있으며, 이를 통해 DOM 접근 및 조작 가능

• Critical Render Path (웹 페이지 렌더링 콰정)

  • 데이터 파싱(HTML) ➔ DOM Tree 생성 ➔ CSSOM Tree 생성 ➔ JS 실행 ➔ Render Tree 생성 ➔ Layout 생성 ➔ Paint

     

+) 강의에서 수 많은 Property 및 Method를 소개해 주셨지만 너무 많은 관계로 생략...

Section 03. Event

[ Event ]

만약 인프런에서 로그인 버튼을 누르면 무엇이 일어날까? 당연히 로그인 페이지로 이동할 것이다. 이렇게 웹 페이지에서 발생하는 사용자의 행동에 대응하여 브라우저에서 일어나는 특정 사건을 "이벤트"라고 한다. 자바스크립트에서는 다음과 같은 이벤트가 존재한다.

• UI 이벤트

  • load, change, resize, scroll, error

     

• 키보드 이벤트

  • keydown, keyup, keypress

• 마우스 이벤트

  • click, dblclick, mousedown, mouseout, mouseover, mousemove, mouseup

• 포커스 이벤트

  • focus, blur

• 폼 이벤트

  • input, change, select, reset, submit, cut/copy/paste

     

이벤트를 등록하기 위해서는 addEventListener()를 사용하면 된다. 또한 이벤트 흐름에는 이벤트 bubbling과 Capturing라는 2가지의 기본 모델이 존재한다.

[ Event Bubbling과 Event Capturing ]

이벤트 bubbling은 가장 깊게 중첩된 요소에 이벤트가 발생했을 때, 이벤트가 위로 전달 되는 것을 의미한다. 이벤트 bubbling은 target 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 만약 bubbling 중단을 원한다면 event.stopPropagation()을 호출하면 된다.

• event.stopPropagation()

  • DOM Tree를 통한 이벤트 흐름 중지 가능

  • 브라우저 기본 동작은 취소 X

     

이벤트 Capturing은 bubbling과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 말한다.

[ Event Delegation ]

이벤트 bubbling과 이벤트 Capturing을 통해서 이벤트 위임을 이해할 수 있다. 이 이벤트 위임은 '하위 요소의 이벤트를 상위 요소에 위임하는 것'이다.

Section 04. 자바스크립트 중급

[ this]

• Method의 this: 해당 객체를 가리킨다.

• 함수에서 this: window 객체를 가리킨다.

• constructor의 this: 빈 객체를 가리킨다.

   

[ bind, call, apply]

• call():

  함수를 호출하는 함수.

  • 첫 번째 인자 값으로 어떠한 것을 전달해 주면 호출되는 함수의 this가 인자 값으로 지정

• apply(): call()과 유사하나 인수 부분에 배열을 넣어줘야함.

• bind(): 해당 함수가 지정한 인자 값을 가리키도록 하지만 call(), apply()와 다르게 직접 함수 실행 X

   

[ 삼항 연산자 ]

다음과 같은 구문을 갖는다.

• 조건 ? true이면 반환 : false이면 반환

   

[ Event Loop]

자바스크립트는 동기 언어이다. 하지만 가끔 비동기로 작동하는 setTimeout()를 사용하는 예시를 볼 수 있다. 자바스크립트는 비동기 코드를 작성하기 위해서 자바스크립트 이외의 도움을 받는다.

[ Closure ]

다른 함수 내부에 정의된 함수가 있는 경우, 외부 함수가 실행을 완료하고 해당 변수가 해당 함수의 외부에서 더 이상 엑세스할 수 없는 경우에도, 해당 내부 함수는 외부 함수의 변수 및 액세스가 가능하다. 이 기능을 Closure라고 부른다.

[ 구조 분해 할당 ]

배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있게 해주는 표현 식이다.

[ Map, Filter, Reduce ]

Map, Filter, Reduce은 배열 메서드의 대표적인 예시이다.

• map(): 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출하고 나온 결과를 모아 새로운 배열로 만들어 반환한다.

• filter(): 주어진 함수의 필터를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

• reduce(): 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환한다.

[ 얕은 비교 VS 깊은 비교 ]

숫자, 문자열 등 원시 자료형은 값을 비교하게 된다. 하지만 배열, 객체 등의 참조 자료형은 참조되는 위치를 비교하게 된다. 얕은 비교를 하게 되면 원시 값의 경우 문제가 없지만 참조 값의 경우 실제 값이 아닌 저장된 위치(참조 값)이 비교되기 때문에 문제가 된다.

깊은 비교를 사용하게 되면 참조 자료형도 실제 값으로 비교할 수 있게 된댜ㅏ.

• 객체 depth가 깊지 않은 경우: JSON.stringify() 사용

• 객체 depth가 깊은 경우: lodash 라이브러리의 isEqual() 사용

[ 얕은 복사 VS 깊은 복사 ]

위에서 정리한 내용처럼 복사에도 문제가 발생하게 된다. 따라서 참조 자료형의 값의 경우 깊은 복사를 사용하면 된다.

• JSON.stringify()

• lodash 라이브러리의 deepCopy

• 
  [ 함수 표현식, 함수 선언문 ]

• 함수 선언문: 함수 선언은 함수를 만들고 이름을 지정하는 것이다.

  • 일반적인 함수 선언 방식으로 function 키워드와 식별자를 표기하여 사용한다.

• 함수 표현식은 함수를 만들고; 변수에 할당하는 것이다.

  • 익명 함수(function 키워드는 사용했으나 식별자 X), 화살표 함수 사용

   

Section 05. OOP

[ OOP ]

OOP(Object-Oriented Programming, 객체 지향 프로그래밍)란 Java 및 C를 비롯한 많은 프로그래밍 언어의 기본이 되는 프로그래밍 패러다임이다. 완전 간단하게 말하자면 객체 지향 프로그래밍은 객체들의 모임이라고 할 수 있다.

OOP 특징으로는 다음과 같다.

• 추상화:

  불필요한 정보는 숨기고 중요한 정보 만을 표현함으로써 프로그램을 간단히 만드는 것.

• 상속:

  새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있도록 해주는 것.

  • 기존 클래스: 부모 클래스, 상위 클래스

  • 새로운 클래스: 자식 클래스, 하위 클래스

• 다형성: 하나의 틀을 가지고 여러 개의 다양한 형태를 만드는 것이다.

  • overriding을 통하여 다형성 구현

     

  • 일반적인 코드를 재사용하고 작성할 수 있다.

• 캡슐화:

  클래스 안에 있는 Method, 변수 등을 하나로 묶어준다.

   

[ class와 constructor ]

class에서는 constructor라는 특별한 메서드를 제공한다. 이 constructor는 생성자로, 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 할 수 있게 해준다.

클래스를 new 키워드를 붙여 인스턴스 객체로 생성하면 넘겨 받은 인자 값과 함께 constructor가 가장 먼저 실행이 된다. 따라서 이 곳에 초기화를 해야 하는 작업을 수행한다.

[ Super]

자바스크립트에서 super는 다음과 같은 역할을 수행한다.

• 자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용한다.

• 자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용한다.

Section 06. 비동기

[ 동기와 비동기 ]

• 동기(Synchronous)

  • 코드를 순차적으로 실행하는 것. 즉, 한 작업이 끝나기를 기다렸다가 끝나면 다음 작업을 수행한다.

  • 각 작업이 완료될 때까지 다음 작업이 실행되지 않는다.

• 비동기(Asynchronous)

  • 작업이 종료되지 않아도 다음 작업을 진행할 수 있는 방식

  • 비동기적인 코드는 특정 작업을 기다리지 않고 다음 작업을 계속 수행한다.

     

  [ Callbacks, ES6 Promise, ES7 Async / Await ]

• callbacks

  • 콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미한다.

  • 콜백 함수는 함수를 전달 받은 함수 내부에서 호출된다.

  • 단, 콜백 지옥을 맛볼 수 있다.

• Promise

  • 자바스크립트 비동기 처리에 사용되는 객체이다.

  • new 키워드와 생성자를 사용해서 만들며, 생성자의 매개변수로 실행 함수를 전달한다.

    • new Promise(실행함수)

       

    • 실행 함수의 1번째 매개변수 resolve는 비동기 작업 성공 값이다.

    • 실행 함수의 2번째 매개변수 reject는 작업 실패 값이다.

  • Promise는 다음 중 하나의 대기 상태를 갖는다.

    • 대기, 이행, 거부

  • 단, 체인 지옥이 시작된다...

• Async / Await

  • 비동기 코드를 마치 동기 코드처럼 작성할 수 있도록 해준다.

  • Promise에서 than 체인 형식으로 호출하는 것보다 가독성이 좋다.

  • await는 async 함수에서만 사용 가능하다.

  • 동기식 코드에서 사용하는 try...catch 문을 사용할 수 있다.

Section 07. Symbol, Iterator, Generator

[ Symbol ]

• ES6에 새롭게 추가된 원시 타입으로, 유니크한 식별자를 만들기 위해서 사용.

• 단, for...in과 getOwnPropertyNames에서 제외 된다.

  • Symbol 사용 시 기본적으로 Property가 숨겨진다. (찾을 수 있는 방법 有)

  • 따라서 for...in과 getOwnPropertyNames에서 symbol로 만든 Property가 안보인다.

  [ Iterator, Generator ]

• Iterator

  • 대표적인 예시로 배열이 있다.

  • 반복 가능한 것을 Iterable하다고 한다.

     

    • for…of를 이용할 수 있다.

    • [Symbol.iterator()] 값을 가지고 있다.

• Generator

  • 사용자의 요구에 따라 일시적으로 정지할 수 있고, 다시 시작할 수 있는 특별한 기능을 가지고 있다.

  • function다음에 Asterisk (애스터리스크)를 붙인 형태로 사용한다.

    • function*

  • yield 키워드를 이용한다: 제너레이터 함수의 실행을 일시적으로 정지시킴.

Section 08. Design Pattern

[ 디자인 패턴 ]

디자인 패턴은 개발자가 응용 프로그래밍나 시스템을 디자인할 때 일반적인 문제를 히결하는 데 사용할 수 있는 공식화된 모범 사례이다.

- 위키 피디아

다음과 같은 장점이 있다.

• 최고의 솔루션

• 재사용성

• 풍부한 표현력

• 향상된 의사 소통

• 필요없는 코드 리팩토링

• 코드베이스 크기 감소

[ 디자인 패턴 종류 ]

• Singleton Pattern: 클래스의 인스턴스화를 객체 1개로 제한하는 디자인 패턴

• Factory Pattern: 비슷한 객체를 반복적으로 쉽게 생성하게 해주는 디자인 패턴

• Mediator Pattern(중재자 패턴): 객체 그룹에 대한 중앙 권한을 제공해주는 디자인 패턴

• Observer Pattern: event-driven 시스템을 이용하는 디자인 패턴

• Module Pattern: 코드를 더 작고 재사용 가능한 조각으로 분할하게 해주는 디자인 패턴

   

미션

완벽히 해결한 미션은 다음과 같습니다.

음식 메뉴 앱

음식 메뉴 앱 미션은 주어진 카테고리에 해당되는 메뉴를 출력하는 웹을 구현하는 것이었습니다. 저는 카페 메뉴를 주제로 해당 웹을 구현했습니다. 다만 출력할 아이템에 대한 DB가 없어서 직접 data.json을 작성하여 처리했습니다. 미션을 해결하면서 기능 구현에는 특별한 문제가 없었으나 기능 구현보다 데이터 파일 생성이 더 오래 걸린 미션이었습니다... (출력되는 메뉴 이미지는 스타벅스 이미지를 활용했습니다.)

가위 바위 보 앱

플레이어와 컴퓨터가 가위 바위 보를 하는 게임을 구현하는 미션입니다. 총 10번의 기회가 주어지며 게임에 대한 스코어 제공 및 승패 결과를 제공해야 했습니다. UI를 어떻게 구현할까 고민하다가 이미지를 추가적으로 더 넣어 구성했습니다. 컴퓨터의 가위 바위 보 선택지는 Math.random()을 이용해 처리했으며, 기능 구현에는 특별한 문제는 없었습니다.

회고

자바스크립트 강의를 들으며 기초를 다지고 그 지식을 바탕으로 주어진 미션을 해결하는 한 주를 보냈습니다. 특히 웹 개발이 처음이라서 미션을 해결해 나가는 시간이 정말 흥미로웠습니다. 앞으로 워밍업 클럽 Study를 진행하며 제가 얼만큼 발전할 수 있는지 궁금해지기도 합니다. 남은 기간 최선을 다해서 임해보겠습니다!