코린이[코딩 어린이]

ESLint에 대한 내용입니다.

ESLint는 자바스크립트 코드의 문제를 식별하고 수정하기 위한 오픈 소스 정적 코드 분석 도구입니다.

이는 코딩 표준을 시행하고 프로젝트에서 일관된 코딩 스타일을 유지하는데 도움이 됩니다.

ESLint는 자바스크립트 커뮤니티에서 널리 사용되며 텍스트 편집기, 빌드 도구 및 CI( 지속적 통합 )시스템을 포함한 다양한 개발 워크플로에 통합될 수 있습니다.

ESLint의 주요 측면은 아래와 같습니다.

1. 정적 코드 분석: ESLint는 정적 코드 분석을 수행합니다. 즉, 소스 코드를 실행하지 않고 검사합니다. 코드의 구조와 패턴을 분석하여 잠재적인 문제, 코딩 오류, 코딩 표준 편차를 식별합니다.
2. 사용자 정의 가능한 규칙: ESLint를 사용하면 개발자는 프로젝트의 특정 요구사항에 따라 코딩 규칙을 정의하고 구성할 수 있습니다.
   코딩 스타일 및 기본 설정에 맞게 개별 규칙을 활성화, 비활성화 또는 사용자 정의할 수 있습니다.
3. 코딩 표준 및 스타일 가이드: ESLint는 Airbnb, Google, Standard와 같은 널리 사용되는 자바스크립트 코딩 표준 및 스타일 가이드를 지원합니다. 사전 설정된 구성을 선택하거나 팀의 기본 설정에 맞는 사용자 정의 구성을 생성할 수 있습니다.
4. 개발 도구와의 통합: ESLint는 코드 편집기 및 IDE( ex: Visual Studio Code, Sublime Text, WebStorm ), 빌드 도구( ex: Webpack, Gulp ) 및 버전 제어 시스템 ( ex: Git )을 포함한 다양한 개발 도구와 통합될 수 있습니다.
5. 자동 코드 수정: ESLint는 문제를 식별할 뿐만 아니라 많은 문제를 자동으로 수정할 수 있습니다. 이 기능을 사용하면 깔끔하고 일관된 코드를 유지하는데 필요한 시간과 노력을 크게 줄일 수 있습니다.
6. 확장성: ESLint는 특정 프로젝트 요구 사항이나 코드 패턴을 수용하기 위해 사용자 정의 플러그인 및 규칙을 사용하여 확장될 수 있습니다. 이러한 확장성을 통해 광범위한 자바스크립트 프로젝트를 위한 다목적 도구가 됩니다.
7. 광범위한 커뮤니티 채택: ESLint는 자바스크립트 생태계에서 가장 인기 있고 널리 채택되는 린팅 도구 중 하나입니다. 광범위한 커뮤니티 지원을 통해 지속적으로 업데이트되고 유지 관리됩니다.
8. 오류 메시지: ESLint는 개발자가 특정 규칙을 위반한 이유와 이를 수정하는 방법을 이해하는데 도움이 되는 명확하고 유익한 오류 메시지를 제공합니다. 이렇게하면 코드 문제를 더 쉽게 디버깅하고 수정할 수 있습니다.

ESLint의 기본 구성 예

// .eslintrc.js
module.exports = {
    extends: "eslint:recommended",
    rules: {
        "no-console": "warn",
        "indent": ["error", 2]
    }
};

위 내용은 아래와 같이 수행합니다.

• extends: 'eslint:recommended'는 ESLint의 권장 규칙을 기본 구성으로 사용합니다.
• rules를 사용하면 필요에 따라 특정 규칙을 재정의하고 사용자 지정할 수 있습니다.

ESLint를 개발 워크플로우에 통합하면 코드 품질을 유지하고, 코딩 표준을 적용하며, 개발 프로세스 초기에 잠재적인 문제를 파악할 수 있으며, 자바스크립트 프로젝트를 수행하는 팀들에게 중요한 도구가 되어 일관성과 코드 유지성을 보장할 수 있습니다.

Promise에 대한 내용입니다.

Promise는 비동기 작업의 최종 완료 또는 실패와 그 결과 값을 나타내는 자바스크립트의 개체입니다.

비동기 코드 작업을 위한 보다 구조화되고 관리 가능한 방법을 제공하기 위해 프로미스가 도입되었습니다.

일반적으로 원격 서버에서 데이터 가져오기, 파일 읽기 또는 타이머 처리와 같이 완료하는데 다소 시간이 걸릴 수 있는 작업에 사용됩니다.

Promise에는 3가지 상태가 있습니다.

