1. 자료 모으기와 화면에 표시하기

이번 잔디에서 제가 정한 주제는 <국내 해수욕장 정보 시각화 및 검색 사이트> 입니다.

 

 

 

우선 가장 먼저 해야할 것은 자료 모으기 입니다.

 

 

 

공공데이터포털에 들어가 국내 해수욕장정보 서비스에 활용신청을 하고 키를 발급받아 JSON 형식의 데이터를 긁어 모으도록 합니다.

 

 

item 배열 안에 해수욕장 object들이 있고, 그 안에도 여러 속성들이 존재함을 알 수 있습니다. 

시도명을 이용해 시도명, 구군명, 정점명, 해변폭, 해변총연장, 특징, 관련사이트, 관련사이트 이름, 해수욕장 이미지, 해수욕장 비상연락처, 위도, 경도를 조회 가능

 

하지만 자료를 찬찬히 뜯어보니 가장 중요한 이미지 링크가 없음을 알게 되었습니다.

그것도 전부 다. 

 

해수욕장 사이트에 들어가 일일이 이미지 링크를 모으는 중입니다.. (총 300개 정도 됨)

 

 

 

 

---

 

이번 웹 개발에서는 리액트를 사용합니다.

 

 

 

* React JS 에 대해 *

https://youtu.be/N3AkSS5hXMA

 

React는 독립적이고 재사용 가능한 컴포넌트들로 구성됩니다.

그리고 이를 활용해 복잡한 유저 인터페이스 구현이 쉽게 가능하다는 장점이 있습니다. 

 

모든 리액트 어플리케이션은 최소 한개의 컴포넌트로 구성되어 있고, 그 루트 컴포넌트는 안에 다른 자식 컴포넌트들로 구성되어있습니다. 

 

 

각각의 컴포넌트는 자바스크립트 클래스로, 안에 state()와 render() 메서드를 갖고 있습니다. state는 컴포넌트가 render 되었을 때 우리가 디스플레이 하고 싶은 것 입니다. 그리고 render는 단어 그대로 UI가 어떻게 나타나야 하는지를 담당하고 있습니다. render()의 아웃풋은 REACT element 인데, 이것은 단순한 자바스크립드 객체로 DOM element에 대응됩니다. 리액트 element는 실제 DOM element가 아니라 단순한 자바스크립트 객체인데, 해당 돔 엘리먼트를 메모리에 가볍게 표시하는 역할을 합니다. 따라서 이것을 'virtual DOM' 이라고 하기도 합니다. 영상에서의 설명대로 virtual DOM은 말 그대로 만들기가 'cheap' 합니다. 

 

 

우리가 element의 state를 바꾸면, 우리는 새로운 react element를 갖게 됩니다. 리액트는 이것을 자신이 갖고 있는 기존의 element들과 비교하여 무엇이 바뀌었는지를 확인하고 실제의 DOM 일부를 업데이트합니다. 따라서 복잡하게 DOM의 상태를 조작하기 위해 일일이 query로 코드를 작성하지 않아도 되고 DOM의 요소들에 이벤트 핸들러들을 첨가할 필요도 없습니다.

이렇게 state의 변화에 반응하여 DOM을 업데이트해주기 때문에 'React' 라고 하는 것입니다. 

 

 

 

 

---

 

그럼 이제 터미널로 React 프로젝트를 런칭하고 vscode로 오픈합니다. 

우선 1차 진도는 json 파일을 잘 요소화 해서 읽어오고 화면에 해수욕장 목록을 정렬하는 것입니다.

일단 웹사이트의 개요를 짜기 위해 사진을 찾은 강원도의 해수욕장 19개의 정보를 담은 미니 JSON 파일을 만들어 사용하였습니다.

 

 

 

주요 코드들.

 

아직까지는 자료 나타내기 외에는 딱히 한 것이 없습니다. 모든 요소들을 사용하지도 않았습니다.

 

 

현재까지의 진행입니다.

다음 목표는 키워드로 해변을 검색하고 화면에 표시하기입니다.