Study/Javascript 14

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)

들어가며로컬 스토리지와 세션 스토리지는 HTML5 부터 추가된 웹 스토리지의 종류로 서버가 아니라 클라이언트에서 데이터를 저장할 수 있다.이번 포스팅에서는 로컬 스토리지와 세션 스토리지에 대해서 다루도록 하겠다. 웹 스토리지(Web Storage)웹 스토리지(Web Storage) 는 브라우저가 제공하는 클라이언트 측 저장소다.데이터는 키-값(key-value) 쌍으로 저장하며, 문자열 형태로 저장된다.데이터 저장 시 : JSON.stringify(배열/객체)데이터 사용 시 : JSON.parse(문자열배열/객체)서버와의 통신 없이 데이터를 읽고 쓸 수 있어 빠르고 간단하게 사용할 수 있다. 웹 스토리지는 쿠키와 유사하지만 용량이 훨씬 크다.(쿠키 : 4KB / 웹 스토리지 : 약 5MB)서버와 독립적으..

Study/Javascript 2024.11.24

[JS] Set 객체를 이용한 중복 요소 제거

Set 객체는 중복되지 않는 유일한 값들의 집합이다. (수학적 집합을 구현하기 위한 자료구조! -> 교집합, 합집합, 차집합, 여집합 구현 가능) Set 객체 생성const set = new Set() // Set(0) {} -> 인수를 전달하지 않으면 빈 Set 객체 생성 이터러블을 인수로 전달받아 Set 객체를 생성한다.중복된 값이 있다면 중복된 값은 저장되지 않는다.이를 이용해서 배열에서 중복값을 제거할 수 있다. // 중복값 제거 함수 const uniq = array => [...new Set(array)]// array라는 배열을 매개변수로 받고, set 객체 내에 배열을 넣어서 스프레드 연산자를 통해서// 중복값이 제거된 배열을 반환한다.uniq([2,2,2,1,1,3,4,4,5]) // [..

Study/Javascript 2024.08.15

[JS] 자바스크립트의 this

자바스크립트에서 this 는 기본적으로 자기 자신을 참조하는 객체다.그러나 어디에서 호출되느냐에 따라 다른 객체를 참조한다. 1. 객체 메서드에서 객체 자신을 의미 const obj = { name : '고양이', getName(){ console.log('객체 메서드의 this >>>', this); console.log('객체 메서드의 속성 읽기 >>>', this.name); } } obj.getName()  ※ 단, 화살표 함수는 전역 객체(window)를 의미힌다. const obj = { name : '고양이', fn1 : function () { co..

Study/Javascript 2024.08.07

[JS] 배열에서 사용하는 메서드 (2)

1) Array.sort배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다.기본적으로 오름차순으로 요소를 정렬한다.내림차순으로 정렬하려면 reverse 메서드를 사용한다.const fruits = ['Banana', 'Orange', 'Apple']fruits.sort() // [ 'Apple', 'Banana', 'Orange' ]// 한글 문자열도 오름차순 정렬const fruits2 = ['바나나', '오렌지', '사과']fruits2.sort() // [ '바나나', '사과', '오렌지' ]// 내림차순 정렬fruits.reverse() // [ 'Orange', 'Banana', 'Apple' ] sort메서드는 배열 요소가 숫자형이라 하더라도 일시적으로 문자열로 변환한 ..

Study/Javascript 2024.08.05

[JS] 배열에서 사용하는 메서드 (1)

1) Array.indexOf원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환원본 배열에 인수로 전달한 요소와 중복되는 요소가 있으면 첫 번째로 검색된 요소의 인덱스 반환원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1 반환const arr = [1,2,2,3]arr.indexOf(2) // 1 반환arr.indexOf(4) // -1 반환arr.indexOf(2, 2)// 두번째 인수는 검색을 시작할 인덱스, 그러므로 2 반환 2) Array.push인수로 전달받은 값을 원본 배열의 마지막 요소로 추가const arr = [1,2,3,4,5]arr.push(6) // [1,2,3,4,5,6]※ push 메서드는 원본 배열을 직접 변경한다. 원본배열을 변경하고 싶지 않다면 spread 문법을..

Study/Javascript 2024.08.04

[새싹x코딩온] 웹 개발자 부트캠프 과정 4주차 회고 | 자바스크립트 Date 객체를 이용해서 시계와 달력을 만들어보기