1. Pending: 초기 상태입니다. 이는 비동기 작업이 계속 진행중이며, 아직 값이나 오류가 해결되지 않았음을 나타냅니다.
2. Fulfilled ( Resolved ): 비동기 작업이  성공적으로 완료되었을 때 Promise의 상태입니다. 결과 값을 전달합니다.
3. Rejected: 비동기 작업에 오류가 발생하거나 실패했을 때 Promise의 상태입니다. 실패 내용을 담고 있습니다.

Promise는 비동기 작업이 성공되거나 실패 했을때 발생해야 하는 작업을 정의하기 위해 .then().catch() 메서드와 함께 사용됩니다.

프로미스는 비동기 작업을 처리하는 구조화된 방법을 제공하며 콜백 지옥 또는 pyramid of doom를 피하는데 도움이 됩니다.

자바스크립트에서 프로미스를 사용하는 방법에 대한 예

const fetchData = new Promise((resolve, reject) => {
    // API에서 데이터를 가져왔다고 가정하기 위한 내용입니다.
    setTimeout(() => {
        const data = { message: "Data Fetch Successfully" };

        if (data) resolve(data);
        else reject("Fetch Fail");
    }, 2000);
});

fetchData
.then(data => {
    console.log("Success: ", data);
})
.catch(err => {
    console.log("Err: ", err);
})

위 내용은 아래와 같습니다.

• setTimeout함수를 사용하여 비동기 작업을 시뮬레이션하는 fetchData Promise를 생성합니다. 지연 후 성공 메시지로 해결하거나 오류 메시지로 실패합니다.
• .then()을 사용하여 프로미스가 이행( resolve )되었을때 성공 메시지를 보여줍니다.
• 프로미스가 거절( reject )되었을 때 어떻게 처리할 것인지를 정의하기 위해서 .catch() 메서드를 사용해서 에러 메시지를 보여줍니다.

Promise는 비동기 연산을 처리하기 위한 보다 깨끗하고 구조화된 방법을 제공하며, 많은 자바스크립트 API 및 라이브러리의 기본 구성 요소입니다. 특히 Ajax 요청, 비동기 I/O 연산, 비동기 이벤트의 복잡한 흐름을 처리할 때 유용합니다. 프로미스는 자바스크립트 및 기타 프로그래밍 언어에서 비동기 코드를 관리하기 위한 기본 도구가 되었습니다.

비동기 함수에 대한 내용입니다.

비동기 프로그래밍 또는 비동기/대기라고도 하는 비동기 함수는 현대 프로그래밍, 특히 자바스크립트와 같은 언어의 기본 개념입니다.

이를 통해 전체 프로그램을 중단하고 작업이 완료될 때까지 기다리지 않고 네트워크 요청, 파일 I/O 또는 타이머와 같은 비차단 작업을 수행할 수 있는 코드를 작성할 수 있습니다.

비동기 기능은 반응성이 뛰어나며, 효율적인 애플리케이션을 구축하는데 필수입니다.

비동기 함수의 주요 구성 요소

1. 비동기 작업

• 비동기 함수는 원격 서버에서 데이터를 가져오거나 디스크에서 대용량 파일을 읽는 등 완료하는데 시간이 오래 걸릴 수 있는 작업을 수행하는데 사용됩니다.

2. 콜백함수

• 초기 비동기 프로그래밍에서는 비동기 작업의 결과를 처리하기 위해 콜백 함수가 일반적으로 사용되었습니다. 개발자는 콜백 함수를 비동기 작업에 대한 인수로 전달하고 작업이 완료되면 콜백이 실행됩니다.

3. 프로미스

• 비동기 작업 처리를 개선하기 위한 약속이 도입되었습니다. 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 작업이 완료되면 성공과 오류를 처리하기 이한 핸들러( .then().catch() )를 연결할 수 있습니다.

4. 비동기/대기

• async/await은 자바스크립트를 포함한 많은 프로그래밍 언어에 최근 추가된 것입니다. async 비동기 함수를 정의하는 키워드와 awiat 대기 중인 작업이 완료될 때까지 함수를 일시 중지하는 키워드를 사용하여 비동기 코드를 사용하는 보다 읽기 쉽고 구조적인 방법을 제공합니다.

async/await을 사용하는 자바스크립트의 비동기 함수의 예

async function fetchData() {
    try {
        const res = await fetch("api.example.com");

        if (!res.ok) throw new Error("Fetch Data Err");

        const data = await res.json();
        return data;
    } catch(err) {
        console.log("Fetch Err", err);
        return null;
    }
}

fetchData()
.then(res => {
    if (res) console.log("Data Received: ", res);
    else console.log("Error");
})

위 내용에서 fetchData 함수는 비동기 키워드를 사용하여 비동기 함수로 선언됩니다.

함수 내에서 await 키워드를 사용하여 fetch 작업이 완료되고 응답이 수신될 때까지 기다립니다.

try...catch문을 사용하여 오류를 처리합니다.

