로컬스토리지localStorage 활용한 검색기록 저장 및 삭제 바닐라 자바스크립트VanillaJS
실무에서 localStorage나 sessionStorage 또는 쿠키를 사용하는 경우가 종종 있는데 검색기록 저장이 그 대표적인 예시이다. 보통은 5개 정도되는 단어만 저장할 공간이 필요하기 때문에 굳이 비용을 들여 DB나 API를 만들지 않고 프론트단에서 구현하는 경우가 많다고 한다. 요구사항 첫번째, 검색어는 최대 5개까지 저장한다. 두번째, 같은 검색어가 있을 경우 갱신 후 저장한다. 세번째, 부분 삭제 및 전체 삭제가 가능하다. 이중 세번째는 삭제는 따로 포스팅하는걸로 하고 이번 포스팅에서는 첫번째와 두번째만 정리해보려고 한다. 전체코드 codepen에서 간단하게(?)바로 적용해보기 위해 바닐라 자바스크립트로 짰다. 바닐라기 때문에 본인이 사용하는 프레임워크(vue, react, svelte 등..
자바스크립트 여러가지 for 반복문 배열엔 forEach, for-of 객체는 for-in 비교 차이점
프로젝트를 진행하다보면 워낙에 배열형 데이터를 활용하는게 많다보니 반복문이 필수다. 그런데 우물안 개구리라고... 사용하는 것만 주로 사용해서 잘 몰랐는데 반복문도 참 여러가지가 있다. 모질라 MDN에서 설명하는 자바스크립트 지원 반복문은 for문말고도 while문이 있는데 대표적인 반복문의 경우 예전에 제어문을 정리하면서 한번 정리를 하긴했다. Do it 자바스크립트 3. 제어문. 조건문if, 선택문switch-case, 반복문for, while. 백텍, 백틱`으로 출력하 출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 조건문(if, else if, else) 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 사용자가 입력한 숫자가 sop..
Do it 자바스크립트 4-2. 배열 객체와 자주쓰는 메서드. 배열함수
배열객체 여러개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 됩니다. 배열(配列)은 '나눌 배'와 '열거할 열'을 사용해서 만든 글자로, 글자 뜻 그대로 하나의 저장소를 나눠서 데이터를 열거하라는 의미입니다. 기본형 let 참조변수 = [ 값1, 값2, 값3, 값4, ... 값n]; 참조변수[인덱스번호] = 값(n-1) 예를들면 let doctors = ["익준", "정원", "석현", "송화", "준완"]; 여기서 주의해야할 점은 배열의 순서라고 할 수 있는 인덱스 번호는 0부터 시작한다는 점이다. 따라서 doctors[0] 은 doctors배열의 첫번째 값을 의미하며 그 값은 "익준"이다. 요즘 뒤늦게 슬기로운 의사생활을 정주행중인데 너무 재미나다ㅋㅋㅋ 옴니버스..
Do it 자바스크립트 4-1. 객체. 자주쓰는 내장객체 Date(), Math()
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) 객체란? 자바스크립트는 객체(Object) 기반 언어입니다. 객체는 기능과 속성을 가지고 있습니다. 가령, TV에는 켜다, 끄다, 음소거하다, 볼륨을 높이다, 볼륨을 낮추다 등의 기능이 있습니다. 이렇듯 TV라는 객체에는 다양한 기능이 있습니다. 이러한 주변의 모든 사물들을 객체라고 합니다. 기본형 객체.메서드(); //객체의 메서드를 실행한다 객체.속성; // 객체의 속성값을 가져온다 객체.속성 = 값; //객체의 속성값을 바꾼다 ▶ 날짜 정보 객체 Date() let now = new Date(); let year = now.getFullYear(); //연도 let month = now.getMonth()+1; //달 let date..
Do it 자바스크립트 3. 제어문. 조건문if, 선택문switch-case, 반복문for, while. 백텍, 백틱`으로 출력하기
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 조건문(if, else if, else) 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 사용자가 입력한 숫자가 홀수인지 짝수인지 구분하기 let num = prompt("좋아하는 숫자를 입력해주세요"); //*prompt는 사용자에게 값을 입력받을 수 있는 자바스크립트 내장함수 if (num % 2 == 0) { alert("당신이 좋아하는 숫자는 짝수입니다"); //*alert는 사용자에게 간단한 메시지를 전달할 수 있는 자바스크립트 내장함수 } else { alert("당신이 좋아하는 숫자는 홀수입니다"); } ▶ 선택문(switch - case) 변수에 저장된 값과 switch문 ca..
Do it 자바스크립트 2-2. 연산자. 코딩테스트, 면접 단골 질문 tip
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) 자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다. ▶ 산술연산자 +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지) ▶ 비교연산자 >(크다), =(이상, 크거나 같다), , >=,
Do it 자바스크립트 2. 변수(var, let)와 상수(const). 호이스팅, 스코프scope by얄코
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 변수 vs 상수 변수는 언제든지 변할 수 있는 값, 상수는 고정값을 말한다. (쉽게 예를 들면 밥만 먹어도 들쭉날쭉하는 몸무게는 변수값, 절대 바뀔리 없는 내 주민등록번호는 상수값) 변수Variables는 변하는 데이터(값)을 저장할 수 있는 메모리 공간입니다. ▶변수 선언 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수 명 앞에 붙입니다. var 변수명; var 변수명 = 값; 자바스크립트 표준화버전 ES1(ECMA-262 1st deition)이 1997년 완성된 이래로 기능이 점차 추가되어 현재 ES6가 널리 사용되고 있는데 아직 ES5의 기능만 지원하는 브라우저도 일부 있다고 한다. 그런데 ES6부터는 변수를 좀 더..
Do it 자바스크립트 1. 프론트엔드 개발, 단어의 뜻과 사용 기초
출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) HTML, CSS, 자바스크립트, 제이쿼리 등을 이용해 사용자(사이트 방문자)의 눈에 보이는 부분까지 개발하는 것을 프런트엔드 개발이라 부릅니다. ▶ API? Application Programming Interface의 약자로, HTML에서 제공하는 기능(함수)의 모임이라고 생각하면 됩니다. 이 API들은 자바스크립트 언어를 기반으로 제작되었으며, 이를 사용하기 위해서는 자바스크립트를 반드시 알아야 합니다. 최근에는 제이쿼리Jquery, 앵귤러(Angular)JS, 리액트(React)JS, 노드(Node)JS, 폰갭(PhoneGap) 등 자바스크립트로 제작된 다양한 라이브러리가 등장했습니다. *라이브러리는 자바스크립트 언어로 만든 프로그..