Fall in IT.

최근 만들어진 웹사이트중 가장 심플하게 잘 만들어졌다고 생각하는 kakaobank 사이트를 직접 copy 해보고,어떤 plugin들을 사용했고, 레이아웃은 어떤 방식으로 잡았는지에 대해서 알아보는 시간을 가져보았습니다. 결국, 어떻게 만들었길래 이렇게 이쁠까? 란 궁금증을 해결하기 위해서 직접 똑같이 만들어 보았습니다. 목적kakaobank 사이트와 똑같은 사이트를 구현합니다.구현하면서 필요한 라이브러리 또는 스킬들도 하나하나 정리합니다. 요구사항kakaobank와 최대한(?) 똑같이 만들어야합니다. (따라서, 구현시 사용되는 모든 리소스는 kakaobank의 리소스를 참조하여 개발합니다.)오픈소스로 공개하고 스터디 용으로만 사용합니다. 구축환경angular5를 사용하여 개발합니다. (angular-cl..

안녕하세요.오늘은 webpack의 개념과 사용방법에 대해서 간단하게 알아보도록 하겠습니다. 서버에서 처리하는 로직을 JavaScript로 구현하는 부분이 많아지면서 웹 서비스 개발에서 JavaScript로 작성하는 코드의 양도 늘어났습니다. 코드의 양이 많아지면 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해집니다. 그러나 JavaScript는 언어 자체가 지원하는 모듈 시스템이 없습니다. 이런 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack입니다. webpack이란?웹팩은 모듈 번들러 입니다. 웹팩은 상호 의존성이 있는 모듈들을 사용해 그 모듈들과 같은 역할을 하는 정적 에셋들을 생성해냅니다. webpack 동작방식각 기능 단위별로 mo..

안녕하세요. 오늘은 npm install 옵션 중 --save와 --save-dev의 차이점에 대해서 알아보도록 하겠습니다. npm 이란?npm은 JavaScript 용 패키지 관리자입니다. npm을 사용하면 JavaScript 개발자가 다른 개발자가 공유 한 코드를 쉽게 재사용 할 수 있습니다. https://docs.npmjs.com/getting-started/what-is-npm npm install 이란?npm install은 지정된 패키지를 기본적으로 의존성에 저장합니다. 또한 몇 가지 추가 옵션을 사용하여 저장 위치 및 방법을 제어 할 수 있습니다../node_modules 디렉터리에 패키지를 설치합니다.https://docs.npmjs.com/cli/install npm install (p..

안녕하세요. 오늘은 Javascript에서 사용되는 "use strict" 란 무엇인지 알아보도록 하겠습니다. use strict란?Strict Mode의 선언방식 입니다.이 문구는 ES5부터 적용되는 키워드로, 안전한 코딩을 위한 하나의 가이드라인 입니다. Strict Mode란?Strict Mode는 코드에 더 나은 오류 검사를 적용하는 방법입니다.Strict Mode를 사용하면, 예를 들어 암시적으로 선언한 변수를 사용하거나 읽기 전용 속성에 값을 할당하거나 확장할 수 없는 개체에 속성을 추가할 수 없습니다.Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써, 당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다. 이 엄격한 콘텍스트는 몇가지 ..

안녕하세요.오늘은 타입스크립트(typescript)에서 Key/Value 쌍으로 구성된 객체에 Key/Value 아이템을 추가하는 방법에 대해서 알아보겠습니다. 자바스크립트 예제 코드var obj = { id: 1, name: '홍길동' }해당 객체에 age에 대한 정보도 추가하고 싶을 경우..obj.age = 28로 간단하게 처리가 가능합니다. 타입스크립트 예제 코드let obj = { id: 1, name: '홍길동' }위와 마찬가지로 age에 대한 정보를 추가하고 싶을 경우.. obj.age = 28; // 에러발생 (에러가 발생하는 이유는, typescript는 컴파일 단계에서 obj에 property로 age가 존재하는지 체크하기 때문에 에러가 발생합니다.)해결방법간단하게 obj 객체에 타입을 ..

안녕하세요. 오늘은 Ionic3에서 Background Mode plugin 이슈 해결방법에 대해서 알아보겠습니다. 문제Ionic3 Background mode plugin을 사용할 경우 앱이 시작되자마자 종료되는 현상 발생 (https://ionicframework.com/docs/native/background-mode/) 분석cordova-plugin-ionic-webview plugin과의 충돌로 인해 발생하는 문제로 보임. (해당 플러그인을 삭제하고 실행 했을때는 정상적으로 동작하는 것을 확인하였습니다.)하지만, webview 플러그인은 ionic3에서 기본적으로 필요한 plugin으로 삭제할 경우 ios에서 많은 문제가 발생. 해결방법Background Mode plugin 깃헙 페이지의 is..

안녕하세요.오늘은 자바스크립트(Javascript) 문자열에서 모든 공백을 제거하는 방법에 대해서 알아보겠습니다. 테스트도구Chrome browser의 Console을 사용하였습니다. 1. 문자열 모든 공백 제거 방법 2. 문자열 앞 공백 제거 방법 3. 문자열 뒤 공백 제거 방법 4. 문자열 앞/뒤 공백 제거 방법 (trim 함수 사용) 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 패딩 영역은 제외하고 백그라운드 색상 입히는 방법에 대해서 알아보도록 하겠습니다. 패딩 영역은 제외하고 백그라운드 색상 입히는 방법간단히 background-clip 속성을 사용하여 해결할 수 있습니다.아래 예제를 참고해주세요. 소스코드background-clip 속성을 사용하지 않았을 경우 background-clip 속성을 사용했을 경우 참조https://stackoverflow.com/questions/5896351/how-to-background-a-div-without-the-padding-area 모두 즐거운 코딩하세요~

안녕하세요.오늘은 Angular5에서 DOM의 변경이 발생되지 않는 이벤트에 대해서 강제로 변경 감지를 호출 시키는 방법에 대해서 알아보도록 하겠습니다. Angular는 많은 핵심기능들을 가지고 있지만, 그중에서도 Two-way-databinding 기능은 프론트 개발을 하는데 있어서 큰 편리함을 제공합니다. 그러나, javascript 또는 typescript에서 데이터 변경이 일어났음에도 불구하고 DOM에 변경사항이 반영되지 않는 상황이 종종 발생하곤 합니다. 오늘은 이 문제를 해결하는 방법에 대해서 간단하게 알아보도록 하겠습니다. 문제 javascript 또는 typescript에서 데이터 변경이 일어났음에도 불구하고 DOM에 변경사항이 반영되지 않는 문제 이유여러가지 이유가 있을 수 있지만, 아래..

안녕하세요. 오늘은 Angular5(typescript 기반)에서 외부라이브러리 import 하는 방법에 대해서 알아보겠습니다. 정확히는 Typescript에서 tsd 파일 없이 외부라이브러리를 사용하는 방법에 대해서 알아보도록 하겠습니다. Typescript에서 외부라이브러리 import 방법으로 daum 지도를 api사용해 보도록 하겠습니다. 목적Angular5에서 daum 지도 사용 방법을 알아봅니다. 요구사항tsd 파일 없이 외부라이브러리를 import하여 사용합니다. 샘플코드아래와 같이 sample 코드를 작성합니다. 에러 발생컴파일 단계에서 daum 객체에 에러가 발생합니다. 에러 내용은 "cannot find daum"daum 변수에 대한 타입이 지정되어 있지 않아 발생하는 에러로 해결방법은..