모각코 회고록 목표 : 7월 스터디 7.7 ~ 7.24 - 플랫포머 게임 클론 코딩 3주간 진행한 플랫포머 게임 회고 7월 말 ~ 8월 개인 게임 개발 7.28 ~ 8.25 - 클론 코딩을 통한 슈...

업무 리스트 예제 제작하기 1단계: // js/App.js import React, { Component } from "react"; import AddTask from "./AddTask"; import "./App.css"; class App extends Component { render() { return ( &l...

map() 함수로 태그 반환하기 map() 함수를 사용하면 반복해서 출력해야 하는 태그들을 배열에 넣어두고 관리할 수 있다. 1단계: // js/App.js import React, { Component } from "react"; import ReturnMap from "./ReturnMap"; import "./App.css"; cla...

React에서 jQuery 사용하기 jQuery는 JavaScript 라이브러리의 한 종류이다. jQuery는 이벤트 처리, 애니메이션 등 JavaScript의 기능을 간단하고 빠르게 구현할 수 있도록 지원한다. jQuery를 사용하기 위해선 cmd 창에서 프로젝트 경로로 이동한 후 [npm install jquery]를 입력하면 설치된다! ...

기본 구조 이해하기 // src/index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; c...

Node.js 설치하기 개발 환경을 준비하기 전에 설치 도구에 대한 정리가 필요하다. JavaScript 패키지 관리 도구에는 NPM과 YARN이 있다. Node Package Manager, 즉 NPM은 패키지를 관리해주는 프로그램이다. Node.js 설치와 함께 NPM은 설치된다. YARN은 페이스북에서 만든 패키지 관리 프로그램으로,...

React 이벤트 사용하기 Javascript에서의 이벤트를 React에서도 사용할 수 있다. 1단계: <div id="root"></div> #root { padding: 10px; } class CounterText extends React.Component { render() { let text...

JSX에서의 배열 사용하기 1단계: <div id="root"></div> #root { padding: 10px; } class Round extends React.Component { render() { let roundStyle = { display: "inline-block", ...

state 사용하기 1초에 하나씩 수가 증가되는 프로그램을 제작하자. 1단계: <div id="root"></div> #root { padding: 10px; } class AutoCounter extends React.Component { render() { let titleStyle = { ...

state 사용하기 props를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용한다. <div id="root"></div> #root { padding: 10px; } class State extends React.Component { ...