YoonStudyNote

만약 터미널에 warning이 뜨는게 보기싫으면 맨 위 상단에 /*eslint-disable*/ 을 입력해주시면 됩니다. count는 초기값을 지정해주는것이고, countChange는 함수인데, count의 값이 어떻게 변경되게 하는지 정해주는 함수 역할을 해줍니다. count의 초기값은 0으로 해줬네요. 그래서 onClick이벤트를 선언했을때 countChange함수를 호출하고 소괄호 안에 count+1로 증가되게 만들어 주었습니다. 이번에는 배열의 있는 string값을 변경해보도록 하겠습니다. onClick이벤트에 함수명을 넣을건데 반드시 함수명만 넣지 "함수명()"이렇게 넣으시면 안됩니다! 함수를 실행한다는뜻이 되므로 성립되지 않습니다. deep copy해서 수정하는방법도 알려드리겠습니다. 만약 배..

이제는 변수로 값을 정의하는것이 아닌 state로 값을 정하는 방법을 보여드리도록 하겠습니다. React에 있는 내장함수중 state를 사용하겠다는 뜻입니다. 즉 리엑트의 데이터 저장공간 state를 만드는 방법입니다. ES6 destructuring 문법으로 array,object에 있던 자료를 변수에 쉽게 담고싶을때 사용하는 방법을 가르쳐주도록 하겠습니다. var [a,b] = [10,100] 이렇게 선언한다면 a=10, b=100인 상태가 됩니다. 다음과 같이 선언하면 title = '코트 추천' 이라는 값이 성립이 됩니다. 그래서 h3안에 title을 넣었으므로 출력값은 '코트 추천'이라고 나오게 될겁니다. 두번째 변수인 titleChange는 앞으로 바뀌는 데이터값을 받아오는 용으로 쓰겠습니다...

react의 라이프 사이클을 이해하고 api 로딩처리를 구현해보는 시간입니다. 만약에 고객들이 사이트에 접속했을때 속도가 느릴경우에 loading이미지가 나오게 만들도록 하겠습니다. 이미 material ui에서 이미지가 있기때문에 그걸 이용하면 훨씬 쉽게 만들 수 있습니다. material ui progress를 확인해보겠습니다. material-ui.com/components/progress/ Circular, Linear progress React components - Material-UI Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. ..

client파일에서 client모듈을 생성하고 프로젝트 폴더에서는 서브모듈을 실행하도록 명시하겠습니다. 즉, package.json파일을 통해서 서버와 클라이언트를 동시에 실행시키게 할 수 있도록 설정하겠다는 뜻입니다. 고객목록을 알려주는 REST API를 개발합니다. REST API는 최근 상당 웹서버에 기본적으로 지원하는 기능으로서 서버와 클라이언트가 웹 프로토콜 기반으로 하여 효과적으로 데이터를 주고 받을 수 있도록 해줍니다. 이를 실습하기 위해서 가장먼저 기존에 서버모듈에 전체 고객 목록을 불러오는 API를 구현해 볼 필요가 있습니다. 그래서 const customers에서 정리한 json의 형식 데이터를 복사를 해둡니다. server.js에 customers에 넣어줍니다. 이렇게 하면 json의..

컴포넌트를 적절히 잘 분리하면 유지보수도 쉬워지고, 생산성도 높아지는 특징이 있습니다. JSX 문법의 특징중 componenet를 추가하려고하면 div태그 안에 넣어서 해야합니다. 안그러면 오류납니다. 또한, 다음과같이 클래스를 분리해서 필요한 클래스를 최종 클래스안에 계층적으로 나타내는것이 좋은 방법입니다. 다음은 복수로 나타내기때문에 배열로 표현하겠습니다. 여기서 보면 알 수 있듯이, 여러번 customer컴포넌트를 입력해야하는 불편함이 있습니다. **map을 이용해봅시다** 다음과 같이 선언하면 오류가 납니다. 이것에 대한 식별값인 key값이 없기 때문입니다. *key를 사용해봅시다* 아까전에 소스코드보면 알 수 있듯이, id값은 각각 다르기 때문에 key값으로 합니다.

