Code and Crescendo raccoon

Service Workers란?

Service Worker는 웹 응용 프로그램, 브라우저 그리고 네트워크 사이의 프록시 서버 역할을 담당한다.

서비스 워커는 출처와 경로에 대해 등록하는 이벤트 기반 worker로서 JavaScript 파일의 형태를 띄고 있다.

서비스 워커는 워커 맥락에서 실행되므로 DOM에 접근할 수 없다.

또한, 서비스 워크는 보안 상의 이유로 HTTPS에서만 동작한다. (네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 매우 취약하다.)

이러한 서비스 워커를 이용한다면 웹 알람 같은 기능을 구현할 수 있다.

Alerm 구현

이러한 Local Storage를 사용해서 Alerm 기능을 구현할 수 있다.

JavaScript에서 웹 알람을 구현하기 위해서는 Notification이라는 객체를 이용해야 한다.

let btn = document.getElementById("noti_btn");
btn.addEventListener("click", () => {
    let title = "test";
    let options = {
        body: "body",
        icon: "common.jpeg",
        image: "common.jpeg",
    }
    const notification = new Notification(title, options);
});

위 코드는 버튼을 달고, 버튼을 클릭하면 알람을 객체를 생성하는 기능을 버튼에 추가하는 코드이다.

브라우저의 알람 기능은 사용하는 유저가 각자 따로 허가를 해야 사용할 수 있다.

// 알림 권한 요청(권한 : default(요청 전), granted(허용), denied(거부))
if (Notification.permission === 'granted') {
    console.log("이미 허용함")
} else {
    Notification.requestPermission().then(permission => {
        console.log(permission);
    })
}

위 코드는 유저가 페이지에 들어오면 알림을 권한을 브라우저가 요청하고, 유저가 선택할 수 있도록 하는 코드이다.

// 서비스 워커 등록
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js')
        .then((registration) => {
            console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch((error) => {
            console.error('Service Worker registration failed:', error);
	});
}

위 코드는 브라우저에서 제공하는 서비스 워커에 내 알림 코드를 등록하는 코드이다.

따라서 알림은 서버에서 호출이 오면 자동으로 유저에게 알림 객체를 띄워준다.

참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

Browser Storage란?

Browser Storage(Web Storage)는 전에 DOM Storage라고 불렸으며, Web Browser에서 제공하는 JavaScript API를 의미합니다.

Browser Storage는 Key-Value로 저장되는 자료구조라고 볼 수 있다.

크게 Local Storage, Sesscion Storage로 구분되며 각각 영구 쿠키와 세션 쿠키처럼 작동합니다.

Local Storage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.

즉, 세션이 바뀌어도 저장된 데이터가 계속 유지됩니다.

밑의 코드는 Java Script로 BOM에 접근해서 Local Storage에 데이터를 저장하는 코드입니다.

window.localStorage.test02 = 'data02';
window.localStorage.setItem("test03", "data03");

console.log(window.localStorage.test02);
console.log(window.localStorage.getItem("test03"));

Key-Value로 저장되는데, 직접 Key로 데이터를 불러와서 저장할 수 있고, BOM 메서드인 setItem, getItem 을 사용해서 데이터를 저장 및 불러올 수 있다.

Session Storage

현재 접속하고 있는 Browser 탭에서만 데이터의 저장이 유지됩니다.

즉, 탭을 닫게 된다면 Session Storage에 저장되어있던 데이터는 모두 삭제됩니다.

밑의 코드는 Java Script로 BOM에 접근해서 Session Storage에 데이터를 저장하는 코드입니다.

window.sessionStorage.test04 = "data04";
window.sessionStorage.setItem("test05", "data05");

console.log(window.sessionStorage.test04);
console.log(window.sessionStorage.getItem("test05"));

Key-Value로 저장되는데, 직접 Key로 데이터를 불러와서 저장할 수 있고, BOM 메서드인 setItem, getItem 을 사용해서 데이터를 저장 및 불러올 수 있다.

참고 자료

https://en.wikipedia.org/wiki/Web_storage

https://velog.io/@soom/WebBrowser-Storage

https://ko.javascript.info/localstorage

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

WYSIWYG란?

Wiz-zee-wig(위즈윅)으로 발음하며 what you see is what you get을 줄여서 부른 말이다.

WYSIWYG는 사용자가 보는 것이 그대로 최종 결과물에 나타나도록 도와주는 유저 인터페이스를 지칭한다.

WYSIWYG Editor란?

WYSIWYG Editor는 유저가 자신이 작성한 형태 그대로 최종 결과물이 보이도록 도와주는 프로그램을 의미한다.

WYSIWYG Edtior 종류

• Quill Editor for Vue 3
• Summernote
• TOAST UI Editor

WYSIWYG Editor 사용 예시 코드

Quill Editor 홈페이지에 들어가면 Document가 존재한다.

일단 이 문서를 보면서 적용하는 것을 추천한다.(꽤 정리가 잘 되어있다.)

const quill = new Quill('#editor', {
    theme: 'snow'
  });

이렇게 JS 파일에 적용하면 기본 Quill Editor가 제공된다.

만약 Editor의 메뉴 설정을 변경하고 싶다면 다음 코드처럼 설정하면 된다.

const toolbarOptions = [
    ['image']
];

const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    }
});

