웹 게임을 만들며 배우는 React

웹 게임을 만들며 배우는 React

(22개의 수강평)

1866명의 수강생
무료
지식공유자 · 조현영
64회 수업· 총 12시간 44분수업
평생 무제한 시청
수료증 미발급 강의
수강 난이도 초급
neue zeal 프로필

👍 neue zeal 13일 전

👍

0
neue zeal 프로필

블로그에서 자바스크립트 기본정도 보고 넘어왔어요. 공식문서 기반이라 좋아요. neue zeal 13일 전

감사합니다.

0
Resistance 프로필

결과값 오류...... Resistance 20일 전

안녕하세요 다름이 아니라 강좌를 보고 저 혼자 코딩을 해봤는데 오류가 뜨네요 ㅠㅠ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>React Web 구구단 구현</title>
</head>
<body>
    <div id="root"></div> <!-- 결과 : <div id="root"><button>Like</button></div> -->
    <script type="text/babel">
        class GuGuDan extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    first: Math.ceil(Math.random() * 9),
                    second: Math.ceil(Math.random() * 9),
                    value: '',
                    result: '',
                };
            }

            onSubmit = (e=> {
                       e.preventDefault();
                       if (parseInt(this.state.value) === this.state.first * this.state.second) {
                           this.setState({
                               result: '정답',
                               first: Math.ceil(Math.random() * 9),
                               second: Math.ceil(Math.random() * 9),
                               value: '',
                           });
                       } else {
                           this.setState({
                                result: '땡',
                                value: '',
                           });
                       }

            render() {
                return (
                <div>
                   <div>{this.state.first} 곱하기 {this.state.second}는??</div>
                    <form onSubmit = {this.onSubmit}
                        <input type="number" value={this.state.value} onChange={(e=> this.setState({ value: e.target.value })} />
                        <button>입력!!</button>
                   </form>
                   <div>{this.state.result}</div>
                </div>
                );
            }
        }
        // <input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />
        // input.onchange = (e) => { console.log(e.target.value) }
        // input.onchange = function (e) { console.log(e.target.value) }
    </script>
    <script type="text/babel">
        ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
    </script>
</body>
</html>

0
이효진 프로필

this 이효진 24일 전

안녕하세요 궁금한게 있는데요

class에서는 state를 변경할 때 this.state.value 이런식으로 this.state 를 써주었는데 Hooks에서는 this.state를 사용하지 않고 써주는 것도 class와 Hooks의 차이점 인가요?

1
둥치탁치 프로필

쌤 질문이 있습니다 둥치탁치 1달 전

webpack.config.js 파일에 주석이 들어가면 실행이 제대로 안되나요ㅎㅎ....

주석 섞어서 실행할 땐 module build failed 라고 뜨고

주석 빼고서 실행하니까 정상작동하더라구용

혹시나 공부하면서 필기할때 주석을 사용해서는 안 될 파일들은 어떤 종류인가요?

1
김찬 프로필

this.state.value에 대해 질문 김찬 1달 전

안녕하세요 

state 값을 바꾸면 다시 렌더링되는걸로 알고 있습니다.

this.state.value는 사실 재랜더링이 필요 없는 값 같은데

단지 갖다 쓰기 편하게 하기 위해 state에 value를 포함시키면

좀 비효율적이지 않나 라는 궁금증이 생겨서 질문드려봅니다

감사합니다!

1
둥치탁치 프로필

React dev tool 설치 후 선생님처럼 안뜨시는분들 보세용 둥치탁치 1달 전

크롬 웹스토어에서 tool받으시고 chrome://extensions 들어가셔서

React Development tools 클릭하시면 아랫부분에 파일 URL에 대한 엑세스 허용 탭이 있습니다. 허용해주시고 다시 들어가시면 적용 됩니다.

(개발자 모드에 (>>)버튼 클릭하시면 Components랑 Profiler있는데 그거 추가해주세요.)

1
Kyun Heo 프로필

npx webpack 에러발생합니다.. 도와주세요..! Kyun Heo 1달 전

구글링 해봐도 잘모르겠어요 path가 잘못됬다고 하기도 한것 같긴한데.. 어떻게 고쳐야할까요ㅠㅠ

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

 - configuration.module should be an object.

   -> Options affecting the normal modules (`NormalModuleFactory`).

package.json 입니다.

package.json

아래는 webpack.config.js입니다.

webpack.config.js

2
Kyun Heo 프로필

webpack 설정 resolve부문 질문 있습니다. Kyun Heo 1달 전

resolve부문에서 js, jsx 를 하고 entry의 app에서 ./client를 해놓으면 알아서  client.js를 가져온다고 하셨는데 만약에 client.js client.jsx의 두파일이 있으면 어떤걸 가져오게 되나요?

2
채기병 프로필

webpack설정 질문입니다... 채기병 1달 전

실제 운영할때는 npm으로 설치할때 D옵션빼고 하는 건가요??

1
문성민 프로필

import 만 사용하면 작동이 안되요.. 문성민 2달 전

import React, { Component } from 'react';

import Try from './Try.jsx';

숫자야구 강의에서 NumberBaseball.jsx 파일 상단에 위 코드를 넣었는데 작동은 안되고 아래 화면과 같이 출력 되는데

const React = require('react')

const { Component } = require('react')

const Try = require('./Try')

이 코드를 넣으면 다시 정상적으로 출력이 되는데 어떤 문제 때문에 그런건가요 ..?

1
Caleb Hyun 프로필

노드 package 와 module 의 차이점 질문 드립니다. Caleb Hyun 2달 전

제로초님 안녕하세요 node.js 강의와 같이 React 를 듣고 있습니. 먼저 좋은 강의 감사 드립니다. 굉장히 기초적인 질문인데요,  혼자 검색을 하다가 도저히 정리가 되지 않아 질문 남기게 됬 습니다. 

node.js 의 package 와 module 의 차이점이 무엇인가요?  자바 같은 경우 클래스파일들이 모여 패키지가 되는데 (예를 들어 java.lang.Number 에서 java.lang 은 패키지 , Number 는 클래스 이름), 노드의 모듈이 자바의 package 같은 건가요 혹은 클래스 파일 같은 건가요? 

감사 합니다.

3
seonyoung lee 프로필

ref를 이용해서 dom에 접근하는거요 seonyoung lee 2달 전

this.input.focus(); 를 사용하기 위해서 

input; 을 선언하고 ref 를 넣어준다고 이해했는데 맞나요?

onRefInput = (c) => {
this.input = c;
};

이건 해줬긴 한데 위에 input; 이건 안써줬거든요

근데 this.input.focus(); 는 잘 작동을 하네요.

input; 을 먼저 선언해주지 않더라도 this.input을 사용 할 수 있는건가요?

1
안상철 프로필

혹시 webstorm 단축키 궁금한게 있어서 질문 하나 드려도 될까요? 안상철 2달 전

1분 3초쯤에 this.state를 찾을때 밑으로 하나씩 찾아서 내려가는 부분이 있는데, 아무리 찾아봐도 command+F / command+G 단축키를 사용하라는 말밖에 나오지 않더라구요.

영상에서는 위에 find, replace창이 나오지 않고 자기가 원하는만큼만 찾아서 여러개를 동시에 수정하는것처럼 보이는데 혹시 단축키를 좀 알려주실수 있을까요? 

강좌랑 관련 없는 질문이라, ㅠ 그래도 대답해주시면 정말 감사하겠습니다.

2
jung660317 프로필

render 안에 함수 질문 jung660317 2달 전

onClickscreen 함수는 왜 () 를 안붙이고,

renderAverage함수는 왜 ()를 붙여야 오류가 안날까요?

다르게하면 오류가 나요 ㅜㅜㅜ 차이를 모르겠어요 !

똑같은 function들인데 무슨차이인가요?

2
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스