nodemon 사용해보기 노드 js를 사용하면서 코드를 고칠때 마다 서버를 끄고 다시 켜는 매우 불편한 행동을 한적이 있었다. 너무 귀찮아져서 다른 방법을 찾아보니 nodemon이라는 것을 통해서 코드가 수정될때 마다 서버를 다시 껐다 켜주는 행동을 할 수 있었습니다. 그래서 이와 같은 것을 사용해주기 위해선 yarn, npm을 통해서 yarn global add nodemon npm install --global nodemon 처음 global을 통해서 설치 후 다음에 다시 사용할 수 있다. 전역에 사용할 수 있도록 해주는 명령어이다. 그리고 package.json에 { "name": "firstGraphQL", "version": "1.0.0", "description": "MovieAPI with ..

LifleCycle2 전시간에는 라이프 사이클에는 무엇이 있나 알아보았고 이번에는 실제로 코드로 활용해보겠다. 컴포넌트 처음생성 constructor(props) 이건 뷰를 만들 때 처음실행되는 코드인데 사용법은 constructor(props){ super(props); }props를 인자로 받아서 실행되며 상속하고 있는 Compoment에 super와 함께 props를 전달해준다. 밑에는 자기가 작성하고 싶은 코드를 마음대로 작성하면 된다. componentDidMount이건 컴포넌트가 만들어진 후에 호출되는 함수이다. 이함수는 주로 외부라이브러리랑 연결하거나 필요한 데이터를 요청하기 위해 ajax, DOM의 속성등을 읽는다. 당연하게 constructor뒤에 사용된다. componentDidMoun..

React.js 6편 LifeCycle1 웹페이지가 호출될 때 업데이트될 때 사라질 때 각 그 순간 사이사이에 자기가 함수를 넣어서 어떠한 작업을 하고싶을 때 사용하면 좋다. 라이프 사이클 실행형태 아래와같은 형태로 lifeCycle이 실행된다. 각종 초반 설정등을 해주고 웹페이지가 처음실행될 때 Mountingstate나 props등의 변화가 필요할때는 updating 사라질때는 Unmounting이라고한다. 각함수의 역활등에 대해서 설명해보겠다. Mounting1. Constructor 제일 처음 실행되는 함수이며 state나 기본 설정을 할 수 있다. 2. getDerivedStateFromProps입력받은 Props를 state에 동기화하고 싶을 때 사용한다. 3. render 어떤 돔, 태그를 ..

React.js state 이번에는 state라는 것을 사용해보겠다. state는 props와 달리 component내부에 가지고 있는 값이다. 값이 변화가 필요할때 다시 Rerendering해주며 변화가 필요한 데이터를 바꾸어 주는 역활을 한다. 그럼 이제부터 사용해보겠습니다. 우선 이렇게 JSX코드를 작성해봅니다. render(){ return Counter 값: {this.state.number} + - } 그럼 이런식으로 웹페이지가 만들어졌을 겁니다. 그럼 버튼이 작동하게 State를 작동시켜 봅시다. 우선 클래스안에 state 객체하나를 만들어 줍시다. 1. state객체 생성 state = { number: 0 }그리고 div안에 {this.state.number}같이 호출할 수 있습니다. 2..

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정보를 입력합니다..