마지막으로 함수는 가져온 데이터를 반환하거나 null인 경우 에러를 반환합니다.

비동기 기능은 특히 네트워크 요청, 데이터베이스 또는 기타 I/O 작업을 처리할 때 응답성이 높은 웹 애플리케이션을 구축하는데 필수입니다.

이 기능은 애플리케이션의 메인 스레드가 잠재적으로 시간이 많이 소요되는 작업이 완료될 때까지 기다리면서 사용자 상호 작용에 응답할 수 있도록 보장합니다.

타입스크립트 ( TypeScript )에 대한 내용입니다.

타입스크립트는 선택적인 정적 타이핑 및 기타 기능을 언어에 추가하는 정적으로 유형이 지정된 Javascript의 상위 집합입니다.

Microsoft에서 개발 및 유지 관리하며 웹 개발 세계에서 많은 인기를 얻었습니다.

타입스크립트는 컴파일 타임에 유형 관련 오류를 포착하고, 더 나은 도구를 제공하고 코드 품질과 유지 관리성을 향상시켜 개발 경험을 향상시키는 것을 목표로 합니다.

TypeScript의 주요 기능과 개념

1. 정적 타이핑 ( Static Typing ): 타입스크립트는 정적 타이핑을 도입하여 개발자가 변수, 함수 매개 변수, 반환 값 등에 대한 유형을 정의할 수 있도록 합니다. 이를 통해 개발 프로세스 초기에 유형 관련 오류를 파악할 수 있기 때문에 런타임 오류를 줄일 수 있습니다.

function add (a: number, b: number): number {
    return a + b;
}

const result = add(2, 3); // 5
const invalidResult: string = add(2, 3); // Type Error

2. 유형 추론 ( Type Inference ): 유형 스크립트는 유형 추론을 사용하여 가능할 때마다 자동으로 유형을 결정합니다. 이것은 항상 유형에 명시적으로 주석을 달 필요가 없다는 것을 의미합니다.

유형 스크립트는 종종 코드를 작성하는 방법에 따라 유형을 추론할 수 있습니다.

let name = "Jun" // TypeScript infers `name` as a string

3. 인터페이스 및 클래스 ( Interfaces and Classes ): 타입스크립트는 객체 모양을 정의하고 데이터 및 동작을 캡슐화하기 위한 인터페이스 및 클래스를 지원합니다. 이를 통해 구조화된 데이터 작업 및 객체 지향 코드 작성이 용이합니다.

interface Person {
    name: string;
    age: number;
}

class Student implements Person {
    constructor(public name: string, public age: number) {}
}

const student = new Student("Jun", 25);

4. 열거 ( Enums ): 타입스크립트에는 명명된 상수 값을 정의할 수 있는 Enums가 포함되어 있습니다.

enum Color {
    Red,
    Green,
    Blue
}

const selectedColor: Color = Color.Red;

5. 모듈 ( Modules ): 타입스크립트는 코드를 정리하고 구조화하는 모듈 시스템을 제공합니다. 파일 간의 종속성을 정의하기 위해 Import and Export문을 사용합니다.

// math.ts
export function add (a: number, b: number): number {
    return a + b;
}


// index.ts
import { add } from "./math";
const result = add(2, 3);

6. 타입스크립트 컴파일러 ( TSC: TypeScript Compiler ): 타입스크립트 코드는 타입스크립트 컴파일러를 이용하여 자바스크립트로 변환되며, 이를 통해 모든 자바스크립트 환경에서 실행 가능한 자바스크립트 코드가 생성됩니다.

7. 툴링 지원 ( Tooling Support ): 타입스크립트는 지능적인 코드 완성, 타입 확인 및 생산성을 향상시키는 기타 기능을 제공하는 Visual Studio Code와 같은 코드 편집기를 포함한 뛰어난 툴링 지원을 제공합니다.

8. 커뮤니티 및 라이브러리 ( Community and Libraries ): 타입스크립트는 성장하고 활성화된 커뮤니티를 가지고 있으며, 많은 인기 자바스크립트 라이브러리 및 프레임워크 ( React, Angular )는 타입스크립트를 지원합니다.

9. 호환성 ( Compatibility ): 타입스크립트는 자바스크립트의 상위 집합으로 설계되어 유효한 자바스크립트 코드도 유효한 타입스크립트 코드임을 의미하며, 기존의 자바스크립트 프로젝트에서 타입스크립트를 점진적으로 채택할 수 있습니다.

10. 강력한 유형 ( Strongly Typed ): 타입스크립트는 컴파일 시에 유형 안전성을 강제하므로 더 강력하고 유지 관리 가능한 코드를 제공할 수 있습니다. 그러나 유형을 명시적으로 정의해야 하므로 초기 오버헤드가 추가될 수 있습니다.