여기에 이벤트을 달아서 기능을 수행하고 싶다면 다음처럼 코드를 작성하면 된다.

const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);

참고 자료

https://sorrow16.tistory.com/223

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

웹 소켓(WebSocket)이란??

웹 소켓(WebSocket)은 HTTP 프로토콜의 한계점을 개선하고자 나온 통신 프로토콜을 의미한다.

HTTP 통신에서 가장 큰 단점이자 장점은 클라이언트가 서버에게 요청할 때만 통신이 가능하다는 것이다.

달리 말하면 클라이언트가 어떠한 행동을 하지 않는다면 통신은 이뤄지지 않는다.

따라서, 우리가 계속 데이터를 받아야하는 스트리밍같은 사이트는 HTTP 통신으로 데이터를 처리하기엔 무리가 있다.

웹 소켓은 이러한 HTTP 프로토콜의 단점을 개선한 양방향 통신 프로토콜을 의미한다.

웹 소켓 장점

• 실시간이 요구되는 통신에서 주로 사용한다.
• 사용자가 어떠한 동작을 취하지 않아도 데이터 통신이 일어나야 하는 기능들(스트리밍, 실시간 채팅, 화상 통화 등등)에서 사용한다.

웹 소켓 사용 방법

JavaScript에서 웹 소켓을 사용하는 방법은 WebSocket 객체를 생성해서 사용하는 것이다.

socket = new WebSocket('ws://localhost:8080/ws/chat');  // 서버 주소

if (user.value != "") {
	socket.onopen = () => {
		console.log('Connected to WebSocket');
		let message = {
			type: "Enter",
			user: user.value
		}
		socket.send(JSON.stringify(message));
	};
} else {
	alert("User ID를 입력해주세요");
}

위 코드는 웹 소캣을 연결하고, message를 전달하는 JS 코드이다.

밑의 코드는 웹 소캣으로부터 데이터를 받았다면, 그 데이터를 Message처럼 사용장에게 보여주는 코드이다.

socket.onmessage = (event) => {
	console.log('[받은 메시지] : ' + event.data);
	let messages = document.getElementById("messages");
	let newMessage = document.createElement('p');
	const jsonData = JSON.parse(event.data);
	const jsonPayload = JSON.parse(jsonData.payload);
	if (jsonPayload.type == "Enter") {
		newMessage.textContent = jsonPayload.user;
		userList.appendChild(newMessage);
	} else if(jsonPayload.type == "Message"){
		newMessage.textContent = jsonPayload.message;
		messages.appendChild(newMessage);
	}
}

