개발/JavaScript
자바스크립트 코드 난독화 사이트
자바스크립트 난독화를 통해 코드를 이해하기 어렵고, 권한 없이 복사 및 재사용, 수정이 힘들게 만들 수 있습니다. 난독화를 거친 코드는 가독성이 떨어지지만, 기존 코드와 동일하게 작동합니다 자바스크립트 난독화 사이트: https://obfuscator.io/ UglifyJS와 같이 자바스크립트 코드 이해가 어렵게 만들어 주는 사이트도 있지만, JS Beautifier와 같은 앱을 통해 쉽게 변환할 수 있습니다. 위 사이트에서는 self-defending, debug protection과 같은 추가 난독 기능을 제공합니다. 자바스크립트 소스 코드를 아래 창에 붙여 넣으면, 다음과 같이 난독화된 코드로 변환됩니다.
웹 스토리지 API 사용 방법 (로컬 스토리지)
웹 스토리지 API 메커니즘은 브라우저에 키/값 쌍을 저장하는 방법입니다. 웹 스토리지는 세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)로 나뉩니다. 웹 스토리지의 개념 스토리지(Storage)는 브라우저 내에서 키/값 쌍을 저장할 수 있는 작은 저장 공간이며, 모든 키와 값은 문자열로 저장됩니다(예를 들어, 숫자는 자동으로 문자열로 치환). 웹 스토리지는 크게 두 가지 유형으로 나뉩니다. 세션 스토리지(sessionStorage): 페이지 세션이 종료되지 않을 때까지 키와 값을 보유합니다. 즉, 페이지 세션이 종료되면 저장된 데이터가 함께 삭제됩니다. 로컬 스토리지(localStorage): 브라우저가 종료되고, 이를 다시 열어도 계속해서 키와 값이 존재합니다. 즉,..
자바스크립트 배열 중복 요소 확인하기: indexOf()와 lastIndexOf() 활용
자바스크립트 indexOf()와 lastIndexOf()를 활용하여 문자열과 배열의 중복 요소를 확인할 수 있습니다. indexOf() 메소드 설명 자바스크립트 indexOf() 메소드는 자바스크립트 lastIndexOf() 메소드는 호출하는 문자열 내 특정 값이 등장하는 첫 인덱스를 리턴하며, 값이 발견되지 않으면 -1을 리턴합니다. const paragraph = 'Show me the money, big money.'; const searchTerm = 'money'; console.log(paragraph.indexOf(searchTerm)); // 12물론, 이를 배열에도 사용할 수 있습니다. const words = ['dash', 'apple..
자바스크립트 for... in과 for.. of의 차이점에 대하여
for.. in과 for...of 구문 모두 무언가를 순회할 때 사용합니다. 주된 차이점은 '순회 대상'입니다. 이 글은 for...of, MDN 일부를 번역한 것입니다. for...in 구문은 객체의 열거 가능한 속성(enumerable properties)을 임의의 순서로 순회합니다. for...of 구문은 순회할 수 있는 객체의 값(values)을 순회합니다. 아래의 예시를 통해 Array에서 for..in반복문과 for...of 반복문이 사용될 때의 차이점을 살펴볼 수 있습니다. Object.prototype.objCustom = function() {}; Array.prototype.arrCustom = function() {}; const iterable = [3, 5, 7]; iterable..
자바스크립트 join() 메소드 설명: 배열 요소를 문자열로 연결하기
join() 메소드는 배열 또는 유사 배열의 모든 요소를 연결하여 새로운 문자열을 반환합니다. 콤마 또는 특별한 연결자 문자를 지정해줄 수 있으며, 배열 내 요소가 하나일 경우 연결자 없이 문자열이 반환됩니다. const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // "Fire,Air,Water" console.log(elements.join(, )); // "Fire, Air, Water" console.log(elements.join('')); // "FireAirWater" console.log(elements.join('-')); // "Fire-Air-Water" 요소가 undefined, null, 빈 배열일 경우 ..
자바스크립트 filter() 메소드 설명
filter() 메소드는 특정 함수를 통과하는 값을 새로운 배열로 만들어 줍니다. 이를 통해 배열 요소 중 특정한 기준을 만족하는 요소들을 포함하는 새로운 배열을 생성할 수 있습니다. const words = ['cool', 'happiness', 'voice', 'chocolate', 'sleepy'] const result = words.filter(word => word.length > 6); console.log(result); // [happiness, chocolate] 다음은 MDN에서 제공하는 filter() 메소드 사용 예시입니다. 1. 10보다 큰 숫자 찾기 function isBig(value) { return value >= 10 } let filtered = [12, 5, 1, 1..
자바스크립트 즉시 실행 함수(IIFE)란?
즉시 실행 함수(Immediately Invoked Function Expression)은 선언과 동시에 실행되는 함수입니다. (function () { statements })(); 즉시 실행 함수는 자가 실행 익명 함수(Self-Excuting Anynomous Function)로 알려진 설계 패턴이며, 다음과 가이 크게 두 부분으로 구성됩니다. 첫 번째는 함수를 감싸는 그룹핑 연산자 () 안에 갇히는 렉시컬 스코프를 갖는 익명 함수입니다. 이는 즉시 실행 함수 내 함수에 접근을 막고, 글로벌 스코프를 오염시키지 않도록 합니다. (function () { var aName = "Barry"; })(); aName // "Uncaught ReferenceError: aName is not defined..
자바스크립트 동기/비동기 차이점은 무엇일까요?
자바스크립트는 싱글 스레드(single thread) 방식으로 코드를 처리합니다. 스레드란 프로그램이 작업을 완료하는 데 사용하는 하나의 선로 같은 것인데, 각 스레드는 한 번에 하나의 작업만 순차적으로 수행할 수 있습니다. 즉, 하나의 작업이 완료되어야 다음 작업을 실행할 수 있는 구조인 것입니다. 이는 보통 오늘날의 컴퓨터가 멀티 스레드(multi thread)로 동시에 여러 작업을 처리하는 것과 다릅니다. 동기적 자바스크립트 앞서 언급한 것처럼 자바스크립트는 싱글 스레드를 사용하기 때문에, 기본적으로 동기적으로 코드를 처리합니다. const name = "Hwi" const age = "31" const nationality = "South Korea" console.log(name); // -> ..
