개발(자)되어가는 일지

위 블로그 내용을 보며 공부한 내용을 정리한 글입니다. 

자바스크립트 객체 생성하기

1. 기본제공(내장함수)되는 object() 객체 생성자 함수 이용
2. 객체 리터럴 이용
3. 생성자 함수 이용

1. 내장 Object() 생성자 함수 이용하기

// Object() 를 이용하여 foo 빈 객체 생성
let foo = new Object();

foo.name = "coolandsexygirl";
foo.age = 99;
foo.gender = 'male';

console.log(typeof foo);  // object
console.log(foo);  // { name: 'coolandsexygirl', age: 99, gender: 'male' }

2. 객체 리터럴 방식 사용하기

// 객체 리터럴 : 간단한 표기법으로 객체를 생성하는 방법이라는 뜻
let foo = { 
    name : 'coolandssexygirl',
    age : 99,
    gender : 'male'
}

console.log(typeof foo);  // object
console.log(foo);  // { name: 'coolandsexygirl', age: 99, gender: 'male' }

3. 사용자 생성자 함수를 사용하기

function Foo() {
    this.name = 'coolandsexygirl';
    this.age = 99;
    this.gender = 'male';
}

var fooInstance = new Foo();

console.log(fooInstance); // Foo { name: 'coolandsexygirl', age: 99, gender: 'male' }

함수가 호출가능한 요소로 사용될 수도,

다른 객체를 생성하는 요소로 사용될 수도 있다.

어떤 역할로 사용될 지는 주변 실행환경, 즉 연산자에 따라 달라진다.

new 키워드와 함께 사용되면 메모리에 인스턴스(생성자 함수에서 반환된 객체)를 생성하는 역할로 사용된다.

new 없이 ()연산자 를 사용해 호출하면 일반 함수처럼 사용된다.

때문에,

암묵적인 약속(관습적)으로 프로그래밍계에서는 일반 함수는 함수명의 첫 글자를 소문자로 시작하고 생성자는 첫 글자를 대문자로 작성하도록 권장하고 있으며,이를 통해 생성자 함수인지 일반 함수인지를 구별하고 있다.

자바에서 쓰던 class 키워드 → 자바스크립트에선 function

생성자는 new 연산자에 의해 호출되어 객체의 초기화를 담당,데이터의 값을 설정(변수 설정) 하고 메소드를 호출해서 객체를 사용할 수 있도록 준비

출처:

https://webclub.tistory.com/641

[Web Club:티스토리]

퐁규 gpt 와의 대화 시간 )

전지전능할 전 , 핑퐁 퐁 , 큐티 규 . 전 퐁 규

history 에 대해 배우다 자바스크립트가 history를 통해 쿠키를 가지고 오는건지, 자바스크립트는 쿠키를 어떻게 사용하는지 궁금했음

나 : 쿠키는 자바스크립트에서 수집되는 거야?

퐁규의 답변 :

쿠키는 일반적으로 웹 브라우저에서 관리되는 작은 텍스트 파일입니다. 자바스크립트 자체는 쿠키를 수집하지 않습니다. 그러나 자바스크립트를 사용하여 웹 페이지에 쿠키를 설정하거나 읽을 수는 있습니다.

웹 페이지에서 자바스크립트를 사용하여 쿠키를 설정하는 방법은 document.cookie 속성을 사용하는 것입니다. 이를 통해 쿠키를 설정하고 읽을 수 있습니다. 하지만 이를 위해서는 사용자의 브라우저 설정이 쿠키를 허용해야 합니다. 또한, 자바스크립트를 사용하여 쿠키를 설정하는 경우 보안 및 개인정보 보호를 위해 사용자에게 동의를 요청하는 것이 좋습니다.

따라서 자바스크립트를 사용하여 쿠키를 읽거나 설정하는 것은 웹 애플리케이션에서 사용자의 편의성을 높이고 사용자 경험을 개선하는 데 도움이 될 수 있지만, 이를 남용하지 않고 적절한 보안 및 개인정보 보호를 고려해야 합니다.

