소요유(逍遙遊)

안녕하세요. 이번 글에서는 자바스크립트의 객체, 배열 비교에 대해서 얘기해보려고 합니다. 혹시 자바스크립트를 사용하면서, 배열이 가지고 있는 요소들이 동일한지 비교하기 위해 동일비교연산자(==)를 사용해 보신 적 있으신가요? 그렇다면 저처럼 당황을 하셨을거라 생각하는데요. 저는 배열 비교를 하면서 true 값을 기대했지만, false 값이 나와 식은 땀을 흘렸던 기억이 아직도 생생하네요 😂 그럼 글 시작하겠습니다 - 배열 비교 자바스크립트에서 동일한 요소를 담고 있는 배열끼리 비교해도 false 값이 나오는 이유는, 배열이 객체이기 때문입니다. 자바스크립트에서는 변수에 객체를 할당하면 값을 저장하는 것이 아니라 객체의 참조를 저장합니다. 즉, 두 배열은 물리적으로 다른 위치에 있는 메모리 공간을 차지하고..

FrontEnd/Java Script 2023. 5. 5. 02:08

자바스크립트는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. 이 언어는 동적인 웹 페이지를 만들기 위해 사용되며, 프론트엔드 개발에서는 React와 같은 라이브러리와 함께 사용됩니다. 이러한 개발 환경에서 함수(Function)는 매우 중요한 역할을 합니다. 이 글에서는 자바스크립트에서 함수의 개념과 사용 방법에 대해 알아보겠습니다. 함수(Function)란? 함수(Function)는 프로그래밍에서 가장 기본적인 개념 중 하나입니다. 함수는 입력값을 받아서 출력값을 반환하는 일련의 과정을 수행하는 코드 블록입니다. 이러한 함수는 코드의 재사용성을 높이고, 코드의 가독성을 높이며, 코드의 유지보수성을 높입니다. 함수의 사용 방법 자바스크립트에서 함수를 사용하는 방법은 매우 간단합니다. 함..

FrontEnd/Java Script 2023. 4. 8. 19:38

0부터 N까지 순차적으로 증가하는 숫자를 가진 배열을 만드려면, 다음과 같이 코드를 작성하면 됩니다: const arr = new Array(n).fill(0).map((_, i) => i); 위 코드를 설명하면 이렇습니다. new Array(n)으로 크기가 n인 배열을 생성합니다. fill(0) 메소드를 사용하여 0으로 초기화합니다. map 메소드를 사용하여 0부터 n-1까지의 값을 할당한 배열을 생성합니다. 참고 : fill() 메소드는 배열의 모든 요소를 전달된 인자로 채웁니다. 또, map 메소드는 배열의 각 요소에 콜백 함수를 적용하여 새로운 배열을 반환합니다. 이를 이용해서 위 예시에서는 인덱스 i를 해당 요소에 할당하여 0부터 n-1까지의 값을 생성하였습니다.

FrontEnd/Java Script 2023. 3. 14. 01:43

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)은 이벤트가 DOM 트리에서 어떻게 전파되는지에 대한 두 가지 방법입니다. 이벤트 캡처링은 이벤트가 상위 요소에서 하위 요소로 전파되는 방식이며, 이벤트 버블링은 이벤트가 하위 요소에서 상위 요소로 전파되는 방식입니다. 이 글에서는 이벤트 캡처링과 이벤트 버블링의 개념 그리고 장단점에 대해서 알아봅니다. 1. 이벤트 캡처링 📸 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 전파되는 방식입니다. 이벤트 캡처링의 장점 이벤트 캡처링을 이용하면 다음과 같은 장점이 있습니다. 👍🏻 이벤트 처리 순서 이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파되는 방식으로 이벤트를 처리합니다. 이러한 방식으로 이벤..

FrontEnd/Java Script 2023. 2. 17. 23:58

1. 변수 변수는 값을 담는 컨테이너이며 모든 프로그래밍 언어의 중추입니다. JavaScript에서 변수는 var, let, const 키워드를 사용하여 선언되며 숫자, 문자열, 배열, 객체 등과 같은 모든 유형의 값을 할당할 수 있습니다. var myVariable = "Hello, World!"; 유의 : JavaScript에서 변수는 대소문자를 구분하며 문자, 숫자, 달러 기호( $) 또는 밑줄( _) 문자를 포함할 수 있다는 점에 유의해야 합니다. 2. 데이터 유형 JavaScript에는 여섯 가지 기본 데이터 유형이 있습니다. 유의 : JavaScript는 느슨하게 유형이 지정된 언어입니다. 즉, 변수에 고정된 데이터 유형이 없습니다. 대신 변수는 할당된 값에 따라 데이터 유형을 동적으로 변경할..

FrontEnd/Java Script 2023. 2. 16. 00:43

1. 문 문(statement)은 프로그램이 특정 작업을 수행하도록 지시하는 단순 또는 복합 명령입니다. 다시 말해, 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다. 문은 자바스크립트 프로그램의 기본 빌딩 블록입니다. 프로그램 실행의 흐름을 제어하고 수행할 작업을 프로그램에 알려줍니다. 간단한 문은 변수에 값을 할당하거나 함수를 호출하는 것과 같은 단일 작업을 수행합니다. 예를 들어 : let x = 10; console.log("The value of x is " + x); 블록 문이라고도 하는 복합 문은 여러 문을 단일 엔티티로 그룹화합니다. 중괄호({})로 구분됩니다. 예를 들어: { let x = 10; let y = 20; console.l..

FrontEnd/Java Script 2023. 2. 13. 02:16

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다. 1. Ajax 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능을 말한다. 이전의 웹 페이지는 HTML 태그로 시작해서 HTML 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다. 이러한 방식은 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송받기 때문에 불필요한..

FrontEnd/Java Script 2023. 1. 30. 03:42

1. 크로스 브라우징의 배경 1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러 3.0에 탑재했습니다. 그런데 문제는 JScript와 자바스크립트가 표준화되지 못하고 적당히 호환되었다는 것입니다. 즉, 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작했다는 것입니다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고, 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 무척 어려워졌습니다. 이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 ..

FrontEnd/Java Script 2023. 1. 17. 00:38