본문 바로가기

javascript, framework/javascript

 (50)
javascript 정규식 가이드 연습 사이트 RegExr: Learn, Build, & Test RegEx 정규표현식 (Regular Expression) 정규표현식을 이해하면 정규표현식 객체를 활용해서 아래와 같은 작업을 할 수 있다. 어떤 문자열에 특정 pattern의 문자 혹은 문자열이 있는지 여부를 알 수 있다. 어떤 문자열에 특정 pattern의 문자 혹은 문자열을 추출할 수 있다. 어떤 문자열이 특정 pattern과 정확히 일치하는지 여부를 알 수 있다. ex) 어떤 문자열에 특수 문자가 포함되어 있는지 여부 ex) 어떤 문자열이 이메일 형식과 일치하는지 여부 ex) 어떤 문자열이 전화번호 형식과 일치하는지 여부 ex) 어떤 문자열이 영문자 대소문자와 숫자로만 이루어져 있는지 여부 등등.. 자주쓰이는 표현식 ^[a-z..
Step09_fetch(json, parse) ecma6 json json 참고자료 JSON이란 무엇인가? | Oracle 대한민국 여기서 127.0.0.1은 local host, :5500은 post number을 뜻한다. Network 창에서 작업이 처리되는 과정과 시간을 확인할 수 있다. ipconfig로 ip 주소를 확인해볼 수 있다. JSON {"name":"김구라", "addr":"노량진", "likeFoods":["삼겹살","족발"]} XML 방식 1 김구라 노량진 삼겹살 족발 방식2 JSON에는 camel case, XML에는 kebab case가 많이 쓰인다. 문자열, 숫자, 불리언타입, NULL, 객체, 배열 모두 사용가능하다. JSON.parse() 이 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체..
Step09_fetch(동기, 비동기, json, fetch) ecma6 동기 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식이다. 비동기 요청을 보낸 후 응답과 관계없이 다음동작을 실행하는 방식이다. json javascript object notation 의 약자이다. friends.json 파일에 데이터를 따로 만들어두어 fetch.html 안에서 사용할 계획이다. .then에서 알 수 있듯이 fetch는 promise 형식이다. 비동기 형식으로 작동되는 것을 예상할 수 있다.
Step08_promise(setTimeout, promise) ecma6 setTimeout 각각 5초, 10초 뒤에 console 창에 출력된다. setTimeout 무작위 출력 커피, 샌드위치, 아이스크림이 순서대로 나오는 코드와 무작위로 나오는 코드이다. 순서대로 나오는 코드처럼 연속적으로 작성한다면 callback지옥에 빠질 수 있다. 예시 promise promise를 사용하면 callback hell (콜백 지옥)을 벗어날 수 있고 에러처리가 쉽다. promise를 사용할때 알아보기 쉽게 resolve를 임의로 많이 사용한다. 여기서 resolve는 함수 형태로 전달되며 즉시 호출된다.(promise의 특징)
Step07_for(for, for in, forEach, for of) ecma6 for 반복문의 여러가지 표현식 for, for in, forEach, for of
Step06_templateString(backtick) ecma6 backtick backtick은 문자열을 작성할때 유용하게 사용된다. 뿐만아니라 $를 사용해서 변수, 객체, 배열, 함수, 연산자를 같이 활용할 수도 있다.
Step05_function(함수 디폴트값 지정, ... (함수 배열 입력)) ecma6 함수에 선언된 매개변수의 기본값(default)을 지정할 수 있다. ...을 사용해서 배열을 입력할 수 있다. showInfo();가 빈칸임에도 console.log 값으로 '0 | 누구게 | 어디게' 라는 출력값이 나온 것은 디폴트값으로 지정되어있기 때문이다. useFunc에서는 ...을 이용해서 배열을 입력하였다.
Step04_object(객체분해할당) ecma6 객체분해할당 let num=mem.num; , let name=mem.name 두개의 코드를 let {num,name}=mem; 한 코드로 작성이 가능하다. 이것을 객체분해할당이라고 한다. useMem 코드처럼 object type을 매개변수로 활용할 수 있다. keyCode 활용형식 2가지 예시이다. input 박스에 문자열을 입력하면 관련 keyCode가 log되도록 작성했다. object type 작성 형식 num, name, isMan을 미리 정의해 두면 mem2와 같은 형식으로 작성하더라도 자동으로 object type에 값이 입력된다. 또 object type에 함수를 담을때 sing(){}처럼 function을 작성하지 않고 코드를 작성할 수도 있다. mem3와 같이 key값을 변경하기 쉽게..

티스토리툴바