[신한투자증권] 프로 디지털 아카데미 6기 - 클라우드 기반 프론트엔드(1)

클라우드 기반 - 프론트엔드(1)

지난 강의까지 기획부터 HTML/CSS를 활용한 간단한 웹 제작까지 배웠으니, 이제 JavaScript를 활용해 웹에 동적인 기능을 더하는 첫걸음을 내딛을 차례다.

---

프론트엔드 개발의 첫 걸음

1. JavaScript란? 

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.

비록 자바스크립트는 이름에서 ‘자바’를 연상시키지만, 이는 마케팅 전략일 뿐이며 자바(Java)와 자바스크립트는 완전히 별개의 언어이다. 두 언어가 C 언어 문법 기반을 공유하기에 겉보기에 유사한 점은 있지만, 동작 방식이나 철학은 전혀 다르다.

과거에는 브라우저마다 지원되는 JavaScript의 사양이 달라 크로스 브라우징 문제가 심각했지만, ECMAScript 2015(ES6) 이후로는 대부분의 브라우저에서 표준을 따르게 되며 상황이 많이 개선되었다. 단, 여전히 오래된 Internet Explorer(IE)에서는 호환성 문제가 발생할 수 있어 주의가 필요하다. 

 

그리고 꽤나 불친절하고 마음대로 되지 않는 ... 언어일 수 있으니 항상 모를때 마다 공식 문서를 읽어보는 습관을 기르자. 화이팅!

 

2. 실행 환경: 브라우저와 Node.js

2-1. 브라우저 환경

웹 브라우저는 자바스크립트의 기본 실행 환경이다.

JavaScript는 HTML 문서 내 <script> 태그에 삽입되거나 외부 .js 파일로 연결되어 실행되며, 다음과 같은 기능을 제공한다.

• 사용자와의 상호작용 이벤트 처리
• HTML 요소의 동적 제어 및 스타일 변경
• 실시간 데이터 바인딩 및 화면 업데이트

이 과정에서 브라우저는 DOM(Document Object Model) 을 통해 HTML 문서를 트리 구조로 표현하고, 자바스크립트가 이를 제어할 수 있도록 한다.

2-2. Node.js 환경

Node.js는 Chrome의 V8 엔진을 기반으로 만들어진 자바스크립트 런타임이다.

Node.js의 등장으로 자바스크립트는 더 이상 브라우저에 국한되지 않고, 서버 사이드 개발 언어로도 활용되기 시작했다.

Node.js의 특징:

• 비동기 I/O와 이벤트 기반 아키텍처
• 높은 처리량과 빠른 성능
• npm을 통한 수많은 라이브러리 지원

활용 분야:

• 백엔드 API 서버 개발 (Express.js 등)
• 실시간 웹 애플리케이션 (채팅, 알림 등)
• CLI 도구, 웹 크롤러, IoT 장치 등 다양한 영역

 

3. let, const, 그리고 var

JavaScript는 원래 var 키워드만을 사용하여 변수를 선언했다. 하지만 var는 함수 스코프(function scope)를 가지기 때문에 호이스팅(Hoisting) 이라는 문제를 일으켰다. 즉, 선언이 코드 상단으로 끌어올려져 예측이 어려운 동작을 유발했다.

이를 보완하기 위해 ES6에서는 let과 const가 도입되었다.

• let: 블록 스코프(block scope)를 가지며, 재할당은 가능하지만 재선언은 불가하다.
• const: 블록 스코프를 가지며, 재할당이 불가능하다. 상수 선언에 사용된다.

이 두 키워드를 사용하면 명확한 스코프 지정과 예측 가능한 코드 실행 흐름을 보장할 수 있다. 따라서 현재 대부분의 현대 JavaScript 개발에서는 var는 거의 사용되지 않고, let과 const가 기본으로 자리 잡았다. 하지만 오래된 버전에서는 var를 쓸 수 있으니, 알아두긴 하자.

 

4. 스코프와 클로저

스코프(Scope)

스코프는 변수가 접근 가능한 범위를 의미한다.

자바스크립트는 정적(렉시컬) 스코프를 사용한다. 이는 함수가 "어디서 호출되었는지"가 아니라, "어디에 선언되었는지"에 따라 스코프가 결정된다는 뜻이다.

const globalVar = 'global';
function outer() {
  const outerVar = 'outer';
  function inner() {
    console.log(globalVar); // global
    console.log(outerVar);  // outer
  }
  inner();
}
outer();

 

위 예제에서 inner 함수는 자신이 선언된 위치의 스코프인 outer 함수와 global 영역의 변수를 참조할 수 있다.

클로저(Closure)

클로저란 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합이다. 즉, 함수가 선언될 당시의 스코프 정보를 기억한다는 의미이다.

내부 함수는 외부 함수가 종료된 이후에도, 외부 함수의 변수에 접근할 수 있다.

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

 

