실무에서 localStorage나 sessionStorage 또는 쿠키를 사용하는 경우가 종종 있는데 검색기록 저장이 그 대표적인 예시이다. 보통은 5개 정도되는 단어만 저장할 공간이 필요하기 때문에 굳이 비용을 들여 DB나 API를 만들지 않고 프론트단에서 구현하는 경우가 많다고 한다. 요구사항 첫번째, 검색어는 최대 5개까지 저장한다. 두번째, 같은 검색어가 있을 경우 갱신 후 저장한다. 세번째, 부분 삭제 및 전체 삭제가 가능하다. 이중 세번째는 삭제는 따로 포스팅하는걸로 하고 이번 포스팅에서는 첫번째와 두번째만 정리해보려고 한다. 전체코드 codepen에서 간단하게(?)바로 적용해보기 위해 바닐라 자바스크립트로 짰다. 바닐라기 때문에 본인이 사용하는 프레임워크(vue, react, svelte 등..

쉽게 시작하는 타입스크립트 장기효(캡틴판교) 일하다가 막힐때는 항상 구글 검색을 통해 해결하는데 그럴때마다 종종 마주치는 익숙한 닉네임 캡틴판교! 이번에 회사에서 새로 진행한 프로젝트가 규모가 조금 작아서 이번 기회에 타입스크립트를 공부해보겠다고 무턱대고 타입스크립트로 세팅을 해버렸다. 프로젝트는 어찌어찌 잘 마무리되긴했지만 주먹구구식으로 적용했던 기능이나 문법이 많아 언제고 한번은 관련 교재(?)를 정독해봐야지 싶었는데 그게 이렇게 금방 오게 될 줄이야! 얼굴 한번 뵌적 없지만 너무나도 익숙한 캡틴판교님의 책이라 더욱 기대가 됐다 객체의 속성에 접근하는 방법은 salary['junior'] 또는 salary.junior 모두 가능합니다. 다만 속성 이름에 숫자나 - 등 특수 기호가 들어가면 .jonio..

얼마전에 홈페이지에서 제공하는 서비스에 공유하기 기능을 추가하게 됐는데 간단하다고 생각했던 기능에 의외로 예외가 있어 짧게 정리해보려고 한다. 단순히 주소 복사를하는 기능으로 clipboard를 사용하는데 이게 안먹히는 브라우저가 있던것이다..! 아니 근데 몰랐던것도 당연한게 인앱브라우저까지 어떻게 다 생각해ㅠ 후하.. 그게 카톡이라면 모르면 안되긴하지...ㅠ Anyway. 이에 대해서는 하단에서 설명하는 것으로 하고 일단 현재 보고있는 화면의 url을 복사하는 기능은 아래와같이 구현했다. navigator.clipboard copyCurrentUrl(){ const currentUrl = window.location.href; navigator.clipboard.writeText(currentUrl)...

출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) 자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다. ▶ 산술연산자 +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지) ▶ 비교연산자 >(크다), =(이상, 크거나 같다), , >=,

출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) HTML, CSS, 자바스크립트, 제이쿼리 등을 이용해 사용자(사이트 방문자)의 눈에 보이는 부분까지 개발하는 것을 프런트엔드 개발이라 부릅니다. ▶ API? Application Programming Interface의 약자로, HTML에서 제공하는 기능(함수)의 모임이라고 생각하면 됩니다. 이 API들은 자바스크립트 언어를 기반으로 제작되었으며, 이를 사용하기 위해서는 자바스크립트를 반드시 알아야 합니다. 최근에는 제이쿼리Jquery, 앵귤러(Angular)JS, 리액트(React)JS, 노드(Node)JS, 폰갭(PhoneGap) 등 자바스크립트로 제작된 다양한 라이브러리가 등장했습니다. *라이브러리는 자바스크립트 언어로 만든 프로그..