2024/07 5

ES6 에서 추가된 문법들(3) - Set

Setset은 중복을 허용하지 않은 값의 컬렉션이다. Array 와 비슷한데 중복을 허용하지 않는 것이 가장 큰 특징이다.Array vs Set ArraySet항목의 순서입력한 대로 순서있게 저장순서 없이 저장index 사용 여부index 로 접근 가능index 통해 접근 불가중복중복 허용중복 불가 Set 의 MethodsSet 생성하기 - new Set()값 추가하기- set.add()const nameSet = new Set();nameSet.add('Sophia');nameSet.add('Emma');nameSet.add('Olivia');console.log(nameSet);// {'Sophia', 'Emma', 'Olivia'}nameSet.add('Mia');nameSet.add('Sophia..

Javascript 2024.07.18

이미지 불러오기 실패했을 때 처리하기(img 의 onError)

이미지를 정상적으로 불러올 수 없는 경우, 보이지 않게 처리해달라는 작업 지시가 있었다.  img태그img 태그에는 이미지를 가져올 수 없을 때 깨진 이미지 아이콘과 alt 값을 함께 표시한다.   이미지를 가져올 수 없는 상황은 아래와 같다src 속성이 “” 이거나 null일 때src 의 url이 현재 사용자가 보는 페이지의 url과 동일할 때지정한 이미지가 손상돼 불러올 수 없을 때이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, img 요소의 속성에도 크기를 지정하지 않은 경우사용자 에이전트가 지원하지 않는 이미지 형식인 경우(출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/img) 이미지를 가져올 수 없는 상황 처리하기img 태그..

Javascript 2024.07.15

ES6 에서 추가된 문법들(2) - Map

es6 에 새롭게 추가된 Map 객체에 대해 알아보자.Mapmap 객체는 키-값 쌍의 집합이다.키는 단 하나만 존재할 수 있다. Object 는 key는 string 또는 symbol 만 사용할 수 있지만 Map 은 모든 값(함수, 객체 또는 원시값 등)을 사용할 수 있다.Object 와 비슷하지만 다른점이 많다. Object vs Map ObjectMap항목의 순서입력한 대로 정렬되는 편이지만 항상 그런 것은 아님. 순서가 없다고 생각하는 편이 안전함.입력한 순서대로 정렬됨키 유형string 혹은 symbol(number 형식으로 key 를 생성하면 자동으로 string으로 변환된다.)모든 값이 가능함(함수, 객체 또는 함수 등)크기수동으로 결정해야함Map.size순회Object.keys, Object..

Javascript 2024.07.10

ES6 에서 추가된 문법들(1)

let, const변수를 선언할 때 let과 const를 사용해 선언할 수 있다.let x = 10;const y = 20;기존에 사용하던 var 는 변수와 상수를 구분하지 않고 선언했으나, 변수에는 let, 상수에는 const 를 사용해 선언한다.ES6 이전 문법 → varvar 는 변수를 선언하는 키워드로, var는 호이스팅되어 함수나 전역 스코프의 최상단으로 끌어올려진다. 안정성과 변수/함수 구분을 위해 let과 const를 사용하는 것이 좋다. 화살표 함수(Arrow Functions)function 키워드 없이, ⇒ 만으로 함수를 선언할 수 있다.// ES5var fn = function(x, y) => { return x + y;}// ES6const newFn = (x, y) => x + y..

Javascript 2024.07.03

BrowserRouter와 HashRouter

Hashurl 에서 hash 란 주소의 # 뒤에 연결된 식별자를 말한다.https://developer.mozilla.org/ko/docs/Web/API/URL/hash#예제위 링크에서 #뒤의 예제가 url 의 hash 값이다.mdn 사이트에서는 목차를 클릭할 경우, hash 라우팅을 통해 해당 #{목차}로 이동할 수 있도록 되어있고, 목차를 id로 사용해 링크로 진입하면 바로 메뉴로 이동할 수 있도록 만들어져있다.123h2 id="예제">    a href="#예제">예제/a>/h2>cs  해시 라우터URL 의 #뒤의 해시를 활용해 페이지를 이동하는 라우터이다.해시를 사용하면 #를 통해 이동한 경로가 아닌 이전 경로를 사용해 웹페이지를 받아온다.별도의 서버 설정이 필요하지 않고, 새로고침시 오류가 발생..

React 2024.07.02