(설악산) 토왕성 폭포 후기

취미/운동 2018. 7. 29. 19:00

설악산 도착!!
날씨가 그다지 좋지 않았다.
설악산은 날씨는 운이라더니...
오늘은 구름이 참 많다.
소공원 도착

입구부터 거창하고 화려하다.

설악산 입장료는 다음과 같다.
성인 3천원 학생 1천원 초딩 500원!

이런것에 출렁다리 하나쯤은 있어야지??

요즘 40년만에 역대 무더위.
비는 안 온 상태라.. 이게 폭포?? ㅎㅎ
귀엽게 수돗물처럼 졸졸
이것은 비룡폭포라 한다.

물은 굉장히 맑고 깨끗해
보기만 해도 시원했다.

이 폭포부터 시작되는 깔딱고개.
토왕성 폭포를 보기 위해.
무거운 발걸음으로 한계단씩 올랐다.

절경. 멋지다..
우충중 비가 쏟아질것만 같은 하늘..
역시나 2분 후 비가 내리기 시작했다.
토왕성 폭포는 내 앞에서 떨어지는게 아니라
저 멀리 산 봉우리에서 떨어진다고 했다.
그런데? 물이 흐르던 흔적만...
내가 못 보는건가 일행들에게 물었는데..
결론은 물이 없다. ㅠㅠ 슬프다.

1도 없다니..날씨도 흐려
안개때문에 절경도 보이지 않았다..
슬프다 가을에 다시 와야지.

운동을 했으니.
속초를 왔으니.
먹으러가자!!

속초 맛집 검색 시작.
5분만에 결정되었다.

봉포머구리집

너로 정했다. 속초로 가즈아~~
도착했는데 엄청났다
대기번호 무려 100번
근데 사람들이 기다린다...
그 이유가 있었다.
5초머더 1번씩 올라가는 대기번호..
회전율이 엄청났다..
와 이집 재벌인가?
4층?5층은 되보이는데 만석이라니

심지어 겁나 비싸기도 하다.
그나마 있던 주말은 15,000 메뉴도

주말.공휴일에 주문 금지

라고 씌여있었다.
근데 맛있긴했다.

양도 많고...

회를 먹고 좋은 하루였다.

산이 더 힐링되는 하루였다.

'취미 > 운동' 카테고리의 다른 글

[북한산] 북한산성~백운대~우이동 코스 후기  (0) 2018.09.15
[2018년 08월 12일] 인왕산과 북악산 등산 후기 & 삼청동 거리  (0) 2018.08.12
KT 위즈 파크에 다녀왔습니다~~ 수원에서 홈경기! KT와 SK의 맞대결! 야구장 후기  (0) 2018.06.25
JTBC마라톤 10만원 홍보 모델  (0) 2018.04.17
2018년 강화 고려산 진달래축제에 다녀온 후기  (0) 2018.04.16
Posted by sungho88
,

React 설치 : create-react-app할 때 주의점

개발/React 2018. 7. 27. 18:22

설치할 때, 


create-react-app styleTest


로 하면 오류가 발생하며 생성할 수 없다.


무조건 


소문자를 사용해야 한다.



styletest로 변경후 설치한다.


그러면, styletest이 만들어지고 그곳에 리액트가 설치된다.


그러면 


$ cd styletest를 입력한다.


그리고,


styletest 폴더 이동 후 code .으로 바로 vs code 에디터를 열 수 있다.


atom . 도 가능하다!


그러면 



기본 구조가 위와 같이 생성된다.





'개발 > React' 카테고리의 다른 글

[React] TypeError: Cannot read property 'map' of undefined  (0) 2018.07.31
[React] React에서 "key" prop 에러 && prop  (2) 2018.07.31
[React] React 컴포넌트에서 부트스트랩 Table 사용하기: react-bootstrap-table  (0) 2018.07.23
[React] 리액트(React)의 주요 개념 - state에 대해 알아보자  (0) 2018.07.17
[React] 01) 리액트(React)는 무엇이며 왜 사용하는가?  (0) 2018.07.07
Posted by sungho88
,

[React] React 컴포넌트에서 부트스트랩 Table 사용하기: react-bootstrap-table

개발/React 2018. 7. 23. 17:02

react-bootstrap-table을 사용하려고한다.


react에서도 <table>로 코딩이 가능하지만, 좀 더 간편하게 npm이 제공된다.


간단하게 멋진 테이블 생성이 가능하다.


사용법은 홈페이지를 참고하자.


홈페이지

1. 터미널에 npm 설치한다.


$ npm i react-bootstrap-table --save


이렇게 설치를 한뒤, 컴포넌트.js에 들어가서... 사용하기 위해서


2. import를 해준다.


import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';



!!!!!!!!!!!


오류 발생...


테이블이 아무리 해도 안 나온다.


데이터 리스트는 나오는데.... 왜 CSS 적용이 안 되는 것인가?


생각해보니 Bootstrap을 적용해야만 할 것 같은데 어떻게 적용할까?


1) public - index.html에 링크와 스크립트를 추가해준다. 당연히 <head> 태그 사이에..

  

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>  


그 다음에, 다시 실행하면?


적용된다!


기본 테이블 보여주는 코드는 다음과 같다.



import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import './node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';

class Table extends React.Component {
render() {
return (
<BootstrapTable data={ products }>
<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
);
}
}


이렇게 하면, 기본 테이블이 예쁘게 커스텀되어 나온다.

그리고 다양한 기능들을 적용할 수 있다.


바로 이 사이트에서 



참고로, 그냥 HTML 테이블 Table Tag로 그냥 만들고 싶다면 다음과 같이 작성하면 된다.



render() {
return (
<div className="customers">
<h2>Customers</h2>

<table className="tablecss table">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>성별</th>
</tr>
</thead>
<tbody>
<tr key={customer.id}>
<td>HONG's</td>
<td>22</td>
<td>남자</td>
</tr>
</tbody>
</table>
</div>
);
}


이렇게 하면, 테이블이 생성된다.

Bootstrap을 적용하는 방법은 상단에 



import 'bootstrap/dist/css/bootstrap.min.css';
import './customers.css';


을 해주면 되고, 테이블을 꾸며주는 css 파일도 import하면 된다.


이렇게하면,


테이블 완성!


css파일에서 부를때는 class가 아니라  className임을 주의하자.

'개발 > React' 카테고리의 다른 글

[React] React에서 "key" prop 에러 && prop  (2) 2018.07.31
React 설치 : create-react-app할 때 주의점  (0) 2018.07.27
[React] 리액트(React)의 주요 개념 - state에 대해 알아보자  (0) 2018.07.17
[React] 01) 리액트(React)는 무엇이며 왜 사용하는가?  (0) 2018.07.07
[React] 리액트에서 이벤트(Event) 처리하는 방법에 대해..  (0) 2018.03.05
Posted by sungho88
,

티스토리툴바