타입스크립트는 현대의 웹 개발에서 일반적으로 사용되며, 특히 Type의 안전성, 툴링, 유지보수성이 중요한 대규모 프로젝트에 사용되며, 개발자들이 개발과정 초기에 오류를 발견하고, 보다 예측 가능한 코드를 작성하며, 웹 어플리케이션의 전반적인 품질을 향상시킬 수 있도록 도와줍니다.

타입스크립트를 간단하게 정리해보면, 타입스크립트는 자바스크립트 기반의 언어이며, 자바스크립트의 상위확장버전입니다.

정적타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있으며, 강력한 객체지향 프로그래밍을 지원합니다. ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 변도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행 가능합니다.

명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 해줍니다.

이벤트 버블링 ( Event Bubbling )에 대한 내용입니다.

이벤트 버블링은 이벤트가 DOM( Document Object Model )계층을 통해 전파되거나 "버블업"되는 순서를 가리키는 자바스크립트 및 웹 개발의 기본 개념입니다. 이벤트가 DOM요소에서 발생할 때( ex: div 내의 버튼 클릭 이벤트 ) 이벤트는 해당 요소에서 트리거할 뿐만 아니라 상위 요소에서도 트리거되어 문서의 루트까지 전파합니다.

이벤트 버블링의 작동 방식

• 이벤트 오리진 ( Event Origin ): 버튼이나 div와 같은 특정 DOM 요소에서 이벤트가 트리거됩니다.
• 이벤트 전파 ( Event Propagation ): 대상 요소에서 이벤트가 트리거된 후 각 상위 요소를 차례로 방문하여 DOM 계층을 통해 "버블업"하기 시작합니다.
• 이벤트 핸들러 ( Event Handlers ): DOM 계층 구조의 각 수준에서 요소에 특정 이벤트 유형 ( ex: 클릭 이벤트 핸들러 )에 대해 등록된 이벤트 핸들러가 있는 경우 해당 핸들러가 실행됩니다.
• 버블링 계속 ( Continue Bubbling ): 이벤트는 문서의 루트( 일반적으로 html 요소 )에 도달할 때까지 계층 구조를 통해 계속 버블링됩니다.

Javascript 이벤트 버블링의 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button id="inner">클릭!</button>
    </div>

    <script>
        const outerEle = document.getElementById("outer");
        const innerEle = document.getElementById("inner");

        outerEle.addEventListener("click", function () {
            console.log("Outer DIV 클릭");
        });

        innerEle.addEventListener("click", function () {
            console.log("Inner Button 클릭");
        });
    </script>
</body>
</html>

위 내용은 아래와 같습니다.

• 클릭! 버튼을 클릭하면 버튼 자체에서 클릭 이벤트가 발생하고 이벤트가 외부 div요소까지 버블링됩니다.
• 버튼과 외부 div 모두 클릭 이벤트 리스너가 있으므로 해당 이벤트 핸들러가 실행됩니다.
• 결과적으로 콘솔에 "Inner Button 클릭"과 "Outer DIV 클릭"이라는 두 개의 로그 메시지가 표시됩니다. 이는 이벤트가 DOM 계층 구조의 내부 요소에서 외부 요소로 전파되는 이벤트 버블링을 보여줍니다.

event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button id="inner">클릭!</button>
    </div>

    <script>
        const outerEle = document.getElementById("outer");
        const innerEle = document.getElementById("inner");

        outerEle.addEventListener("click", function () {
            console.log("Outer DIV 클릭");
        });

        innerEle.addEventListener("click", function () {
            console.log("Inner Button 클릭");

            event.stopPropagation();
        });
    </script>
</body>
</html>

이벤트 버블링을 방지하고 이벤트가 계층 위로 더 이상 전파되지 않도록 하려면 이벤트 핸들러 내의 이벤트 개체에서 stopPropagation() 메서드를 사용할 수 있습니다.

위 내용에서는 Inner Button 클릭만 콘솔에 표시되고, Outer DIV 클릭 콘솔은 나오지 않습니다.

이벤트 버블링은 기본 동작이지만 모든 이벤트가 버블업 되는 것은 아닙니다. ( ex: focus, blur 이벤트는 버블링 되지 않습니다. )

또한 event.preventDefault()를 사용하여 일부 이벤트를 취소할 수 있습니다. 이벤트 버블링을 이해하는 것은 복잡한 웹 응용 프로그램에서 이벤트 처리를 관리하고 이벤트 중심 코드를 최적화하는 데 중요합니다.

map() 메서드

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수

• callback: 새로운 배열 요소를 생성하는 함수( 아래 세 가지 인수를 가집니다. )
• currentValue: 처리할 현재 요소
• index: 처리할 현재 요소의 인덱스
• array: map()을 호출한 배열
• thisArg: callback을 실행할 때 this로 사용되는 값

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

예제

