프로그래밍 일기 — React를 알아보자 2

13 min readJan 16, 2024

JavaScript를 해부해보자

React를 배우기에 앞서 JavaScript를 배워야한다고했다. 지난 글에서는 JavaScript 코딩을 할 수 있는 환경을 조성하는 방법에 대해 알아보았다면, 이제는 본격적으로 JavaScript 언어 안을 들여다볼 시간이다.

사실 이전 부트캠프에 참여했을 때도 JavaScript를 배우지 못한 것은 아니었다. 그러나, 내가 집중하고 싶었던 것은 백엔드 였기때문에 Java를 배우는 것에만 집중했다. 지나고보니 프론트엔드 기술을 이해하지 못해 어려운 점이 많았고, 그 것이 원인이 되어 몇몇 프로젝트에서 타 팀원들과 협업하는데 있어 개인적인 어려움을 겪기도했다.

그 점이 아쉬워 이번 기회를 통해 프론트 기술을 어느 정도 이해할 수 있는 백엔드 개발자로 거듭나고 싶다는 생각을 했다. 앞으로 나의 주력 언어는 C#이지만, JavaScript를 알아야 프론트엔드 개발자들과 협업할 수 있다는 것을 지난 경험을 통해 알았기 때문이다. 지금 내 회사에도 프론트엔드 개발자가 있고, 그와 협업을 할 가능성이 있는 만큼, 지금 부터 준비해서 조금 더 그의 입장을 이해할 수 있는 동료가 되고싶다.

JavaScript 학습

JavaScript 변수 선언 방식

JavaScript 어플리케이션은 변수에 정보를 저장해 연산에 활용해야하기에, 데이터가 있어야 동작한다. 예를 들어, 소셜 미디어 어플리케이션(유저이름, 팔로워 수 등), 음악 앱(가장 좋아하는 노래 리스트 등)등
JavaScript는 동적타입(dynamically-typed) 스크립팅 언어로써, 변수가시간을 지나면서 다른 형태의 데이터 타입을 수용할 수 있다.
변수는 재활용이 가능한 데이터를 담는 용기로 볼 수 있다. 프로그램에서 가장 작은 저장 단위라 할 수 있다.
let , var , const 키워드 등을 사용가능하다. 오늘 날에는 주로 변수에 대한 더욱 폭넓은 제어가 가능한let 과 const 가 많이쓰이며, var 는 되도록 쓰임을 피하는 추세이다.

let , const vs var

var 는 함수 레벨의 스코프(function-level scope)로써, var 변수가 선언된 함수 내에서만 호출이 가능하나, let 과 const 는 블럭 레벨의 스코프(block-level scope)로써 해당 변수 타입의 변수가 선언된 블록 내애서만 접근이 가능하다는 차이점이 있다. 그러나 var 변수가 글로벌하게 선언되었다면 어디에서든 접근이 가능하다는 보안적 단점이 있다. 반대로 let 과 const 는 블럭내에서만 활용이 가능하므로 해당 블럭을 선언한 코드 내에서만 활용할 수 있기에 신뢰성이 더 높다고 할 수 있다(2).
let 과 const 로 선언된 변수는 hoisting(변수의 스코프가 스코프 최상단으로 자동으로 이동하는 현상)을 겪지 않고 스코프상의 선언된 위치에 고정된다는 장점이 있다. 반대로 var 는 이러한 hoisting에 노출되어 변수의 스코프가 원하지 않게 가장 높은 곳으로 갈 수 있어 예상치 못한 에러를 초래할 수 있다(2).
결론적으로 let 과 const 를 사용하면 코드를 작성하다가 스코프의 변동으로인해 예상하지 못한 에러를 마주할 가능성이 줄어 코드의 행위가 조금 더 예측 용이하고, 따라서 트러블 슈팅이나 유지보수가 자연스럽게 더 용이해진다는 장점이 있다.

// 변수 선언 및 초기화 예제

// let
let firstName;   // 변수 선언(variable declaration)
firstName = 'John';  // 변수 초기화(variable initialization)

let lastName = 'McDonald';  // 변수 선언 및 초기화(variable declaration & initialization)

let count = 0;  //  변수 선언 및 초기화(variable declaration & initialization)
count = 1;  // 변수 덮어쓰기(variable overwriting)
console.log(count)

// const
const PI = 3.14;    // 상수 선언(constant declaration)
// PI = 4  // 에러(TypeError: Assignment to constant variable.)
console.log(PI);

// var
var num = 0;  // 변수 선언 및 초기화(variable declaration & initialization)
if(true){  // 조건문 선언 (true는 "모든 케이스에 적용하라"는 뜻)
    var num = 1;  //  다시 변수 선언 및 초기화
    console.log(num);  // 모든 케이스에 값을 덮어씌우므로 '1' 출력
}
console.log(num);  // 위 조건문에서 무조건 값을 덮어씌우므로 '1'출력

>> node variables.js

1
3.14
1
1

데이터 타입

JavaScript에서 데이터 타입은 프로그램내 저장될 수 있거나 조작될 수 있는 데이터 타입을 표현한다.

JavaScript 데이터 타입:

숫자(number)
BigInt(+/- 2⁵³ — 1)
문자열(String)
Boolean
Null
Undefined
Object
Symbol

// 데이터 타입 예제
// datatypes.js

let x = 5; // 숫자 데이터

const bigInt = 12345645545435345344324234324n; // BigInt 데이터 (잘 쓰이지는 않는다.)
console.log(typeof bigInt); // 데이터 타입 출력