마지막으로 밑 코드는 사용자가 데이터를 입력한 후, 버튼을 누르면 웹 소캣을 통해 데이터를 웹 소캣 서버로 전송하는 코드이다.

SendBtn.addEventListener("click", () => {
	if (socket && socket.readyState === WebSocket.OPEN) {
		let message = {
			type: "Message",
			message: input.value
		}
		socket.send(JSON.stringify(message));
		input.value = "";
	}
});

참고 자료

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-%EC%9B%B9-%EC%86%8C%EC%BC%93-Socket-%EC%97%AD%EC%82%AC%EB%B6%80%ED%84%B0-%EC%A0%95%EB%A6%AC

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

Async / Await

async/await는 JavaScript에서 비동기 작업으로 처리하는 최신 문법을 말합니다.

• async : 함수를 비동기로 선언한다.
• await :  Promise의 이행(성공) 혹은 거절(실패)을 기다린다.

async/await는 Promise 기반으로 동작하며, CallBack이나 then Chain 대신 동기 코드처럼 작성할 수 있도록 도와준다.

(즉, CallBack 지옥에서 벗어나게 해준다.)

Async 함수

Async 로 선언된 함수는 항상 promise를 반환한다.

• 만약 반환 값이 Promise가 아니라면, 반환 값을 자동으로 Promise로 변환한다.

sync function example() {
  return 'Hello, async!'; // Promise.resolve('Hello, async!')
}

example().then((result) => console.log(result)); // 출력: Hello, async!

Await 키워드

Await는 Promise가 해결될때까지 기다린다.

• await는 반드시 async 함수 내부에서만 사용할 수 있다.

async function example() {
  const result = await new Promise((resolve) => setTimeout(() => resolve('Done!'), 1000));
  console.log(result); // 1초 후 출력: Done!
}

example();

Async / Await 와 기존 비동기 처리 방식의 비교

CallBack 방식

장점

• 특정 로직을 캡슐화하여 코드의 재사용성을 높일 수 있다.
• 함수의 유연성이 크다.

문제점

• 콜백이 중첩되면서 가독성이 떨어지는 CallBack Hell이 발생한다.

setTimeout(() => {
  console.log('콜백 실행');
  setTimeout(() => {
    console.log('중첩된 콜백 실행');
  }, 1000);
}, 1000);

Promise 방식

장점

• then Chain을 사용해 CallBack Hell을 완화한다.

문제점

• then Chain이 길어지면 여전히 가독성이 떨어진다.

new Promise((resolve) => {
  setTimeout(() => resolve('첫 번째 Promise 완료'), 1000);
})
  .then((result) => {
    console.log(result);
    return new Promise((resolve) => setTimeout(() => resolve('두 번째 Promise 완료'), 1000));
  })
  .then((result) => console.log(result));

Async / Await 방식

장점

• 코드가 동기식으로 읽혀서 가독성이 좋아진다.

단점

• 외부 라이브러리를 사용한다.
• 위의 방식들보다 좀 더 무겁다.

async function process() {
  const step1 = await new Promise((resolve) =>
    setTimeout(() => resolve('첫 번째 단계 완료'), 1000)
  );
  console.log(step1);

  const step2 = await new Promise((resolve) =>
    setTimeout(() => resolve('두 번째 단계 완료'), 1000)
  );
  console.log(step2);
}

process();

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

웹 페이지에서 서버와 통신하는 함수는 모두 비동기로 처리되어 있다.

동기, 비동기 관련한 정보는 다음 글을 참고하자.
동기, 비동기

이유는 웹 페이지가 서버와 통신하여 데이터를 얻어오는 과정은 시간이 오래 걸리기 때문이다.

또한, 동기로 서버와 통신하는 함수를 제작했다면, 사용자에게 불편함을 초래할 수 있다.

1. 사용자가 검색창에 검색을 하고 있다.
2. 그 와중, 서버한테 데이터가 도착해서 웹 페이지 중 일부가 변경되는 이벤트가 발생했다.
3. 사용자는 자신이 입력한 데이터 중 일부가 사라진다.