나 : 자바스크립트의 브라우저 객체 history를 통해 쿠키를 가지고 올 수 있어?

퐁규의 답변 :

JavaScript의 history 객체는 브라우저의 탐색 히스토리를 관리하는 데 사용됩니다. 이 객체를 통해 이전에 방문한 페이지의 URL 등을 액세스할 수 있지만, 쿠키를 직접적으로 읽거나 조작하는 데 사용되지는 않습니다.

쿠키를 읽거나 조작하는 데 사용되는 주요 객체는 document 객체입니다. 자바스크립트에서 쿠키를 읽거나 설정하려면 document.cookie 속성을 사용합니다. 이 속성을 통해 현재 페이지의 쿠키를 읽고 설정할 수 있습니다.

예를 들어, 다음과 같은 방식으로 document.cookie를 사용하여 쿠키를 읽을 수 있습니다:

console.log(document.cookie);

그러나 이를 통해 다른 도메인의 쿠키를 읽거나 조작하는 것은 보안상의 이유로 허용되지 않습니다. 웹 브라우저는 동일 출처 정책(Same Origin Policy)을 적용하여 다른 출처의 쿠키에 접근을 제한합니다. 따라서 다른 도메인의 쿠키를 가져오려면 해당 도메인의 페이지에서 자바스크립트를 실행해야 합니다.

요약하면, history 객체를 사용하여 쿠키를 읽거나 조작하는 것은 보통의 사용 방법이 아니며, 쿠키를 다룰 때는 주로 document.cookie 속성을 사용합니다.

나 : 액세스가 뭐야?

퐁규 :

"액세스"는 정보나 자원에 대한 접근이나 이용을 의미합니다. 컴퓨터 과학 분야에서는 데이터나 기능을 사용할 수 있는 권한을 갖는 것을 액세스한다고 합니다.

웹 개발에서 "액세스"란 웹 페이지나 웹 애플리케이션을 통해 정보나 기능에 접근하는 것을 의미합니다. 이는 일반적으로 사용자가 웹 사이트에 방문하여 페이지를 탐색하고 기능을 사용하는 것을 말합니다.

예를 들어, 웹 브라우저를 사용하여 웹 사이트에 액세스할 때, 사용자는 웹 서버에서 제공하는 페이지를 볼 수 있고, 폼을 제출하여 데이터를 전송하거나, 링크를 클릭하여 다른 페이지로 이동할 수 있습니다. 또한, 웹 개발자는 서버 측 코드나 클라이언트 측 스크립트를 사용하여 사용자의 요청을 처리하고 적절한 응답을 생성함으로써 사용자에게 정보나 서비스를 제공할 수 있습니다.

따라서 "액세스"는 웹에서 사용자가 웹 사이트나 애플리케이션을 통해 정보를 얻거나 기능을 사용하는 것을 의미합니다.

나 : 쿠키는 웹 브라우저에서 어떻게 관리되는거야?

퐁규 :

쿠키는 일반적으로 웹 브라우저에서 관리됩니다. 웹 브라우저는 쿠키를 클라이언트 컴퓨터에 저장하고, 웹 서버에 요청할 때마다 해당 쿠키를 함께 보냄으로써 웹 사이트와 상호작용할 수 있습니다. 쿠키는 웹 브라우저의 내부 메모리나 파일 시스템에 저장됩니다.

쿠키는 일반적으로 키-값 쌍으로 구성되어 있습니다. 예를 들어, 사용자의 로그인 정보, 사용자의 환경 설정, 사용자가 방문한 웹 페이지의 선호도 등을 저장할 수 있습니다.

쿠키는 다음과 같은 방식으로 관리됩니다:

