textarea안에 적은 내용만큼, 또는 Enter키 누를 때마다 자동으로 높이가 조절되는 textarea 기능을 만들어보겠습니다.
먼저 body안에 테스트할 아래 태그와 적당한 스타일을 추가해줍니다.
<textarea>반지의 제왕은 톨킨이 창조한 세계인 중간계의 제3시대 말을 배경으로, 인간족과 다른 종족들(호빗, 요정, 난쟁이, 오크 등)의 이야기를 다루고 있다.
이야기는 암흑 군주 사우론이 만든 절대 반지(the One ring)를 중심으로 조용한 마을인 샤이어서부터 중간계를 지나며
반지전쟁의 진행과정을 주인공인 프로도의 눈으로 보인다. 이어지는 6개의 부록에서는 중간계의 역사적, 언어학적 배경을 담고 있다.
톨킨의 다른 책과 같이, 반지의 제왕은 톨킨이 관심을 가지고 있던 북유럽 신화에서 많은 부분을 차용하였다.
이 외에도 제1차 세계 대전에서의 경험[4] 이나, 기독교(로마 가톨릭교회), 산업화도 톨킨의 세계에 영향을 주었다.
반지의 제왕은 현대 판타지 소설에 큰 영향을 끼친 것으로 인식되는데, 톨키니안(Tolkienian) 이나 톨키니스크(Tolkienesque) 같은 단어들이
옥스퍼드 영어 사전에 등재되었다.
</textarea>
코드하단에 textarea에 걸어둔 이벤트를 한번 먼저 호출해주는 이유는 브라우저에서 기본 지정된 높이 또는 style에서 지정된 높이를 로딩시 컨텐츠내용만큼 다시 조정하기위해서입니다. 로딩시 textarea에 들어갈 text가 없다면 굳이 안넣어줘도 됩니다.
그리고 css로 height를 auto로 먼저 잡아주는 이유가 있는데요. 기존 높이를 auto로 먼저 잡아주지 않으면 textarea 높이를 재세팅할 때 내용 한줄한줄 만큼이 아닌 기존 height를 반영하여 확확 커지기 때문입니다. 왜 이렇게 동작하게 됬는지는 잘 모르겠습니다. 일종의 버그인지도 모르겠네요.
서버와 통신하는 방식 중 한 가지로 http메서드를 사용하여 데이터를 요청/전송합니다. 기존에 많이 사용하던 SOAP API 의 경우 서비스 인터페이스를 이용해 서버에 접근했다면, REST는 인터넷 식별자(URI)와 HTTP 프로토콜을 이용해서 접근하는 것이 특징이며 사용법이 단순하여 높은 보안수준을 요구하는 작업이 아닐 경우 일반적으로 많이 선호되는 통신방법입니다 . 데이터포맷은 브라우저 호환성이 좋은 JSON을 사용하며 resource, method, message로 구성됩니다.
REST API 메소드
종류
용도
사용예시
사용예시 해석
GET
데이터 조회
GET/users/1
(users의 1번 데이터 조회)
POST
데이터 등록
POST/users
(users 등록)
PUT
데이터 수정
PUT/users/1
(users의 1번 데이터 수정)
DELETE
데이터 삭제
DELETE/users/1
(users의 1번 데이터 삭제)
요청한 Data를 React에서 관리하는 기본방법
useState, useEffect로 데이터를 로딩/저장하여 사용하며, 데이터요청 이후의 요청결과, 로딩상태, 에러처리가 관리대상이 됩니다.
이번에는 브라우저화면에서 특정(sample1.js- sample1s in DB) table의 전체데이터 조회, 키워드로 해당데이터 조회, 여러개 키워드로 조회하는 방법을 알아보겠습니다. (기본 다른 세팅은 이전 글에서 설명한 것으로 이미 준비되었다고 가정하고 진행하겠습니다.)
진행할 작업 내용:
사용할 데이터를 위한 state요소와 구성할 기본화면 준비
App.js에서 server로 데이터요청을 위한 코드 추가
server/server.js에서 각 요청url에 대한 처리코드 추가
데이터조회 테스트를 위한 기본준비
state에서 관리할 name, email, sample1List를 준비하고 render될 화면에서는 데이터목록이 있을 때와 없을 때의 코드를 넣어줍니다. 받아올 데이터는 배열형태로 전달되기 때문에 map메소드를 사용했으며 Search버튼과 ListAll버튼의 실행할 함수는 진행과정에서 정의해주겠습니다.
Op.or은 Sequelize에서 or연산자로 데이터를 조회하기 위한 메소드입니다. or(또는)이므로 name과 email중 한개만 입력해도 해당리스트가 조회됩니다.
그럼 서버를 재실행하여 브라우저에서 확인해보겠습니다.
한 개의 데이터만 조회 - findOne( where : {xxx : yyy} )
findOne은 where조건에 따라 table레코드를 한개만 가져오는 메소드입니다. findAll로 가져올 때랑 다른 점은 findAll의 경우 배열형태로 데이터목록을 담아보내지만 findOne은 객체형태로 보낸다는 점입니다. 그래서 App.js에서 setState를 할때 sample1List를 배열형태로 한번 감싸서 코드를 작성해줍니다.
다음 코드의 내용을 해석해보면 화면에 render되는 폼에서 각각의 input값이 변경될 때마다 _nameUpdate()와 _emailUpdate()가 호출되어 state에 준비된 name과 email의 값을 담아줍니다. 그리고 Add버튼을 클릭하면 _addData가 호출되어 state에 저장된 값을 post로 서버에 보내게 됩니다.