목록Javascript (23)
똑같은 삽질은 2번 하지 말자
타입스크립트 = 타입이 입혀진 자바스크립트 의미 왜 사용하는가? 1. 에러방지 2. 코드의 자동완성과 가이드 타입스크립트 라이브러리 설치 npm i typescript 자바스크립트 파일로 컴파일 tsc app.ts 기본타입 // js 문자열 선언 var str = 'hello'; // TS 문자열 선언 var str: string = 'hello'; // TS 숫자 let num: number = 10; // TS 배열 let arr: Array = [1,2,3]; let heroes: Array = ['Capt','Thor','Hulk',10]; // Type 'number' is not assignable to type 'string'. let items: number[] = [1,2,3]; /** ..
SpringBoot + Vue.js 로 RestAPI 방식의 사이드 프로젝트를 하는도중에 로그인 시 할일 목록으로 자동으로 끌고 오도록 해놓았는데, 그때 제대로 끌고 오질 못해서 네트워크 패널을 보니 요청이 두번? 들어가 있었다. 우선 왜 두번인지 부터 해결하고 가야겠다고 생각했고, 열심히 검색해 보았다. 출처 : developer.mozilla.org/ko/docs/Web/HTTP/CORS HTTP CORS 관련 공식문서를 보면 이 요청은 사용자 정의 헤더가 설정되어서 자동으로 preflighted 처리가 된다. 나의 OPTIONS 요청 overview 맞다. 나는 헤더에 토큰값을 실어 보낸다고, 헤더에 임시로 Authorization : (Token 값) 을 추가해 두었는데, 그것 때문에 Simple..
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. var results = [ { name:"Gwak", age: 28 }, { name:"Hee", age: 29 }, { name:"Won", age: 30 }, ] results.map(result => console.log(result)); 실행결과 Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다. var results = [ { name:"Gwak", age: 28 }, { name:"Hee", age: 29 }, { name:"Won", age: 30 }, ] // Object.as..
tabindex 속성 - tab키를 통하여 브라우저를 탐색시, 순서를 임의로 조정 할 수 있다. - a, area, button, input, object, select, textarea 태그에 적용 가능하다. - -32767 ~ 32767 까지의 값을 입력할 수 있다. tabindex = "1" - 문서 안에서 가장 먼저 초점을 받게 한다. autofocus="autofocus"와 기능이 같다. 자연스런 Markup 순서를 거스른다. tabindex = "0" - 키보드 초점을 받지 못하는 div, span 등에 초점을 줄 수 있으며, tabindex=0은 Markup 순서대로 인식한다. tabindex = "-1" - 키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 만들어 준다. 초점을 받..
https://heropy.blog/2018/10/28/regexp/ 정규표현식, 이렇게 시작하자! 매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다) heropy.blog 정말 잘 설명해놓은 사이트 예시 if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength); // maxlength가 안먹힐는 경우 추가 value = value.replace(/[^0-9]+/i,''); // 숫자만 입력 HTML에 적용시킬때,
javascript 에서 불리언(boolean) 값은 예약어 true 나 false 중 하나의 값으로 사용된다. 불리언 값은 주로 제어구조를 처리하는 로직에 쓰인다. 위 예제는 flag 값이 true이면 '메롱~' 을 false이면 '틀렸어' 를 출력한다. 첫번째 라인에서 flag값을 true로 선언 했으므로 결과는 '메롱~' 이 나왔다. javascript에는 아래 6개 데이터에 대해서 false 값으로 판단한다. undefined null 0 -0 NaN "" // 빈 문자열 예시 1) 예시 2) false 와 false 로 변환되는 undefined, null, 0, -0, NaN, "" (빈 문자열) 은 거짓으로 판정되는(falsy) 값이라 부르고, 이 이외의 값들은 참으로 판정되는(truthy)..
export 는 javascript 모듈에서 함수, 객체, 원시값을 내보낼 때 사용 exports 는 모듈에서 함수, 객체, 원시값을 객체의 형태로 내보낼 때 사용 exports default 는 분리되어 있는 파일 내 내보낼 하나의 고정된 값만 내보낼 때 사용 export export로 내보내기 require 사용해서 가져오기 import 사용해서 가져오기 결과 (require와 import로 가져온 값은 같음) exports exports로 내보내기 require 사용해서 가져오기 import 사용해서 가져오기 결과 (require와 import로 가져온 값은 같음) 결론 (export와 exports의 차이) export는 내보낼 변수 하나하나의 값을 선언하여 내보내며 exports는 exports..
Node.js (Server) + Vue.js (Front) Axios Promise (비동기 로직 자바스크립트 객체) 기반의 API 통신(HTTP) 라이브러리, Vue에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다. npm - axios axios Promise based HTTP client for the browser and node.js www.npmjs.com CORS CORS란 Cross Origin Resource Sharing의 약자로, 현재 Application의 도메인(웹페이지)에서 다른 웹페이지 도메인으로 리소스가 요청할 때 허용하기 위한 하나의 메커니즘이다. 그렇다는 것은..
Distructuring? -배열 또는 객체에서 데이터를 별개로 추출하여 할당해 줍니다. 분리하여 할당 하는 방법 값이 모자라면 undefind로 기본값이 설정 됩니다. let a,b,c, rest; [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(rest); // undefined [a, b, c, ...rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(rest); // [4, 5] 변수 값 교환하기 var a = 1; var b = 3; [a, b]..
let josh = { field:'web', language:'js' } let developer = { nation:'korea', ...josh } console.log(developer) [object Object] { field: "web", language: "js", nation: "korea" } let developer2 = { nation:'korea', josh } console.log(develoer2); [object Object] { josh: [object Object] { field: "web", language: "js" }, nation: "korea" } 위 developer developer2를 출력해보면 developer는 스프레드 연산자를 사용해 마치 속성별로 묶어..