본문 바로가기
반응형

IT/Web19

art1 [ES6] 자바스크립트 ES6 - 3. 반복문 * 반복문 사용법 및 특징 forEach, for in, for of, map, filter, some, every, reduce * ES6 외 for문도 포함하여 작성한다. 1. forEach * 배열 반복 * return 해도 계속 진행 * break, continue 불가 let arr = ['A','B','C']; arr.forEach( (val, idx, array) => { console.log( val ); // 1번째 매개변수: 배열 값 - A,B,C console.log( idx ); // 2번째 매개변수: 배열 INDEX - 0,1,2 console.log( array ); // 3번째 매개변수: 배열 전체 -[A,B,C] [A,B,C] [A,B,C] }) 2. for .. in * 배.. 2021. 8. 31.
art1 [ES6] 자바스크립트 ES6 - 2. 추가된 자주 쓰는 문법 * includes / String Literal(문자열 리터럴) / Arrow function(화살표 함수) * es6에서 추가된 기능 중 자주 쓰던 것이다. 1. includes * 배열에 특정값이 있는지 boolean으로 리턴하는 함수이다. const colorArr = ['red','yellow','blue','green']; colorArr.includes('blue'); // true * 기존 es5의 이런 코드를 줄이는데도 좋다. * 길이가 확실히 줄어들고, 동일한 if 절이 자주 사용될 때 유용했다. 속도는 건수가 많지 않아 비슷했다. // es5 if ( '10'.equals(statCd) || '20'.equals(statCd) || '30'.equals(statCd) || '40'.e.. 2021. 8. 26.
art1 [Deno] Deno 설치하기 Getting Start (window) * win 10 기준 * Deno 서버 실행부터 ts 파일 실행까지 * Node.js를 만든 개발자 Ryan Dahl은 2020년 JavaScript와 TypeScript를 위한 새 런타임인 Deno의 정식 출시 버전인 1.0 버전을 출시했다고 한다. * 컴파일없이 자바스크립트, 타입 스크립트를 이용 가능하다고 한다. 해보니 좀 컬쳐쇼크다. 되게 쉽다. * 아직 노드를 대체할 만한 녀석인지는 알 수 없지만 노드의 단점인 node_module과 빈약한 보안을 보완했다고 한다. 일단 깔아나보자. 1. Install https://deno.land Deno - A secure runtime for JavaScript and TypeScript Deno is a simple, modern and secure r.. 2021. 8. 26.
art1 [Vue] Vue.js 설치하기 (win 10) * 왕초보도 보고 순서대로 따라할 수 있는 Vue.js 설치 * 헤딩하면서 배운 Vue 설치, 빌드, 프로젝트를 띄우는 방법을 공유 1. Node.js 설치 * Vue 프로젝트를 만들기 위해선 Node.js와 npm을 먼저 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 왼쪽은 안정적인 버전, 오른쪽은 최신 기능이다. 본인은 안정적인 버전을 받았지만 아무거나 받아도 된다. 어차피 시간 지나면 또 16.7이 왼쪽으로 오고 새버전이 오른쪽으로 간다. * 다운로드 완료되면 풀 Next 설치한다. * 설치가 완료되면 터미널 창(윈도우+R.. 2021. 8. 25.
art1 [ES6] 자바스크립트 ES6 - 1. 변수와 상수 * javascript 공부 준비, 변수, 상수, VAR, LET, CONST 1. 에디터 준비 - 코드펜 * 이미 환경이 갖춰진 분은 1번 패스하셔도 됨. * 크롬 개발자도구에서도 가능. 2021.10.12 - [IT/Web] - [WEB] 스크립트 에디터 "코드펜" (js, css, html 등) [WEB] 스크립트 에디터 "코드펜" (js, css, html 등) * javascript 공부 준비, 코드펜, 변수, 상수, VAR, LET, CONST 1. 에디터 준비 - 코드펜 * 이미 환경이 갖춰진 분은 1번 패스하셔도 됨. * 크롬 개발자도구에서도 가능. 1) 코드펜 접속 및 실행 * https://codep.. studyingazae.tistory.com 2. 상수 - Const * ES6에서.. 2021. 8. 23.
art1 [ES6] ES6 꼭 알아야 되나? ES6란? * 네이버 지식백과에 따르면 ECMA Script 6의 약자로 ECMA 인터내셔널이 ECMA-262 기술 규격에 따라 정의하고 표준화된 스크립트 프로그래밍 언어를 말한다. * 500번 읽어봐도 이해 안된다. 그냥 스크립트 문법이고 표준이다. 자바스크립트에서 => 이거 모르면 아 나는 ES6를 모르는구나 하면된다. ES6 꼭 알아야 되나? 과거의 나를 포함한 대부분의 아재들은 ES6 공부를 기피한다. ES5가 거의 웹 표준처럼 자리잡았고 React, Vue 등을 쓸게 아니면 당장 필요없기 때문이다. 실제로 20년 졸업한 컴공 쥬니어도 학교에서 ES6를 배우지 않았다고 하며, 공공기관에서 사용하는 UI 개발 툴도 ES6 문법을 지원하지 않는 경우가 많다. 그리고 아재들은 자신감이 있다. "어차피 .. 2021. 8. 23.
art1 [Mobile Web] 크로스브라우징(Cross Browsing) 이슈 크로스 브라우징이란? 왜 여기선 되고 저기선 안되지? 왜 크롬에선 되는데 사파리에선 안됨? 안 드는 되는데 왜 아이폰에서 안될까? 0. 공통사항 1) User-Agent에서 app/web 환경 및 브라우저 정보 조회 가능하다. 1. 사파리 1) window.open 등 팝업 호출 시 사용자 action 내에서만 호출되고, callback이나 SubMethod에서는 호출되지 않는다. * action 외부에서 호출 시 설정에 따라 팝업 차단 해제할 건지 묻던지 아무 반응 없다. // 사용자 action function onClick(){ window.open(url); // 가능 fuc_open(url); } // Sub Method function fuc_open(url){ window.open(url);.. 2021. 8. 19.