2017년 1월 26일 목요일

React _ 03 : Props

React에서 기본이자 중요한 Props에 대해 알아보자.

1. Props 추가하기
Props는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰때 사용. 부모 컴포넌트에서
자식으로 데이터를 전달할때 유용하며 "props"가 사용된다.
 - render() 메소드 내부에서는 {this.props.propsName} 형식으로 작성
   

2. Props 사용하기
HTML 페이지에 렌더링 될 부모(parent) 컴포넌트에 작성된 자식(child) 컴포넌트를 추가하고
부모(parent) 컴포넌트에서 사용되는 props값을 자식 컴포넌트에 전달하여 렌더링 처리
 - 컴포넌트 사용할 경우 < 컴포넌트> 안에 propsName = "value" 값을 설정하여 사용
   
 - 렌더링처리하는 부분에서 props 인 text 값에 "hello" 대신 변수 value를 넣어보자.
   
   

3. props 기본값 설정
컴포는트 하단에 className.defaultProps = { propName: value } 를 삽입
 - App 컴포넌트에 props 값을 설정하지 않아도 기본값 "Default value"이 나타남
   

4. propTypes (타입검증)
생성된 컴포넌트에 props의 Type과 전달된 props의 Type이 일치하는지 검증하고 싶을 경우
propType 객체를 설정
 - 잘못된 형식의 값이거나 값이 전달되지 않을 경우 에러 메세지가 발생
 - "isRequired" 는 반드시 입력해야할 필수항목일 경우에 사용
   
타입검증은 선택사항이지만 사용할 경우 컴포넌트가 받는 props의 목록과 형식을 사전에 선언함으로써
생성된 컴포넌트를 사용할 다른 개발자를 컴포넌트를 구성하는데 사용할 수 있는 props 와 타입을 알기
위해 소스코드를 직접 살펴볼 필요가 없음.
리액트가 props 값의 타입 유효성을 런타임에서 검사하므로 걱정할 필요없이 render()함수를 작성 가능.


props 타입에서 "isRequired" 사용하지 않아도 잘못된 형식의 값이나 값이 전달되지 않을 경우 에러
메세지가 뜬다. 이부분에 대해서는 좀 더 공부해보자.
이외에도 다른 많은 타입이 있으니 React 레퍼런스 참조하자.


참고 :
https://velopert.com/921


2017년 1월 25일 수요일

React _ 02 : JSX

JSX 특징과 사용에 대해 알아보자.

JSX 란?
JSX는 자바스크립트 코드안에 선언형의 XML 스타일 구문을 작성할수 있게 해주는 React.js의 선택적
자바스크립트 구문 확장을 말합니다.
장점으로는,
 - JSX는 컴파일링 되면서 최적화 되므로 빠르다.
 - 애플리케이션 구조를 시각화하기 용이하다.
 - HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성 할 수 있다.

단, 브라우저에서 지원하지 않는 ES6기능을 사용하거나 브라우저, 서버가 코드를 해석할수 있도록 일반 
자바스크립트로 변환위해선 트랜스파일 (babel 등)이 필요함.

HTML 페이지에서 JSX 사용
 - JSX 트랜스파일을 처리하는 스크립트 로드 (babel 브라우저 용) 
 - 바벨이 작업할 부분을 알 수 있도록 JSX를 이용하는 script 태그에 "text/babel" 마크업 추가
   
   ( script 태그에 직접 코드를 작성하거나 JSX 부분을 처리할 JS파일을 로드할 경우 )

JSX에서 노드 반환
 - render() 함수에서는 항상 단일 노드만 반환. 두개의 노드를 반환할 경우 에러 발생
   해결방법은 모든 노드를 <div> 태그로 래핑하면 됨. (<div>태그 외에도 가능)
   

   ! "노드" 란?
   Dom 트리에 존재하는 요소, 속성, 텍스트, HTML 문서 전체를 나타내는 Document 등을 말함.

