오늘도 난 존버한다

이번엔 WEB의 mode를 read로 바꾸고 클릭한 contents가 아래 본문에 나오게 해보자 먼저 contents를 부르는 TOC에 onChangePage 함수를 넣어주자 TOC.js 파일로 들어가서 HTML, CSS, JavaScript 각각의 목록에 해당되는 부분을 찾아준다 이를 줄바꿈을 해주고 onClick함수를 넣어준다이때 e.preventDefault를 넣어주고 + bind(this),   App.js의 TOC에도 TOC.js 함수를 받을 수 있게 처리해준다.이 때 alert를 넣어 실행되는지도 확인할 수 있다 contents를 클릭해 alert가 실행된다 이제 alert를 지우고 그 자리에 this.setState({mode: 'read'});를 입력해준다. 이제 WEB을 클릭하면 'wel..

저번에 만들었던 아래 코드를 다시 보자의 코드는 원래 subject.js안의 코드다 subject.js 파일을 위에 주석처리를 하고 밑에 로 옮겼다 이번엔 주석된 component를 다시 살리고 를 주석처리한다subject 라는 component를 사용할 때사용자가 WEB의 링크 클릭할 때 어떤 이벤트를 설치하고 싶다면onChangePage 이벤트를 사용하고 이벤트의 함수를 설치해 놓으면태그가 클릭되었을때 설치한 함수를 실행해 줄 수 있다 onChangePage 를 입력해 함수 - {function(){ alert('hihi'); }.bind(this) }를 만들고 만든 onChangePage 함수를 Subject.js의 a태그에 선언해준다  실행하면 오류가 난다 alert를 지우고 this.setSt..

몇달 전 풀었는데.. 기억이 안난다..ㅜㅜ다시 풀어보자! 저번에 풀었던 것의 컨닝으로 이해할 수 있었던 풀이다..385를 나눈 나머지 값 or 나눈 값으로 3, 8, 5라는 숫자를 만들 수있다정말 신기한 것! 컴파일 에러.. 에러이유1. throws IOException 이 없다2. 오타: InputStreamReader....  에러 수정 후 풀이

this.state.mode='welcome'으로 직접 state의 값을 변경하면 안되고this.setState({mode: 'welcome;}); 이렇게 함수의 형태로 변경해야되는 이유  가장 먼저 실행도히는constructor 함수에서는 직접 값을 주어도 되지만이미 component가 생성이 끝난 다음에 동적으로 스테이트 값을 바꿀 때는 그렇게 해줄 수 없다.this.setState라는 함수에 내가 변경하고 싶은 값을 객체 형태로 mode: 'welcome'으로 줄 수 있다. this.state.mode='welcome' 는 리액티가 모르게 변경해준다.화면에는 변경되지 않지만, 콘솔창에는 변경된다. setState 로 하면 setState함수가 호출되면서 여러일을 할 수 있도록 만들게 해준다.그러므로..

bind 묶다   render함수가 호출 될 때 이 함수 안에서 console.log를 찍어주면그럼 아래처럼 찍힌다render 안에서 실행된 this 는 그 component 자신을 가르킨다 만약 bind를 삭제하고 아래처럼 만들면 콘솔에 event undefind라고 나온다

역동성있는 웹페이지를 이벤트로 처리해 만들어보자!  WEB에 링크를 걸어 HTML이 아닌 웰컴 메시지를 나오게하고html, css, javaScript를 클릭하면 해당되는 메세지가 나오게 해보기 WEB에 해당되는 곳에 링크를 걸어준다. mode 가 welcome일 때 content도 바꿔준다리액트에서 props/state값이 바뀌면 해당되는 component의 render 함수가다시 호출되고 render함수 하위에 있는 component로 다시 호출된다render함수: 어떤 html을 그릴 것인가를 결정한다. state에 mode 추가+render함수에 렌더링 결과가 달라지게 조건문을 삽입한다.return된 content에 선언된 var _title 과 _desc를 넣어준다, 물론 중괄호 {} 를 넣어서..

제품이  있을때 사용자의 입장과 구현자의 입장 사용자의 입장에서 제품을 조작하는 것은 버튼이 된다 유저인터페이스구현자 입장에서는 Component를 만드는 react 에서는 props  props: 사용자가 Component를 사용하는 입장에서 중요한 것state: props의 값에 따라 내부의 구현에 필요한 데이터 Props에 따라 그 Compnent를 실제로 구현하는 내부의 state의 정보가 철저하게 분리되어 있어야 한다.즉, 사용하는 쪽과 구현하는 쪽을 철저히 격리시켜 양쪽의 편의성을 각자 도모 하는 것  Subject 하위 컴포넌트의 props의 값들이 하드코딩되어있다.이 값을 state로 만들고 그 state값을 Subject의props 로 전달하는 것을 통해 코드를 개선해보자.  1. con..

먼저 src에 아래처럼 폴더를 만들어준다 그 안에 아래 파일을 만든다. App.js에서 적혀진 TOC를 TOC.js 에 입력하면 아래처럼 오류가 나온다. 이는 사용하는 editor에 따라 있을 수도 없을 수도 있다. 근데 다시보니 lass 로 적혀있다.. 그래서 오류가 나온것. class로 다시 적어주니 오류 메시지가 사라진다. 그리고 import React, { Component } from 'react' 를 넣어준다from  'react' 라는 라이브러리에서 { Component } 라고하는 클래스를 로딩한 것 즉, 아래 extends Component가 사용하고 있는 것이다.앞에 적혀진 import React 는 필수적으로 적어야한다. 이 toc라는 파일안에 여러가지 변수나 함수들이 안에 존재 할 ..