배열에 들어있는  숫자들의 제곱근을 구하여 새로운 배열을 만들기

let number = [1, 4, 9, 21];
let roots = number.map(Math.sqrt);

console.log(number); // [1, 4, 9, 21]
console.log(roots); // [1, 2, 3, 4.58257569495584]

map()을 활용해 배열 속 객체를 재구성하기

let kvArr = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 }
];

let reformttedArr = kvArr.map(function (obj) {
  let rObj = {};
  rObj[obj.key] = obj.value;

  return rObj;
});

console.log(kvArr); // [{key:1, value: 10}, {key:2, value: 20}, {key:3, value: 30}]
console.log(reformttedArr); // [{1: 10}, {2: 20}, {3: 30}]

인자를 받는 함수를 사용하여 숫자 배열 재구성하기

let number = [1, 2, 5, 8, 20];

let double = number.map(function (num) {
  return num * 2;
});

console.log(number); // [1, 2, 5, 8, 20]
console.log(double); // [2, 4, 10, 16, 40]

map()을 포괄적으로 사용하기

:: ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법입니다.

let map = Array.prototype.map;

let a = map.call("Hello World", function (x) {
  return x.charCodeAt(0);
});

console.log(a); // [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

Local Storage, Session Storage, Cookies에 대한 내용입니다.

Local Storage와 Session Storage는 웹 브라우저가 제공하는 두 가지 웹 스토리지 옵션으로, 웹 응용 프로그램이 사용자의 장치에 로컬로 데이터를 저장할 수 있도록 합니다. 둘 다 Web Storage API의 일부이며 비슷한 기능을 가지고 있지만 차이점이 있습니다.

Local Storage

• 지속성: 로컬 저장소에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재시작한 후에도 사용자의 장치에 남아 있습니다.
  사용자 또는 웹 응용 프로그램에 의해 명시적으로 지워지지 않는 한 세션 및 브라우저 재시작에 걸쳐 지속됩니다.
• 저장 제한: 로컬 스토리지의 일반적인 저장 제한은 약 5-10MB이지만 브라우저에 따라 제한이 다를 수 있습니다. 따라서 더 긴 기간에 걸쳐 사용 가능한 많은 양의 데이터를 저장하기에 적합합니다.
• 범위: 로컬 스토리지에 저장된 데이터는  동일한 도메인 내의 서로 다른 브라우저 창이나 탭을 통해 액세스할 수 있습니다. 단일 세션에만 국한되지 않습니다.
• 사용 사례: 사용자가 나중에 웹 사이트로 돌아올 때도 데이터를 사용할 수 있기 때문에 리소스 캐싱, 사용자 기본 설정 저장 또는 응용 프로그램 상태 저장에 로컬 스토리지를 사용하는 경우가 많습니다.

Session Storage

• 지속성: 세션 저장소에 저장된 데이터는 한 페이지의 세션 동안에만 사용할 수 있습니다.
  사용자가 브라우저 탭이나 창을 닫으면 바로 삭제됩니다. 세션이나 브라우저 재시작 사이에는 지속되지 않습니다.
• 스토리지 제한: 세션 스토리지는 일반적으로 로컬 스토리지와 동일한 스토리지 제한이 약 5-10MB이므로 단일 세션에 대해 합리적인 양의 데이터를 저장할 수 있습니다.
• 범위: 세션 저장소에 저장된 데이터는 동일한 브라우저 탭이나 창 내에서만 액세스할 수 있으며, 다른 탭이나 창을 통해서나 다른 브라우저 세션 간에는 공유되지 않습니다.
• 사용 사례: 세션 저장소는 사용자가 특정 웹 페이지와 상호 작용하는 동안 짧은시간 동안만 필요한 임시 데이터를 저장하는 데 유용하며, 폼 데이터를 일시적으로 저장하거나 세션 중에 사용자 인증 토큰을 관리하는 등의 작업에 주로 사용됩니다.

사용 사례

// Local Storage
localStorage.setItem("username", "Shiro21");

const username = localStorage.getItem("username");

console.log(username); // Shiro21

// Session Stroage
sessionStorage.setItem("usernick", "Jun");

const usernick = sessionStorage.getItem("usernick");

console.log(usernick); // Jun

로컬 저장소와 세션 저장소 모두 데이터를 키와 값 쌍으로 저장하고 문자열 값만 허용한다는 점에 유의하는 것이 중요합니다.

객체나 배열과 같은 복잡한 데이터 구조를 저장해야 하는 경우 저장하기 전에 JSON으로 직렬화하고 검색할 때 역직렬화해야 합니다.

요약을 하자면, 로컬 저장소와 세션 저장소는 웹 응용 프로그램이 사용자 장치에 데이터를 저장할 수 있도록 하는 브라우저 저장소 옵션입니다.