1. 쿠키 생성: 웹 서버가 클라이언트에게 쿠키를 생성하고 전송합니다. 이를 위해 서버는 HTTP 응답 헤더에 Set-Cookie 헤더를 포함하여 클라이언트에게 쿠키를 전송합니다.
2. 쿠키 저장: 웹 브라우저는 받은 쿠키를 사용자의 컴퓨터에 저장합니다. 보통은 텍스트 파일 형태로 저장됩니다. 브라우저는 이후에 같은 웹 사이트를 방문할 때 해당 쿠키를 웹 서버로 전송합니다.
3. 쿠키 전송: 웹 브라우저는 사용자가 웹 사이트를 요청할 때마다 해당 웹 사이트로 저장된 쿠키를 함께 전송합니다. 이를 통해 웹 서버는 사용자의 이전 상태나 활동에 대한 정보를 유지하고 활용할 수 있습니다.
4. 쿠키 만료: 쿠키에는 만료 날짜 및 시간이 설정될 수 있으며, 이를 통해 쿠키의 수명을 제어할 수 있습니다. 만료된 쿠키는 더 이상 사용되지 않으며, 웹 브라우저에서 자동으로 삭제됩니다.

쿠키는 보안 및 개인정보 보호를 위해 사용자의 동의를 받고 설정해야 하며, 보통 민감한 정보를 저장하는 데 사용되지 않습니다. 또한, 사용자는 브라우저 설정에서 쿠키를 수락하거나 거부할 수 있습니다.

나 : 쿠키와 뒤로가기, 앞으로가기 버튼과 어떤 관계가 있어?

퐁규 :

쿠키와 뒤로가기(뒤로 버튼) 및 앞으로가기(앞으로 버튼) 버튼 사이에는 명백한 관계가 있습니다. 이들은 모두 웹 브라우저의 탐색 기능에 관련된 요소입니다.

1. 뒤로가기(뒤로 버튼): 사용자가 이전에 방문한 웹 페이지로 이동하는 데 사용됩니다. 브라우저는 사용자가 웹 페이지를 방문할 때마다 해당 페이지의 URL을 탐색 히스토리에 기록합니다. 이를 통해 사용자가 이전 페이지로 쉽게 돌아갈 수 있습니다. 브라우저는 이전 페이지로 돌아갈 때 이전 페이지에서 설정된 쿠키를 보존합니다. 따라서 쿠키는 뒤로가기 버튼을 사용하여 이전 페이지로 이동할 때 유용하게 활용될 수 있습니다.
2. 앞으로가기(앞으로 버튼): 이전에 방문한 페이지로부터 앞으로 이동하는 데 사용됩니다. 브라우저의 탐색 히스토리에 기록된 페이지 중에서 이전 페이지와 현재 페이지 사이에 있는 페이지들로 이동할 수 있습니다. 브라우저는 사용자가 앞으로 가기 버튼을 클릭하여 이전 페이지로 이동할 때 해당 페이지에서 설정된 쿠키를 유지합니다.

따라서 쿠키는 웹 브라우저의 탐색 히스토리와 함께 사용되어 이전 페이지와 다음 페이지 사이의 사용자 상태를 유지하는 데 도움이 됩니다. 사용자가 웹 페이지 간에 이동할 때 쿠키는 사용자의 상태 정보를 유지하고 사용자 경험을 개선하는 데 중요한 역할을 합니다.

나 : 그니까 탐색 히스토리라는 공간에 웹 브라우저는 쿠키를 보존하고, 자바스크립트의 history 객체는 브라우저의 탐색 히스토리를 관리만 하는거구나?

퐁규 :

정확히 맞습니다! 웹 브라우저의 탐색 히스토리에는 사용자가 방문한 각 페이지의 URL과 관련된 정보가 포함됩니다. 이 탐색 히스토리는 브라우저가 이전 페이지로 이동하거나 앞으로 페이지로 이동할 때 사용됩니다.

