안녕하세요 상훈입니다. React로 체크박스를 체크하면 타이머가 돌아가고, 체크박스를 해제하면 타이머가 멈추는 체크박스를 이용한 스톱워치를 구현하려고합니다. 이전까지는 1가지의 기능만 구현을 했었는데, 이번건 2가지의 기능(체크박스 -> 이벤트 -> setInterval())를 사용하였기 때문에 헷갈릴 수 있다.

FrontEnd/React.js 2021. 9. 1. 13:43

안녕하세요 상훈입니다. React로 체크박스 클릭시, text부분의 색을 변경하고 줄을 긋는 기능을 구현하려고합니다. render 함수 내의 상수를 선언해놓고 이를 삼항연산자( x ? y : z) 를 사용하여 해당 기능을 구현하였습니다.

FrontEnd/React.js 2021. 9. 1. 11:09

안녕하세요 상훈입니다. React.js 로 input 태그 내에 값을 입력하면 내용을 곧바로 h1 태그 내에 작성되게 하는 기능을 구현하겠습니다. 지난번과 마찬가지로, root라는 id를 가진 div 태그를 생성하였습니다. text = '' 로 놓고, 값이 변할때마다 handleChange() 함수를 호출하고, 그 값을 h1태그에 보여주는 형식입니다.

FrontEnd/React.js 2021. 9. 1. 10:38

안녕하세요 상훈입니다. React.js 로 버튼을 클릭하면 값이 1씩 증가되는 기능을 구현해보려고합니다. root라는 이름을 가진 div하나 넣어주시고, 나머지는 전부 script로 한번에 html 내에 넣었습니다.

FrontEnd/React.js 2021. 9. 1. 10:24

수정 21.09.01.10:11 에러해결 - ReactDOM.Component => React.Component DOM이 아니라 그냥 React만 호출해야했다. VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined React.js 하던와중 갑자기 이런 에러가 발생 왠지모르겠음.. super()를 선언할때 인자로 null 혹은 function이 들어가야하는데 undefined가 들어갔다. 라는 뜻 같은데.. props에 해당하는 부분이 undefined 된건가? 흠. 코드는 대충 클릭이벤트 함수를 생성한것인데, 이렇다.

FrontEnd/React.js 2021. 9. 1. 09:54

자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다. (다음 포스팅은 한글 키보드..) 물론 cdn을 이용해서 기본 키보드에서 좀 더 꾸며진 모습을 확인할 수 있습니다. head태그 내에 넣을 내용 body 태그 내에 작성할 내용 확인해보니 최소 px의 가로길이는 500px 로, 모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.

FrontEnd/JavaScript 2021. 8. 31. 14:28

자바스크립트 공부 초반에 만들어보았던 시계 만들기를 리액트로 진행해보겠습니다. html 작성 내용은 이렇구요, root라는 id를 가진 div 하나 생성. 해당 div에 출력할 Script(React.js) 작성 해당되는 내용에서 컴포넌트(Component)가 언마운트(Unmount) 되는 경우는 없긴한데, 임시로 만들어놓았습니다. 다음에는 event와 연동하는 내용으로 작성할 수 있도록 하겠습니다.

FrontEnd/React.js 2021. 8. 30. 10:28

여러가지 문법들 중 JSX 문법에 대해 작성하도록 하겠습니다. REACT에서 사용하는 JSX 문법 예제 { 표현식 } 이렇게 작성하는데, 주의 할 점은 ATTR(속성) 부분에 따옴표를 작성하지 않는 것이다. HTML 에서는 ATTR = " " 이런식으로 작성해주어야 함. 과거 JSX라는 용어를 처음 들었을 때에는 이게 도대체 뭔 🐶소리인가 했는데, 이제 또 보니까 바로바로 흡수되는게 신기하다.

FrontEnd/React.js 2021. 8. 27. 16:48