로컬 저장소는 여러 세션에 걸쳐 지속되며, 세션 저장소는 일시적이며 단일 브라우저 세션에만 적용됩니다. 둘 중 하나를 선택하는 것은 특정 사용 사례와 데이터 저장 요구 사항에 따라 달라집니다.

Cookies

쿠키는 웹 사이트가 사용자의 디바이스에 저장하여 사용자 또는 사용자의 브라우징 활동에 대한 정보를 기억하는 작은 데이터입니다. 쿠키는 사용자 세션 추적, 사용자 선호도 저장, 쇼핑 카트 및 사용자 인증과 같은 기능 구현 등을 포함한 다양한 목적으로 웹 개발에 널리 사용됩니다.

쿠키와 관련된 핵심 내용

1. 목적

• 세션 관리: 쿠키는 일반적으로 사용자 세션을 관리하는 데 사용됩니다. 사용자가 웹 사이트에 로그인하면 방문 중에 사용자를 식별하기 위한 세션 쿠키가 생성되는 경우가 많습니다. 이를 통해 서버는 특정 사용자와 요청을 연결할 수 있습니다.
• 사용자 기본 설정: 쿠키는 사용자 기본 설정 및 언어 기본 설정, 테마 선택 또는 글꼴 크기와 같은 설정을 저장하여 개인화된 브라우징 경험을 제공할 수 있습니다.
• 추적 및 분석 ( Tracking and Analytics ): 쿠키는 사용자의 행동을 추적하고 분석 데이터를 수집하는 데 사용됩니다. 이를 통해 웹 사이트는 사용자가 콘텐츠와 상호 작용하고 개선하는 방법을 이해할 수 있습니다.
• 전자상거래: 쿠키는 전자상거래 웹사이트에 필수적인 것으로 장바구니에 물건을 담아두거나 사용자 로그인 정보를 기억하고 사용자 활동을 추적하여 추천을 받을 수 있습니다.

2. 쿠키 속성

• 이름 - 값 쌍: 쿠키는 이름 - 값 쌍으로 구성되며, 여기서 이름은 쿠키를 식별하는 문자열이고 값은 쿠키와 관련된 데이터입니다.
• 만료 날짜: 쿠키는 사용자의 장치에 저장되는 기간을 결정하는 만료 날짜를 가질 수 있습니다. 세션 쿠키는 일시적이며 브라우저 세션이 끝나면 만료되지만 영구 쿠키는 지정된 기간 동안 지속될 수 있습니다.
• 도메인 및 경로: 쿠키를 웹 사이트의 특정 도메인 및 경로에 적용하도록 설정할 수 있습니다. 이를 통해 웹 사이트 개발자는 HTTP 요청과 함께 쿠키가 전송되는 위치를 제어할 수 있습니다.
• 보안 및 HttpOnly 플래그: 쿠키에는 보안(HTTP) 연결을 통해서만 전송되어야함을 나타내는 "보안" 및 "HttpOnly"와 같은 플래그가 있을 수 있으므로 보안이 강화됩니다.

3. 개인 정보 보호 및 보안

• 쿠키는 서로 다른 웹 사이트에 걸쳐 사용자의 행동을 추적하는 데 사용될 수 있기 때문에 프라이버시에 대한 우려를 불러일으킬 수 있습니다. 이를 해결하기 위해 브라우저는 사용자가 쿠키를 관리하고 차단할 수 있는 옵션을 제공합니다.
• 쿠키에는 자사 쿠키 ( 방문 중인 웹 사이트에서 설정 ), 타사 쿠키 ( 사용자가 현재 방문 중인 도메인이 아닌 다른 도메인에서 설정 ) 등 다양한 유형이 있습니다. 제 3자 쿠키는 개인 정보 보호에 관한 논쟁의 대상이 되어 왔으며 브라우저 제한이 강화되었습니다.

4. 자바스크립트에서 쿠키 접근하기

• 자바스크립트에서는 쿠키를 읽고 수정할 수 있는 document.cookie 속성을 통해 쿠키에 접근할 수 있습니다.

// 쿠키 읽기
const cookieValue = document.cookie.split('; ').find(row => row.startsWith('myCookie=')).split('=')[1];

// 쿠키 설정
document.cookie = 'myCookie=myValue; expires=Wed, 30 Dec 2023 12:00:00 UTC; path=/';

쿠키를 읽고 설정하는 예제

// 쿠키 읽기
const readCookie = (name) => {
  const cookies = document.cookie.split('; ');
  const cookie = cookies.find(row => row.startsWith(`${name}=`));
  if (cookie) {
    return cookie.split('=')[1];
  }
  return null;
};

const myCookieValue = readCookie('myCookie');
if (myCookieValue) {
  console.log(`Value of myCookie: ${myCookieValue}`);
} else {
  console.log('myCookie does not exist or has expired.');
}

