내맘대로

bind 사전적 의미는,결속하다/묶다 js에서는 함수 호출을 하는 객체에 실제 함수가 위치한 객체를 연결하는 것을 의미.즉, 특정 객체에서 실행하도록 고정시키는 역할 데이터 바인딩의 경우에도, 실제 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것. 아.. 아직 정리가 덜된듯!ㅜㅜㅜㅜ

gulp란? 개발 작업 시 시간을 소모하는 작업(scss 파일 컴파일 등)을 자동화하는데 도움되는 자동화 도구 특징으로는,- 최소한의 API를 제공하여 사용하기 간단하다.- npm 모듈을 사용하여 수많은 파일 변환에 필요한 플러그인을 제공 이하 세부 참조 : https://github.com/gulpjs/gulp gulp 설치하기 npm install -g gulpnpm install -g gulp-sass // 파일 컴파일을 위해 필요한 별도 모듈 설치 gulp를 실행하기 위해서, 프로젝트 내부에 gulpfile.js 파일을 생성해야한다.gulpfile.js는 gulp 실행을 위한 환경 설정을 역할을 한다. 생성한 gulpfile.js에는 어떤 내용을 적어야할까?우선 주요 api를 살펴보자. gulp ..

커링 함수란? 함수를 그 인자의 부분집합으로 바인딩하는 기법 용어 정의를 적는 것 보다 예시를 보는게 이해하기 편할 듯 하다. 다음과 같은 프로토콜, 도메인, path 값을 받아 하나의 url을 생성하는 함수가 있다. function simpleURL(protocol, domain, path) { return protocol + '://' + domain + '/' + path} simpleURL('http', 'www.abc.com', 'a')simpleURL('http', 'www.abc.com', 'b')simpleURL('http', 'www.abc.com', 'c') 위의 함수로 간단하게 url을 만들어낼 수 있지만,예시에서 보는 것과 같이 path가 여러개인 경우에 각각 호출해야하는 번거로움이..

위의 그림처럼 하나의 버튼을 클릭했을 때, 버튼 하나에만 클릭 이벤트가 일어난 것처럼 보이지만 사실 클릭 이벤트는 버튼에만 적용된 것이 아니다. 이벤트는 하위 혹은 상위 엘리먼트로 전파되며, 이와 관련된 용어가 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)이다. 이벤트 버블링 이벤트가 발생하게 되면 상위 element로 이벤트가 타고 올라가는 것 이벤트 캡쳐링이벤트 발생 시 하위 엘리먼트로 이벤트가 전파되는 것 위와 같이 A, B, C 엘리먼트가 있는데,특정 영역을 클릭했다고 해보장 이벤트 버블링은 클릭 이벤트가 C > B > A 순으로 타고 올라가고이벤트 캡쳐링은 클릭 이벤트가 A > B > C 순으로 타고 내려온다. 이벤트 전파를 하기 싫다! 하는 경우에는이..

https는 통신하는 내용을 암호화하여 안전한 통신 방법이다. https로 설정된 웹페이지에서 http로 api를 호출하는 경우 어떻게 될까? The page at 'https://aaa.abc' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://bbb.qwe. This request has been blocked; the content must be served over HTTPS. 위의 에러는 https 환경에서 http로 api를 호출했을 경우 나타나는 에러문이다.보안 상 안전한 https 환경에서 안전에 취약한 http를 호출했기 때문에브라우저 단에서 에러를 발생시킨다. 사실 아직 https가 http ..

​서버사이드 렌더링 서버에 http 요청시 데이터, Css와 html js를 합쳐서 그린 결과를 반환 사용자 입장에서는 빠르게 그려지는 느낌 서버 호출할 때마다 새로고침 봇이 크롤링할 때 채워져있는 데이터를 훑으므로 검색결과에 나타날 확률이 높다 (구글 봇의 경우 js 파일을 기준으로 한다고 함) ex) react.js ​클라이언트 사이드 렌더링 (SPA 방식) Http 요청으로 json 값만 서버에서 받아오고 받아온 값으로 html을 그린 후에 보여주는 것 서버는 처음 호출할때 전체 페이지를 다 불러오고 이후에 변경되는 부분만 서버의 응답 데이터와 합쳐서 화면에 그려지는 방식 상대적으로 서버사이드 렌더링 보다 늦게 화면이 나타남. 봇 크롤링 시 빈 html 파일을 긁을 확률이 높아 검색 결과에 나타나지..

AMD와 Common.js는 모듈화된 코드를 로딩하는 역할을 한다. 이 둘의 차이점은, 모든 모듈의 로딩이 완료된 후에 실행하는 것인가 아니면 로딩 완료 이전에 실행하는 것인가이다. (즉, 동기 vs 비동기의 방식의 차이) Common.js 모든 모듈이 로컬에 다운로드가 된 이후에 실행하는 방식이다. node.js에서 사용하는 방식으로server 환경에서 외부 모듈을 가져올 때 유리한 방식이다. var lib = require("package/lib");function foo() { lib.log("hello world!");} exports.foobar = foo; 하지만 모든 모듈을 다운로드할 때까지페이지를 동작할 수 없다는 것이 단점으로 부각되어이를 해결하기 위해 새롭게 탄생한 방식이 AMD 방식이..

` 문자를 사용하면 템플릿 문자열을 여러 줄로 표현할 수 있다. ${value} 표현식을 통해서 템플릿 영역에 JS의 변수 값을 할당할 수가 있다. let fullName: string = `Bob Bobbington`;let age: number = 37; let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`; 관련 문서https://www.typescriptlang.org/docs/handbook/basic-types.html