쿠키는 웹 브라우저가 사용자의 상태를 유지하는 데 사용되는 작은 데이터 조각입니다. 이러한 쿠키는 사용자가 웹 사이트를 탐색하고 상호작용할 때 생성되며, 브라우저의 탐색 히스토리에 따라 관리됩니다. 따라서 쿠키는 사용자의 브라우저 세션 동안 유지되는 정보를 저장하고, 사용자가 페이지를 이동할 때 브라우저와 함께 이동합니다.

JavaScript의 history 객체는 브라우저의 탐색 히스토리를 관리하는 데 사용됩니다. 이 객체를 사용하면 JavaScript 코드에서 뒤로가기, 앞으로가기 및 페이지 이동과 관련된 다양한 작업을 수행할 수 있습니다. 하지만 이 객체는 쿠키를 직접적으로 관리하지는 않습니다. 대신, 쿠키는 브라우저가 사용자의 상태를 유지하는 데 사용되고, history 객체는 브라우저의 탐색 히스토리를 관리하는 데 사용됩니다.

나 : 쿠키가 사용자가 페이지를 이동할 때 브라우저와 함께 이동한다고 했는데 그럼 쿠키는 한 브라우저에만 있는게 아니라 사용자를 따라다니면서 정보를 저장하는거구나? 그래서 구글, 다음 등 사이트마다 사용자 정보를 각자 저장하는거고?

퐁규 :

네, 맞습니다. 쿠키는 일반적으로 사용자의 브라우저에 저장되며, 특정 도메인(웹 사이트)과 연결된다는 점에서 도메인별로 저장됩니다. 사용자가 특정 웹 사이트를 방문하고 서버에서 쿠키를 생성하면, 해당 쿠키는 사용자의 브라우저에 저장되고 그 도메인에 연결됩니다. 그 후에 사용자가 동일한 웹 사이트를 다시 방문할 때 브라우저는 해당 도메인에 연결된 쿠키를 함께 서버로 전송합니다.

이렇게 함으로써 해당 웹 사이트는 사용자의 브라우저에 저장된 쿠키를 통해 사용자를 식별하고 사용자의 상태를 유지할 수 있습니다. 이러한 사용자 식별 정보를 통해 사용자 맞춤형 경험을 제공하거나 로그인 상태를 유지하는 등의 다양한 기능을 구현할 수 있습니다.

예를 들어, 사용자가 구글에 로그인하여 검색 기록을 저장하는 경우, 구글은 사용자의 로그인 상태를 식별하기 위해 쿠키를 사용합니다. 이 쿠키는 사용자가 다른 페이지를 이동하거나 브라우저를 닫고 다시 열어도 유지됩니다. 마찬가지로 다음과 같은 다른 웹 사이트도 동일한 방식으로 쿠키를 사용하여 사용자를 식별하고 사용자 정보를 저장합니다.

나 : 자바스크립트의 객체 저장 방식과 비슷하네

퐁규 :

맞아요! 자바스크립트의 객체 저장 방식과 쿠키의 저장 방식은 몇 가지 유사한 측면이 있습니다.

1. Key-Value 쌍: 자바스크립트 객체는 key-value 쌍으로 구성되어 있습니다. 마찬가지로 쿠키도 이름과 값의 형태로 저장됩니다.
2. 도메인별 저장: 자바스크립트 객체는 변수에 저장되고 해당 변수의 범위에 따라 접근할 수 있습니다. 비슷하게, 쿠키는 특정 도메인(웹 사이트)과 관련이 있으며 해당 도메인에서만 접근할 수 있습니다.
3. 브라우저와 함께 이동: 자바스크립트 객체가 웹 페이지에서 사용되는 동안에는 브라우저와 함께 존재합니다. 비슷하게, 쿠키도 사용자의 브라우저와 함께 이동하여 사용자가 웹 사이트를 이동하고 페이지를 새로고침할 때 유지됩니다.
4. 사용자 식별: 자바스크립트 객체는 사용자의 상태를 유지하고 사용자를 식별하는 데 사용될 수 있습니다. 마찬가지로 쿠키도 사용자를 식별하고 사용자의 상태를 유지하는 데 사용됩니다.

