본문 바로가기

반응형

자바스크립트

(96)
[JS] Array.from 의 두번째 인자는 map 과 유사한 함수다. 생각보다 자주 사용되고 있는 Array.from 이라는 메소드에 대해서 알아보고 보다 다양한 상황에서 활용할 수 있는 능력을 키우기 위해서 이번 포스팅을 준비하였다.  기본 사용과 개념 | 순회 가능 혹은 유사 배열 객체를 Array 인스턴스로 생성우선 Array.from 은 Array 생성자 함수에 바로 접근이 가능한 정적 메소드이다. 그리고 해당 메소드를 사용하면 순회 가능한 객체나 유사 배열 객체를 Array 인스턴스로 생성할 수 있다. 예를 들어, hello 라는 문자열이 있으면, 해당 문자열은 실제 배열은 아니지만, 내부적으로는 배열과 유사한 형태를 지니기 때문에 유사배열객체로서 순회가 가능하다. 따라서 Array.from 의 인자로 해당 문자열을 전달하게 되면, Array 인스턴스로  새롭게 ..
실행 컨텍스트(execution context) 를 다시보자 이 포스트는..사실 많은 분들이 실행 컨텍스트에 대해서 포스트를 작성했죠. 저 또한 과거에 작성한 이력이 있고, 기술 블로그라면서 기술에 대한 포스트 보다는 이론에 대한 포스트라서 자격지심이 들기도 하지만!! 그래도 스스로의 공부를 위해서 복습하는 겸 정리해봅니다. 실행 컨텍스트실행 컨텍스트란 동일한 조건이나 환경을 지니는 코드들을 실행하는 데 필요한 조건이나 환경정보를 의미한다. 쉽게 말해, 소스 코드를 실행하는데 필요한 정보를 저장하고 있는 객체이다. 여기서 동일한 조건이나 환경을 지니는 코드들을 하나의 덩어리로 나눠서 본다면 총 4가지로 구분 되는데, Global, Function, eval, module 으로 구분한다. eval 은 보안상의 문제, 크로스 브라우징 문제 등의 이유로 사용을 추천하지..
[JS] MDN 에 꼭 읽어봐야 할 브라우저 동작 원리 에 대한 포스트가 있어요 - MDN Web Docs 이 글은 MDN contributors 에 의해 작성된 포스트를 재사용한 것으로 Creative Commons Attribution-ShareAlike 4.0 International License 를 근거로 MDN 문서를 재가공한 것입니다. 정확한 내용은 공식문서를 참고하세요.- 이 포스트는.. 이번에 AWS EC2 를 사용하여 사이트 배포를 진행해보면서 브라우저의 동작원리에 대해서 많은 궁금증이 생겼는데, 이에 대한 문서가 MDN 에 있어서 이를 정리해 보았습니다. 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다. ..
[JS] 흔히 블로그에서 자동으로 생성되는 목차는 어떻게 만드는 걸까? 기존에 작성된 포스트가 갱신되어 최신 날짜를 기준으로 업데이트 되었습니다(2024/03/10 기준) 자동 생성 목차란? 임의로 이름을 붙였지만, 이름 그대로 h1,h2,h3 등의 제목 태그를 이용해서 헤드를 작성하면, 해당 헤드로 이동하는 리스트가 생성되고, 사용자는 이 목차를 이용해서 해당 콘텐츠로 즉시 이동할 수 있도록하는 기능이다. 만들게 된 배경 개발 공부를 하면서, 이러한 자동 생성 목차를 사용하는 블로그나 공식 사이트를 많이 봤지만, 블로그의 글을 작성하면서 굳이 적용할 필요성은 느끼지 못했다. 그러나, 내가 작성한 글을 다시금 참고하려고 하는 일상이 반복될 때, 어느 순간 마우스 휠을 이용해서 일일이 스크롤 이동하는 것이 너무 불편하게 느껴졌다. 따라서 편의성을 높이기 위해 해당 기능을 한 ..
[javascript] HTML5 Web Speech API 로 TTS 만들기 보호되어 있는 글입니다.
[javascript] 3d 스틸 박스 (작성중) HTML 삽입 미리보기할 수 없는 소스
[Javascript] HTML5 dragable API 를 사용하여 요소의 위치를 바꾸어 보자 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. Drag and Drop API API는 웹 애플리케이션에서 요소를 드래그하고 다른 위치로 놓는 기능을 구현하는 데 사용된다. 이 API는 기본적인 드래그 앤 드롭 동작을 처리하기 위한 이벤트 및 메서드를 제공하고 있으며, 현재도 계속해서 새로운 기능들이 추가되고 있다. 그래서 오늘은 이 API 를 활용해서 요소 끼리 위치를 바꾸는 간단한 기능을 구현해볼 생각이다. 기본 개념 코드 작성 이전에 우선적으로 필요한 환경 설정과 기본적인 메소드나 기능에 대해 알아 보자. 초기 셋팅 | 필수 우선 각 HTML 요소가 드래그를 가능하게 하려면 각 요소의 속성으로 draggable 을 true 로 지정 해줘야 ..
[javascript] with | 타겟을 지정한 값으로 수정한 새로운 배열을 반환하는 메소드 Array.prototype.with(index, value ) with 메소드는 우리가 배열에서 특정 요소의 값을 다른 값(value)으로 수정할 때, 대괄호 표기법(ex. arr[ 0 ] ) 을 사용하는 것에 대한 복사버전이다. 즉, 대괄호 표기법의 경우에는 원본 배열을 파괴하지만, with의 경우에는 원본 배열을 파괴하지 않고, 원본배열을 복사한 배열의 값을 변경한 새로운 배열을 반환한다. 아래 예시를 보면 알 수 있듯이, 원본 배열은 변형되지 않은 상태 그대로 출력되었고, with 메소드를 사용한 경우 새로운 배열이 newArray 에 할당되어 출력된 것을 볼 수 있다. const originArray = ["안","녕","하","쇼"]; const newArray = originArray.wit..

반응형