.nvmrc를 통해 무엇을 할 수 있는가? 


.nvmrc는 NVM(node version manager)의 개별 프로젝트를 위한 설정 파일입니다.

.nvmrc를 통해 특정 프로젝트에 사용되는 버전을 기술 할 수 있으면 NVM을 이용해 프로젝트마다 상이할 수 있는 node version을 빠르게 전환 하도록 도와 줍니다.


.nvmrc 사용법 


1. .nvmrc 파일 생성 

echo "8.9.0" > .nvmrc 


*8.9.0 text는 사용하시는 버전으로 대치하여 사용하시면 됩니다.


2. 기술된 .node version 사용하기 


nvm use


+ 만약 기술된 node version이 설치가 되어 있지 않다면, 아래의 명령어를 통해 설치 할 수 있습니다. 자동으로 use 명령어가 호출 됩니다.


nvm install 




https://stackoverflow.com/a/47303840


* 이 글은 위의 링크를 요약 번역한 글입니다. 


application/x-www-form-urlencoded


Default Content Type으로써, 이 Content Type을 사용하는 Form은 아래와 같은 규칙을 따라 값을 Encoding 해서 전송해야 한다.


[RFC1837]에 기술된 reserved characters들 규칙에 따라 Escape해야 한다. 


application/x-www-form-urlencoded type message는 하나의 큰 query string 형태로 서버에 전송된다. 

name/value 짝은 &로 구분되고 이름과 value는 =로 구분된다. 


예시 : MyVariableOne=ValueOne&MyVariableTwo=ValueTwo


application/x-www-form-urlencoded 은 사이즈가 큰 binary data나 non-ASCII 를 포함한 text data를 보내기 부적합하며, 이런 경우에는 "multipart/form-data"를 사용해야 한다. 


multipart/form-data


Note. 하위호환성을 비롯한 "multipart/form-data"에 대한 추가적인 정보는 [RFC2388]을 참고 하시길 바란다.


"multipart/form-data"는 [RFC2045]에 규약된 MIME data stream Rule을 따른다.


"multipart/form-data" 메세지는 여러개의 파트로 나뉘어져 있으며, 파트안의 data stream 에는 boundray text 가 나타나서는 안된다.

모든 multipart MIME type의 각 파트들은 선택적으로 "Content-Type"을 가질 수 있으며, "text/plain"을 기본값으로 한다. 

User agent는 charset parameter를 포함하는 "Content-Type" header를 전달 해야 한다.

componentWillMount is deprecated.




React Native를 업그레이드 했더니, componentWillMount등이 deprecated 되었다는 메세지가 떴습니다.

공식 홈페이지에서 내용을 살펴 보니, 이번에 deprecated 된 lifecycle method목록은 다음과 같습니다. 


1. componentWillMount

2. componentWillReceiveProps

3. componentWillUpdate


공식 문서에 따르면 UNSAFE_componentWillMount로 이름을 바꿔서 사용할수 있다고 하지만, 16.x버전까지만 사용이 가능하며, 17버전 부터는 완전히 사용이 불가능하다고 합니다. 즉 UNSAFE_보다는 가이드 되는 Method들로 변경해주는것이 좋습니다.


Simulator 상에서 해당 Message를 클릭하면, 대응해서 사용할 수 있는 method를 안내 해주며, 각각 Method에 대응되는 Method는 아래와 같습니다.


1. componentWillMount -> componentDidMount

2. componentWillReceiveProps -> getDerivedStateFromProps

3. componentWillUpdate -> componentDidupdate



React Native 공식 문서 : 


https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html


Redux Thunk? https://github.com/gaearon/redux-thunk


Redux Thunk는 Redux Action Creator를 비동기(Async)으로 사용하게 해주는 Redux의 Middleware다.


Redux Action Creator를 생성할때는 아래와 같은 규칙을 반듯이 지켜야 한다.


Action creator는 Function 이어야 한다

 Action creator는 action(type property를 가지는 object)을 Return 해야한다.


Redux Thunk를 사용하면 여기에 한가지 규칙을 더 추가하여 Action creator를 작성 할 수 있다.


  Action creator는 Function 이어야 한다

  Action creator는 action(type property를 가지는 object)을 Return 해야한다.

 + Action Creator는 함수를 Return 할 수 있으며 'dispatch' argument와 함께 호출된다.


즉, Redux Thunk를 이용하면, action creator가 호출될때, API 호출등의 비동기적인 작업을 수행하고, 그 결과를 dispatch를 통해 전달 할수 있게 된다.



