React.js Props 필자는 동영상 강의를 듣고 있는데 강의하는 사람이 무척무척 중요한 개념이라고 한다. Props가 먼지 알아보자!!props는 부모의 값을 자식에게 전달해서 알려주는 것이다. 이제 사용법을 알아보자 class MyName extends Component{ render(){ return 지금 공부하고 있는 기술은 {this.props.name}이야 }} 여기서 보이는 this.props.name을 받아오는 방법이 세개정도 있다. 1. 이 파일을 호출하는 곳에 값을 넣기 APP.JS를 한번 보자. 여기서 MyName이라고 호출하고 있는데 MyName안에 name = "react.js"라고 적어주면 된다. class App extends Component { render() { ret..

React.js css사용해보기 이번에는 react.js를 통해 css효과를 줘보겠다. 방법 1. 변수에 넣어서 사용하기 render() { const style = { backgroundColor : "blue", color :"white", fontSize : "64px", } return hi i am React.Js } 아래와 같이 reder안에 style이라는 변수를 선언해주고 변수안에 css정보를 json형태로 나타낸 후 저번시간에 배운 {}안에 변수를 넣어주면 실행이 된다. 그리고 폰트사이즈와 같은 곳에는 숫자를 더해주며 값을 표현할 수 있다. 방법 2. CSS파일에 넣어서 사용하기 우선 사진과 같이 옆에 css파일을 하나 만들어줍니다. 그런뒤 저파일안에 자기가 원하는 css정보를 입력합니다..

React.js JSX JSX는 html코드랑 비슷해 보이지만 사실은 자바스크립트 코드로 바꾸어 주어서 실행합니다. 일반 html이랑 사용법은 비슷하지만 몇가지 규칙이 있습니다. 지금 부터 그 규칙을 알아봅시다. 여기서 실행은 https://bit.ly/beginreact 이사이트를 이용하면 된다. 단순히 문법만을 설명하고 있습니다. 그리고 ES6의 문법으로 작성됩니다. 1. 무조건 닫힘 기호가 있어야 합니다. ex) 원래는

React.js 1편 react.js는 페이스북에서 개발한 웹프론트에 이용할 수 있는 라이브러리이다. 프론트에 이용할 수 있는 라이브러리는 vue, angular, backbone 등등이 있다. 이중에서 뭐가 제일 좋냐고 물어본다면 자기가 가장 잘 쓰는 라이브러리가 가장 좋다고 생각한다. 따라서 뭐가 좋고 뭐가 안좋고 그런건 없는거다. 모든 언어나 기술이 똑같지만 개발한 사람들의 생각 무엇 때문에 이것을 만들었는지를 잘생각하면서 사용하면 좋겠다. 그러면 react의 개발 목적을 말하자면 단순히 웹페이지에 변화만 있다면 데이터를 바꿔주지 말고 뷰를 버리고 새로 만드는게 어떨까라는 아이디어에서 시작한 라이브러리라고 한다. 하지만 뷰화면을 버리고 새로운 화면을 다시 보여주는건 -> 성능상 문제가 생긴다. 그래..

promise 요즘 nosql과 nodejs등에서 자바스크립트가 중요하게 사용되고 있다. 그러면서 비동기식의 기능을 제공하는 Promise에 대해 정확히 알고 쓰면 좋지 않을 까 하고 글을 적어본다. 여러분은 이코드들이 어떻게 다른지 알고 있다면 이걸 볼 필요가 없다. 1.function f() { return "sanghoon"; } function f1(name) { return "hi "+name; } Promise.resolve(f()).then(f1).then(result => { console.log(result); });resolve에서 확실히 값이 호출된 후 f1으로 전달된다. then에는 함수형태만을 전해줄 수 있기때문에 적절한 코드이다. 2.function f() { return "sa..

[ES6]자바스크립트 ES6 Iterators + for....of for of문은 일반적으로 String, map, Uint8, Array, Set등에서 반복가능한 오브젝트들을 반복 시킬 때 사용했다. 하지만 예시와 같은 것들이 아니 더라도 우리가 직접 [Symbol.Iterators]를 만들어줘서 사용할 수 있다. let fibonacci = { [Symbol.iterator](){ let val = 0, nextVal=1; return{ next(){ [val, nextVal] = [nextVal, val+nextVal]; return {done:false, value:nextVal}; } } } }; for (i of fibonacci){ if (i>1000) break; console.log(i..