RequireJSRequireJS란?AMD(Asynchronous Module Definition) spec의 구현체AMD는 동적로딩, 의존성 관리, 모듈화를 구현하기 위한 API 디자인 동적로딩 HTML 페이지 상에서 script tag를 선언하여 script 파일을 로딩하는 전통적인 방식은 성능상의 문제가 있다. 브라우저는 script tag를 읽는 순간 script의 내용을 파싱해야 하고, 그동안 브라우저는 멈춰있게 된다. RequireJS는 페이지 랜덩링 이후에 script 태그를 동적으로 생성해서 삽입해 준다. 의존성 관리 Javascript는 의존성 관리가 되지 않는다. 가장 많이쓰이는 라이브러리를 위쪽에 배치하는 수 밖에....RequireJS는 의존성 관리를 명시적으로 선언하고, 명확하게 ..
Promise의 기초Promise의 장점Promise는 비동기 작업을 좀 더 편하게 구현할 수 있게 해준다. (콜백지옥에서 해방) 단순히 ajax를 하나만 사용한다면 Promise는 오히려 불편하게 느껴질수도 있다. 하지만, 여러개의 ajax를 직,병렬로 사용하게 된다면???예) 프론트 메인 페이지 메인 페이지 접근 시, 메인 화면 로딩과 회원정보 조회를 동시에 진행함. 회원 정보 조회 완료 시 (메인화면 로딩과 상관없이) 이벤트 정보 로딩하여 노출 위 모든 작업이 완료된 후에 버튼 이벤트 등록 (하나라도 미완료된 상태에서는 버튼 이벤트 등록하면 안됨)기본 구조new Promise(function(resolve, reject) { // 비동기 작업 완료 시 reslove 호출 // 비동기 작업 실패 시 ..
Javascript 동일성 비교 시 ==, === 차이점 ==는 두 개의 입력값을 같은 type으로 변환하여 같은 값을 가지고 있는지 비교작업을 수행합니다. 이는 의미론적 비교방법이라고 할 수 있습니다. 반면, ===는 type 변환을 하지 않은 상태로 비교작업을 수행하며 type이 틀릴경우 false를 반환합니다. "1" == 1// true"1" === 1// falsenull == undefined// truenull === undefined// false 동일성을 비교하는 방법중에 또다른 방법이 있습니다. 일부 최신 브라우저에서 지원하고 있는 Object.is 라는 함수 입니다. 기본적으로 === 와 같다고 볼 수 있지만, 일부 특수한 값에 대하여 다르게 동작합니다. NaN(Not a Number..
시간이 날 때 마다 오픈소스를 분석해 볼 생각입니다.뛰어난 개발자들이 작업 한 소스를 훑어 보는 건실력 향상에 굉장히 큰 도움이 된다고 생각합니다. 아직 저 스스로의 역량이 부족하여큰 프로젝트의 소스를 분석하기에는 많은 어려움이 있습니다.그래서 좀 작은 프로젝트 부터 하나씩 해볼 생각입니다. 첫번째로 분석해 볼 오픈소스는 js.cookie 입니다.https://github.com/js-cookie/js-cookie개인 프로젝트 진행 중에 cookie를 다룰 일이 있었는데,아무래도 직접 컨트롤 하는 것 보다는잘 만들어진 오픈소스를 사용해 보는 것이 좋을 것 같아 찾아본 프로젝트 입니다. 사용 방법도 다음과 같이 간단합니다. Cookies.set('name', 'value', { expires: 7 });C..
Ajax를 이용해서 개발을 하다 보면, 사용자가 실제로 url 이동을 하지 않은 상태에서 주소창의 url을 변경해야 할 경우가 있습니다. html5에 적용된 기술로 아래와 같은 코드로 페이지 이동 없이 주소창 변경이 가능합니다. function changeUrl(title, url, state) { if (typeof (history.pushState) != "undefined") { //브라우저가 지원하는 경우 history.pushState(state, title, url); } else { location.href = url; //브라우저가 지원하지 않는 경우 페이지 이동처리 } } pushState에 넘겨주는 state는 해당 히스토리에 저장하는 object로 history.state; 코드를 통..
이번에 개인 프로젝트를 진행 하면서,평소 업무에서 사용해 보지 못한다양한 기술들을 최대한 적용해 보고자마음 먹고 프로젝트를 진행 중입니다. 요즘 Frontend 개발에 많은 새로운 기술들이도입되고 자리를 잡아가고 있는 것 같습니다.Backend 개발은 어느정도 대세가 자리 잡고 있는 것에 반하여Frontend에는 새롭고 배워야 할 것들이 넘처나고 있었습니다. 현재 개인 프로젝트에서 적용하고자 공부 중인Fonrt-end 개발 환경에 대해 간략하게 정리하고자 합니다. * 의존성 & 빌드 프로세스 관리 도구 : npmNode Package Modules의 약자로node js 개발에 사용되고 있는 패키지 관리 도구 입니다.Javascript계의 메이븐이라고 할 수 있을 것 같습니다.프로젝트 루트의 package..