1. Redux Thunk 설치


npm install --save redux-thunk


2. Redux Thunk Middleware 적용하기.


import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);


3.Redux Thunk의 사용 


function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}


React.js (http://facebook.github.io/react/)

: Facebook, Instagram 에서 사용하는 View Library. Data binding 이 가능하고, Light-Weight 로 강력한 성능을 자랑합니다.

요녀석 한번 써보겠다고, 삽질 좀 했네요 ;ㅂ; 여차저차 세팅을 완료 하긴 했는데, 썩 만족스럽지는 않습니다 ㅠㅠ


JSX 지원.

React.js 에서는 Human-Readable 한 코드 작성을 위해 JSX 란 문법을 지원합니다. 이놈이 문젭니다 ㅠㅠ

Developing 중에는 JSXTransformer.js 를 통해서 실시간 Compiling 을 하는데요, Production 에서는 pre-complie 후에 배포 하길 권고 합니다. 


여기서 Dev와Production간의 설정이 달라집니다. 


1. JSXTranformer.js 를 include 해줘야함. 

2. 개발에는 JSX 파일, Production 에는 JS파일을 include해야함.

2-1 script path가 달라짐

2-2 include 시에 JSX 는 type="text/jsx", JS는 type="javascript"가 되어야함.

3. Package 시에 시에 JSX -> JS compile을 해줘야함.


자 그럼 하나씩 해결해볼까요 ㅠㅠㅠ


1. JSXTranformer.js 를 include 해줘야함.

maven-resource-plugin과 property configure를 통해 include 여부 결정

jsp 는 template engine (tiles)를 통해 골격을 관리하고 있기 때문에 base template에서만 들어 있으니 쉽게 해결. 


2-1 script path가 달라짐

2-2 include 시에 JSX 는 type="text/jsx", JS는 type="javascript"가 되어야함.

[1]번 과 같은 방법으로 해결하고자 했으나, 해당 코드는 base template 에서 사용되는게 아니라 화면별로 들어 가야 되서 삶이 고달파짐 ㅠㅠ

maven-resource-plugin 과 property 를 통해 DEV/PRODUCT을 분기 하고, custom taglib를 통해서 코드 생성토록 함. 


3 Package시에 JSX -> JS compile

Facebook에서 제공하는 jsx command 를 maven exec plugin 으로 실행하도록 함. 

bds 에서 build 할때 goal 을 clean package -> clean exec:exec package으로 변경하여 deploy 하도록함. 

* 이부분이 특히 마음에 안듬 ㅠㅠ






https://github.com/medialize/URI.js


개발하다보면 URL 을 조작해야 하는 일이 많죠. 예를 들명 paging 처리라던가, 등등등

이럴때 Javascript String Function 을 활용해서 개발하는 경우에는

요청 URL 에 원래 parameter가 있는지 여부에 따라 stringconcat 시 '?' 과 '&' 을 써야 하고, 

기존에 이미 있는 parameter를 새로 세팅 해줘야 하는 경우 인생이 고달파 집니다 ㅠ


URI.js 라는 고마운 녀석을 주로 쓰는 편입니다. 


1. window.location.href 

 

제가 Front-End 에 대한 경험이 부족한데, 현재 요청 URL을 가져올때 보통 저것을 사용하는데, 

URI.js 소개 페이지에 따르면 해당 Object 가 FireFox 에서 호환성 문제를 내는 경우가 있다고 합니다.

고맙게도 new URI() 를 불러주면 알아서 요청 URL을 가진 Object 가 생성됩니다.


2. new URI().addQuery('foo','bar')


말그대로 URI parameter 를 add 해줍니다.
이함수는 기존에 foo 라는 Parameter key 가 있는 경우에 delete 를 하지 않기 때문에 주의 해서 사용해야 합니다.


2. new URI().setQuery('foo','bar')

이 함수는 기존에 foo 라는 Parameter Key 가 있는 경우 delete 한 후에 add 하게 됩니다. 


일단 이정도만 알고 써도 인생이 상당히 편해지겠군요 ㅎ


setHasOptionsMenu 가 onActivityCreated method 에서 호출되었는지 확인한다. 

ListView 의 addFooterView 를 호출한후에 setAdapter 를 호출해야한다.

> git clean -f 


디렉토리가 있는 경우에는 

> git clean -fd


git push #REMOTE --delete #BRANCH


> 덤으로 LOCAL branch 삭제는 아래와 같다.

git branch -d #BRANCH


+ Recent posts