외우지말고 이해하라.

외우는 것 보단 이해해서 내것으로 만들어 활용하기

WEB Front-End/Javascript 11

Javascript - 정규표현식(Regular Expression) 정리 / 모음

[a-z] : 영어 소문자 [A-Z] : 영어 대문자 [0-9] : 숫자 [aeiou]: 모음 [k-p] : 알파벳에서 k 부터 p 까지만. [4-8] : 숫자 4에서 8까지만. [가-힣] : 한글 .*[가-힣]+.* : 앞에 주절주절 영어든 숫자든 한글이든 마구 반복돼도 상관 없고 가운데 한글이 한 글자 이상 반복된 다음 또 무슨 문자가 반복돼도 상관없다. 출처: https://solskjaer.tistory.com/155 [work smart !!]

Javascript - LocalStorage 정리 + 로컬 스토리지 사용법

LocalStorage ・데이터를 사용자 로컬에 보존하는 방식. ・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능. ・자바스크립트(JavaScript)로 조작. ・모바일에서도 사용 가능 쿠키와 차이점 ・유효 기간이 없고 영구적으로 이용 가능 ・5MB까지 사용 가능 (쿠키는 4KB까지) ・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신) LocalStorage 기본 구성 ・키(key)와 값(value)을 하나의 세트로 저장. ・도메인과 브라우저별로 저장. ・값은 반드시 문자열로 저장됨. Session Storage => localStorage - 세션이 끊겨도 사용 가능. sessionStorage - 같은 세션만 사용 가능. LocalStorage 사용법 //localStorage 데이터 추..

requireJS를 통한 모듈화 - javascript define 함수 사용법

공부를 하다 보니 define([ '../test04.js', ], function(test04) { var getTest = function(str){ console.log("hi"+str); } return { getTest : getTest }; }); define() 이라는 함수를 만나게 되었다.. 최근 자바스크립트 모듈화 및 의존성관리에 관심이 생기게 되었습니다. 회사에서 맡아서 진행하는 프로젝트가 오래된 서비스이다 보니 아직 까지 모듈화 및 의존성 관리가 제대로 이루어 지고 있지 않고 있어 (html코드에 script 코드를 포함시키는 방식… 순서 꼬이면 난리가 나서 새로운 코드를 작성할때도 일단 다 가져다 쓰고 있습니다…) 코드를 유지보수하는데 점점 어려움을 겪고있어 계속 이런식으로 유지보수..

a태그 JavavScript void(0) 을 쓰는 이유 <a href="javascript:void(0)">

Javascript void(0) 이란? 회사에서 일하다 보니 a href="javascript:void(null)" 이런 태그가 눈에 띈다. void(null) 을 편의상 void(0) 이라고 하겠다. (출력해보면 둘다 undefined 가 나옴) 링크가 정상적으로 동작하지 않게 만들기 위하여 이처럼 undefined를 사용한다고 보면 된다. 우리는 내부 link 태그를 사용하면서 경우에 따라 링크를 제거하기를 원한다. 링크 태그인 a에 css 스타일이 있는 경우에 link 태그를 그대로 유지해야하므로 태그는 가지면서 실제 클릭 이벤트는 작동하지 않도록 하기 위함이라 하겠다. 태그는 가지면서 클릭 이벤트는 작동하지 않도록 하기 위해서 이렇게 사용하는 것.

JavaScript - for, foreach, filter, map, reduce 기능

자바스크립트에서 map(), filter(), reduce() 메소드는 배열 요소를 나열하거나, 특정 조건에 맞게 보여줄 때 자주 쓰인다. 해당 메소드들의 동작 원리를 알아보고자 해당 메소드들이 for문으로 어떻게 돌아가는지 작성하려 한다. const listData = [ { id: 1, text: 'hello', }, { id: 2, text: 'everyone', }, { id: 3, text: 'welcome', }, { id: 4, text: 'to', }, { id: 5, text: 'my blog', }, ] 공통으로 사용되는 데이터 1. filter var newArr = arr.filter(function(v, i, arr) { return condition; }); filter의 가장 ..

JavaScript 중급 01 - 변수(var / let,const 와 스코프 TDZ 이해)

var / let,const 와 스코프 TDZ 이해 용어 정리 scope : 선언한 변수가 유효한 영역 function scope : 선언된 변수는 선언된 함수안에 접근 가능 - 함수 block scope : 모든 코드 블록에서 선언된 변수는 코드 블록 내부에서만 유효함 - if, while, for, try 문 등 호이스팅(Hoisting)이란 ? 스코프 내부 어디서든 변수 선언은 최상위 선언된 것 처럼 행동 var 은 한번 선언된 변수를 다시 선언 가능 - 선언은 호이스팅 되고 할당은 호이스팅 되지않음 에러 발생 x let, const 는 선언된 변수를 다시 선언 불가능 - 주로 이 둘을 사용해야 에러 방지 - 호이스팅은 되지만 에러 발생 o Temperal Dead Zone (TDZ) : 이 영역이..

JavaScript 기초 ++ ( isNaN, === 비교, length, concat, do while)

01 . isNaN(값) => 해당 값이 숫자인지 아닌지 판별 while(check){ const age = parseInt(prompt("How old are you ? ")); if(isNaN(age)){ alert("숫자를 입력하세요 !"); }else{ if(age = 12){ alert("당신의 나이는 12 살 이상") } check = false; } } 02 . == 비교 , === 비교 : == 는 값만 비교하고 ===는 유형도 비교한다. // 0 == false 에서 false 의 default 는 0 이므로 0 == 0 으로 인식해 true 가 나온다. console.log(0 == false); // ..

JavaScript 기초 - 10 가지 요약 (변수,자료형, alert, prompt, confirm, 형변환, 기본 연산자, 함수, 표현식, 객체, 매서드, 배열)

1. 변수 예약어는 사용할 수 없음 문자와 숫자, $와 _만 사용가능 첫글자는 숫자가 될 수 없다 가급적 상수는 대문자로 표현 문자열은 " " 로 감싸주고 정수형은 숫자를 적어주면 됌. let , const : var과 차이점 = 한번 선언한 변수를 또 선언할 경우 에러가 발생 let 은 변수 선언후 값을 바뀔 수 있음 const 는 값을 바꿀 수 없음 2. 자료형 문자형 const name01 = "KIM"; const name02 = 'HONG'; const talk ='I\'m a good' const message = "My name is ${name}"; 숫자형 const age = 20; const PI = 3.14; const a = 1/0 => (Infinity) 무한대 const b = ..

JavaScript 이해하기 (JS, ES6,7,8 TypeScript)

자바스크립트란? 자바스크립트(Javascript)는 1995년 넷스케이프(Netscape) 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 되었다. - 이후 많은 브라우저들에서 자바스크립트를 탑재하기 시작하였고 웹 어플리케이션 구현을 가능하게 만들었다. - 웹 어플리케이션에서 더 이상 사용자가 페이지 새로고침, 페이지를 새로 불러오지 않고도 웹과의 연결이 가능하게 되었다 ECMAscript 란 ? 자바스크립트가 다른 브라우저에서 지원 받기 시작하면서 모든 곳에서 공통으로 잘 동작하기 위해 표준 규격이 필요했다. 이 때문에 ECMA 국제 기구에서 ECMAScript 라는 스트립트 표준을 만들게 되었다. ECMAScript는 줄여서 ES 라고 부른다. ES6, ES7, ES8 .. 다양하게 있다.