search 검색어변경시 새로고침 필요 issue, pagination 기능 넣기전

.gitignore

+node_modules
\ No newline at end of file

client/.eslintcache

-[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js":"1","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js":"2","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\index.js":"3","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js":"4"},{"size":1626,"mtime":1608989683135,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":1608689675665,"results":"7","hashOfConfig":"6"},{"size":872,"mtime":1608987472134,"results":"8","hashOfConfig":"6"},{"size":2099,"mtime":1608989952137,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"12"},"1n20xnc",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"19"},"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js",["20","21","22"],"import React, { useEffect, useState } from 'react';\nimport { Link, Redirect } from 'react-router-dom';\nimport ohuh from './ohuh.PNG';\nimport { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';\n\nfunction App() {\n  const [search, setSearch] = useState(\"\");\n  const [state, setState] = useState();\n\n  useEffect(() => {\n    if (state === true) {\n      <Redirect to=\"/search\" />\n      // <Redirect to={{\n      //   pathname: `/search/${search}`,\n      //   state: { id: search },\n      // }} />\n    }\n  }, [])\n\n  const handleChange = (e) => {\n    setSearch(e.target.value);\n    console.log(e.target.value)\n  }\n\n  const handleSubmit = (e) => {\n    setState(true);\n  }\n\n  return (\n    <Container className=\"min-height 100vh\">\n      <Row className=\"justify-content-md-center\" >\n        <Image src={ohuh} />\n      </Row>\n      <Row>\n        <InputGroup size=\"lg\">\n          <FormControl\n            placeholder=\"검색어를 입력하세요.\"\n            aria-label=\"Large\"\n            aria-describedby=\"inputGroup-sizing-sm\"\n            onChange={handleChange}\n          />\n          <InputGroup.Append>\n            <Button variant=\"outline-secondary\" onClick={handleSubmit}><Link to=\"/search\">검색</Link></Button>\n          </InputGroup.Append>\n        </InputGroup>\n        {/* <form onSubmit={handleSubmit}>\n          <input className=\"\" name=\"search\" type=\"text\" placeholder=\"검색어를 입력하세요.\" onChange={handleChange}></input>\n          <Link to=\"/search\"><button type=\"submit\">검색</button></Link>\n        </form> */}\n      </Row>\n    </Container>\n  );\n}\n\nexport default App;\n","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\index.js",[],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js",["23","24","25"],"import React, { useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh-sm.PNG';\r\nimport { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';\r\n\r\nfunction Search(props) {\r\n    const [search, setSearch] = useState(\"\");\r\n    const handleChange = (e) => {\r\n        setSearch(e.target.value);\r\n    }\r\n    const handleSubmit = (e) => {\r\n    }\r\n    return (\r\n        <Container className=\"\">\r\n            <Row className=\"\" >\r\n                <InputGroup size=\"lg\">\r\n                    <Image src={ohuh} />\r\n                    <FormControl\r\n                        placeholder=\"검색어를 입력하세요.\"\r\n                        aria-label=\"Large\"\r\n                        aria-describedby=\"inputGroup-sizing-sm\"\r\n                        onChange={handleChange}\r\n                    />\r\n                    <InputGroup.Append>\r\n                        <Button variant=\"outline-secondary\" onClick={handleSubmit}><Link to=\"/search\">검색</Link></Button>\r\n                    </InputGroup.Append>\r\n                </InputGroup>\r\n                {/* <form onSubmit={handleSubmit}>\r\n          <input className=\"\" name=\"search\" type=\"text\" placeholder=\"검색어를 입력하세요.\" onChange={handleChange}></input>\r\n          <Link to=\"/search\"><button type=\"submit\">검색</button></Link>\r\n        </form> */}\r\n            </Row>\r\n            <Link to=\"/\">여기는 검색창이야아아아ㅏㅏ</Link>\r\n        </Container>\r\n        // <div className=\"\">\r\n        //     {console.log(props)}\r\n        //     <header className=\"\">\r\n        //     <img src={ohuh} className=\"\" alt=\"ohuh\" />\r\n        //         <Link to={\"/search\"}>여기는 검색창이야아아아ㅏㅏ</Link>\r\n        //         <form onSubmit={handleSubmit}>\r\n        //             <input className=\"\" name=\"search\" type=\"text\" value={search} onChange={handleChange}></input>\r\n        //             <button type=\"submit\">검색</button>\r\n        //         </form>\r\n        //     </header>\r\n        // </div>\r\n    );\r\n}\r\n\r\nexport default Search;",{"ruleId":"26","severity":1,"message":"27","line":4,"column":26,"nodeType":"28","messageId":"29","endLine":4,"endColumn":29},{"ruleId":"26","severity":1,"message":"30","line":7,"column":10,"nodeType":"28","messageId":"29","endLine":7,"endColumn":16},{"ruleId":"31","severity":1,"message":"32","line":18,"column":6,"nodeType":"33","endLine":18,"endColumn":8,"suggestions":"34"},{"ruleId":"26","severity":1,"message":"35","line":2,"column":16,"nodeType":"28","messageId":"29","endLine":2,"endColumn":24},{"ruleId":"26","severity":1,"message":"27","line":4,"column":26,"nodeType":"28","messageId":"29","endLine":4,"endColumn":29},{"ruleId":"26","severity":1,"message":"30","line":7,"column":12,"nodeType":"28","messageId":"29","endLine":7,"endColumn":18},"no-unused-vars","'Col' is defined but never used.","Identifier","unusedVar","'search' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array.","ArrayExpression",["36"],"'Redirect' is defined but never used.",{"desc":"37","fix":"38"},"Update the dependencies array to be: [state]",{"range":"39","text":"40"},[537,539],"[state]"]
\ No newline at end of file
+[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js":"1","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js":"2","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js":"3"},{"size":6652,"mtime":1609140172008,"results":"4","hashOfConfig":"5"},{"size":2142,"mtime":1609137618631,"results":"6","hashOfConfig":"5"},{"size":1360,"mtime":1609139575316,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"10"},"1n20xnc",{"filePath":"11","messages":"12","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"13"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js",["16"],"import React, { useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh-sm.PNG';\r\nimport Place from './Components/Place';\r\nimport { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination } from 'react-bootstrap';\r\n\r\nfunction Search(props) {\r\n    const [state, setState] = useState(false);\r\n    const [search, setSearch] = useState(props.location.state.id);\r\n    const [modalShow, setModalShow] = useState(false);\r\n\r\n    const places = [{\r\n        name: \"한라산(hallasan)\",\r\n        address: \"제주 서귀포시 토평동 산15-1\",\r\n        img: \"https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg\",\r\n    }, {\r\n        name: \"성산일출봉(sungsan)\",\r\n        address: \"제주 서귀포시 성산읍 성산리 1\",\r\n        img: \"https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg\",\r\n    }, {\r\n        name: \"해녀의 집(haenyeo)\",\r\n        address: \"제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집\",\r\n        img: \"https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800\",\r\n    }, {\r\n        name: \"오설록 티 뮤지엄(osulloc)\",\r\n        address: \"제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록\",\r\n        img: \"https://lh3.googleusercontent.com/proxy/4u4wDLh1sQwCUQsLQbyAUND9Y9x_gBL_Ikw5sbE8SKBF3yd0k_xgac58yPIkzfplB8RNHpvEcEROoVyzWx4SO9QnKj78SF8DKgAQMcAo_anM9CIKtt-zN-ZN5E2WqKJNah4zj205kUdMMEXL36HEk5SZp98oymRGhrBMNlZYsuCMSgB2hkI4F0JOWdTIYz8i8x1Y8YPOwGDbde18dO-gU_Ylu_J360jXO8m-Kr1Xi91vtFthfVWVC4QOHgJF01AWF_dSAOpSDQFTNlVwI0sFK9XInojCuKh2Z_xd0UhtV2TOqvOXsOxq2355QDzveD1y6fpmi5RI\",\r\n    }, {\r\n        name: \"오설록 티 뮤지엄(osulloc)\",\r\n        address: \"제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록\",\r\n        img: \"https://lh3.googleusercontent.com/proxy/4u4wDLh1sQwCUQsLQbyAUND9Y9x_gBL_Ikw5sbE8SKBF3yd0k_xgac58yPIkzfplB8RNHpvEcEROoVyzWx4SO9QnKj78SF8DKgAQMcAo_anM9CIKtt-zN-ZN5E2WqKJNah4zj205kUdMMEXL36HEk5SZp98oymRGhrBMNlZYsuCMSgB2hkI4F0JOWdTIYz8i8x1Y8YPOwGDbde18dO-gU_Ylu_J360jXO8m-Kr1Xi91vtFthfVWVC4QOHgJF01AWF_dSAOpSDQFTNlVwI0sFK9XInojCuKh2Z_xd0UhtV2TOqvOXsOxq2355QDzveD1y6fpmi5RI\",\r\n    }, {\r\n        name: \"해녀의 집(haenyeo)\",\r\n        address: \"제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집\",\r\n        img: \"https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800\",\r\n    }, {\r\n        name: \"성산일출봉(sungsan)\",\r\n        address: \"제주 서귀포시 성산읍 성산리 1\",\r\n        img: \"https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg\",\r\n    }, {\r\n        name: \"한라산(hallasan)\",\r\n        address: \"제주 서귀포시 토평동 산15-1\",\r\n        img: \"https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg\",\r\n    }]\r\n\r\n    if (state !== false) {\r\n        return <Redirect to={{\r\n            pathname: `/search/${search}`,\r\n            state: { id: search },\r\n        }} />;\r\n    }\r\n\r\n    const handleChange = (e) => {\r\n        setSearch(e.target.value);\r\n    }\r\n\r\n    const handleSubmit = (e) => {\r\n        setState(true);\r\n    }\r\n    return (\r\n        <Container>\r\n            <Row className=\"mt-2 mb-2\">\r\n            <Form className=\"vw-100\" onSubmit={handleSubmit}>\r\n                <InputGroup size=\"lg\">\r\n                    <Link to=\"/\"><Image src={ohuh} /></Link>\r\n                    <FormControl\r\n                        placeholder=\"검색어를 입력하세요.\"\r\n                        value={search}\r\n                        aria-label=\"Large\"\r\n                        aria-describedby=\"inputGroup-sizing-sm\"\r\n                        onChange={handleChange}\r\n                    />\r\n                    <InputGroup.Append>\r\n                        <Button type=\"submit\" variant=\"outline-secondary\" >검색</Button>\r\n                    </InputGroup.Append>\r\n                </InputGroup>\r\n                </Form>\r\n            </Row>\r\n            <div>\r\n                <Row className=\"d-flex flex-wrap\">\r\n                    {places.map((place, index) => (\r\n                        <Col key={index} md={6}>\r\n                            <Card>\r\n                                <Card.Img variant=\"top\" src={place.img} />\r\n                                <Card.Body>\r\n                                    <Card.Title>{place.name}</Card.Title>\r\n                                    <Card.Text>\r\n                                        {place.address} </Card.Text>\r\n                                    <Button variant=\"primary\" onClick={() => setModalShow(true)}>{place.name} 자세히 살펴보기</Button>\r\n                                    <Place search={place.name} show={modalShow} onHide={() => setModalShow(false)} />\r\n                                </Card.Body>\r\n                            </Card>\r\n                        </Col>\r\n                    ))}\r\n                </Row>\r\n            </div>\r\n            <Row className=\"mt-2 d-flex justify-content-center\">\r\n                <Pagination>\r\n                    <Pagination.First />\r\n                    <Pagination.Prev />\r\n                    {1 === 1 ? \"\" : <Pagination.Ellipsis />}\r\n                    <Pagination.Item active>{1}</Pagination.Item>\r\n\r\n                    <Pagination.Item>{2}</Pagination.Item>\r\n                    <Pagination.Item>{3}</Pagination.Item>\r\n                    <Pagination.Item>{4}</Pagination.Item>\r\n                    <Pagination.Item>{5}</Pagination.Item>\r\n\r\n                    <Pagination.Ellipsis />\r\n                    <Pagination.Next />\r\n                    <Pagination.Last />\r\n                </Pagination>\r\n            </Row>\r\n        </Container>\r\n    );\r\n}\r\n\r\nexport default Search;","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js",["17"],"import React from 'react';\r\nimport { Modal, Container, Row, Col, Button } from 'react-bootstrap';\r\n\r\nfunction Place(props) {\r\n  return (\r\n    <Modal {...props}\r\n      size=\"lg\"\r\n      // show={lgShow}\r\n      // onHide={() => setLgShow(false)}\r\n      aria-labelledby=\"example-modal-sizes-title-lg\">\r\n      <Modal.Header closeButton>\r\n        <Modal.Title id=\"contained-modal-title-vcenter\">\r\n          {props.search} \r\n          </Modal.Title>\r\n      </Modal.Header>\r\n      <Modal.Body className=\"show-grid\">\r\n        <Container>\r\n          <Row className=\"mt-4\">\r\n            <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>\r\n            <a href=\"https://www.daum.net\">다음의 블로그</a>\r\n          </Row>\r\n          <Row className=\"mt-4\">\r\n            <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>\r\n            <a href=\"https://www.naver.com/\">네이버의 블로그</a>\r\n          </Row>\r\n          <Row className=\"mt-4\">\r\n            <div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>\r\n            <a href=\"https://www.google.com/\">구글의 블로그</a></Row>\r\n        </Container>\r\n      </Modal.Body>\r\n      <Modal.Footer>\r\n        <Button onClick={props.onHide}>Close</Button>\r\n      </Modal.Footer>\r\n    </Modal>\r\n  );\r\n}\r\n\r\nexport default Place;","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js",["18","19"],{"ruleId":"20","severity":1,"message":"21","line":101,"column":22,"nodeType":"22","messageId":"23","endLine":101,"endColumn":29},{"ruleId":"24","severity":1,"message":"25","line":2,"column":33,"nodeType":"26","messageId":"27","endLine":2,"endColumn":36},{"ruleId":"24","severity":1,"message":"28","line":1,"column":17,"nodeType":"26","messageId":"27","endLine":1,"endColumn":26},{"ruleId":"24","severity":1,"message":"29","line":2,"column":10,"nodeType":"26","messageId":"27","endLine":2,"endColumn":14},"no-self-compare","Comparing to itself is potentially pointless.","BinaryExpression","comparingToSelf","no-unused-vars","'Col' is defined but never used.","Identifier","unusedVar","'useEffect' is defined but never used.","'Link' is defined but never used."]
\ No newline at end of file

client/src/App.js

 import React, { useEffect, useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ohuh from './ohuh.PNG';
-import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';
+import { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';
 
 function App() {
   const [search, setSearch] = useState("");
@@ -16,7 +16,6 @@ function App() {
 
   const handleChange = (e) => {
     setSearch(e.target.value);
-    console.log(e.target.value)
   }
 
   const handleSubmit = (e) => {
@@ -29,21 +28,22 @@ function App() {
     <Container className="vh-100">
       <Row className="d-flex justify-content-md-center">
         <Image src={ohuh} />
-        <InputGroup size="lg" xs={5}>
-          <FormControl
+      </Row>
+      <Row className="d-flex justify-content-md-center">
+        <Form className="vw-100" onSubmit={handleSubmit}>
+          <InputGroup>
+            <Form.Control
+              size="lg"
               placeholder="검색어를 입력하세요."
               aria-label="Large"
               aria-describedby="inputGroup-sizing-sm"
               onChange={handleChange}
             />
             <InputGroup.Append>
-            <Button variant="outline-secondary" onClick={handleSubmit}>검색</Button>
+              <Button type='submit' variant="outline-secondary">검색</Button>
             </InputGroup.Append>
           </InputGroup>
-        {/* <form onSubmit={handleSubmit}>
-          <input className="" name="search" type="text" placeholder="검색어를 입력하세요." onChange={handleChange}></input>
-          <Link to="/search"><button type="submit">검색</button></Link>
-        </form> */}
+        </Form>
       </Row>
     </Container>
   );

client/src/Components/Place.js

@@ -15,27 +15,9 @@ function Place(props) {
       </Modal.Header>
       <Modal.Body className="show-grid">
         <Container>
-          <Row>
-            <Col xs={12} md={8}>
-              크롤링 해와서
-              </Col>
-            <Col xs={6} md={4}>
-              내용을 담아주세요.
-              </Col>
-          </Row>
-
           <Row className="mt-4">
             <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
             <a href="https://www.daum.net">다음의 블로그</a>
-            {/* <Col xs={6} md={4}>
-                .col-xs-6 .col-md-4
-              </Col>
-              <Col xs={6} md={4}>
-                .col-xs-6 .col-md-4
-              </Col>
-              <Col xs={6} md={4}>
-                .col-xs-6 .col-md-4
-              </Col> */}
           </Row>
           <Row className="mt-4">
             <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>

client/src/Search.js

@@ -2,14 +2,47 @@ import React, { useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ohuh from './ohuh-sm.PNG';
 import Place from './Components/Place';
-import halla from './halla.jpg';
-import { Container, Row, Card, Image, InputGroup, FormControl, Button, Form } from 'react-bootstrap';
+import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination } from 'react-bootstrap';
 
 function Search(props) {
     const [state, setState] = useState(false);
     const [search, setSearch] = useState(props.location.state.id);
     const [modalShow, setModalShow] = useState(false);
 
+    const places = [{
+        name: "한라산(hallasan)",
+        address: "제주 서귀포시 토평동 산15-1",
+        img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg",
+    }, {
+        name: "성산일출봉(sungsan)",
+        address: "제주 서귀포시 성산읍 성산리 1",
+        img: "https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg",
+    }, {
+        name: "해녀의 집(haenyeo)",
+        address: "제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집",
+        img: "https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800",
+    }, {
+        name: "오설록 티 뮤지엄(osulloc)",
+        address: "제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록",
+        img: "https://lh3.googleusercontent.com/proxy/4u4wDLh1sQwCUQsLQbyAUND9Y9x_gBL_Ikw5sbE8SKBF3yd0k_xgac58yPIkzfplB8RNHpvEcEROoVyzWx4SO9QnKj78SF8DKgAQMcAo_anM9CIKtt-zN-ZN5E2WqKJNah4zj205kUdMMEXL36HEk5SZp98oymRGhrBMNlZYsuCMSgB2hkI4F0JOWdTIYz8i8x1Y8YPOwGDbde18dO-gU_Ylu_J360jXO8m-Kr1Xi91vtFthfVWVC4QOHgJF01AWF_dSAOpSDQFTNlVwI0sFK9XInojCuKh2Z_xd0UhtV2TOqvOXsOxq2355QDzveD1y6fpmi5RI",
+    }, {
+        name: "오설록 티 뮤지엄(osulloc)",
+        address: "제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록",
+        img: "https://lh3.googleusercontent.com/proxy/4u4wDLh1sQwCUQsLQbyAUND9Y9x_gBL_Ikw5sbE8SKBF3yd0k_xgac58yPIkzfplB8RNHpvEcEROoVyzWx4SO9QnKj78SF8DKgAQMcAo_anM9CIKtt-zN-ZN5E2WqKJNah4zj205kUdMMEXL36HEk5SZp98oymRGhrBMNlZYsuCMSgB2hkI4F0JOWdTIYz8i8x1Y8YPOwGDbde18dO-gU_Ylu_J360jXO8m-Kr1Xi91vtFthfVWVC4QOHgJF01AWF_dSAOpSDQFTNlVwI0sFK9XInojCuKh2Z_xd0UhtV2TOqvOXsOxq2355QDzveD1y6fpmi5RI",
+    }, {
+        name: "해녀의 집(haenyeo)",
+        address: "제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집",
+        img: "https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800",
+    }, {
+        name: "성산일출봉(sungsan)",
+        address: "제주 서귀포시 성산읍 성산리 1",
+        img: "https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg",
+    }, {
+        name: "한라산(hallasan)",
+        address: "제주 서귀포시 토평동 산15-1",
+        img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg",
+    }]
+
     if (state !== false) {
         return <Redirect to={{
             pathname: `/search/${search}`,
@@ -25,8 +58,9 @@ function Search(props) {
         setState(true);
     }
     return (
-        <Container className="mt-3">
-            <Row className="" >
+        <Container>
+            <Row className="mt-2 mb-2">
+            <Form className="vw-100" onSubmit={handleSubmit}>
                 <InputGroup size="lg">
                     <Link to="/"><Image src={ohuh} /></Link>
                     <FormControl
@@ -37,58 +71,46 @@ function Search(props) {
                         onChange={handleChange}
                     />
                     <InputGroup.Append>
-                        <Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button>
+                        <Button type="submit" variant="outline-secondary" >검색</Button>
                     </InputGroup.Append>
                 </InputGroup>
+                </Form>
             </Row>
-            <Form>
-                <Row className="d-flex justify-content-between">
-                    <Card style={{ width: '35rem' }}>
-                        <Card.Img variant="top" src={halla} />
+            <div>
+                <Row className="d-flex flex-wrap">
+                    {places.map((place, index) => (
+                        <Col key={index} md={6}>
+                            <Card>
+                                <Card.Img variant="top" src={place.img} />
                                 <Card.Body>
-                            <Card.Title>한라산(hallasan)</Card.Title>
+                                    <Card.Title>{place.name}</Card.Title>
                                     <Card.Text>
-                                제주 서귀포시 토평동 산15-1 </Card.Text>
-                                <Button variant="primary" onClick={() => setModalShow(true)}>한라산 자세히 살펴보기</Button>
-                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
-                        </Card.Body>
-                    </Card>
-
-                    <Card style={{ width: '35rem' }}>
-                        <Card.Img variant="top" src={halla} />
-                        <Card.Body>
-                            <Card.Title>성산일출봉(sungsan)</Card.Title>
-                            <Card.Text>
-                                제주 서귀포시 성산읍 성산리 1 </Card.Text>
-                                <Button variant="primary" onClick={() => setModalShow(true)}>성산일출봉 자세히 살펴보기</Button>
-                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
+                                        {place.address} </Card.Text>
+                                    <Button variant="primary" onClick={() => setModalShow(true)}>{place.name} 자세히 살펴보기</Button>
+                                    <Place search={place.name} show={modalShow} onHide={() => setModalShow(false)} />
                                 </Card.Body>
                             </Card>
+                        </Col>
+                    ))}
                 </Row>
-                <Row className="d-flex justify-content-between">
-                    <Card style={{ width: '35rem' }}>
-                        <Card.Img variant="top" src={halla} />
-                        <Card.Body>
-                            <Card.Title>해녀의 집(haenyeo)</Card.Title>
-                            <Card.Text>
-                                제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집 </Card.Text>
-                                <Button variant="primary" onClick={() => setModalShow(true)}>해녀의 집 자세히 살펴보기</Button>
-                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
-                        </Card.Body>
-                    </Card>
+            </div>
+            <Row className="mt-2 d-flex justify-content-center">
+                <Pagination>
+                    <Pagination.First />
+                    <Pagination.Prev />
+                    {1 === 1 ? "" : <Pagination.Ellipsis />}
+                    <Pagination.Item active>{1}</Pagination.Item>
 
-                    <Card style={{ width: '35rem' }}>
-                        <Card.Img variant="top" src={halla} />
-                        <Card.Body>
-                            <Card.Title>오설록 티 뮤지엄(osulloc)</Card.Title>
-                            <Card.Text>
-                                제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록 </Card.Text>
-                                <Button variant="primary" onClick={() => setModalShow(true)}>오설록 티 뮤지엄 자세히 살펴보기</Button>
-                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
-                        </Card.Body>
-                    </Card>
+                    <Pagination.Item>{2}</Pagination.Item>
+                    <Pagination.Item>{3}</Pagination.Item>
+                    <Pagination.Item>{4}</Pagination.Item>
+                    <Pagination.Item>{5}</Pagination.Item>
+
+                    <Pagination.Ellipsis />
+                    <Pagination.Next />
+                    <Pagination.Last />
+                </Pagination>
             </Row>
-            </Form>
         </Container>
     );
 }

package-lock.json

+{
+  "name": "search-page",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}

package.json

+{
+  "name": "search-page",
+  "version": "1.0.0",
+  "description": "Search Page 2020 Winter",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://compmath.korea.ac.kr/gitlab/research/search-page.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}

server/package-lock.json

+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}

server/server.js

+import express from 'express'
+
+const app = express()
+
+app.get('/', (req, res) => {
+    res.send('Hello')
+})
+
+app.get('/home', (req, res) => {
+    res.send('Home page')
+})
+
+app.put('/signin', (req, res) => {
+    res.send('Sign in')
+})
+
+app.listen(3001, () => {
+    console.log('Server is listening on port 3001')
+})
\ No newline at end of file