따라서 서버와 통신하는 함수는 비동기로 구현해야 한다.

서버와 통신하는 함수를 구현하는건 크게 4가지 AJAX, Fetch API, Promise, Axios로 구분되어 있다.

AJAX (Asyynchronous JavaScript and XML)

AJAX는 JavaScript를 사용하여 서버로부터 비동기적으로 데이터를 가져오는 라이브러리이다.

(AJAX는 JavaScript에서 내장되어있는 라이브러리이다.)

XML뿐만 아니라 JSON, Text 등 다양한 데이터를 가져올 수 있다.

AJAX 장점

• 오래된 브라우저에서도 동작한다. (즉, 호환성이 높다.)

AJAX 단점

• 코드가 꽤 길고 코드 가독성이 떨어진다.
• 비동기 처리 코드가 복잡하다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open('[HTTP Method 설정]', '[URL 작성]', [동기, 비동기 설정(true : 비동기, false : 동기)];
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) { // 요청이 완료되었을 때
    if (xhr.status === 200) { // 응답이 성공적일 때
      console.log(JSON.parse(xhr.responseText)); // JSON 데이터를 파싱해서 출력
    } else {
      console.error('Request failed');
    }
  }
};
xhr.send(); // 요청 전송

Fetch API

Fetch는 현대적인 JavaScript에서 사용되는 API로, Promise 기반으로 데이터를 가져온다.

장점

• Promise 객체를 사용하고 있어 비동기 요청을 더 간결하게 작성할 수 있다.

단점

• 오래된 브라우저에서는 지원이 안될 수 있다.
• 자격 증명이 필요한 요청에 대해서 별도의 설정이 필요하다. (Ex, Cookie)

Fetch를 통해서 HTTP Method 요청

fetch(['URL 통신'], {
	method: ["HTTP Method"],
    header: {
    	["Header Key"]: ["Header Value"],
    },
    body: JSON.stringify({
    	[Body Key]: ["Body Value"],
    }),
}) // Default 값은 Get이다.
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok'); // 오류 처리
    }
    return response.json(); // JSON 형식으로 변환
  })
  .then((data) => console.log(data)) // 성공적으로 데이터를 가져왔을 때
  .catch((error) => console.error('Fetch error:', error)); // 오류가 발생했을 때

Promise와 Fetch API를 활용한 비동기 병렬 처리

// 병렬로 API 요청하기
const fetchUser = fetch(['URL']);
const fetchPosts = fetch(['URL']);

Promise.all([fetchUser, fetchPosts])
  .then((responses) => Promise.all(responses.map((res) => res.json()))) // 응답 JSON 변환
  .then(([user, posts]) => {
    console.log('User:', user);
    console.log('Posts:', posts);
  })
  .catch((error) => console.error('Error:', error));

Promise 이란??

Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체를 말한다.

const getData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 성공 여부를 가정
    if (success) {
      resolve('Data loaded successfully');
    } else {
      reject('Error loading data');
    }
  }, 2000);
});

getData
  .then((message) => console.log(message)) // 성공 시 실행
  .catch((error) => console.error(error)); // 실패 시 실행

Axios

Axios는 Promise 기반의 HTTP 클라이언트로, Fetch보다 더 편리한 기능을 제공한다.

그러나 JavaScript 내부에서 설치되지 않은 라이브러리이므로, 따로 설치를 하거나 CDN 링크를 달아줘야 한다.

Node.js 환경에서 Axios 설치

npm install axios

브라우저에서 사용하는 경우

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

장점

• 응답 데이터를 자동으로 JSON으로 변환한다.
• 요청과 응답을 가로채서 개발자가 추가적으로 기능을 추가할 수 있다.

단점

• JS에서 제공하는 라이브러리가 아니라서 별도로 라이브러리를 추가해줘야 한다.

Axios Get 요청

