무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결생활코딩 - React
20.3 update에서 state변경이 안되는지 변경이 안됩니다
app.js import './App.css'; import { Component } from 'react'; import TOC from "./Components/TOC"; import ReadContent from "./Components/ReadContent"; import CreateContent from "./Components/CreateContent"; import UpdateContent from "./Components/UpdateContent"; import Subject from "./Components/Subject"; import Control from "./Components/Control"; class App extends Component { constructor(props){ super(props); this.max_content_id = 3; this.state = { mode: 'create', selected_content_id: 2, Subject: {title: "WEB", sub: "world wide web~~ hyun"}, welcome: {title: "Welcome", desc: "Hello, React~~"}, contents: [ {id:1, title:'HTML', desc:'HTML is for information'}, {id:2, title:'CSS', desc:'CSS is for Design'}, {id:3, title:'JavaScript', desc:'JavaScript is for interactive'} ] } } getReadContent() { var i = 0; while(i < this.state.contents.length){ var data = this.state.contents[i]; if(data.id === this.state.selected_content_id){ return data; break; } i = i + 1; } } getContent(){ var _title, _desc, _article = null; if(this.state.mode === 'welcome'){ _title = this.state.welcome.title; _desc = this.state.welcome.desc; _article = <ReadContent title={_title} desc={_desc}></ReadContent> }else if(this.state.mode === 'read'){ var _content = this.getReadContent(); _article = <ReadContent title={_content.title} desc={_content.desc}></ReadContent> }else if(this.state.mode === 'create') { _article = <CreateContent onSubmit = {function(_title, _desc){ // add content to this.state.contents this.max_content_id = this.max_content_id + 1; // this.state.contents.push ( // {id:this.max_content_id, title:_title, desc:_desc} // ); var _contents = this.state.contents.concat( {id:this.max_content_id, title:_title, desc:_desc} ) // var newContents = Array.from(this.state.contents); // newContents.push({id:this.max_content_id, // title:_title, desc:_desc}); this.setState ({ //contents:this.state.contents contents: _contents }); console.log(_title, _desc); }.bind(this)}></CreateContent> } else if(this.state.mode === 'update') { _content = this.getReadContent(); _article = <UpdateContent data={_content} onSubmit = { function(_id, _title, _desc){ // add content to this.state.contents // 14 line에 this.max_content_id = 3; 는 create에 사용된 것이므로 아래내용주석처리 // this.max_content_id = this.max_content_id + 1; //복제기능 수행 : 원본을 복사한 새로운 배열 생성 var _contents = Array.from(this.state.contents); //수정하고자하는 원소값과 같은 것을 찾는다. var i = 0; while(i < _contents.length){ //_contents[i].id갑과 입력한 id값이 같다면 if(_contents[i].id === _id){ _contents[i] = {id:_id, title:_title, desc:_desc}; break; } i = i + 1; } this.setState ({ //contents:this.state.contents //contents: newContents contents:_contents }); console.log(_id, _title, _desc); }.bind(this)}></UpdateContent> } return _article; } render() { console.log('App render'); return ( <div className="App"> <Subject title= {this.state.Subject.title} sub= {this.state.Subject.sub} onChangePage = { function () { this.setState({ mode:'welcome'}); }.bind(this)} > </Subject> <TOC onChangePage = { function (id) { this.setState({ mode:'read', selected_content_id:Number(id) }); }.bind(this)} data={this.state.contents}></TOC> <Control onChangeMode={function(_mode) { this.setState ({ mode:_mode }); }.bind(this)}></Control> {this.getContent()} </div> ); } } export default App; UpdateContent.js import { Component } from 'react'; class UpdateContent extends Component { constructor(props){ super(props); this.state = { id:this.props.id, title:this.props.data.title, desc:this.props.data.desc } this.inputFormHandler = this.inputFormHandler.bind(this); } inputFormHandler(e) { this.setState({[e.target.name]:e.target.value}); } render() { //this.props.title = 'hi; console.log(this.props.data); console.log('UpdateContent render'); return ( <article> <h2>Update</h2> <form action='/create_process' method='post' onSubmit={function(e){ e.preventDefault(); this.props.onSubmit( // state의 동기화 this.state.id, //e.target.title.value, // _title this.state.title, //e.target.desc.value // _desc this.state.desc ); }.bind(this)} > <input type="hidden" name="id" value={this.state.id}></input> <p> <input type="text" name="title" placeholder='title' value={this.state.title} //onChange = {this.inputFormHandler.bind(this)} onChange = {this.inputFormHandler} ></input> </p> <p> <textarea // onChange = {this.inputFormHandler.bind(this)} onChange = {this.inputFormHandler} name="desc" placeholder='description' value={this.state.desc}></textarea> </p> <p> <input type="submit" ></input> </p> </form> </article> ); } } export default UpdateContent;
- 미해결생활코딩 - React
9강 배포하는법
Nodejs가 자체적으로 HTTP Server를 가지고 있는데 npm serve를 따로 설치하고 배포하는 이유가 뭔가요? 로컬에서 개발할때만 Node의 HTTP를 사용하고실제 운영은 별도의 Web server를 사용해서 그런가요?
- 미해결생활코딩 - React
19.6 create 구현 : contents 변경 강의에서 create가 안됩니다.
create에 title, desc 값을 입력하고 제출 버튼을 클릭하면 개발자도구에 react developement tool에서는 contents에 4번째 값이 추가된게 반영이 되는데 화면상으로는 추가가 안됩니다...제출시 바로 화면에 추가가 되지않고 TOC.js 코드를 조금이라도 변경한뒤 다시 저장하면 그제서야 추가가됩니다.혹시 이유를 알 수 있을까요>
- 미해결생활코딩 - React
에바잖아요 이거
너무 어려워요잉
- 미해결생활코딩 - React
1강부터 빠짐없이 따라했는데 10강의 pure.html이 안돼요
왤까요...pure.html 쳐도 계속 원래의 index.html만 나오네요ㅠ
- 미해결생활코딩 - React
VS Code - 전체 주석처리 어떻게 하나요? 안되네요ㅠㅠㅠㅠ
VS Code - 전체 주석처리 어떻게 하나요? 안되네요ㅠㅠㅠㅠ
- 미해결생활코딩 - React
TOC.js에서 while문 안에
저 push 함수 안에 /content/는 어떤것을 의미하나요?
- 미해결생활코딩 - React
react 폴더 생성 이후 문제가 생겼습니다
windows 유저입니다 react-app 폴더를 만들고 명령 프롬프트에 드래그했는데 react-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 이렇게 뜨면서 오류가 납니다 이 오류를 어떻게 해결해야되는지 잘 모르겠어서 질문남깁니다ㅠㅠ
- 미해결생활코딩 - React
10강에서
pure.html 로 연결해도 이전 화면이 계속 나오는건 어떤걸 확인해봐야 할까요?
- 미해결생활코딩 - React
chrome에서 화면 전환이 안됩니다...
10강 리엑트가 없다면 진행하던 도중 pure.html를 추가하여 해당 html을 확인하는 도중 마이크로소프트 엣지에서는 html이 확인되는데, 크롬에서는 확인이 되지 않습니다... 구글링했는데도 원인을 찾지 못해 질문 남깁니다 ㅠㅠ 를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결생활코딩 - React
반복문으로 li태그 내용 입력하기
안녕하세요, while 반복문 아래 push 메소드 코드에 있어 이해되지 않는 부분이 있어 질문드립니다. <a href="1.html">HTML</a> 이라는 원래 코드에서 "1.html"부분과 HTML부분을 state로 제어한다는 건 이해했습니다. 그래서 저는 while 반복문 부분을 while (i < data.length) { lists.push(<li><a href={data[i].id}+".html"}>{data[i].title}</a></li> } 이렇게 적었고 실행이 되는것 같습니다. 강의 예시처럼 <a href={"/content/"}+data[i].id}>라고 적는 부분이 이해되지 않습니다. /content/는 경로를 뜻하는가요? 그리고 data[i].id 는 숫자 1,2,3 만을 반환할텐데 .html 확장자가 필요하진 않은가요? 감사합니다.
- 미해결생활코딩 - React
npm run start 했는데 에러 뜨시는 분들 참고하세요~
처음부터 바로 터미널 열어서 npm run start 하지마시고 react-app 디렉토리 만들어 놓은걸 vsc에서 연 다음에 터미널에 npm run start 작성하시면 됩니다. 저도 처음에 바로 npm run start 해서 안 되길래 이상했는데 저렇게 해보니까 되네용
- 미해결생활코딩 - React
변수에 null을 넣는 이유는 뭘까요?
var _title, _desc = null; 이런식으로 변수에 없는 값을 넣어주시고 다시 해당 변수에 값을 넣으셨는데 에러가 나는걸 방지하기 위함인가요? 아니면 다른 이유가 있으실까요?
- 미해결생활코딩 - React
this.props.data가 어디서 나오는거죠?
toc에 data라는 props를 만들어준게 없는데 어떻게 사용할 수 있는거죠? 이전 강의에서 props는 {this.props.이름} 이런식으로 props를 만드는거라고 하셨었는데 해당 강의에서는 안보여서요
- 미해결생활코딩 - React
빌드 관련 질문
강의를 보다보니 동일하게 npm run build를 사용하여 빌드가 되었지만 빌드안에 있는 파일들을 보니 동일하지가 않습니다. 첨부된 이미지 처럼 나오는데 왜그런지 알 수있을까요??
- 미해결생활코딩 - React
크롬 웹스토어의 리액트툴 링크입니다.
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko
- 미해결생활코딩 - React
class type 소스코드 예시
혹시나 누가 헷갈려할까봐 올려봅니다..
- 미해결생활코딩 - React
쿵짝쿵짝
감사합니다
- 미해결생활코딩 - React
npm start 아무리 해도 해결이 안되요 ㅠㅠ
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\김한영\AppData\Roaming\npm-cache\_logs\2020-12-02T18_33_04_970Z-debug.log PS C:\Users\김한영\Desktop\react-app> 다시깔고 영상 다시보고 4번째 따라해도 안되내요 ㅠㅠ 어떡하죠 ㅠ 그냥 막히내요 ㅠ
- 미해결생활코딩 - React
update구현:state변경 8분이후
안녕하세요 강사님. Update구현 : state 변경중간까지 따라해서 작동이 다 되었는데 7분이후에 concat 이 나오는 부분에서 ( 제 생각에는 이부분은 이전 강의에서 이미 변경이 되었다고 생각되는데) 동영상에 나오는대로 코드를 따라 했는데, 이후에는 에러가 발생하면서 , 기존 디폴트로 주었던 id :2 ( title:css 와 desc : 내용) 갑을 갖고 getContent 부분으로 이동한후에 무한루프에 빠져버리는 것 같습니다. 이 부분 동영상을 계속 보긴 했는데 어느부분에서 잘못된건이지 찾을 수가 없네요. 혹시 update 구현부분에 해당 하는 UpdateContent.js 를 갖고 계시면 혹시 보내주실 수 있는지요? 아무래도 비교해봐야 할것 같습니다. 좋은 강의 감사합니다