누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

(18개의 수강평)

2148명의 수강생

16,500원

velopert(김 민준)
평생
초급, 중급
수료증
22개 수업, 총 2시간 52분
Wishlist
최성필 프로필

혹시 리액트 빌드되는 홈페이지를 바꾸고싶은데 아시나요? 최성필 12일 전

지금 익스플로어에서 실행되는 리액트를

크롬으로 변경하고 싶습니다.

1
이태장 프로필

컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요 이태장 2달 전

강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 5.3 검포넌트에 ref 달기

[ ScrollBo.js ]

import React, { Component } from 'react';

class ScrollBox extends Component {

scrollToBottom = () => {

const { scrollHegiht, clientHeight } = this.box;

console.log("scrollHegiht : " + scrollHegiht);

console.log("clientHeight : " + clientHeight);

this.box.scrollTop = scrollHegiht - clientHeight;

}

render() {

const style = {

border : '1px solid black',

height : '300px',

width : '300px',

overflow : 'auto',

position : 'relative'

}

const innerStyle = {

width : '100%',

height : '650px',

background : 'linear-gradient(white, black)'

}

return (

<div

style={style}

ref={(ref) => {this.box=ref}}>

    );

}

export default ScrollBox;

[App.js]

import React, { Component } from 'react';

import ScrollBox from './ScrollBox';

class App extends Component {

render() {

return (

this.scrollBox=ref} />

this.scrollBox.scrollToBottom()}>

맨 밑으로

}

);

}

}

export default App;

위 2개의 js를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.

제가 어떤 부분을 코딩을 잘 못 한 건 가요?

0
좀 해 프로필

비주얼스튜디오 코드 사용법 좀 해 2달 전

안녕하세요

강좌 보다 보니

state = {

name: '',

}

위 코드를 타이핑 하실때

콤마를 입력 후 엔터를 두번 치신거 같은데

{ } 블럭을 빠저 나오더라구요

저건 뭘 설치 해야 되는건가요?

0
기린 프로필

컴포넌트 데이터 이동 기린 2달 전

props를 통해 부모에서 자식으로 데이터가 이동이 되는데, 그러면 반대로 자식에서 부모에게 데이터를 전달하려면 어떻게 해야하나요?

0
Minkoo94 프로필

[React.js] onUpdate is not a function Minkoo94 3달 전

TypeError: onUpdate is not a function

PhoneInfo._this.handleToggleEdit

16 | handleToggleEdit = () => {

17 | const {info, onUpdate} = this.props;

18 | if(this.state.editing){

19 | onUpdate(info.id, {

20 | name: this.state.name,

21 | phone: this.state.phone,

22 | });

실습중 이렇게 에러가 뜨는데 원인을 잘 모르겠습니다 ㅠㅠ

0
곽규원 프로필

componentDidCatch() 부분에서 크로쓰 오리진 에러가 뜹니다. 곽규원 4달 전

componentDidCatch() 부분에서 저는 크로쓰 오리진 에러가 뜨네요... A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information. 뭐가 문제인지 알 수 있을까요? (코드 https://codesandbox.io/s/5klql536vk)

0
윤상현 프로필

npx create-react-app my-app 를 하고 cd my-app 을 하고나서 에러입니다. 윤상현 4달 전

맥 터미널에서 프로젝트 폴더를 만들고 그 폴더 안에서

npx create-react-app my-app 를 치고

cd my-app 을 치고

yarn start를 하였는데

There might be a problem with the project dependency tree.

It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.

However, a different version of babel-loader was detected higher up in the tree:

/Users/yunsang/Desktop/node_modules/babel-loader (version: 8.0.5)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.

That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.

If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.

    This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/yunsang/Desktop/node_modules/babel-loader is outside your project directory.

    For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls babel-loader in your project folder.

    This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.

That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

이런에러가 나옵니다.

어떻게 해결하나요?

위에 1~7까지 순서 지키며 다 해봤는데도 안됩니다.

0
tae ho kim 프로필

[ts] 'phoneForm' is declared but its value is never read. tae ho kim 4달 전

섹션 7번의 동영상을 그대로 따라 했는데..

App.js 에서 phoneForm.js 의 내용을 읽어오지 못하고 있습니다.

App.js 파일 상단의

import phoneForm from './components/phoneForm' 줄에 커서를 올려 놓으면

[ts] 'phoneForm' is declared but its value is never read.

라는 메시지가 나옵니다.

어찌 해결하면 좋을런지요?

0
박성우 프로필

input 필드에서 value={this.state.name}는 왜 사용하는건가요? 박성우 6달 전

input필드에 end유저가 입력한 값이 value가 자연히 될텐데,

왜 굳이 component의 state를 다시 input필드의 value가 되도록

value={this.state.name}를 하는건지 궁금합니다

1
Sihyeong Lee 프로필

Prettier를 설치했는데.. Sihyeong Lee 7달 전

관련 세팅 방법들을 찾아보아도 확실하게된 정보가 없네요. Basic Config를 적용해서 저장될때 자동으로 스타일이 적용이 되는것은 확인을 했는데 파일 자체가 JS파일로 인식되어서(React파일이아닌)

코드가 다 깨져버리더군요.

전에 뭔가를 설치하면 VS Code자체에서 파일을 React로 아이콘이 바뀌고.. 그 이후에 Prettier를 적용하면 자동으로 스타일이 지정될것같은데 그게 무엇이였는지 잘 모르겠네요.

지금 벨로퍼트님이 사용하시는것처럼 아이콘들을 적용해줄수있을까요?

3
황선웅 프로필

강의 결제 확인 요청 황선웅 7달 전

안녕하세요.

누구든지 하는 리액트 강의신청 후에 무통장 입금을 처리했습니다.

입금자는 주식회시 에이치포 입니다.

입금확인 및 수강가능 처리 부탁드립니다.

0
no_ok 프로필

componentDidCatch에 관련된 질문입니다. no_ok 5달 전

componentDidCatch 를 사용할때

getBoundingClientRect 을 호출하게 되면..

this를 찾을 수 없어서 그런지..

오류를 내면서 componentDidCatch 도 호출이 안됩니다.

이런 경우는 어떻게 처리를 해야하는건가요?

  componentDidMount() {

console.log(this.myDiv.getBoundingClientRect().height);

}

componentDidCatch(error, info) {

console.log(error); //에러내용

console.log(info); //에러발생지

this.setState({

error: true

});

1
Jason 프로필

npx를 사용하는 이유를 알고 싶어요. Jason 7달 전

강의 잘보고 있습니다.

그냥 create-react-app 하는거랑 npx create-react-app 하는게 어떤 차이가 있는지 알고 싶어요.

3
여어 프로필

가상 DOm diff질문드립니다 :ㅇ 여어 9달 전

리액트에서 state가 변할 때만 다시 rendering되는 걸로 알고 있는데

그렇다면 결국 state를 통해서 실제돔과 가상돔의 변화 diff를 인지해서 reRender를 하는 건가요??

0
David Lee 프로필

DOM 에 접근 할때 질문 드립니다. David Lee 9달 전

일반 자바스크립트에서 사용되는 document.getElementById('#name") 으로 리액트에서 사용하면 어떤 문제가 생기나요. 리액트 코드에서 DOM에 document.getElementById('#name") 이렇게 접근도 되던데요. 궁금합니다.

0