좌충우돌 개발

2018-04-25 여러개의 node 설치

|

mac에서 node를 패키지를 다운받아 설치하게 되면 -g로 설치시 관리자 권한을 요구한다.
npm을 통한 설치시 관리자 권한을 요구하는 것은 보안상 추천하지 않는다

nvm을 통해서 node를 설치하고 node를 버전별 선택이 가능하다
node를 설치하게 되면 자동으로 npm이 설치가 된다.
이후 npm을 통해 설치되는 모듈들은 선택된 node하위에 설치됨으로 sudo 권한이 필요하지 않다


  1. nvm으로 설치하기 되면 sudo 권한을 필요로 하지 않는다
  2. https://johnpapa.net/node-and-npm-without-sudo/

nvm으로 node를 재설치 하기로 결정


  1. node 제거
    brew 설치시 : brew uninstall node
$ sudo rm /usr/local/bin/npm
$ sudo rm /usr/local/share/man/man1/node.1
$ sudo rm /usr/local/lib/dtrace/node.d
$ sudo rm -rf ~/.npm
$ sudo rm -rf ~/.node-gyp
$ sudo rm /opt/local/bin/node
$ sudo rm /opt/local/include/node
$ sudo rm -rf /opt/local/lib/node_modules
  1. node 재설치
    • nvm 설치 : 참고사이트
       $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash
      
  • node 설치 위치 확인 : nvm which node
  • .profile : 경로 설정
    ``` export NVM_DIR=”/Users/사용자이름/.nvm” [ -s “$NVM_DIR/nvm.sh” ] && . “$NVM_DIR/nvm.sh” # This loads nvm

export PATH=”/Users/사용자이름/.nvm/versions/node/v10.0.0/bin:$PATH” ```

yarn 재설치

  • yarn 설치 : brew install yarn --without-node
  • react 테스트

2018-04-24 VSCode

|

VSCode (Visual Studio Code)

  • 코드 정렬 방법 : command + k + f (k를 먼저 누르고 f를 누른다)

  • 다중 커서 : command + alt + 방향키(위, 아래)

2018-04-23 jekyll 문제해결

|

문제 발생 : brew update를 실행하며 ruby가 업그레이드 하면서 jekyll serve 시 에러 발생