// 쿠키 설정
const setCookie = (name, value, expires, path = '/') => {
  const cookie = `${name}=${value}; expires=${expires}; path=${path}`;
  document.cookie = cookie;
};

const expirationDate = new Date('Wed, 30 Dec 2023 12:00:00 UTC').toUTCString();
setCookie('myCookie', 'myValue', expirationDate);

console.log('myCookie has been set.');

5. 저장 제한

• 쿠키에는 크기 제한이 있기 때문에 ( 보통 쿠키당 약 4KB ) 대용량 데이터를 저장하기에 적합하지 않습니다.

6. 대안

• 웹 개발자는 쿠키 외에 위에서 소개드린 Web Storage API의 일부인 Local Storage및 Session Storage와 같은 다른 스토리지 옵션에 액세스 할 수 있으며, 클라이언트 측에서 더 많은 양의 데이터를 저장하는 데 사용됩니다.

요약을 하자면, 쿠키는 웹 사이트가 사용자의 장치에 정보를 저장하기 위해 사용하는 작은 데이터 파일로 웹 사이트가 사용자 선호도를 기억하고 세션을 관리하며 사용자 행동을 추적할 수 있게 해줍니다. 웹 개발에 많은 귀중한 사용 사례가 있지만 개인 정보 보호 문제로 인해 브라우저 제한이 증가하고 특정 작업에 대해 대체 저장 옵션을 사용하는 쪽으로 전환되었습니다.

this란 ?

Javascript에서 tihs 키워드는 현재 실행 컨텍스트에 대한 참조이며 사용 방법과 위치에 따라 달라질 수 있습니다.

this의 정확한 값은 함수를 어떻게 부르느냐에 따라 결정되며, this는 다른 상황에서 다른 객체 또는 값을 나타낼 수 있습니다.

this를 이해하는 것은 Javascript 객체, 함수 및 객체 지향 프로그래밍작업을 할 때 매우 중요합니다.

this의 예시

1. 글로벌 컨텍스트: 함수나 객체 이외의 경우, this는 브라우저 환경에서는 윈도우 객체이고, Node.js에서는 전역 객체를 나타냅니다.

console.log(this === window); // true

2. 함수 컨텍스트: 정규 함수 안에서는 함수를 어떻게 부르느냐에 따라 값이 결정됩니다.

독립 실행형 함수라고 하는 경우 전역 객체를 나타냅니다.

function hello() {
    console.log(this === window); // true
}

hello();

3. 메서드 컨텍스트: 객체 메서드 내부에서 this는 객체 자체를 참조합니다.

const myObj = {
    greet: function () {
        console.log(this === myObj); // true
    }
}

myObj.greet();

4. 생성자 함수: 객체를 생성하는 데 사용되는 생성자 함수 내부에서 this는 새로 생성된 객체의 인스턴스를 참조합니다.

function Person (name) {
    this.name = name;
}

const person1 = new Person("Shiro");

console.log(person1.name); // Shiro

5. 이벤트 핸들러: DOM 조작에 사용되는 것과 같은 이벤트 핸들러 함수에서 this는 이벤트를 트리거한 DOM 요소를 가리키는 경우가 많습니다.

<body>
    <button id="myButton">클릭 딸깍!</button>

    <script>
        const button = document.getElementById("myButton");

        button.addEventListener("click", function () {
            console.log(this === button); // true
        })
    </script>
</body>

6. 화살표 함수: 화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 됩니다.

const myObj = {
    hello: () => {
        console.log(this === window); // true
    }
}

myObj.hello();

요약을 하자면, Javascript 코드에서 예기치 않은 동작을 방지하기 위해 this가 사용되는 상황을 이해하는 것이 매우 중요합니다.

this의 값은 다양할 수 있기 때문에 함수가 호출되는 방식과 해당 컨텍스트에 주의를 기울이는 것이 필요합니다.

클로저란 ?

클로저( Closure )는 Javascript에서 자체 비공개 변수에 접근할 수 있는 함수로, 외부 함수의 실행이 종료된 후에도 외부( Closure ) 함수의 범위에 있는 변수에 접근할 수 있습니다.

즉, 주변 컨텍스트에서 변수를 폐쇄하여 상태를 유지합니다.

클로저의 핵심 내용

1. 외부 함수 ( Enclosing Function ): 클로저는 일반적으로 외부 함수라고 알려진 다른 함수 내에서 생성됩니다.

이 외부 함수는 변수를 정의하고 클로저 함수를 포함할 수 있습니다.

function outer () {
    let outerVar = 10;

    function closure () {
        console.log(outerVar);
    }

    return closure;
}

const myClosure = outer();

myClosure(); // 10

2. Private Variables: 클로저는 변수를 캡슐화하고 보호하여 클로저 함수에 비공개로 만들 수 있습니다. 

