웹 스토리지 API 사용 방법 (로컬 스토리지)
·
개발/JavaScript
웹 스토리지 API 메커니즘은 브라우저에 키/값 쌍을 저장하는 방법입니다. 웹 스토리지는 세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)로 나뉩니다. 웹 스토리지의 개념 스토리지(Storage)는 브라우저 내에서 키/값 쌍을 저장할 수 있는 작은 저장 공간이며, 모든 키와 값은 문자열로 저장됩니다(예를 들어, 숫자는 자동으로 문자열로 치환). 웹 스토리지는 크게 두 가지 유형으로 나뉩니다. 세션 스토리지(sessionStorage): 페이지 세션이 종료되지 않을 때까지 키와 값을 보유합니다. 즉, 페이지 세션이 종료되면 저장된 데이터가 함께 삭제됩니다. 로컬 스토리지(localStorage): 브라우저가 종료되고, 이를 다시 열어도 계속해서 키와 값이 존재합니다. 즉,..
자바스크립트 배열 중복 요소 확인하기: indexOf()와 lastIndexOf() 활용
·
개발/JavaScript
자바스크립트 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..
[코드 워즈] 8. 특정 문자열 치환하기(못 풂)
·
개발/TIL;
문제 문자열을 "(" 또는 ")"로 변환하기. 특정 문자가 한 번만 등장할 경우 "("로, 두 번 이상 등장할 경우 ")"로 치환하기. 문제 주소: www.codewars.com/kata/54b42f9314d9229fd6000d9c/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이(못 풂) function duplicateEncode(word){ const words = word...
[코드 워즈] 7. RGB To Hex Conversion
·
개발/TIL;
문제 RGB 숫자 값을 16진수로 변경하기. RGB 숫자는 0에서 255사이이며, 16진수는 반드시 여섯 자리여야함. RGB 숫자 값이 해당 범위 밖에 있는 경우 가장 가까운 유효 숫자로 전환되어야 함. 문제 주소: www.codewars.com/kata/513e08acc600c94f01000001/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이 function rgb(r, g,..
RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해
·
개발/CSS
웹 개발의 초창기 때부터 배경, 경계, 폰트 등 요소의 색을 다양하게 지정할 수 있었습니다. 일부는 웹에서 지원하는 컬러 키워드를 사용하기도 하지만, 어떤 이들은 HSL(Hue, Saturation, Lightness) 시스템을 사용하기도 합니다. 그러나 오늘날에는 RGB 컬러 코드와 16진수(HEX) 컬러 코드를 가장 많이 사용합니다. 이번 포스팅에서는 RGB 컬러 코드와 HEX 컬러 코드에 대해 살펴보도록 하겠습니다. 이 글은 RGB to Hex: Understanding the Major Web Color Codes를 번역 및 요약한 것입니다. RGB 컬러 코드에 대한 이해 RGB 컬러 코드는 오늘날 웹 페이지에서 색을 정의할 때 가장 많이 사용되는 방법입니다. 때로는 RGBA 컬러 코드를 사용하기..
[코드 워즈] 6. Vowel Count
·
개발/TIL;
문제 아규먼트로 주어지는 문자에서 모음 숫자 세기. (영문을 기준으로하며 a, e, i, o, u만 모음으로 취급) 문제 주소: www.codewars.com/kata/54ff3102c1bad923760001f3/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이 function getCount(str) { let vowelsCount = 0; const vowels = ['a', ..
자바스크립트 for... in과 for.. of의 차이점에 대하여
·
개발/JavaScript
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..
[코드 워즈] 5. Descending Order
·
개발/TIL;
문제 음수가 아닌 정수를 아규먼트로 받아 정수 내 숫자를 내림차순으로 정렬할 것. 문제 주소: www.codewars.com/kata/5467e4d82edf8bbf40000155/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이 function descendingOrder(n){ let numbersToString = n.toString(); let stringNumbers = n..