usr/local/Cellar/ruby/2.5.1/lib/ruby/2.5.0/rubygems.rb:289:in `find_spec_for_exe': can't find gem jekyll (>= 0.a) with executable jekyll (Gem::GemNotFoundException)

추측 : ruby 버전이 달라지면서 기존 gem파일 찾지 못해 jekyll에 에러가 발생 한것으로 추측

해결 과정:

  1. jekyll를 삭제 한후 재설치
  2. gem install jekyll 를 통하여 설치를 하였으나 directory permission에러가 발생
  3. 맥에서는 기본적으로 ruby가 설치되나 이것이 root 권한으로 설치되어 있어 문제가 발생시킬 수 있다고 함
  4. stackoverlfow에서는 rbenv를 통해서 ruby를 샌드박스에 설치하고 관리할 것을 추천
  5. rbenv를 설치
       $ brew update
       $ brew install rbenv
    
  6. rbenv에 ruby 최초 설치
       $ rbenv install -l
       ## 설치가능한 ruby버전리스트 출력
       rbenv install 2.5.0 && rbenv rehash
       $ rbenv global 2.5.0
    
  7. rbenv에 ruby 새로운 버전을 설치
       $ brew upgrade ruby-build
       $ rbenv install -l
       ## 설치가능한 ruby버전리스트 출력
       rbenv install 2.6.0 && rbenv rehash
       $ rbenv global 2.6.0
    
  8. 하지만 여전히 permission문제가 발생
  9. rbenv init 초기화 하고 .profile 파일에 eval “$(rbenv init -)”를 추가해줌.
    문제해결 참고
   $ rbenv init
   # Load rbenv automatically by appending
   # the following to ~/.bash_profile:

   eval "$(rbenv init -)"

brew: 맥용 라이브러리 관리 프로그램 ruby로 작성
gem : ruby용 라이브러리 관리 프로그램

react-1

|

HTML : 정보와 link를 통한 정보와 정보의 연결
CSS : 정보의 표현을 아름답게 표현
javascript : 사용자의 행동에 따라 동적으로 정보를 표현하도록 한다

과거에는 동적은 정보를 표현하기 위하여 서버측에서 HTML 코드를 생산하여 웹브라우저로 보냈다
하지만 현재는 SPA(Single Page application)을 만들어서 더 이상 서버측에서 동적인 페이지를 만들지 않고 json을 통하여 정보만을 제공 하고 클라이언트에서는 해당 정보를 받아 동적으로 정보를 표현 한다

JavaScript framework : 이제 클라이언트(웹브라우저)에서 javascript가 해야하는 일이 많아 졌다. 코드는 점차 더 커지고 더 많은 일을 해야 하게 되었다. 서버의 프레임워크처럼 이제 프론트엔드단에서도 패턴을 정형화 시킨 프레임워크가 나타나게 되었다.

REACT의 잠점

  1. Just javascript
  2. composition
  3. undirectional dataflow
  4. virtual dom

브라우저의 동작
wbwsprocess

webpack

  • JavaScript의 모듈화 시스템을 지원하기 위해 필요
  • javascript로 모듈 파일을 만들면 webpack에서 컴파일하여 브라우저에서 동작할수 있는 형태로 바꿔준다
  • 엔트리 파일을 시작으로 의존관계가 있는 모듈을 합쳐서 하나의 번들파일로 만든다

create react app

create react app : 기본적인 react 앱을 만들 수 있도록 도와준다. nodeJs를 사용하여 서버역할을 한다

npm 설치 모듈 확인 방법

$ npm ls -g --depth=0
$ npm install -g create-react-app

$ create-react-app movie_app
$ cd my_movie
$ yarn start

2. 컴포넌트 그리고 Props

component - > render -> return -> JSX

Component는 상태정보가 필요하다면 class로 만들고 상태정보가 필요하지 않다면 dump component 만든다
Component를 외부에서 사용하려면 export를 꼭 해줘야 한다
export default : 이름 하나만 노출 시킬때 사용한다

props와 state

부모component에서 자식에게 데이터를 전달하는 방식 : 태그에 전달할 데이터의 이름을 지정하고 객체를 할당한다
자식 component에서는 this.props.데이터이름을 통하여 값을 전달 받는다

<자식 객체 전달 데이터 이름 ={} />  

Array map 사용법

prop-type : 부모 컴포넌트에서 받는 data의 type을 체크할수 있다
설치해야 한다

$ yarn add prop-types
static propTypes = {
    title :  PropTypes.string.isRequired,
    poster : PropTypes.string.isRequired

}

function Dumy() {
  ...
  ...
}

Dumy.propTypes = {
  title: PropTypes.string.isRequired
}

3. 컴포넌트 Lifecycle

component life cycle

  • Render
    1. componentWillMount()
    2. render()
    3. componentDidMount()
  • update
    1. componentWillReceiveProps()
    2. shouldComponentUpdate()
    3. componentWillUpdate()
    4. render()
    5. componentDidUpdate()

    component의 상태가 변경될 때마다 render된다

4. State

state

  • this.state : 상태 접근 방법
  • setState({}) : 상태 변경 방법

    infinite scroll

    …this.state.xxxx 이전의 xxx를 가지고 온다

arrow functions

setTimeout(callback function, interval time)

5. Stateless Functional Components (Dump component)

단순히 props만 사용하고 state가 필요없는 component는 stateless function으로 변경 가능 하다
Movie component , MoviePoster component = > stateless function으로 변경
props 값들을 넘길 때 function({param1, param2}) 와 같이 객체로 넘겨야 한다

6. AJAX

fetch request

fethc(url).then(reuslt=>result.json())
          .then(json=> json.... /*json 파싱후 가져올 데이터*/)
          .catch(error=>{console.log})

6-2. Promises

fetch(url).then(/*응답처리*/).catch(/*에외 처리 */)

6-3. Async Await in React

async : 비동기 function 해당 작업이 완료될 때 까지 기다리지 않고 다른 작업을 진행 한다
await : 작업이 완료될 때 까지 기다리다 작업이 완료되면 await 뒤의 fucntion을 실행 한다

async를 붙인 함수에서 return 하게 되면 해당 값은 json이 아닌 Promises로 변경된다.
async를 붙인 함수에서 await를 붙인 callback함수에서 받은 값을 리턴하지 않고 작업을 하게 되면 json으로 된다

async-await : 더 찾아봐야할거 같다

getMOves = async () => {
   await _callApi ();
}

function을 여러개로 작개 나누어 callback hell에 빠지지 않도록 한다.

7-2. Giving some CSS

DON’T install react-lines-ellipsis with NPM.
사용 목적: 긴 text를 줄여서 표시 한다

설치

$ yarn add react-lines-ellipsis

사용

import LinesEllipsis from 'react-lines-ellipsis'

<LinesEllipsis
  text='long long text'
  maxLine='3'
  ellipsis='...'
  trimRight
  basedOn='letters'
/>

8. build 및 배포 : github page

8-1. 빌드

빌드를 하면 코드가 최적화 되며 동시에 하나의 js파일로 합쳐진다.
결국 정적인 페이지에 동적인 동작은 JavaScript를 통해서 이루어 진다
코드 생산성을 높이기 위해 JavaScript framework가 등장 했다

$ yarn build

package.json 수정 : 아래 항목 추가

"homepage": "http://myname.github.io/myapp"   
$ yarn build

package.json 수정 : 아래 항목 추가

    // ...
    "scripts": {
      // ...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }

8-2. 배포

$ yarn run deploy

PWA (progressive web application)

JVM과 C비교

|

JVM(Hotspot JVM)

  • VMC (virtual machine) : 런타임
  • JIT (Just In time) : 컴파일러
  • 메모리 관리자

JIT

  1. JAVA code를 컴파일 하면 bytecode(.class) 파일로 변환 된다.
  2. bytecode를 JVM에서는 읽어 들이고 interpre로 처리하여 기계가 이해할 수 있도록 한다.
  3. bytecode를 실시간으로 처리하게되면 속도가 느려 JIT(Just In Time)에서 가중치(자주 호출되거나 비용이 비싼)가 높은 method를 중심으로 기계어코드로 번역해서 번역된 기계어코드를 JVM의 code cache영역에 저장해 놓음으로써 처리 속도를 높인다.
  4. JIT에서 컴파일 할 때 코드 최적화도 이루어 진다.
  • JVM은 kotlin이나 scala로 만들어진 bytecode 또한 실행 할 수 있다.
  • JVM 자체적으로 하드웨어를 실행 시킬수 없으므로 JNI를 통하여 native code를 실행 시킨다.
  • JNI (Java Native Interface) : java code와 native 프로그램(운영체제 하드웨어제어), 다른 (c, c++, 어셈블러)와 호출하거나 호출되게 하는 interface

C 의 경우
소스 코드 -> complie -> Object 파일 -> linker를 통해 linking -> 실행파일 생성

  • compile단계에서 코드 최적화가 된다.
  • Object 파일을 사용하는 이유 : 업무 분업 및 소스코드를 제외한 배포, 컴파일 속도 향상
  • 직접 메모리를 관리한다.
  • OS 종속적이다.

java 의 경우
소스 코드 -> compile -> bytecode(class파일) -> JVM -> interprete 로 실행되거나 JIT을 통해서 기계코드로 compile 되어 실행

  • JVM내의 JIT 단계에서 코드최적화가 된다.
  • bytecode를 사용하는 이유 : 다양한 환경에서 동일한 코드를 사용하여 구동
  • JVM내의 GC에서 메모리를 관리한다. 하지만 최적화를 위해서 메모리 구조를 알아야 한다
  • OS의 특성을 타지 않는다. 동일한 코드로 윈도우나 linux에 배포할 수 있다