본문 바로가기

javascript, framework

 (68)
Step02_model (v-model) Step02_model v-model 사용하기 {{msg}} 모든 value들은 초기값을 미리 지정해야 한다. {{msg}} value를 표현하기 위한 두가지 방법이다. Step02_model2 v-model 사용하기2 선택 라면 김밥 떡복기 msg : {{msg}} isChecked : {{isChecked}} lunch : {{lunch}} comment : {{comment}} isRun : {{isRun}} 여러 폼태그를 vue로 관리, 표현하는 방법이다. checkbox는 값이 boolean type으로 관리되는데 이를 변경하고 싶다면 true-value, false-value를 활용하여 원하는 문자열 값을 적어 관리하면 된다.
Step01_event(js간단한 동작 vue를 사용하여 구현) 클라이언트 웹브라우저에 외부 javascript를 로딩 시켜서 로딩된 javascript 를 활용해서 어떠한 동작을 하는 방법이 있다. vue.js https://v3.ko.vuejs.org/guide/introduction.html hello.html vue js 사용하기 오늘의 운세 : {{ fortune }} 내 이름은 : {{ myName }} 눌러보셈 이름 바꾸기 {{msg}} {{item}} el 해당 id를 가진 div를 관리하겠다는 뜻이다. (주로 class말고 id를 쓴다.) data 모델의 초기값을 정의해놓을 수 있다. methods 특정시점에 실행할 함수를 정의할 수 있다. Step01_event 이벤트 테스트 눌러보셈 {{msg}} Step01_event2 이벤트 테스트2 + - {..
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은 문자열을 작성할때 유용하게 사용된다. 뿐만아니라 $를 사용해서 변수, 객체, 배열, 함수, 연산자를 같이 활용할 수도 있다.

티스토리툴바