이 예제에서 count는 외부 함수가 이미 종료된 이후에도 내부 함수가 계속 접근하고 값을 유지한다. 이처럼 변수를 은닉하면서 상태를 기억할 수 있는 것이 클로저의 핵심 특징이다.

 

5. 이것들을 외울 필요는 없지만 .. 반복해서 쓰며 몸에 익을 때 까지 반복하자

4-1. 문자열 관련 함수 및 속성

"hello".toUpperCase(); // HELLO - 모든 문자를 대문자로 변환
"WORLD".toLowerCase(); // world - 모든 문자를 소문자로 변환

"JavaScript".indexOf("S"); // 4 - 'S' 문자의 인덱스를 반환
"frontend".includes("end"); // true - 특정 문자열 포함 여부 확인

"ReactJS".startsWith("Re"); // true - 특정 문자열로 시작하는지 확인
"NextJS".endsWith("JS"); // true - 특정 문자열로 끝나는지 확인

"abcdef".slice(2, 4); // "cd" - 2번 인덱스부터 4 전까지 잘라냄
"a,b,c".split(","); // ["a", "b", "c"] - 구분자로 나눠 배열 반환

"  trim me  ".trim(); // "trim me" - 앞뒤 공백 제거
"  trimStart  ".trimStart(); // "trimStart  " - 앞 공백 제거
"  trimEnd  ".trimEnd(); // "  trimEnd" - 뒤 공백 제거

"ha".repeat(3); // "hahaha" - 문자열을 n번 반복

4-2 배열 관련 함수 및 속성

// 문자열 관련
"hello".indexOf("e");        // 1 - 'e' 문자의 인덱스 반환
"world".includes("or");      // true - 문자열 포함 여부 확인
"abcdef".slice(1, 4);        // "bcd" - 1부터 4 전까지 잘라냄

// 배열 관련
["a", "b", "c"].join("-");         // "a-b-c" - 배열을 구분자로 문자열 연결
[1, 2, 3].reverse();               // [3, 2, 1] - 배열 뒤집기
const arr = [1, 2];
arr.push(3);                       // [1, 2, 3] - 배열 끝에 요소 추가
arr.pop();                         // [1, 2] - 배열 끝 요소 제거

const items = [1, 2, 3];
items.splice(1, 1, 9);             // [1, 9, 3] - 1번 인덱스부터 1개 제거하고 9 삽입

const queue = [1, 2, 3];
queue.shift();                     // [2, 3] - 첫 요소 제거
queue.unshift(0);                 // [0, 2, 3] - 첫 위치에 요소 추가

// 🔥 중요 메서드
// forEach - 단순 순회
const nums = [1, 2, 3];
nums.forEach((item, index, array) => {
  // 반복 작업 수행
});

// map - 각 요소를 변형하여 새 배열 생성
const doubled = nums.map((item, index, array) => item * 2);

// filter - 조건을 만족하는 요소만 추출
const evens = nums.filter((item, index, array) => item % 2 === 0);

// concat - 기존 배열에 요소 또는 배열 연결
const extended = nums.concat([4, 5]);

// reduce - 누적 계산 처리
const sum = nums.reduce((accumulator, current) => accumulator + current, 0);

 

6. 실습을 통해 더욱 익숙해지자

1. 스코프와 클로저

function createIncrementer(start, step) {
  // 여기에 코드를 작성하세요.
}

const incByOne = createIncrementer(5, 1);
console.log(incByOne()); // 6
console.log(incByOne()); // 7

const incByTen = createIncrementer(10, 10);
console.log(incByTen()); // 20
console.log(incByTen()); // 30

 

2. 함수(함수도 항상 변수의 일종이라는 것을 기억하자!!)

// 다음 ask 함수가 동작하도록 ask 함수를 정의하여라.
// ** 아래는 브라우저에서 동작하는 코드입니다.

ask(
    () => confirm("동의하십니까?"),
    function() { alert("동의하셨습니다.") },
    function() { alert("취소 버튼을 누르셨습니다.") }
);

 

// 주어진 함수 `fn`을 감싸서, 호출 전후로 로그를 
// 출력하는 데코레이터 함수를 작성하세요.
// 예:
// const add = (a, b) => a + b;
// const loggedAdd = withLogging(add);
// loggedAdd(2, 3) // 콘솔: 출력 2와3을 인자로 받았습니다.

function withLogging(fn) {
 return function (...args) {
  
 };
}

 

// 여러 개의 단항 함수들을 순서대로 적용하는 파이프라인 함수를 작성하세요.
function pipeline(...fns) {
 return function (x) {
 };
}

// 예:
// const double = x => x * 2;
// const increment = x => x + 1;
// const square = x => x * x;
// const pipelineFunc = pipeline(double, increment, square)
// pipelineFunc(2) // ((2 * 2) + 1)^2 = 25