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

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

프로젝트를 진행하다보면 워낙에 배열형 데이터를 활용하는게 많다보니 반복문이 필수다. 그런데 우물안 개구리라고... 사용하는 것만 주로 사용해서 잘 몰랐는데 반복문도 참 여러가지가 있다. 모질라 MDN에서 설명하는 자바스크립트 지원 반복문은 for문말고도 while문이 있는데 대표적인 반복문의 경우 예전에 제어문을 정리하면서 한번 정리를 하긴했다. Do it 자바스크립트 3. 제어문. 조건문if, 선택문switch-case, 반복문for, while. 백텍, 백틱`으로 출력하 출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 조건문(if, else if, else) 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 사용자가 입력한 숫자가 sop..

노마드코더 리액트 기초수업으로 영화앱 만드는 영상을 다보고 리액트 뿐만아니라 프로그래밍 전반적으로 실무 꿀팁을 많이 알게돼서 이번엔 자바스크립트 기초 영상들을 하나씩 보고있다. 진짜 이걸 왜 이제야 봤나싶음 물론 내가 그동안 경험하면서 쌓은 기초지식이 있기때문에 이 강의가 더 쉽게 느껴지는 걸수도 있겠지만 진짜 자바스크립트의 J도 몰라도 충분히 듣고 코딩을 시작할 수 있을정도로 원리부터 설명해줘서 너무 재미있다. 그동안 그냥 '그러려니...'하고 썼던 모든 것들의 원리를 알게되니 뭔가 먼지 쌓인 안경을 닦고 다시 코드는 보는 느낌이랄까 +_+ · form 과 submit 그리고 e.preventDefault form과 submit 그리고 e.preventDefault는 세트로 자주 쓰인다. 잠깐 기억에서..

하루가멀다하고 리액트 공부하면서 역시 자바스크립트를 더 파봐야겠어🔥🔥🔥 했는데 실제로 머리로는 리액트는 리액트 자바스크립트는 자바스트립트 이렇게 별개로 생각했었던 것 같다. 오늘 드림코딩 엘리님 영상을 보는데... 오!? 다 리액트에서 쓰는거네.....????? 근데 이걸 바닐라 자바스크립트 작업할때 써봐야지~라는 생각을 1도 못한듯.... · 구조 분해 할당 Object Destructuring 이건 진짜 리액트에서 비구조할당으로 배워서 맨날쓰는데 영어로는 Object Destructuring이라고 하고 MDN설명을 보니 한국어로는 구조 분해 할당이라고 하나보다. 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게..

오늘도 정처없이(?) 알고리즘을 따라 흘러들어간 유튜브 영상 구독하고 있는 개발자 유튜버가 몇명 있는데(공부좀 한다 하는 주니어들은 다들 안다는 노마드코더, 드림코딩, 얄코 등등) 오늘은 노마드코더의 QnA 영상에서 흥미로운 답변을 들었다. 풀스택 개발자가 되려면 무슨 언어를 해야하나요? 라는 질문에 정말 1초의 망설임도 없이 JavaScript라고 얘기하는 니꼴라스! 답변자체도 매우 단호하다ㅋㅋㅋ JavaScript. end of the question 사실 나도 최근에 자바스크립트를 다시 공부하면서 자바스크립트 자체에도 흥미를 꽤 갖게됐지만 그 뒤로 리액트를 배우면서 '와.. 자바스크립트 깊게 파보면 좋겠다'하는 생각이 들긴 했다. 근데 현직자가 이렇게 얘기해주니까 뭔가 더 신뢰가 생김 일단 지금하고..

배열객체 여러개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 됩니다. 배열(配列)은 '나눌 배'와 '열거할 열'을 사용해서 만든 글자로, 글자 뜻 그대로 하나의 저장소를 나눠서 데이터를 열거하라는 의미입니다. 기본형 let 참조변수 = [ 값1, 값2, 값3, 값4, ... 값n]; 참조변수[인덱스번호] = 값(n-1) 예를들면 let doctors = ["익준", "정원", "석현", "송화", "준완"]; 여기서 주의해야할 점은 배열의 순서라고 할 수 있는 인덱스 번호는 0부터 시작한다는 점이다. 따라서 doctors[0] 은 doctors배열의 첫번째 값을 의미하며 그 값은 "익준"이다. 요즘 뒤늦게 슬기로운 의사생활을 정주행중인데 너무 재미나다ㅋㅋㅋ 옴니버스..

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

출처 : Do it 자바스크립트 + 제이쿼리 입문(이지스퍼블리싱) ▶ 변수 vs 상수 변수는 언제든지 변할 수 있는 값, 상수는 고정값을 말한다. (쉽게 예를 들면 밥만 먹어도 들쭉날쭉하는 몸무게는 변수값, 절대 바뀔리 없는 내 주민등록번호는 상수값) 변수Variables는 변하는 데이터(값)을 저장할 수 있는 메모리 공간입니다. ▶변수 선언 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수 명 앞에 붙입니다. var 변수명; var 변수명 = 값; 자바스크립트 표준화버전 ES1(ECMA-262 1st deition)이 1997년 완성된 이래로 기능이 점차 추가되어 현재 ES6가 널리 사용되고 있는데 아직 ES5의 기능만 지원하는 브라우저도 일부 있다고 한다. 그런데 ES6부터는 변수를 좀 더..

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