JSX에서 자바스크립트 사용
 - 변수나 조건문, 루프등을 작성시 간단하게 { }안에 자바스크립트 코드 넣으면 됨.
   
 - if조건문에서 else는 사용이 불가하므로 삼항식으로 처리
   (https://msdn.microsoft.com/ko-kr/library/be21c7hw(v=vs.94).aspx)

JSX의 공백
JSX 공백은 {' '}를 이용하여 공백을 추가하거나(이 경우 <span>태그가 더 추가됨) 리터럴 문자열 식으로
만들고 공백추가
   

JSX 주석
주석은 HTML주석이 아니라 자바스크립트 주석을 사용.
모든 주석은 다중 행으로 작성하여 일관성 유지하는것이 좋음. " /* comment*/"
(단일 행 주석 "// coment"도 추가할 수 있지만 별도의 행에 배치해야함.)
단, 여러노드가 작성된 코드에서는 감싸고 있는 태그 안에 작성되어야 함.

JSX와 HTML 차이
 - 태그 특성은 camel 표기법으로 작성
 - JSX는 XML이므로 모든 요소의 짝이 맞아야함
 - class와 for 속성은 className과 htmlFor를 대신 사용
 - style 속성은 세미콜론으로 구분된 문자열이 아닌 객체의 값으로 CSS 프로퍼티의 이름을 대시로 구분
   하지 않고 camel 표기법으로 작성
   
 
JSX 활용한 ES5 와 ES6 렌더링 코드 비교
 - ES5
   

 - ES6
   

 - 컴포넌트 작성 시 ES5는 React.createClass 메소드를 사용하고 ES6는 React.Component를 상속받은
   클래스를 사용함.
 - ES5에서 컴포넌트 생성시 대문자로 작성해야함 (예 : var App )


참조 : 

2017년 1월 22일 일요일

React _ 01 : 웹페이지에 "Hello React" 띄우기

React 샘플 프로젝트를 개발하며 공부해보자.  (1단계부터 차근차근 !!)

1. 설정
 - React 라이브러리 설치  https://github.com/facebook/react 다운
 - React 폴더에서 js 폴더안에 있는 "react.js"와 "react-dom"  파일을 찾을 수 있는 위치에 복사
    (파일 위치는 변경 될 수 있으니 잘 살펴보시길)

2. 페이지 작성 (HTML)
   
 - HTML 페이지를 보면 <div id = "app"> 내용이 대체된 것을 확인할 수 있음.
 - React.Dom.div (attributes, children) 형식으로 Dom요소를 생성할 수 있지만 중첩으로 사용(자식)
   하면 점점 복잡한 코드가 작성됨.
 - 그래서 앞으로는 JSX 구문을 사용함 (아래코드는 JSX 구문 예)
   
 - 단, JSX를 사용하기 위해선 babel 같은 트랜스파일 필수
   (트랜스파일 : 브라우저나 서버가 코드를 해석할수 있도록 일반 자바스크립트로 변환)

! JS, CSS, Image 파일들은 정적파일로 다룰려면 서버파일에서 정의한 "public" 디렉토리 안에 넣어야 함
   

! Babel의 목적은 JSX호환과 크로스브라우징!
Transform Compiler로 보통 TypeScript, CoffeeScript 같은 Javascript 문법이 아닌 각각의 문법으로
작성된 코드를 Javascript 엔진에서 동작 가능한 코드로 변환하는 역할을 하며 여기에서는 React JS의
JSX 문법을 Javascript에서 실행되도록 변환하는 역할을 함. (JSX 호환)
babel을 이용하면 ES6 문법을 지원하지 않는 브라우저에서 ES5 변환하여 적용이 가능 (크로스브라우징)

참조 :
http://yumere.tistory.com/80

2017년 1월 21일 토요일

React : 소개 및 특징

프로젝트를 만들기 전에 먼저 React에 대해 알아보자.

React ?
React는 Facebook이 만들고 있는 이른바 MVC 프레임워크에서의 뷰(View) 부분을 컴포넌트로 만들기
위한 라이브러리입니다. 이 라이브러리는 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은
큰 서비스에서 사용되고 있습니다.

이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스
(UI)를 렌더링합니다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다.

React 특징 
 - Just the UI :
   React.js는 UI 컴포넌트를 만들기 위한 라이브러리입니다. 컴포넌트 지향 프레임워크는 여러 가지가
   있지만 React.js는 정말 UI 컴포넌트만 지원합니다. 비록 지원하는 범위는 작지만, 애플리케이션을
   만드는 방법을 크게 바꿀 수 있다는 점이 재미있습니다. 또한, 이해 비용이 적어 도입하기 쉬우며
   Backbone.js의 뷰 부분을 React.js로 구현하거나 Angular.js의 directives를 React.js를 사용해 구현
   하는 등 여러 환경과 조합해 사용할 수 있습니다.
 - Virtual DOM :
   React.js는 자바스크립트 내에 DOM Tree와 같은 구조체를 VIRTUAL DOM으로 갖고 있습니다. 다시
   그릴 때는 그 구조체의 전후 상태를 비교하여 변경이 필요한 최소한의 요소만 실제 DOM에 반영합니다.
   (따라서 무작위로 다시 그려도 변경에 필요한 최소한의 DOM만 갱신되기 때문에 빠르게 처리 가능)
 - Data Flow :
   React.js는 단방향 데이터 흐름을 지향합니다. 따라서 Angular.js의 양방향 데이터 바인딩을 사용할
   때처럼 작성할 코드의 양이 확연히 줄거나 하지는 않습니다. 그렇지만, 애플리케이션의 데이터를 관리
   하는 모델 컴포넌트가 있고 그 데이터를 UI 컴포넌트에 전달하는 단순한 데이터 흐름으로 이해하고
   관리하기 쉬운 애플리케이션을 만들 수 있습니다.
 - JSX :
   JSX 는 JavaScript 의 확장 문법입니다. DOM 엘리먼트들을 만들 때 JavaScript 형식으로 작성해야
   하는 것을, XML 과 비슷한 형태로 작성할 수 있게 해줍니다. 이를 사용하는것은 권장사항이고 필수는
   아닙니다. 하지만 사용하지 않으면 좀 불편합니다.

React 장점
 - Virtual DOM 을 사용한 어플리케이션의 성능 향상
 - 클라이언트에서도 렌더링 될 수 있고, 서버측에서도 렌더링 될 수 있음
    (이를 통해 브라우저측의 초기 렌더링 딜레이를 줄이고, SEO 호환도 가능해집니다)
 - Component 의 가독성이 매우 높고 간단하여 쉬운 유지보수가 가능해집니다.
 - 프레임워크가 아닌 라이브러리서 다른 프레임워크들과 사용이 가능합니다
    React 에선 UI만 신경쓰고, 빠져있는 부분은  본인이 좋아하는 라이브러리를 사용하여 stack 을
    본인의 입맛대로 설정 할 수 있음.

! 렌더링

이해하기 쉽게 말하면 "시각적으로 알아볼 수 있도록 변환하는 과정"

! Components
React에서 Component는 "태그로 정의된 하나의 기능 혹은 재활용할 수 있는 요소"

! Virtual DOM 처리
Virtual DOM 을 사용하면, 실제 DOM 에 접근하여 조작하는 대신에, 이를 추상화 시킨 자바스크립트
객체를 구성하여 사용합니다. React 에서 데이터가 변하여 브라우저상의 실제 DOM 을 업데이트 할 때
다음과 같이 3가지로 처리
 1. 데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리렌더링
 2. 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교
 3. 바뀐 부분만 실제 DOM 에 적용


참조 :
https://velopert.com/775
http://blog.coderifleman.com/2015/06/23/learning-react-1/
http://www.bloter.net/archives/233564

React : ES5와 ES6 달라진 점

간략히 정리하면..

1. createClass와 class
  - 컴포넌트 작성시 ES5는 createClass를 ES6에서는 class를 사용

2. 함수 바인딩
  -  ES6 부터는 autobound가 되지 않아 수동으로 처리 (예문)
   

3. 생성자 super 호출
  - ES6 클래스에서 생성자에서 props 인자를 필요로 하므로 super(props)를 호출해야 함.

2. 생성자에서 State 초기화 설정
  -  getDefaultProps 프로퍼티와 getInitialState 프로퍼티 삭제. state를 초기화시키는 역활이
     생성자(constructor)로 이동


참조 :
https://cinos81.bitbucket.io/blog/_site/react/2016/02/03/reactLifeCycle.html?
https://daveceddia.com/react-es5-createclass-vs-es6-classes/

관계형 DB 와 비 관계형 DB

서버에서 DB(Database)는 데이터들을 담을 수 있는 저장소이다. 즉, 저장한 데이터를 구조화하여 
관리하고 이용하는데 편리하게 해주는 것이다.

이런 DB에도 관계형 DB와 비 관계형 DB 종류가 있는데 그 의미를 알아보자.

관계형 DB
관계형 DB는 고전적인 테이블, 행, 열을 가진 DB에서 한곳의 데이터와 다른 곳의 데이터를 연결하기
위해 한쪽의 데이터에 다른쪽 데이터의 위치를 저장하는 방식으로 우리가 흔히 표현하는 행(Column), 열(Record)로 구성된Table간의 관계를 나타낼때 사용함.
이렇게 표현된 데이터를 SQL(Structured Query Language)을 사용하여 데이터 관리 및 접근.
관계형 DB로는 mysql, oracle, mssql 등이 있음.

 - 관계형 DB 장점

  • 다양한 용도로 사용이 가능하고, 일반적으로 높은 성능
  • 데이터의 일관성을 보증
  • 정규화에 따른 갱신 비용 최소화
  • SQL(Structured Query Language) 지원


 - 관계형 DB 단점

  • 대량의 데이터 입력 처리
  • 갱신이 발생한 테이블의 인덱스 생성 및 스키마 변경
  • 컬럼의 확장의 어려움


비관계형 DB
비관계형 DB는 여전히 데이터 간의 관계를 만들 수 있지만, 데이터간의 연결을 DB에서 제한이 없음.
비관계형 DB는인 NoSQL불리우는 Key-Value DB, Mongo DB 등이 있으며 SQL을 사용하지 않는다는 의미로 Not Only SQL이다.

 - NoSQL 장점

  • 대용량 데이터 
  • 데이터 분산 처리
  •  Cloud Computing 
  • 빠른 읽기/쓰기 속도 
  • 유연한 데이터 모델링



! NoSQL 특징
 - 기존의 관계형 데이터베이스보다 더 융통성있는 데이터 모델을 사용하고 데이터의 저장 및 검색을 위한
   특화된 메커니즘을 제공
 - 최적화된 키 값 저장 기법을 사용하여 응답속도나 처리효율 등에 있어서 성능이 뛰어남.
 - 초고용량 데이터 처리 등 성능에 특화된 목적을 위해 비 관계형 데이터 저장소에 비 구조적인 데이터를
   저장하기 위한 분산저장 시스템으로 되어 있으며 최근 각광받는 빅데이터에 대한 처리에 특화 됨.


참조 :
http://a-mean-blog.com/ko/stubs/관계형-relational-DB와-비관계형-non-relational-DB
https://opentutorials.org/course/195/1399
http://jwprogramming.tistory.com/70
http://ourcstory.tistory.com/30

2017년 1월 20일 금요일

Node.JS : Mac에서 개인 웹 서버 구축하기

서버 구축에는 웹서버(아파치), 언어(PHP), 데이터베이스(MySQL) 등이 필요하지만 단순하게 Node js를
활용하여 웹 서버만 만들어보자.

먼저, 

1. Node  설치
 - https://nodejs.org 에 접속하여 Mac용 Node js를 다운받아 설치
 - 터미널에서 "node -v"( Node 버전 )로 설치 확인

2 express로 웹 서버 구축
 - 웹 서버 파일들이 위치할 폴더 생성 "mkdir 폴더명"
 - "cd 폴더명" 으로 이동한 후 "npm init" 으로 package.json 생성
    (package.json : https://blog.outsider.ne.kr/674)
 - express 설치 "npm install --save express"
 - 생성한 폴더안에 파일 생성 (예 : main.js)
 - 파일(main.js)에 아래 코드 입력 후 저장
    

3. 서버 실행
 - node 파일명 - > node main.js
 - 서버종료 Control + C
 - npm의 always 로 실행하면 파일이 변경되거나 충돌시 자동으로 재시작
    (npm always : https://www.npmjs.com/package/always)

4. 웹 서버 테스트
 - 정해둔 포트번호로 로컬호스트 접속 http://localhost:3000/

5.HTML 페이지 띄우기
 - html 파일들이 위치할 폴더를 만들고 index.html 생성
 - 아래와 같이 main.js 코드를 수정
   
 - 세번째 줄은 서버가 읽을 수 있도록 HTML 위치 설정
   (앞에 "views"는 바꾸지말고 뒤에  __dirname + "폴더위치" 이 부분만 자신이 생성한 폴더명으로 변경)
 - 네번째, 다섯번째 줄은 서버가 HTML 렌더링을 할때 EJS 엔진을 사용하도록 설정
 - HTML 페이지 확인 http://localhost:3000/

6. 정적파일(Static files)
 - 정적파일이란 HTML에서 사용되는  js, css, image 파일을 말하며 서버에서 정적 파일을 다루기 위해선
    express.static() 메서드 사용
 - public/css 폴더 생성 후 안에 css 파일 생성
 - main.js 파일에 아래 코드 추가
   

 - css가 적용됨은 물론 js, css, image, html 등을 url로 접근하여 볼 수 있다.
   ( public 폴더에 html, js, css 파일 추가 후 http://localhost:3000/public/ 파일명 으로 접근해보자.)

! express를 쓰는 이유 
Node.js를 활용하여 웹 서버 구축 시 http 서버를 직접 구현해야하나 express는 웹 서버에서 필요한 기능
들이 이미 구현된 프레임워크로 라우딩, 세션 등 필요한 기능을 가져다 쓰기만 하면 됨.

! EJS 템플릿 엔진
템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈.
Express 에서 사용하는 인기있는 Jade 템플릿 엔진은 기존의 HTML에 비해 작성법이 완전 다른데,
그에 비해 EJS는 똑같은 HTML에서 <% %> 를 사용하여 서버의 데이터를 사용하거나 코드를 실행 할 수
있음.
(참조 : https://velopert.com/379)


참고 :
http://blog.rainheart.net/wordpress/?p=41
http://furtur3.blogspot.kr/2015/04/mac-nodejs-1.html
http://pyrasis.com/nodejs/nodejs-HOWTO
https://velopert.com/294


2017년 1월 17일 화요일

ES6 : Transpiler & Babel

Transpiler란?
compiler는 코드를 바이트 코드로 변환하지만, transpiler는 코드를 같은 레벨의 다른 언어로 변환

JS transpiler는 coffeescript, typescript, babel, traceur 가 있으며 이 중 coffeescript, typescript는 
고유의 문법을 JS로 변환하고, babel, traceur 는 JS 코드를 JS코드로 변환하는 transpiler.

ES6버전의 코드를 미지원 브라우저에서 구글에서 만든 babel 또는 traceur transpiler를 사용하면 
ES6코드들을 전부 ES5코드로 변환하기 때문에 현재까지 출시된 모든 '모던' 브라우저에서 동작.

Babel :
ES2015의 지원상태가 아주 좋기 때문에 주로 사용하며 Tool 마다 설치하는 방법은 공식문서를 참고.

참고 :
http://babeljs.io/docs/setup/#gulp
http://meetup.toast.com/posts/85
https://blog.outsider.ne.kr/1176

WebStorm 8 - ES6 설정

preference에서 다음과 같이 설정.

ECMAScript 와 ES6

ECMAScript(ES) 란?
"ECMAScript는 자바스크립트 프로그래밍 언어를 정의하는 국제 표준의 이름" 정도로 이해.

ES6는 ECMAScript 2015가 공식적인 이름이지만 ES6로 많이 사용된다. 현재 ES6로 개발하기에는
브라우저 지원 상황이 좋지 않아 몇 가지 도구를 활용해야 함. (Babel, Traceur 등)

ES6 호환성은 여기를 참조하길 바람. https://kangax.github.io/compat-table/es6/


참고 :
http://es6-features.org/#BlockScopedFunctions
https://cimfalab.github.io/deepscan/2016/07/ecmascript-6
https://gist.github.com/marocchino/841e2ff62f59f420f9d9
http://meetup.toast.com/posts/85


2017년 1월 15일 일요일

자바스크립트 기본 / 알고리즘 질문

참고 :
https://github.com/ggomaeng/awesome-js 

프로그래밍 언어별 딥러닝 라이브러리

'딥러닝' 이란?
사람의 개입이 필요한 기존의 지도 학습(supervised learning)에 보다 능동적인 비지도 학습(unsupervised)이 결합돼 컴퓨터가 마치 사람처럼 스스로 학습할 수 있는 인공지능 기술입니다. 
기술적으로 보면, 딥 러닝은 인공신경망(ANN, Artificial Neural Networks)에 기반한 일련의 기계 학습의
집합체로 컴퓨터에게 사람의 사고 방식을 가르치는 알고리즘이라고 할 수 있습니다.

JavaScript의 딥러닝 구현으로 사용되는 라이브러리는

ConvnetJS - 딥러닝 모델의 학습을 완전히 브라우저에서 할 수 있게 하는 자바스크립트 라이브러리.
                    ( 별도의 소프트웨어, 컴파일러, 설치, GPU 없이 쉽게 사용할 수 있다.)
RecurrentJS - RNN/LSTM을 구현한 Javascript 라이브러리


참고:
http://www.itworld.co.kr/news/90151
http://aikorea.org/blog/dl-libraries/

2017년 1월 5일 목요일

JavaScript : 숫자인지 글자인지 판별하기

주어진 값이 숫자인지 문자인지 판별해 보자.
JavaScript의 isNaN 함수는 어떤값이 숫자인지 판별하여 부울값으로 반환한다.

isNaN(value)

반환된 값이 true 이면 주어진 값은 숫자가 아님을 나타내고 false 면 숫자를 말한다.
여기서 중요한점은 컴마로 된 숫자도 false로 반환된다.

isNaN(100)     -> false
isNaN("100")  -> false


참고 :
https://msdn.microsoft.com/ko-kr/library/66ztdbe6(v=vs.94).aspx

2017년 1월 4일 수요일

JavaScript : 주어진 숫자가 홀수인지 짝수인지 판별하기

인자값으로 n이라는 숫자를 홀수인지 짝수인지 판별하는 방법은 
'%' 라는 연산자를 활용하여 나머지가 있느냐 없느냐로 짝수인지 홀수인지 판별할 수 있다.

  n%2 == 0 or n%2 === 1 
  나머지가 0 이면 짝수, 1이면 홀수

이것을 사용해서 짝수 일때는 숫자 1, 홀수 일때는 0 을 반환하는 메서드를 만들어보자.
예를들면 n = 5 이면 '01010' , n = 4 이면 '0101' 이런식으로 반환 (타입은 스트링)

1. repeat 함수 활용

   return "01". repeat(n/2) + (n%2 == 1 ? '0' : '1') 

이 repeat의 매개변수가 정수가 아닌 소수로 떨어지더라도 소수값을 제외한 정수값으로 글자를
반복하여 반환한다. repeat (3/2) 일경우 1번 반복함

2. for문과 연산자 활용

    for (var i=0; i<n ;i++){
        return += (i+1)%2 == 0 ? "1" : "0"
    }

굳이 삼항식이 아니여도 되지만 자주 써보는게 좋을듯하다.

참고 : 자바스크립트 repeat 함수
https://msdn.microsoft.com/ko-kr/library/dn858244(v=vs.94).aspx

2017년 1월 3일 화요일

CocoaPod Trunk에 있는 나의 라이브러리 삭제하기

실수로 푸쉬하거나 테스트용으로 등록된 라이브러리일 경우 버전별로 삭제할 수 있음 

터미널에서 'pod trunk delete 포트이름 버전' 입력


이작업을 하며 느낀건 여기서 삭제된 라이브러리는 다른사람들이 사용하지 않는 라이브러리라 삭제해도 
무관하겠지만 만약 많은 사람들이 사용하는 라이브러리라면.. 함부로 삭제하면 안될 듯

CocoaPods에 배포한 나의 라이브러리 사용하기

업데이트한 나의 라이브러리를 직접 사용해보자. 

1. 새로운 프로젝트를 생성 후 터미널로 해당 프로젝트 위치에서 podfile 생성 및 편집

 - CocoaPods 설정파일 생성 명령어 'pod init' 입력 
    (touch podfile 명령어도 있지만 빈문서에 새로 작성해야 함)
 -  podfile 편집 명령어 'open -e podfile' 입력 후 설치할 라이브러리 작성


 # Pods for 프로젝트 명 아래에 설치할 라이브러리를 작성





















 - 라이브러리 설치 명령어 입력 'pod install' (이미 있는 경우 'pod update')

2. 설치된 라이브러리 import 하여 사용
 - 모듈을 찾을수 없는 에러발생시 command + B 실행

직접 라이브러리를 import 하고 사용할려고 하니 에러가 여러번 발생했다. 모듈을 찾을 수 없거나 
알 수 없는 식별자라는 등.. 이 문제를 해결하기 위해 다른 라이브러리를 설치해보았다. 문제는 
내가 작성한 라이브러리 코드에서 발생했다. 이부분에 대해서는 다른 라이브러리 코드리뷰를 통해
개선해 나가야겠다.

CocoaPods 에 배포한 나의 라이브러리 업데이트

배포한 라이브러리에는 어떠한 기능도 넣지 않았으므로 테스트코드와 버전 등 업데이트 후
CocoaPod에 새로운 버전으로 배포하도록 하자

1. 라이브러리 테스트 코드 및 버전 변경
 - Pods > Development Pods > 라이브러리 명 > 라이브러리 명 > Classes 하위에 파일 생성
 - Log를 출력하는 함수를 작성 (public 으로 함수만 작성!)
 - 라이브러리 .podspec 파일에서 버전을 0.1.0 -> 0.2.0 수정
   (버전뿐만아니라 설명이나 추가적으로 다른부분을 수정해도 됨)

2. 업데이트한 라이브러리를 Git에 push

3. Git에서 Release Tag 생성
  - Git 저장소에서 Release 메뉴 선택 후 0.1.0으로 작성된 Release Tag에서 Edit 클릭하여 수정
  - 버전을 0.2.0 ( .podspec 파일에서 수정한 버전과 동일하게 작성)
  - Update Release 클릭

4. CocoaPods 에 업데이트 버전의 라이브러리 배포
  - 명령어 'pod trunk push spec파일이름' 입력하여 배포

JavaScript : 문자열을 숫자로 변경

JavaScript는 타입을 정의하지 않아도 알아서 적절한 타입을 지정함.
그래서 문자열을 숫자열로 타입변환시 편법이나 타입변환 함수를 사용할 수 있다.

1. 편법을 이용한 타입변환 (문자열에서 숫자)
  - 문자열에 숫자 1 을 곱하여 숫자타입으로 변환

2. 타입변환 함수 이용
   - 스트링을 숫자로 변환하는 Number() 함수
   - 숫자를 스트링으로 변환하는 String() 함수

이외에도 방법은 많다. 가끔 잊어버릴때가 있을 수 있으니 슬쩍슬쩍 봐두자!

참고 :
https://blog.outsider.ne.kr/361

2017년 1월 2일 월요일

JavaScript : 배열에서 글자 찾기

특정 글자를 배열에서 찾아 그 위치를 반환하는 문제

예 : 배열 A 에는 ["가", "나", "다"]의 글자를 있다.

방법 1. for 문과 if문 활용하여 특정 글자 위치값 가져오기
방법 2. indexOf 메서드 활용

알고리즘 문제를 풀다 나도 모르게 for문과 if문을 사용하면 되지! 라는 생각이 먼저 들었다.
대부분 문자열에서 특정글자를 찾을때 사용하는 indexOf 메서드이지만 배열에서도 사용할 수
있음을 알아두자.

참고:
http://www.w3schools.com/jsref/jsref_indexof.asp


iOS CocoaPods 라이브러리 생성 및 배포 (Public)

CocoaPods 에서 제공하는 라이프러리 프로젝트 템플릿을 활용하여 배포
배포에는 Pubilc (공개), Private(비공개)가 있으며 배포작업하기에 앞서 CocoaPods 설치 필수!

CocoaPods 라이브러리 배포(Pubilc)

1. 로컬에서 라이브러리 프로젝트 생성
 - 터미널에서 프로젝트 생성 할 위치로 이동하여 라이브러리 생성
 - 라이브러리 프로젝트 생성 명령어 pod lib create 라이브러리명 입력
 - 새 라이브러리 생성

생성 화면
   













    언어선택 (Swift / Objc)
    데모 앱 생성 여부
    테스트 프레임워크 사용여부
    View based 테스팅 여부

  - 라이브러리 프로젝트 생성완료 및  Convert 진행

2. 라이브러리 프로젝트 설정 변경
  - 설정 변경을 위해 Xcode 에서 .podspec 파일열기
  - 설정 변경하기 전에 .podspec 파일이 올바르게 작성되었는지 확인
    (생성된 라이브러리 프로젝트 폴더 내에서 명령어 입력 'pod lib lint')


 
   WARN | summary : 의미 없는 요약 정보로, 수정 하라는 메시지  - 원하는 요약 정보 입력
   WARN | url : 유효하지 않는 url이므로 수정하라는 메세지로 Git 저장소 url - 3에서 생성할 Git 저장소 URL 입력


  - 경고 및 에러에 해당하는 내용을 찾아 .podspec 수정한 후 다시 pod lib lint 명령어 입력
  - 검증 확인

3. Git 저장소에 라이브러리 프로젝트 업로드
  - Xcode Souce Control 메뉴 사용하여 Git저장소에 push

이제 Git 라이브러리를 모든 사용자들이 사용할 수 있도록 CocoaPods Trunk로 업로드!
새로운 또는 업데이트된 라이브러리를 CocoaPods에 업로드 할 경우 Trunk 등록과 유효한
Trunk 세션이 있어야 함

4. CocoaPod trunk 및 세션 생성
  - CocoaPod trunk 생성 명령어 입력
     pod trunk register 본인이메일계정 Trunk이름 --description='세션 identify 설명'
  - 작성한 이메일로 세션 확인 후 trunk 세션 생성되었는지 명령어 입력 'pod trunk me'

5. Git 저장소에서 release Tag 생성 및 CocoaPod trunk  배포
  - Git 저장소에서 release 메뉴 선택 Create a new release 클릭하여 버전 작성
  - 버전 작성시 .podspec 파일의 s.version 과 동일하게 작성
  - Description 에 배포할 내용 작성 후 Publish release 클릭
  - 작성한 Release 버전을 CocoaPod trunk에 배포 명령어 입력 'pod trunk push spec파일이름'

6. CocoaPod 에 배포된 라이브러리 확인
  - 업로드 완료 후 작성된 페이지로 접속하여 확인
 


참고 :
http://iw90.tistory.com/1
http://jepark-diary.tistory.com/13