1. 들어가며JavaScript에서 Date 객체는 날짜와 시간에 관한 정보를 얻기 위한 객체다. 이 객체를 이용해서 시계와 달력을 만들어보고자 한다.  2. Date 객체Date 객체Date 객체는 날짜와 시간을 위한 메서드를 제공하는 객체이며 생성자 함수다.일반적으로 new 키워드로 객체를 생성해서 사용한다.new Date() // 객체 생성방법let today = new Date() // 변수에 할당해서 사용할 수 있음 Date 생성자 함수에 연, 월, 일 시, 분 등을 의미하는 숫자를 인수로 전달하면 날짜와 시간을 나타내는 Date 객체를 반환한다. 이 때 연과 월은 반드시 지정해야 한다.let date = new Date(2024, 5, 4) 이 때, 월은 숫자 0부터 1월로 반환하기 때문에 5..

Study/Javascript 2024.06.04

[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | 어떤 반복문을 쓰는게 좋을까? (for, for of, forEach)

1. 들어가며JavaScript에서 반복문으로 사용되는 for문, for of문, forEach 메서드를 배웠다. 이들의 차이점은 무엇이고 어떤 반복문을 쓰면 좋을지 생각해보았다. 2. 반복문반복문프로그래밍 언어에서 반복문은 특정 코드를 반복할 때 사용한다.예를 들어 1~100까지 수를 적어야 한다고 할때console.log(1)console.log(2)console.log(3)console.log(100)위와 같이 일일히 적을 수도 있겠지만 그러면 작업시간이 너무 느려지고 무엇보다 비효율적이다.반복문을 사용하면 이 작업을 훨씬 단축시킬 수 있다.for(let i = 1; i  for문을  흐름을 표현하자면 아래 그림과 같다.  배열에서의 반복배열 요소를 순회하며 코드를 반복하기 위한 반복문도 있다 하나..

Study/Javascript 2024.06.03

[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | 자바스크립트의 호이스팅(Hoisting)

1. 서론JavaScript의 변수와 함수의 호이스팅에 대해서 알아보기2. 본론호이스팅이란?호이스팅이란 변수 및 함수 선언이 코드의 최상단으로 올려지는 것처럼 동작하는 현상을 말한다. 변수 호이스팅변수는 프로그램을 실행하는 동안 다양한 형태의 데이터를 저장할 수 있는 메모리 공간이다.자바스크립트에서 사용되는 변수는 var, let, const 가 있다.(변수에 대해 정리한 포스팅 : https://daddda3232.tistory.com/5) var, let, const 의 차이점을 표로 간단히 정리해보았다. 변수 키워드재선언재할당스코프생성과정호이스팅var가능가능함수 스코프1. 선언 및 초기화2. 할당Olet불가능가능블록 스코프1. 선언2. 초기화3. 할당Oconst불가능불가능블록 스코프1. 선언+초기화..

Study/Javascript 2024.05.30

조건문 - switch 문

switch case문 단일조건을 분류하여 실행문을 만들어 줄때 사용하는 제어문 switch(조건 또는 변수) { case 경우1: 실행코드; break; case 경우2: 실행코드; break; case 경우3: 실행코드; break; default: 실행문; } 1. 변수값에 해당하는 경우 그 값에 해당하는 case에 들어가서 실행코드를 실행 2. 각 case 끝에 break 예약어를 반드시 써야함 -> 쓰지 않으면 다른 case에 들어가는 경우가 생김 -> 일반적으로 break 키워드는 제어문을 빠져나갈 때 씀(if문에서도 사용 가능) 3. default는 if문의 else문과 비슷하여 해당 case가 없으면 이 부분이 실행됨(단, 필요시 사용) default문에는 break 를 쓰지 않는다.

Study/Javascript 2023.02.12

조건문 - if문

if 문 조건문이란? 결과가 true/false로 나오는 구문 if 문은 괄호안의 조건을 체크해서 결과값이 true 면 중괄호 내의 코드를 실행 false면 아무것도 하지 않음 if(조건) { 코드 } else if 와 else if 내의 조건 말고도 다른 조건을 추가하고 싶을 때 사용하거나 -> else if 결과값이 false일 때 코드를 실행할 때 사용 -> else if(조건) { 코드 } else if(조건2) { 코드 } else { 코드 } if 내의 조건이 참이면 if문 코드 실행, 충족하지 못하면 else if 내의 조건 확인 후 결과가 참이면 코드 실행, 결과가 다 충족하지 못하면 else내의 코드 실행 1. if문은 단독으로 사용가능하다 2. else if 문은 if 문 뒤에 또는 e..

Study/Javascript 2023.02.12