반응형

npm 업데이트

npm install -g npm


npm 으로 설치한 글로벌 패키지 목록

npm list -g --depth=0


npm 으로 설치한 글로벌 패키지 업데이트

npm update -g


npm 으로 설치한 글로벌 패키지 삭제

npm uninstall -g [패키지명]


npm 최신 버전으로 업데이트

npm install -g npm


추후에.. 또 필요한게 있으면 추가 해야겠다...

728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[React] edX - Introduction to ReactJS Module2 내용정리  (0) 2018.05.30
edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
npm install --save --save-dev  (0) 2017.05.30
map() 메소드 사용  (0) 2017.01.16
React 에서 props 사용  (0) 2017.01.09
반응형

맨날 붙여넣기만 하다가 오늘은 갑자기 의문이 들었다.

npm install --save 하고 --save-dev가 대체 뭔 차이지? 잘 안쓰고 맨날 찾아서 붙여넣기만 하니 알리가 있나..


그래서 찾아봤다. 구글 검색을 해보니 아래와 같은 글이 있었다.


https://www.linkedin.com/pulse/npm-dependencies-vs-devdependencies-daniel-tonon


내가 쓴 내용은 위에 링크의 글을 일부 번역한 글이다. 


npm install module --save 

 

특정 A 모듈을 Install 할 때 --save 옵션을 넣으면 package.json 에 dependencies 목록에 포함된다. Dependencies 목록에 있다는 것은 현재 npm 모듈이 A 모듈 없이는 사용할 수 없다는 뜻이다. 즉, A 모듈 없이는 동작하지 않는다.

 

npm install module --save-dev 


특정 A 모듈을 Install 할 때 --save-dev 옵션을 넣으면 package.json 에 devDependencies 목록에 포함된다. 이건 현재 npm 모듈은 A 모듈과는 dependency가 없지만 개발 환경에는 연관성이 있다는 뜻이다. 

 


 

npm 으로 퍼블리싱을 할 경우

npm 모듈이 동작하는데 필요한 모듈이라면 --save 플래그를 사용하고 모듈 동작에는 필요 없지만 테스트에 필요하다면 --save-dev 플래그를 사용한다.

 

NPM으로 퍼블리싱을 안할경우

상관할 필요는 없지만 작성한 소스코드에 영향을 주는 모듈은 --save, 컴파일러가 작동하는데 필요한 모듈은 --save-dev 플래그를 사용한다.


728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