따라서 자바스크립트의 객체 저장 방식과 쿠키의 저장 방식은 비슷한 개념을 공유하고 있으며, 이들은 모두 상태를 유지하고 데이터를 저장하는 데 사용됩니다.

또한, JavaScript의 객체는 브라우저의 메모리에만 저장되지만, 쿠키는 브라우저의 파일 시스템이나 메모리에 저장되므로 사용자가 다시 방문할 때 유지될 수 있습니다.

나 : 다른 프로그래밍 언어들도 다 Key-Value쌍을 이뤄 저장돼?

퐁규 :

대부분의 프로그래밍 언어에서 데이터를 저장하는 방식 중에는 Key-Value 쌍을 사용하는 것이 일반적입니다. 이러한 방식은 데이터를 쉽게 관리하고 접근할 수 있도록 해주는 간단하고 효율적인 방법입니다. 몇 가지 예시를 살펴보겠습니다:

1. 자바(Java): 자바에서는 Map 인터페이스를 사용하여 Key-Value 쌍을 저장합니다. HashMap, TreeMap, LinkedHashMap 등의 구현체를 통해 데이터를 저장하고 관리할 수 있습니다.
2. 파이썬(Python): 파이썬에서는 딕셔너리(Dictionary)라는 자료구조를 사용하여 Key-Value 쌍을 저장합니다. 이를 통해 데이터를 쉽게 검색하고 관리할 수 있습니다.
3. C#: C#에서는 Dictionary 클래스를 사용하여 Key-Value 쌍을 저장합니다. 이 클래스는 해시 테이블을 기반으로 하여 데이터를 효율적으로 관리할 수 있도록 해줍니다.
4. Ruby: 루비(Ruby)에서는 해시(Hash)라는 자료구조를 사용하여 Key-Value 쌍을 저장합니다. 이는 파이썬의 딕셔너리와 유사한 개념입니다.
5. PHP: PHP에서는 연관 배열(Associative Array)이라고도 알려진 배열을 사용하여 Key-Value 쌍을 저장합니다. 이를 통해 데이터를 쉽게 다룰 수 있습니다.

이러한 언어들은 Key-Value 쌍을 저장하는 방법을 통해 데이터를 구조화하고 관리하는 데 매우 유용합니다. 이 방식은 데이터베이스, 캐시, 구성 파일 등 다양한 용도로 사용됩니다.

나 : 그냥 그게 컴퓨터가 값을 저장하는 방식이구나

퐁규 :

네, 맞습니다! Key-Value 쌍은 컴퓨터가 데이터를 저장하고 관리하는 데 일반적으로 사용되는 방식 중 하나입니다. 이 방식은 데이터를 쉽게 찾고 접근할 수 있도록 해주는 효율적인 구조를 제공합니다.

컴퓨터에서 데이터를 저장하는 방법은 다양한데, 이 중에는 배열, 연결 리스트, 해시 테이블 등이 있습니다. Key-Value 쌍은 해시 테이블과 비슷한 개념을 가지고 있으며, 특정 키를 사용하여 해당 키에 연결된 값을 검색하거나 저장합니다.

이러한 Key-Value 쌍은 다양한 프로그래밍 언어와 데이터 구조에서 사용되며, 데이터베이스, 캐시, 구성 파일 등 다양한 용도로 활용됩니다. 데이터를 효율적으로 구조화하고 관리하는 데 있어서 매우 유용한 방식 중 하나입니다.

→ 모든 방식이 다 Key-Value쌍을 이뤄 저장되지는 않지만 프로그래밍언어 대부분이 그렇고, 여러 방법도 있다.