Fall in IT.

안녕하세요. 오늘은 react-native에서 간단하게 레이아웃 잡는 방법에 대해서 알아보도록 하겠습니다. react native layout 잡는법고정 크기의 영역 잡기다이나믹하기 변경되는 영역 잡기 (보통 많이 사용 됨)justifyContent 사용하기alignItems 사용하기 1. 고정 크기의 영역 잡는 방법 # fixed dimensions 2. 다이나믹하기 변경되는 영역 잡기 (보통 많이 사용 됨) - 기본적으로 flex에서 flexDirection은 column이 적용 된다.- 가로로 영역을 나누고 싶으면 flexDirection 값을 row를 사용하면 된다. # flex dimensions 3. justifyContent 사용하기 - 정렬 보조속성으로 flexDirection의 값에 영향..

안녕하세요. 오늘은 안드로이드 개발할때 앱 원격으로 배포 및 디버깅 하는 방법에 대해서 알아보도록 하겠습니다. 사실 구형 맥북을 사용하다가 신형 맥북을 사용하여 개발하니 USB-C 타입 포트 밖에 없어서 개발하는데 불편함을 겪었습니다.신형에서 개발하고 구형에서 USB를 꼽고 빌드하고..(반복.. 노가다..) (USB-C 타입 노트북 사용하시는 분들 모바일 기기에 빌드할때 어떻게 하시는지 알려주세요.. 저의 경우 타입 변경해주는 허브 썼다가 빌드가 안돼서.. ^^;) 그래서, 케이블이 없는 상황에서 신형 맥북으로 개발하고 바로 디바이스에 돌려볼 수 없을까.. 고민하다가같은 와이파이(같은 대역 사설 네트워크)에 붙어있는 상황에서 원격으로 앱을 배포 및 디버깅 하는 방법을 찾게 되었습니다. 준비할 사항모바일 ..

안녕하세요. 오늘은 React Native에 TypeScript를 설정하는 방법에 대해서 알아보도록 하겠습니다. React Native TypeScript 설정방법 1. 프로젝트 생성 $ react-native init [project name] 2. 프로젝트 진입 $ cd [project name] 3. 타입스크립트 및 필요한 모듈 추가 $ yarn add --dev typescript $ yarn add --dev react-native-typescript-transformer $ yarn tsc --init --pretty --jsx react $ yarn add --dev @types/react @types/react-native // tsconfig.json에서 "allowSyntheticDef..

안녕하세요. 오늘은 Ionic Framework를 사용하여 앱을 만든 후, Android 앱을 Publishing을 쉽게하는 방법에 대해서 알아보도록 하겠습니다. Android Publishing 방법 (keystore 파일은 생성했다는 가정하에 설명합니다.)ionic-cli를 사용하여 앱을 빌드합니다. $ cd {ionic project 경로} $ ionic cordova build android --prod --release jarsigner 유틸리티를 사용하여 unsigned 상태의 APK에 sign 합니다. $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore {키스토어파일명} {apk파일명} {키스토어별명} $ 키스토어의 비밀번호..

안녕하세요.오늘은 Angular5에서 쉽게 email 유효값을 검사하는 방법에 대해서 알아보도록 하겠습니다. 사용 방법Angular5에서는 API로 email validation 체크하는 directive를 제공하기 때문에 간단하게 유효값 검사가 가능합니다.하지만, @뒤에 .(dot)은 검사할 수 없습니다. 예제 코드 결과 참조 https://stackoverflow.com/questions/42366649/angular2-email-validationhttps://angular.io/api/forms/EmailValidator 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 Angular 프로젝트에서 npm script 를 등록하고 사용하는 방법에 대해서 알아보도록 하겠습니다. npm script 사용하기Angular Cli를 사용하여 프로젝트를 생성하면, 아래 명령어를 사용하여 프로젝트를 실행할 수 있습니다. 프로젝트 실행$ npm start 테스트 코드 실행$ npm test 등등.. 이처럼 다양한 명령어를 사용하여 프로젝트를 동작시킬 수 있는 이유는 어딘가에 해당 스크립트가 등록되어 있기 때문입니다.package.json 파일을 열어보면 "scripts" 부분에 start, build, test, lint 등 다양한 스크립트가 등록되어 있는 것을 확인할 수 있습니다. 그렇다면, 우리가 custom한 스크립트를 npm 명령어를 사용하여 실행하고 싶을땐..

안녕하세요. 오늘은 angular-cli를 사용하여 만든 angular5 프로젝트에 scss를 사용할 수 있도록 설정하는 방법에 대해서 알아보겠습니다. 목적angular-cli를 사용하여 만든 angular5 프로젝트에 scss 적용합니다. 진행방법angular-cli를 사용하여 프로젝트를 최초로 생성할때 scss 적용해보기이미 만들어진 angular-cli에 scss 적용해보기 (angular-cli가 설치되어 있다는 가정하에 설명합니다.) angular-cli를 사용하여 프로젝트를 최초로 생성할때 scss 적용하는 방법style 옵션에 scss를 설정하고 프로젝트를 생성합니다.$ ng new my-app --style=scss 이미 만들어진 angular-cli 프로젝트에 scss 적용하는 방법scs..

안녕하세요. 오늘은 Angular5에서 Slick-carousel 사용법에 대해서 알아보겠습니다. 목적Angular5에서 slick-carousel 사용해보기 작업 순서angular-cli를 사용하여 angular5 프로젝트를 생성하고 실행해봅니다.생성한 프로젝트에 slick-carousel 플러그인을 설치하고 적용합니다. angular5 프로젝트 생성 및 실행 (node.js, npm, angular-cli가 설치되어 있다는 가정하에 설명합니다.)angular-cli를 사용하여, angular5 project를 생성합니다. 프로젝트명은 slick-sample-app으로 합니다. - $ ng new slick-sample-app 프로젝트가 생성되면 해당 프로젝트 안으로 진입합니다. - $ cd slick..

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

안녕하세요. 오늘은 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..