평화로운 어느 날..... 진행 중인 프로젝트를 마저 하려고 visual Studio Code를 켰다..... 그런데..... 갑자기 이러는게 어딨냐고ㅜㅜㅠ흐엉어 아무리 생각해도 환경변수 문제말고는 건드린게 없었다.... 음....하하 데이터베이스 실습을 하면서 JDBC연동을 하는 과정에서 환경변수를 지웠다 생성했다를 반복해서... 아마 환경변수가 잘못된 것 같았다....미안해 컴퓨터야 역시 안될 땐 재설치^^ 제발 되라되라되라 기도를 하면서 기다려주면 된다. 바로 하니까 또 같은 에러뜨고, visual studio 껐다 키니까 된다. ㅏ오.... 하지만 이런 오류는 전혀 어어어?? 내 앞길을 막을 수 없다 후후
1. update 구현 update의 기능은 read+create기능이다. update는 기존의 컨텐츠를 불러와서 내용을 추가해주는 과정이기 때문이다. 먼저 form 기능이 구현되어있는 CreateContent컴포넌트를 복사하여 외부파일로 만들어주고, UpdateContent로 이름지어준다. 다음으로 App.js에서 mode가 update로 바뀌면 Update컴포넌트로 바꾸어주기 위해 Create때와 똑같이 조건문을 추가하여 컴포넌트를 생성해준다. 바뀌는 컴포넌트를 생성해주는 부분을 잘라 함수로 만들어, 밖으로 빼준다. getContent()안에 내용들을 render밖으로 빼내, return _article을 해준다. 컴포넌트가 들어가는 부분이었던 {_article}을 {this.getContent()}..
0. props vs state 쉽게 말해서 props는 해당 컴포넌트 내에서 바꿀 수 없으며, state는 바꿀 수 있다. 또한, state는 내부적으로 쓴다. 외부에서는 props를 통해 컴포넌트를 만진다. 이 모든 것은 DOM에 영향을 주어 UI에 변화를 준다. 결론은...props와 state를 적절하게 이용해야 한다는 의미이다. 지금까지는 read가 되는 페이지를 만들었는데, 이제 write를 통해 동적으로 페이지를 유저가 바꾸는 앱을 만들어보자!! 두둥!! 1. create 구현 : 소개 모든 정보는 CRUD 안에 있다고 한다. Create, Read, Update, Delete를 의미하는데, 우리는 이미 read를 해보았다. create, update, delete라는 버튼을 추가할 것이다...
1. State변경과 render함수 현재 상태는 위와 같다. 먼저 설계(?)를 해보자면, -제일 위에 위치한 WEB에 링크를 달아서 링크가 눌리면 밑에 Content컴포넌트에 Welcome이라는 텍스트가 뜨게 할 것 -TOC에서 각 항목을 누르면 해당하는 내용을 Content컴포넌트에 보여줄 것 먼저 우선적으로 링크를 달 것이다. Subject.js에서 먼저 링크를 달아준다. 이 각 링크에 이벤트를 연결할 것이다. 링크를 누르면 App컴포넌트의 state가 바뀌고, Content의 props값으로 전달되면서 동적으로 앱이 바뀌는 것을 만들어 볼 것이다. 다음으로 state를 세팅해보자. 현재 페이지가 welcome페이지인지 read페이지인지 구분하기 위해서 state에 mode라는 값을 둘 것이다. m..
1. State 입문자에겐 State와 props의 차이를 이해하기 어렵다. (물론 나도) 어떤 제품이 있을 때, 사용자의 UI들이 리액트의 관점에서는 props이다. 반대로 내부적인 구현을 위해 상태를 다양하게 바꿀 수 있는 것을 state라고 한다. 즉 개발자의 입장에서는 state를 주목해야 한다. state는 props의 값에 따라 내부 구현에 필요한 것이라고 얘기할 수 있다. 사용자는 props를 통해 컴포넌트를 마음대로 조작할 수 있지만, state는 건드릴 수 없으며, 또한 알아서도 안된다. 옆의 그림처럼 내부 state는 철저히 분리되어있다. 2. State 사용 App.js를 보면, App컴포넌트 안에 Subject라는 하위 컴포넌트가 존재한다. Subject 안에 있는 props들을 s..