Tiny Bunny

본문 바로가기

💻/Javascript9

[JS] 로컬스토리지(LocalStorage) / JSON - Object 타입 변환 목차1. localStorage2. localStorage와 JSON 1. 로컬스토리지 개념 localStorage란 크롬과 같은 웹 브라우저에 데이터를 저장할 수 있는 기능이다.즉 웹 상에 우리의 데이터들을 저장하는 것이다. 💡 로컬스토리지를 사용하면 브라우저를 닫아도 저장되었던 데이터를 계속해서 유지할 수 있다. 보통은 사용자의 로그인정보나 설정 등을 저장하기 위해 사용하는데,Key- Value 값의 형태로 데이터를 저장한다.localStorage.setItem("키", "값"); 키에는 내가 저장하고 싶은 DB 덤탱이에 이름을 정해주는 것이고, 각 값은 각각의 데이터 값을 의미한다. 크롬 브라우저에서 local Storage 값 확인하기크롬 브라우저에서 localStorage를 확인하.. 2025. 3. 7.

[JS] 자바스크립트 배열 Json타입 변환, ajax를 통해 controller에 넘기기 쇼핑몰 장바구니 기능을 구현하며,각각 카테고리 별 제품을 화면에 띄워주며 자바스크립트를 이용해 배열에 담았다. 이 배열을 Json타입으로 바꿔서 ajax를 이용해 보내는 방법을 정리해보려 한다. ☺️ 1. 자바스크립트 배열에 담기 먼저 상품명, 수량, 가격 / 조립여부, 조립가격, 수량/ 견적 이름 을 자바스크립트 배열에 담아야했다.담기버튼을 클릭하면 addToCart()를 통해 productName과 productPrice를 가져오도록 한다. 그리고 active된 component의 이름을 배열 Name으로 지정한 후, currentCart[componentName] = { name: productName, price: parseInt(productPric.. 2025. 1. 5.

[JS] 자바스크립트 문자열 공백 제거하기 - trim() , replace() 자바스크립트에서 문자열 공백을 제거하는 방식은 두 가지 함수를 사용해서 제거가 가능하다. 1. replace()var a = "가 나 다 라 마 바 사 "a.replace(" ","")//"가나 다 라 마 바 사 "a.replace(/ /g,"")//"가나다라마바사" replace는 문자를 교체하는 것이기에 사실 공백이 아니어도 가능하다. 2. trim()var a = " 안 녕 하 세 요 "a.trim()//"안녕하세요" trim은 위와같이 앞과 뒤쪽의 공백을 제거하여 준다. 2025. 1. 4.

[JS] querySelector(), querySelectorAll() querySelector() 과 querySelectorAll()의 차이에 대해 정리해보자. querySelector() - document.querySelector()은 문서 내에서 입력한 선택자와 일치하는 첫 번째 요소를 반환한다. - 만약 일치하는 요소가 없으면, null을 반환한다. script> function clickMe(){ const doc= document.querySelector("#first >.Happy"); console.log(doc); doc.style.backgroundColor="green"; }script>div id="first"> p class="Happy">오늘은 일.. 2024. 8. 11.

[JS] 속성 선택하기 - .value / .innerHTML / .textContent 비교 자바스크립트에서 어떤 태그나 속성을 선택해줄때에는document에서 해당 태그에 접근할때 .value를 붙여주거나, .innerHTML을 붙여 불러오곤한다. 이 둘의 차이에 대해 정리해보자. 1. value vs. textContent & innerHTML: 닫힘 태그의 유무 value는 뒤에 (닫히는태그)가 오는 태그에는 사용할 수 없다.뒤에 닫힌태그가 없는 경우에는 value를 사용하여 값을 변경할 수 있으며,만약 닫힌 태그가 있는 경우에는 textContent와 innerHTML을 사용해서 바꿀 수 있다. 위에 html 에서 .value로 불러온 부분은 태그로, 닫힘 태그가 없는 것을 확인할 수 있다.반면에, .innerHTML로 불러온 부분은 태그로 닫힘 태그로 마무리되는 것을.. 2024. 8. 6.

[JS] 자바스크립트 연산자 우선순위 자바스크립트 연산자- 연산자란 값에 대해 어떠한 작업을 컴퓨터에게 지시하기 위한 기호이다. - '연산자'는 하나 이상의 표현식을 대상, '산술, 논리, 비교, 할당, 타입 연산' 등을 수행하도록 하여 하나의 값으로 만든다. 앞서 게시물에서 산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 타입 연산자 등에 대해 알아보았는데, 이러한 종류에 따른 연산자 상에서도 우선적으로 처리되는 우선순위가 정해져있다. 순위기능연산자1괄호()2증감/ 논리 연산자 not++ -- ! 3산술 연산자 곱셈* / %4산술 연산자 덧셈+ - 5비교 연산자 대소6비교 연산자 같음 == === !=7논리 연산자 and && 8논리 연산자 or || 9대입 연산자 = += -= 2024. 1. 9.

[JS] 자바스크립트 연산자 / 형변환 연산자- 연산자란 값에 대해 어떠한 작업을 컴퓨터에게 지시하기 위한 기호이다.- '연산자'는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 '피연산자' 라고 한다.: 피연산자가 '값'이라는 명사의 역할을 하면, 연산자는 '값을 만든다'는 동사의 역할을 하는 셈이다.- 연산자는 어떠한 식을 연산하게 되느냐에 따라서 다양한 연산자로 구별하여 기억하면 된다. 산술 연산자 (Arithmetic Operator)- 수학 연산을 수행함.- 이항 산술 연산자 / 단항 산술 연산자 / 단항 부정 연산자 1.1 이항 산술 연산자 : 피연산자가 2개 필요함. 1.2 단항 산술 연산자 ++ 연산자 : 값을 1 증가시킴 --연산자: 값을.. 2024. 1. 9.

[JS] 자바스크립트 자료형 정리 자료형이란? 자료형 (Data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.자바스크립트의 기본타입은 '원시타입'과 '객체타입'으로 구분할 수 있다.(각각 '기본자료형' 그리고 '참조자료형'으로도 불린다.) 원시타입(primitive type)1. 문자열(string)2. 숫자(number)3. 참/거짓 값 (boolean)4. undefined5. null6. 심볼(symbol) 참조 자료형(object type)1. 객체 (object) 각자의 자료형 (데이터 타입)을 하나씩 정리해보자. 1. 문자열 (string)- 큰따옴표("")나 작은따옴표('')로 둘러쌓인 문자의 집합.- 덧셈 기호로 연결 가능함. 이스케이프 문자- 역슬래시(＼)를 붙여 씀.- 사용자 의도와 다르게 문.. 2024. 1. 9.

[JS] 자바스크립트 변수와 상수- var, let, const 가장 기본이 되는 자바스크립트의 변수 별 특징과 식별자 명명 규칙에 대해 정리하자.암시적선언: 자바스크립트에서 제공하는 변수 선언 키워드인 var, let, const 키워드를 사용하지 않고 변수를 선언함.아래와 같이 그냥 변수와 할당값을 선언해버린다.(자바스크립트에서 권장하는 방식은 아님.) 명시적선언: const, let, var 키워드를 사용하여 변수를 선언함. 변수 :변하는 수 - 변수의 식별자를 지정하는 행위 = '변수를 선언한다.' 라고 한다.- = 우변에 있는 값을 변수 공간에 대입하는 것 = '값을 할당한다.' var num = 10 + 20 ; 키워드 식별자 연산자 표현식 예시 변수선언키워드 자주 사용되는 키워드에는 let , const , var 가 있다.각각.. 2024. 1. 9.

이전 1 다음

티스토리툴바