axios
  .get(['URL'])
  .then((response) => {
    console.log(response.data); // 응답 데이터
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

Axios Post 요청

axios
  .post(['URL'], {
    [Body Key]: ["Body Value"],
  })
  .then((response) => {
    console.log('POST Response:', response.data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

참고 자료

https://velog.io/@pabang0620/Ajax-Fetch-Axios-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%B9%84%EA%B5%90

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-AJAX-%EC%84%9C%EB%B2%84-%EC%9A%94%EC%B2%AD-%EB%B0%8F-%EC%9D%91%EB%8B%B5-fetch-api-%EB%B0%A9%EC%8B%9D

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

BOM이란??

BOM(Browser Object Model)은 DOM(Document Object Model)과 다르게 웹 페이지의 정보를 객체로 주지 않고 브라우저 정보를 객체로 전달합니다.

브라우저 정보를 전달하기에 웹 페이지 정보 또한 가지고 있습니다.

BOM은 크게 Window, Location, Navigator, Screen, History 5가지가 존재합니다.

Window

모든 BOM 객체의 최상위 객체이자 전역 객체이다.

Window 객체의 프로퍼티나 메소드(함수)는 window를 생략하고 사용할 수 있다. (ex, alert("message"))

DOM의 객체도 Window 객체의 프로퍼티이다.

Location

Location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 브라우저에 새 문서를 불러올 때 사용할 수 있다.

Location 객체의 프로퍼티와 메서드를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다.

Navigator

Navigator 객체는 브라우저 공급자 및 버전 정보를 포함한 브라우저의 다양한 정보를 저장하는 객체입니다.

Navigator를 사용하면 스크롤의 위치 등 브라우저의 정보를 조작할 수 있습니다.

Screen

Screen 객체는 사용자의 화면에 대한 다양한 정보를 저장하는 객체입니다.

History

History 객체는 브라우저의 이전 탐색 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다.

참고 자료

https://itprogramming119.tistory.com/entry/Javascript-BOM%EC%9D%B4%EB%9E%80

https://velog.io/@artp/JS-BOM-Browser-Object-Model

https://velog.io/@imok-_/JavaScript-DOM-BOM-%EC%9D%B4%EB%9E%80

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

DOM (Document Object Model) 이란??

DOM(Document Object Model)은 HTML 문서를 브라우저에서 JavaScript로 동적으로 접근하고 조작할 수 있도록 트리 구조로 표현한 객체이다.

DOM을 활용하면 HTML 요소를 선택하고, 내용을 변경하거나 이벤트를 처리할 수 있다.

DOM 트리 구조

• DOM 트리는 HTML 문서를 기반으로 계층적으로 구성된다.
  • 문서 전체는 document 객체로 표현된다.
  • HTML 요소는 노드(Node)로 표현되며, 부모-자식 관계를 가진다.

DOM 함수

1. 요소 선택 함수

     - ID 검색

const element = document.getElementById('[Elemnet ID]');

요소들(Elements) 중 해당하는 ID를 가지고 있는 요소 객체를 가지고 온다.

     - Class 검색

const elements = document.getElementsByClassName('[Element Class Name]');

요소들(Elements) 중 해당하는 Class를 가지고 있는 요소 객체를 가지고 온다. (변수는 배열을 지칭하고 있다.)

     - Tag 검색

const elements = document.getElementsByTagName('[Tag Name]');

요소들(Elements) 중 해당하는 Tag를 가지고 있는 요소 객체를 가지고 온다.(변수는 배열을 지칭하고 있다.)

     - CSS 선택자 중 첫번째 요소만 검색

const element = document.querySelector('.myClass');

CSS선택자를 가지고 있는 요소들 중 첫번째 요소 객체를 가지고 온다.

     - CSS 선택자 모든 요소 검색

const elements = document.querySelectorAll('.myClass');

CSS 선택자를 가지고 있는 모든 요소 객체를 가지고 온다.

CSS로 요소를 들고 오는 것과 Tag, Class, Id로 들고 오는 것의 차이점??

• getElemnet~ : HTMLCollection의 형태로 객체가 저장되어 온다.
• querySelector~ : NodeList 형태로 객체가 저장되어 온다.

NodeList vs HTML Collecttion??

HTML Collection은 LIVE DOM Collection 객체로 내부에 변화가 생기면 이를 즉시 반영한다.

이와 반대로 NodeList는 NON-LIVE Collection 객체로 내부의 변화를 즉시 반영하지 않는다.

여기서 내부의 변화를 즉시 반영한다는 말은 화면을 의미하는 것이 아니다.

화면은 NodeList나 HTML Collection 모두 즉시 반영시킨다.

그러나 현재 진행하고 있는 JS 코드에 들어있는 Dom 객체!!!! 이 객체가 즉시 반영이 되냐 안되냐의 차이이다.

그럼 반영되는 것이 무조건 더 좋은게 아닌가??

라고 생각할 수 있다. 그러나 그렇지 않다.

간단하게 지금 변화하고 있는 모든 변화요소를 다 객체가 반영한다면, 무한 루프를 도는 등 개발자가 예상하지 못한 에러가 나올 수 있다.

따라서 각 요소에 맞게 사용하면 된다.

2. 요소 변경

     - 텍스트 변경

const element = document.getElementById('myId');
element.textContent = "새로운 텍스트";

     - HTML 내용 변경

const element = document.getElementById('myId');
element.innerHTML = "<b>HTML로 변경</b>";

단, 위 함수는 잘 사용하지 않는다.

위 함수 대신, HTML의 태그들을 DOM객체 내부의 함수로 호출해서 변경하는 식으로 많이 사용한다.

      - 스타일 변경

const element = document.getElementById('myId');
element.style.color = "blue";

2. 이벤트 처리

      - 이벤트 리스너 추가

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    alert("버튼이 클릭되었습니다!");
});

3. 새로운 요소 추가

const newElement = document.createElement('p');
newElement.textContent = "새로운 문단 추가";
document.body.appendChild(newElement);

이때, appendChild로 통해서 주입된 새로운 요소는 위 요소에 포함된 요소들 중 최 하단에 배치된다.

• appendChild : 요소들 중 최 하단에 배치
• insertBefore : 2번째 파라미터로 들어온 참조 인자보다 앞에 배치
• prepend : 요소들 중 최 상단에 배치

4. 요소 삭제

const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child);

5. 요소 클래스 조작

const element = document.getElementById('myId');
element.classList.add('newClass');
element.classList.remove('oldClass');

참고 자료

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

https://sirius7.tistory.com/34

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

객체란?

객체는 여러 개의 관련된 데이터를 하나의 단위로 묶어 표현하는 자료형이다.

객체는 프로퍼티(속성)와 메서드(동작)를 가질 수 있다.

배열이란?

컴퓨터 과학에서 배열은 번호(인덱스)와 번호에 대응하는 데이터들로 이루어진 자료 구조를 나타낸다.

일반적으로 배열에는 같은 종류의 데이터들이 순차적으로 저장되어, 값의 번호가 곧 배열의 시작점으로부터 값이 저장되어 있는 상대적인 위치가 된다.

객체 선언

// 객체 리터럴로 객체 생성
let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

// 빈 객체 선언
let emptyObject = {};
let emptyObjects = new Object();

// 객체 프로퍼티 접근
console.log(person.name); // John
console.log(person.age);  // 30

// 객체 메서드 호출
person.greet(); // Hello, John

객체 프로퍼티 접근

let person = {
  name: "Alice",
  age: 25
};

// 점 표기법
console.log(person.name);  // Alice
console.log(person.age);   // 25

// 대괄호 표기법
console.log(person["name"]);  // Alice
console.log(person["age"]);   // 25

객체 메서드 접근

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet();  // Hello, Alice

배열 선언

// 배열 리터럴로 배열 생성
let numbers = [1, 2, 3, 4, 5];

// 빈 배열 선언
let emptyArray = [];
let emptyArrays = new Array();

// 배열에 접근
console.log(numbers[0]);  // 1
console.log(numbers[2]);  // 3

배열 메서드 접근

let numbers = [1, 2, 3, 4, 5];

// push: 배열의 끝에 요소 추가
numbers.push(6);
console.log(numbers);  // [1, 2, 3, 4, 5, 6]

// pop: 배열의 마지막 요소 제거
numbers.pop();
console.log(numbers);  // [1, 2, 3, 4, 5]

// shift: 배열의 첫 번째 요소 제거
numbers.shift();
console.log(numbers);  // [2, 3, 4, 5]

// unshift: 배열의 첫 번째 위치에 요소 추가
numbers.unshift(1);
console.log(numbers);  // [1, 2, 3, 4, 5]

// forEach: 배열의 각 요소에 대해 함수를 실행
numbers.forEach(function(number) {
  console.log(number);  // 1, 2, 3, 4, 5
});

배열 안에 객체 저장

let students = [
  { name: "John", age: 22 },
  { name: "Jane", age: 24 },
  { name: "Mike", age: 23 }
];

// 배열 안의 객체에 접근
console.log(students[0].name);  // John
console.log(students[1].age);   // 24

객체 안에 배열 저장

let person = {
  name: "John",
  hobbies: ["Reading", "Traveling", "Swimming"]
};

// 객체 안의 배열에 접근
console.log(person.hobbies[0]);  // Reading
console.log(person.hobbies[1]);  // Traveling

참고 자료

https://ko.wikipedia.org/wiki/%EB%B0%B0%EC%97%B4

https://likedev.tistory.com/entry/javascript-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1-%EC%B6%94%EA%B0%80-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0#google_vignette

https://tesseractjh.tistory.com/103

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

함수

자바스크립트에서 함수(function)는 특정 작업을 수행하는 코드 블록이다.

함수는 재사용 가능한 코드를 작성할 수 있게 해준다.

함수는 입력값을 받아 처리하고 결과를 반환한다.

1. 함수 선언

• 함수는 function 키워드로 선언합니다.

function add(x, y) {
    return x + y;
}
console.log(add(5, 10)); // 15

2. 함수 표현식

• 함수 표현식은 함수를 변수에 할당하는 방식

const add = function(x, y) {
    return x + y;
}
console.log(add(5, 10)); // 15

3. 화살표 함수

• ES6에서 도입된 간결한 함수 표현.

function add(a, b) {
	return a + b;
}
console.log(add(10, 20));


const add2 = function (a, b) {
	return a + b;
}
console.log(add2(10, 20));


const add3 = (a, b) => {
	return a + b;
}
console.log(add3(10, 20));


const add4 = (a, b) => a + b;
console.log(add4(10, 20));

4. 기본 매개변수 값

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet()); // "Hello, Guest!"

5. 가변 인자 함수

function sum(...numbers) {
  let total = 0;
  for(let i of numbers) {
    total = total + i;
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // 10

6. 스코프(Scope)

• 함수 스코프 : var로 선언한 변수는 함수 내에서만 유효합니다.

function functionScopeExample() {
  if (true) {
    var x = 10;  // 'var'는 함수 스코프
  }
  console.log(x);  // 10: x는 functionScopeExample 함수 내에서 유효하므로 출력됨
}

functionScopeExample();

• 블록 스코프 : let, const로 선언한 변수는 블록 내에서만 유효합니다.

function blockScopeExample() {
  if (true) {
    let y = 20;  // 'let'은 블록 스코프
    const z = 30;  // 'const'는 블록 스코프
  }
  console.log(y);  // ReferenceError: y is not defined
  console.log(z);  // ReferenceError: z is not defined
}

blockScopeExample();

• 글로벌 스코프 : 함수 외부에서 선언된 변수는 어디에서나 접근 가능합니다.

let globalVar = 'global';
function testScope() {
    let localVar = 'local';
    console.log(globalVar); // global
    console.log(localVar); // local
}
testScope();
// console.log(localVar); // 오류 발생

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!