위 예제에서 outerVar는 클로저 함수에 비공개 입니다.

3. 외부 함수 스코프에 대한 액세스: 클로저 함수는 외부 함수의 실행이 완료된 후에도 포함하는 (외부) 함수의 변수 및 매개변수에 액세스할 수 있습니다. 이는 Javascript 엔진이 스코프 체인을 그대로 유지하기 때문에 가능합니다.

4. 반환 함수: 종종 외부 함수에서 클로저가 반환되어 외부 함수에서 호출할 수 있습니다.

이를 통해 "함수 팩토리"의 개념과 지속적인 상태의 함수를 생성할 수 있습니다.

const myClosure = outer();

myClosure(); // 10

클로저 사용 사례

1. 데이터 캡슐화 및 개인 정보 보호: 클로저는 일반적으로 개인 변수 및 메서드를 사용하여 개체를 만드는 데 사용됩니다.

이는 Javascript에서 데이터 숨기기 및 추상화를 구현하는 데 도움이 됩니다.

function createPerson (name) {
    let privateName = name;

    return {
        getName: function () {
            return privateName;
        },
        setName: function (newName) {
            privateName = newName;
        }
    };
}

const person = createPerson("Shiro");

console.log(person.getName()); // Shiro

2. Callback: 클로저는 콜백 함수의 기본이므로 나중에 실행해도 원래 컨텍스트에 계속 액세스할 수 있습니다.

function something (callback) {
    setTimeout(function () {
        console.log("확인");
        callback();
    }, 1000);
}

something(function () {
    console.log("Callback ~");
})

/*
확인
Callback ~
*/

3. Function Factory: 클로저는 지속적인 구성이나 동작을 갖춘 특수 함수를 만들 수 있습니다.

function createMultiple (factor) {
    return function (x) {
        return x * factor;
    };
}

const double = createMultiple(2);

console.log(double(5)); // 10

요약을 하자면, 클로저는 Javascript의 강력하고 다양한 기능입니다.

이는 개인 변수를 생성하고, 상태를 유지하고, 기능을 캡슐화하는 방법을 제공합니다.

효과적인 Javascript 개발을 위해서는 클로저 이해가 중요합니다. 특히 데이터 개인 정보 보호, 콜백 함수 및 동적 함수 생성과 관련된 시나리오에서는 더욱 그렇습니다.

호이스팅

호이스팅은 프론트 엔드 웹 개발에 널리 사용되는 프로그래밍 언어인 Javascript의 개념으로, 코드가 실행되기 전 컴파일 단계에서 변수 및 함수 선언을 포함 범위의 맨 위로 이동하는 동작을 나타냅니다.

이를 올바르게 이해하지 못하면 때로 예상하지 못한 동작이 발생할 수 있습니다.

호이스팅 핵심 내용

1. 변수 선언: 키워드를 사용하여 변수를 선언하면 var선언은 전역 범위의 맨 위로 끌어올려집니다. 그러나 변수의 초기화는 원래 위치에 유지됩니다.

console.log(x); // undefined

var x = 5;

위에서는 변수 x가 호이스팅 되었으므로 console.log(x)에 오류가 발생하지 않지만 'undefined'가 할당됩니다. ( var x = 5; 호이스팅이 되지 않았기 때문에 )

2. 함수 선언: 함수 선언도 호이스팅이 되며 본문을 포함한 전체 함수가 포함 범위의 맨 위로 이동됩니다.

즉, 코드에서 함수가 선언되기 전에 함수를 호출할 수 있습니다.

hello(); // "Hello, World!"

function hello() {
    console.log("Hello, World!");
}

3. let과 const를 포함한 가변 호이스팅: var와 다르게 let과 const로 선언된 변수는 호이스트로 표시되지만 정의되지 않은 변수로 초기화되지는 않습니다. 대신 코드에 실제로 선언되기 전까지는 TDZ( Temporary Dead Zone )에 있습니다. 이는 선언 전에 변수 값에 접근할 수  없음을 의미합니다.

console.log(x); // ReferenceError: ...

let x = 5;

4. 함수식: 함수를 변수에 할당하는 함수식은 함수 선언과 같은 방식으로 호스팅되지 않으며, 함수 할당이 아닌 변수 선언만 호스팅됩니다.

hello(); // TypeError: ...

var hello = function() {
    console.log("Hello, World!");
}

요약을 하자면, Javascript에서 호이스팅은 컴파일 단계에서 변수와 함수의 선언을 포함 범위의 가장 위로 이동시키는 동작입니다.

프론트 엔드 웹 개발에서 호이스팅이 예기치 않은 동작을 방지하고 보다 예측 가능하고 유지 가능한 코드를 작성하는 방버을 이해하는 것이 매우 중요합니다.