edX - Introduction to ReactJS Module1 내용정리  (0) 2018.04.18
[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
map() 메소드 사용  (0) 2017.01.16
React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
반응형

React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 


최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 


아래와 같은 contractData 라는 state를 저장해 놓는다. 


1
2
3
4
5
6
7
8
9
10
11
12
    constructor(props){
        super(props);
 
        this.state={
            contactData:[
                {name:"Abet", phone:"010-0000-0001"},
                {name:"Betty", phone:"010-0000-0002"},
                {name:"Charlie", phone:"010-0000-0003"},
                {name:"David", phone:"010-0000-0004"}
            ]
        };
    }
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
render(){
        return(
            <div>
                <h1>Contacts</h1>
                <ul>
                    {/*
                    <ContactInfo name="Abet" phone="010-0000-0001"/>
                    <ContactInfo name="Betty" phone="010-0000-0002"/>
                    <ContactInfo name="Charlie" phone="010-0000-0003"/>
                    <ContactInfo name="David" phone="010-0000-0004"/>
                    */}
                    {this.state.contactData.map((contact, i) => {
                        return (
                            <ContactInfo name={contact.name} phone={contact.phone} key={i} />
                        );
 
                    })}
                </ul>
            </div>
        );
    }
cs


위 코드에서 주석을 친 부분은 map() 메소드를 사용하기 전의 코드이다. 


그 아래 부분이 위에서 정의한 state를 사용해서 가져오는 부분이다.


최근에 자바에서 사용하는 stream 관련된 내용을 봐서 그런지 그렇게 낯설지는 않다. 실제로 짤수 있을지는 잘 모르겠지만...


말 그대로 contactData 있는 내용을 contact로 하나씩 받아서 contractInfo의 내용을 채워 넣고 있다. 



출처 : https://velopert.com/957


728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

[npm] 왠지 자주 쓸것 같은 npm 명령어  (0) 2018.04.17
npm install --save --save-dev  (0) 2017.05.30
React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
반응형

props 는 컴포넌트에서 사용할 데이터중 변하지 않는 데이터를 다룰때 사용한다. 


Parent 컴포넌트에서 child 컴포넌트로 데이터를 전달할 때 props를 사용한다. 


컴포넌트의 render() 메소드 내부에 {this.props.propsName} 형태로 넣고 컴포넌트에서 사용할 때에는 <> 안에 propsName='value' 형태로 값을 설정 한다. 


- render() 메소드 내부


1
2
3
4
5
6
7
8
9
10
11
12
13
class App extends React.Component {
    render(){
 
        let text = "Hello HI";
 
        return (
            <div>
                <Header title={this.props.headerTitle}/>
                <Content title={this.props.contentTitle} body={this.props.contentBody}/>
            </div>
        );
    }
}
cs


- 컴포넌트


1
2
3
4
ReactDOM.render(<App headerTitle="Welcome"
                    contentTitle="Stranger"
                    contentBody="welcome to ex App"/>
                    , rootElement);
cs



- Default 값 사용시에는 App 내부에 className.defaultProps={propsName:value} 로 설정해주면 된다. 


1
2
3
4
5
6
App.defaultProps={
    headerTitle:'Default header',
    contentTitle: 'Default contentTitle',
    contentBody: 'Default contentBody'
};
 
cs


- propType 지정


1
2
3
4
Content.propType={
    title: React.PropTypes.string,
    body: React.PropTypes.string.isRequired
};
cs


title 과 body 를 모두 string으로 지정하고 body 는 필수로 설정한다. 필수 지정일경우 값이 없으면 오류가 난다.




<이 문서에 작성된 소스는 https://velopert.com 에 게시된 소스 입니다. >


----------------------------------------------------------------------------------------------------------------


추가.


React 에서는 단방향 흐름을 강조하는 것 같다. 그래서 props는 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터이며, 또한 이것을 하위 컴포넌트에서 변경되는것은 권장하지 않는것 같다...



728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

npm install --save --save-dev  (0) 2017.05.30
map() 메소드 사용  (0) 2017.01.16
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
jquery radio button 속성 설정  (0) 2013.09.04
반응형

- React는 UI를 만들기 위한 라이브러리이다. framework 가 아니다. 


- React는 Virtual DOM 을 사용한다. 그래서 Virtual DOM의 전후 상태를 비교해서 변경된 부분만 새로 반영한다. 


- 현재 facebook 에서 라이브러리 관리를 하고 있어서 한동안 없어질 일은 없다. 


https://facebook.github.io/react/






728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

map() 메소드 사용  (0) 2017.01.16
React 에서 props 사용  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
jquery radio button 속성 설정  (0) 2013.09.04
JavaScript 객체 변환 toJSON  (0) 2013.05.10
반응형

react 공부하려고 찾아보다가 http://velopert.com/ 라는 사이트를 우연히 찾게 되었다.

내용도 좋고 해서 이 분의 블로그 내용을 한번 따라해보려고 mac 에 환경 설정을 해보았다.

먼저 node.js 를 설치해야 해서 찾아봤는데.. 초 간단..




먼저 node.js  사이트에 가서 파일을 다운 받는다.



그리고 클릭, 클릭, 클릭



그리고 설치 완료..



터미널 창에서 npm 쳤을때 help 명령어들 나오면 정상설치다..


728x90
반응형
저작자표시 비영리 변경금지

'Development > Frontend skills' 카테고리의 다른 글

React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
jquery radio button 속성 설정  (0) 2013.09.04
JavaScript 객체 변환 toJSON  (0) 2013.05.10
JavaScript var Scope  (0) 2013.03.15
반응형

jquery에서 라디오 버튼에 대한 속성 설정시

<input type="radio"  id="myRadioY" name="myRadio" value="Y" />

1. 버튼에 대한 체크 해제 하고 싶을때

$('input[name=myRadio]').removeAttr("checked"); 


728x90
반응형

'Development > Frontend skills' 카테고리의 다른 글

React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
JavaScript 객체 변환 toJSON  (0) 2013.05.10
JavaScript var Scope  (0) 2013.03.15
반응형

javascript 객체를 JSON 객체로 변환하는 함수.

JSON.parse() : JSON 형태 문자열을 자바스크립트 객체로 변환

JSON.stringify() : 자바스크립트 객체를 JSON 형슥으로 변환

  1. <script type="text/javascript">
  2.     var obj = {
  3.         name : "TEST",
  4.         gender : "Male"
  5.     };
  6.     console.log(obj);
  7.     console.log(JSON.stringify(obj));
  8.  
  9.     var date = new Date();
  10.  
  11.     console.log(date);
  12.     console.log(date.toJSON());
  13.     console.log(JSON.stringify(date));
  14.     console.log(JSON.stringify(date.toJSON()));
  15. </script>

결과값

Object {name: "TEST", gender: "Male"} test.html:10
{"name":"TEST","gender":"Male"} test.html:11
Fri May 10 2013 08:59:51 GMT+0900 (대한민국 표준시) test.html:15
2013-05-09T23:59:51.036Z test.html:16
"2013-05-09T23:59:51.036Z" test.html:17
"2013-05-09T23:59:51.036Z"

정말 요즘 javascript, jquery때문에 헷갈려 죽겠다. ㅠㅠ

728x90
반응형

'Development > Frontend skills' 카테고리의 다른 글

React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
jquery radio button 속성 설정  (0) 2013.09.04
JavaScript var Scope  (0) 2013.03.15
반응형

자바 스크립트를 보다보면 편리하다는 느낌이 들긴 하는데 한편으로는 멘붕이 오기도 한다. -_-;;

정의를 안해도 그냥 가져다 쓰면 되고.. 

파라메터리 변수, 함수 등을 맘대로 넘기고.. 참... 편리한건지.. 난장판인건지....

아래 소스를 보게 되면.. 같은 이름의 변수들이 계속 정의된다. -_-;;;

허용이 되긴 하지만.. 저렇게 사용하지 말아야지.. 라는 생각이 든다. 


728x90
반응형

'Development > Frontend skills' 카테고리의 다른 글

React 에서 props 사용  (0) 2017.01.09
React.. 끄적끄적.  (0) 2017.01.09
Mac 에서 Node.js 설치  (0) 2017.01.05
jquery radio button 속성 설정  (0) 2013.09.04
JavaScript 객체 변환 toJSON  (0) 2013.05.10

+ Recent posts

티스토리툴바