let name = 'John';  // 문자열 데이터

let isTrue = true;  // boolean 데이터

let y = null;   // null 데이터

var age;    // undefined 데이터
console.log(age);

// Object 데이터
let person = {
    name: 'John',
    age: 15
}

console.log(person);

// Symbol 데이터

let id = Symbol('id');
console.log(id);

>> node datatypes.js

bigint
undefined
{ name: 'John', age: 15 }
Symbol(id)

산술 및 비교 연산자(arithmetic and comparison operators)

산술 연산자(arithmetic operators)

덧셈(+)
뺄셈(-)
나누기(/)
곱하기(*)
나머지(%)
지수(**)

// 산술 및 비교 연산자 예제
// operators.js

// 덧셈
let x = 10;
let y = 5;

let sum = x + y;
console.log(sum);

// 뺄셈
let diff = x - y;
console.log(diff);

// 곱하기
let product = x * y;
console.log(product);

// 나누기
let divide = x / y;
console.log(divide);

// 나머지
let remainder = x % y;
console.log(remainder);

// 지수
let expo = x ** y;  // x^y
console.log(expo);

>> node operators.js

15
5
50
2
0
100000

비교 연산자(Comparison Operators)

같다: =
같지 않다: !=
strict하게 같다: ===
strict하게 같지 않다: !==
크다: >
크거나 같다: ≥
작다: <
작거나 같다: ≤

// 비교 연산자 예제
// operators.js
let a = 10;
let b = 5;
console.log(a == b); // 같다 - false
console.log(a != b); // 같지 않다 - true
console.log(a === b); // 엄밀히 같다 - false
console.log(a !== b); // 엄밀히 같지 않다 - true
console.log(a > b); // 크다 - true
console.log(a >= b); // 크거나 같다 - true
console.log(a < b); // 작다 - false
console.log(a <= b); // 작거나 같다 - false

>> node operators.js

false
true
false
true
true
true
false
false

배열(Arrays)

배열은 값(value)의 모음(collection)으로써, 하나의 변수에 저장된다.
배열은 그 어떤 타입의 값도 가질 수 있다(숫자, 문자열, 혹은 다른 배열).

// 배열 예제
// arrays.js

let fruits = ['apples', 'oranges', 'bananas']
console.log(fruits[0]); // 인덱스 값으로 접근한다.

fruits.push('grapes')   // 배열에 새로운 요소 추가
console.log(fruits);    // 전체 배열 출력

fruits.pop();   // 맨 나중에 추가한 값이 제거된다
console.log(fruits);    

let myArray = [1, 2, 3, 4, 5];
let mixedArray = [6, 'pears', true, myArray];   // 다양한 타입의 요소를 가질 수 있다
console.log(mixedArray);

>> node arrays.js

apples
[ 'apples', 'oranges', 'bananas', 'grapes' ]
[ 'apples', 'oranges', 'bananas' ]
[ 6, 'pears', true, [ 1, 2, 3, 4, 5 ] ]

팁: Keyboard 단축기 지정하기(3)

프로그래밍을 하다보니 console.log() 명령어가 굉장히 자주 반복적으로 사용되었다. 허나, VSCode에서는 C#과 다르게 cw 같이 Console.Writeline() 을 자동완성해 주는 단축키가 JavaScript에 대해서는 존재하지 않았다. 그래서 아래와 같이 cmd + shift + p키를 눌러 플러그인 검색 화면을 불러온다음 Preferences: Open Keyboard Shortcuts.메뉴를 선택하여 지정했다.

cmd + shift + p 를 눌러 플러그인 창을 불러온 다음 키보드 단축키 조정 메뉴를 클릭했다.

이후 상단 우측의 Open Keyboard Shortcuts(JSON) 아이콘을 클릭한다.

이 후 단축키를 직접 JSON형태로 지정할 수 있는 에디터가 나오는데, 여기서 아래 코드를 입력해준다. 사용할 단축키를 "key" 키의 값으로 넣어주고, 단축키를 지정할 명령어를 "args" 내 dictionary의 "snippet" 키의 값으로 지정한다. $1 은 단축키 입력후 명령어가 자동 완성되면, 어디어 커서를 놓을 것인지를 말한다. $2 는 탭(TAB)을 입력후 어디에 커서를 놓을 것인지를 말한다.

// Place your key bindings in this file to override the defaults
[
{
    "key": "cmd+shift+l",  // 사용할 단축키
    "command": "editor.action.insertSnippet",  
    "when": "editorTextFocus",
    "args": {  // 어떠한 명령어에 대해서 단축키를 지정할 것인지를 명기한다
      "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
      // 자동 완성되면 console.log('')의 따옴표 사이에 커서가 위치하고, 이후 탭(TAB)을 누르면 괄호 밖으로 커서가 나온다.
    }
  },
]

이후 돌아가서 위 단축키(cmd + shift + l)를 에디터에 입력하면 마법처럼 console.log('') 가 자동으로 완성될 것이다.

프리뷰(Preview): 다음 주제 미리 엿보기

문자열(String)(4)

텍스트 형태로 표현되는 데이터를 저장한다.
주요 연산: 문자열 크기 체크, 문자열 빌드(build), 문자열 합치기(concatenate, +/+=), indexOf() 메서드로 substring의 존재 및 위치 확인, substring() 메서드로 substring 가져오기 등

조건문(5)