분류 전체보기

[JavaScript] localStorage 사용하기

localStorage 문법 1. 데이터 추가, 읽기, 삭제 localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 2. array/object 자료 저장 localstorage는 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수 없다. array/object -> JSON 이렇게 변환해서 저장해야 한다. (JSON -> 문자취급) 데이터 저장 (array/object -> JSON) localStorage.setItem('obj', JSON.stringify({name:'jane'}) ); 데이터 읽기 (JSON -> array/object) var a ..

[React] React에서 if 구문 사용하기

1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 자바스크립트 if문은 return () 안의 JSX 내에서는 사용할 수 없다. if (조건) {실행문} => (X) 그래서 보통 return + JSX 전체를 가지는 if문을 사용한다. + 주로 else 생략 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } 2. JSX안에서 쓰는 삼항연산자 (ternary operator) function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : nu..

[JavaScript] Destructuring Assignment (구조 분해 할당)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열 및 객체 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있다. 구조 분해 할당 구문은 이와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var [a, b, c] = [1, 2, 3]; var d, e; [d, e] = [4, 5]; // 선언이 분리되어도 구조 분해 할당 가능 var [a, b, c] = [2, 3]; // c = undefined var [a, b, c = 5] = [2, 3]; // default 값 설정 가능, 분해한 값이 undefined일 때 대신 사용 var [a, b..

[JavaScript] ?.(Optional Chaining) / ??(Nullish Coalescing Operator)

?.(optional chaining) 자바스크립트에서 객체 내부의 속성에 접근할 때, 존재하지 않는 객체에 대해 접근하면 에러가 발생한다. var obj = { one: 1, two: { name: '222'} } console.log(obj.onee); >> undefined console.log(obj.onee.name); >> Uncaught TypeError: Cannot read properties of undefined (reading 'name') at :1:10 존재하는 객체의 존재하지 않는 속성에 접근하면 undefined를 반환하지만, 존재하지 않는 객체의 속성에 접근하면 에러가 발생한다. 중첩되지 않은 간단한 오브젝트의 경우, 오브젝트에서 원하는 데이터를 찾을 수 없으면 자바스크립트..

[JavaScript] Rest Parameter

Spread Operator와 비슷해 보이는, 그렇지만 완전히 다른 Rest Parameter에 대해 정리해보고자 한다. Rest Parameter는 Spread Operator와 함께 ES6에 새롭게 도입되었다. Rest Parameter(나머지 매개변수) Rest 파라미터는 이름처럼 Rest 역할을 하는 매개 변수이다. 매개 변수의 이름 앞에 Spread Operator를 붙인 형태로, 함수에 전달된 인자(argument)들을 배열로 받아 준다. function restParam(...rest){ console.log(rest); } restParam(1, 2, 3); >> [1, 2, 3] Rest 파라미터는 일반 파라미터와 함께 사용할 수 있으나 반드시 가장 마지막 파라미터로 있어야 한다. fun..

[JavaScript] Spread Operator

Spread Operator (...) 스프레드 연산자(Spread Operator)는 자바스크립트 객체 중에 반복 가능한 Array, Object, String, Map, Set 등을 펼치는(spread out) 연산자이다. ES6에서 새롭게 도입된 문법이다. Array에 스프레드 연산자를 붙이면 다음과 같이 대괄호가 제거되어 원소만 가져올 수 있다. var arr = [1,2,3]; console.log(...arr); > 1 2 3 또한 배열 합치기, 복사(deep copy)를 할 때 유용하게 사용된다. var arr1 = [1, 2, 3]; var arr2 = [4, 5]; var arr3 = [...arr1, ...arr2]; console.log(arr3); >> [1, 2, 3, 4, 5] ..

[JavaScript] 정규 표현식/정규식 (Regular Expression)

이번 글에서는 정규 표현식에 대해 정리해 보려고 한다. 정규 표현식(Regular Expression)은 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어로 줄여서 정규식이라고도 부른다. 영어로는 흔히 regex 또는 regexp라고 한다. 정규표현식 기본 문법 메타 문자 메타 문자 의미 메타 문자 의미 * 0번 이상 \ 이스케이프(escape) 문자 + 1번 이상 | OR ? 0번 또는 1번 ( ) 그룹 ^ 문자열 시작 {} 수량자 $ 문자열 끝 [] 클래스 (괄호 안 문자 중 하나) . 단일 문자 [^] NOT 수량자 수량자 의미 {m} 앞에 나온 패턴이 m회 반복되는 경우 {m, } 앞에 나온 패턴이 m회 이상 반복되는 경우 {m, n} 앞에 나온 패턴이 m회 이상 n회 이하 반복..

VSCode Prettier 특정 파일 적용 오류

VSCode로 작업할 때, 갑자기 어느 순간 Prettier이 적용이 안될 때가 있다. 검색하면 주로 나오는 해결 방법들. Default Formatter 설정 Format On Save 설정 Setting.json에서 위의 두 가지 설정 확인 구글링을 해보니 이 세 가지 방법이면 대부분의 오류는 해결이 되는 것 같다. 본 글에서는 내가 겪은 오류, Prettier이 특정 파일에서만 적용이 안되는 경우에 대해 말해보려고 한다. 특히 저장을 눌렀을 때 다음과 같이 뜬다면 오류가 뜬 Prettier을 눌러보자. Prettier을 누르면 위와 같이 로그가 나오고, 나의 경우 코드 내에서 태그 오류가 있음을 확인할 수 있다. 태그 오류를 수정하니 Prettier이 정상적으로 작동하였다. Live Server로 ..