1. 이벤트 함수 생성 else if에 선언한 가 어떻게 동작할지 onSubmit이벤트로 처리해줍니다. _title, _desc 값으로 컨텐츠값을 더해주도록 만들어줍니다. 2. 디버깅으로 값 확인 onSubmit 함수에서 App.js에 있는 내용이 실행되도록 합니다. 3. 일단 debugger을 입력해줘서 e에 있는 이벤트객체를 잘 찾아줍니다. value값이 잘 들어갔는지 확인하기 위해서 e.target.title.value를 입력해줍니다. 다행이 "react"로 잘 들어왔네요. 이것으로 CreateContent.js파일에 이벤트처리에 인자 값을 무엇을 넣어줄지 정해지게 됩니다. 3. 인자 넣어주기 onSubmit이벤트에 인자로 e.target.title.value 와 e.target.desc.value..

우선 create 모드가 될때 나타나게될 코드를 정리하기위해 따로 CreateContent.js파일을 만듭니다. form태그에 action="/create_process"의 뜻은 옮겨지는 페이지를 "/create_process"라고 정하는 것이고 method="post"방식으로 해야지 내부정보를 볼 수 없습니다. onSubmit={fuction()}은 submit이 실행될때 꼭 지나야하는 함수입니다. 이것은 react기능이 아닌 기본적으로 가지고 있는 기능입니다. 본인이 만들 형태는 submit이 될때 새로운창에서 작동되지 않게 만들기 위해서 e.preventDefault()를 넣어줍니다. placeholder는 입력하기전에 무슨 텍스트가 화면에 나오게할지 정하는 겁니다. mode가 read일 경우와 c..

create, update는 a태그로 만들어지는것이 좋습니다. (새로운 창에서 데이터를 입력하고 조회하게 되므로.) 하지만, delete같은 경우, 새로운 창으로 연결되는 a태그로 만들지 않고 input button태그로 만드는것이 좋습니다. 1. Control이라는 컴포넌트로 만들어서 외부로 빼버릴겁니다. 그리고 그 컴포넌트를 App.js에 import한 후에 아까전에 위치한 자리에 컴포넌트를 추가해줍니다. 2. onChangeMode 이벤트(핸들러)를 Control컴포넌트에 정의해줍니다. Control.js파일에서 onClick이벤트를 만들어 줄때, 이것이 create, update, delete라는것을 알려주어야 합니다. 이 onClick이벤트를 만든 함수를 받기 위해서 Control컴포넌트에 on..

1. props는 스마트폰의 볼륨버튼이라면 사용자가 볼륨버튼을 누르면 state는 스마트폰안에서 스스로의 상태인 볼륨이 바뀌게 해놓은 모든 조치(회로,프로그래밍 등등)라고 할 수 있습니다. 2. 상위 컴포넌트는 하위 컴포넌트에게 props를 통해 값을 전달해 내부의 state를 바꾸기 때문에 컴포넌트 스스로 외부에서 전달되는 props를 변경하는 것은 금지되어 있습니다. 또한 하위 컴포넌트가 상위 컴포넌트를 동작시키려면 props를 전달하는 것이 아니라 상위 컴포넌트 안에 이벤트를 심고 그 안에 setState로 값을 바꿔야 합니다. props state 고정값 가변값 상위값 하의값, 사용자가 이벤트 요청시 변경 상위 컴포넌트 > props > 하위 컴포넌트 하위 컴포넌트 > 이벤트 실행 > 상위 컴포넌..

다음은 링크를 클릭했을 경우, 이벤트처리가 되어서 밑에 text값이 변경되게 하는겁니다. mode값을 텍스트로 수정하는것이 아닌, 클릭으로 수정하게 하는 방법입니다. 그렇게 하려면 render에 선언된 state와 return에 있는 state를 연결시키면 됩니다. 1. bind(this) 바로 이벤트 함수가 끝난 후, bind(this)를 선언해줍니다. 왜냐하면 무작정 event함수안에 this를 선언해버리면 "TypeError: Cannot read property 'state' of undefined" 오류가 생기기 때문입니다. 그런데 이렇게 선언해도 문제가 됩니다. this.state.mode = 'welcome' 은 state값이 변한다는걸 모르게하는 소스코드이기 때문이죠. 2. setState..