(해당 포스팅은 '2019-06-19' 최종 수정되었습니다.)

 

안녕하세요, 히니입니다 :)

 

오늘은 React 기본 구조와 소스들을 분석해보고,

리액트에서 어떤 프로세스로 웹페이지를 띄워주는지에 대해 알아보겠습니다.

 


 


 

1. 첫번째 프로젝트 만들기

 

create-react-app first_practice

원하는 폴더명으로 프로젝트 생성

여기서 create-react-app은 명령어 하나로 react 개발환경을 설치할 수 있도록 도와주는 툴체인이다.

 

설치가 종료되면 몇 가지 명령들과 react 시작방법을 알려준다.

 

cd first_practice
yarn start

만든 개발폴더로 이동 후 yarn start를 입력하면 쉽게 react를 시작할 수 있다.

 

이러한 코드들이 차례로 나오고

 

웹브라우저에 localhost 서버, 포트 번호는 3000으로 이러한 페이지가 뜨면 개발환경 준비 완료

 


 

2. 구조 살펴보기

이제 개발 폴더의 구조를 한번 살펴봅시다.

  • node_modules 폴더

npm으로부터 다운로드된 라이브러리를 포함한다.

 

  • public 폴더

favicon.ico // 웹페이지 접속 시, 상단 탭에 보여지는 아이콘

index.html // 최종적으로 웹브라우저에 띄워지는 파일*

manifest.json // json 파일로써 나의 APP이 유저의 장치에 설치될 때, 메타정보를 알려줌

<!--
manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->

 

  • src 폴더

App.jsindex.js의 하위 컴포넌트(div className="App") 생성

index.jsindex.html의 컴포넌트(div id="root") 생성

css는 각각의 js파일을 꾸며주는 역할

serviceWorker.js 는 기존 방문자가 App을 빠르게 로딩할 수 있도록 해줌

https://bit.ly/CRA-PWA 참고

logo.svg 는 (Scalable Vector Graphics, SVG)로 logo를 표현한 것

2차원 벡터 그래픽

XML 기반의 파일 형식

 

  • gitignore파일

말그래도 git에서 무시할 파일(git의 버전관리에서 제외할 파일)을 지정하는 파일

 

  • package.json 파일

프로젝트 정보(이름, 설명, 개발자 등)와 의존성을 관리하는 문서

이미 작성된 package.json 문서는 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해줌

 

  • README.md 파일

사용법 설명

 

  • yarn.lock 파일

package.json에 있는 것보다 많은 정보로 보다 엄격하게 의존성을 관리해줌

[의존성 관리 링크]

 


 

3. 프로세스 분석

index.js

주석을 제외하면 이러한 코드가 나온다.

 

import React from 'react';

React를 사용 가능하도록 해줌

 

import ReactDOM from 'react-dom';

react-dom package는 DOM에 특화된 메소드 제공 / React 모델 외부로 나갈 수 있는 해결책 제공

따라서, index.html로 내보내는 마지막 js파일(React 모델)에 사용한다.

여기서는 index.js 파일에 사용

npm과 ES6를 사용한다면 import ReactDOM from 'react-dom'

npm과 ES5의 경우에는 var ReactDOM = require('react-dom')

 

import './index.css'

css파일 적용

 

import App from './App'

App 이라는 요소를 쓰기 위해서 App.js 파일의 function인 App을 임포트함

App이 class 여도 됨 // 차이는 나중에 나옴

[상태 저장 컴포넌트 / 함수 컴포넌트 링크]

 

import * as serviceWorker from './serviceWorker';

serviceWorker.unregister();

https://w3c.github.io/ServiceWorker

서비스워커 : 브라우저의 백그라운드에서 실행되는 js워커

PWA 생성 시 오프라인에서도 사용가능하고 푸시 알림 기능도 사용할 수 있게 해줌

(서비스워커 설명 링크)

 

ReactDOM.render(<App/>,document.getElementById('root'));

ReactDOM.render(element, container[, callback])

element를 제공된 container의 DOM에 렌더링

여기서는 App.js에서 가져온 App 컴포넌트를 Index.html의 id가 root인 요소에 렌더링


 

저도 아직 배우고 있는 단계이기 때문에 정확하지 않은 정보가 있을 수 있습니다.

여러 블로그를 보시고, 정보가 다르면 서치 후 알려주시면 감사하겠습니다 :>

다음 포스팅은 '컴포넌트 생성 과정' 입니다.



치앙마이 한달살기 준비(환전) 타이틀



치앙마이 한달살기 준비(환전) 타이틀

태국으로 떠나기 전, 환전을 해야해서 여러가지 방법을 알아봤는데요.

바트 환전, 달러 환전, ext 카드까지 정리해보도록 하겠습니다 :>

* 이 포스팅에서는 '리브(국민은행 어플)를 통한 환전', '우리은행 해외사용 가능 카드' 를 중점적으로 다루고 있습니다.

환전을 하는 방법에는 크게 3가지가 있는데요.

1. 달러로 환전한 후 태국 환전소에서 바트로 환전하기

2. 바트로 환전하기

3. 해외 사용 가능한 카드(atm 인출 가능 포함) 가져가기

이 정도로 추릴 수 있습니다.

저는 2+3 을 해서 환전을 준비했는데요.

이제부터 하나하나 알아보겠습니다!

@리브를 통한 환전@

먼저, 국민은행 어플 '리브'는 오프라인으로 은행에 가서 환전하는 것보다 더 좋은 환율우대를 해주고 있어요.

그래서 저는 외국에 나갈 때마다 '리브'를 사용하곤 했었는데요.

'리브' 어플을 깐 다음에

리브 어플 첫화면

어플 첫화면이 뜨고 어플에 들어가면

리브 홈 화면

이러한 화면이 뜹니다. 이 화면에서 '환전과 여행' 탭을 누르면

리브 환전 탭

환전 메뉴 화면으로 넘어가게 되는데요!

환전된 금액을 직접 수령하는 방법과 배달 받는 방법이 있습니다.

28일인 내일까지 배달비가 무료네요 :>

하지만, 저는 여행 가기까지의 날짜가 너무 적게 남고 카드에 일정 금액을 남겨두고 인출해서 쓸 생각이기 때문에

직접 수령하기로 했습니다!

여기서 주의할 점이 있는데요.

배달서비스로는 외화 기준으로만 입력할 수 있으며, 환율을 통한 원화환산금액이 1일 1,500,000(백오십만원)이 넘지 않아야합니다.

또한 수령의 경우에는 1일 1,000,000(백만원)을 넘지 않아야 하는데요.

제가 직접 은행에 전화해서 물어봤더니, 백만원 이상의 금액인 경우 '리브' 앱을 통해서 두번 수령을 하거나 환율에 조금 손해가 있더라도 직접 은행에 가서 바꾸는 건 한도 금액이 없다고 하더라구요.

다만, 은행에서 보유하고 있는 외화에 한정해서 바꿀 수 있다는 점!

그래서 꼭 가기 전에 은행에 어느 정도의 외화가 있는지 확인하고 가야해요 :>

이 또한 국민은행 '리브' 앱에서 확인할 수 있답니다.

환전 -> 영업점 수령 에서 약관에 동의하고 환전에 필요한 정보를 입력하는데

어느 영업점에서 수령할지를 묻는 입력란이 있어요.

거기서 영업점들을 찾아보면 각 영업점이 보유하고 있는 해당 통화의 양이 뜹니다.

이렇게 확인하기 너무 힘드시면 국민은행에 ARS 문의하시는 방법도 있습니다 :>

또한, 영업점 수령과 배달 서비스 모두 신청일에서 2일 후부터 수령 가능하니 이 점 주의해주세요!

리브 환전 주의사항

리브 환전 주의사항

이렇게 달러나 바트로 환전을 할 수 있구요.

달러로 환전할 시 태국에서 환전소를 이용하시면 됩니다!


추가 (2019-03-01)

'리브'를 통해서 환전하고 왔는데요!

여행자보험을 추가해서 환율우대가 10% 낮아지고, 어제(2019-02-28) 환율 기준으로

원화 998,730\을 27,000바트(약 963,090\)으로 바꿨습니다!

36,000\ 정도의 차액이 있군요 :>

이번에는 카드에 대해 알려드릴게요.

@우리은행 해외사용가능 카드@

비자카드 혹은 마스터카드 표시가 있으면 해외에서 결제 가능한데,

해외 atm에서 수수료 적게 인출할 수 있는 카드는 무엇이 있는지 잘 모르겠었어요 ;<

그래서 한번 알아봤는데요.

이번에는 우리은행 카드입니다!

우리은행 해외사용 카드 url을 올려드릴테니 들어가보셔도 되구요.

https://sccd.wooribank.com/ccd/Dream?withyou=CDCIF0023&CTGR_CD=C200023#none

해당 카드들을 정리해드리겠습니다!

 

 외화바로 check

 우리one 체크카드

 썸타는우리 체크

 국제학생증 체크카드

 연회비

 x

 x

 x

 o(14,000원)

 atm 수수료

 x(달러로 인출)

 300달러 이상시 500원

 건당 3달러 면제

 3달러

 마스터,비자

 o(마스터)

 x

 o(마스터)

 o(비자)

 교통카드

 o

 o

 o

 x

 특징

 모든 걸 달러기준으로 처리

 예금 조회 수수료도 있음

 

 


우리 one 체크카드 혜택

우리 one 체크카드는 인출수수료 (300달러 이상시 500원 미만시 1,000원)과 예끔조회 수수료 (건당 약 700원) 를 가지고 있으며,

환율도 30% 우대해서 인출합니다.

썸타는 우리 체크카드 혜택

썸타는 우리 체크카드는 인출 수수료를 건당 3달러 면제시켜주며, 다만 현지 atm 수수료가 부과될 수 있습니다.

또한, 예금 잔액 조회 수수료가 약 700원 발생합니다.

해외가맹점 이용시 캐시백이나 라운지 이용은 전월 실적에 영향을 받습니다.

국제 학생증 체크카드 혜택

국제 학생증 체크카드는 너무 혜택이 많아서 직접 들어가서 쭉 살펴보시는 게 좋은데, 해외 관련 특징만 읊어보면

해외 atm 이용시 건당 3달러 + 이용금액의 1%가 수수료로 듭니다. 또한 별도의 atm 이용수수료가 더 부과될 수도 있습니다.

따라서, 해외에서 마스터카드로 직접 결제하며 달러로 인출하고자 한다면 '외화바로 check 카드'

미국, 중국, 필리핀, 태국, 말레이시아, 베트남 에서 수수료가 굉장히 적게 인출하지만, 직접 결제는 필요없으면 '우리 one 체크카드'

해외에서 마스터카드로 직접 결제하며 해당 국가 통화로 인출하고자 한다면 '썸타는 우리 체크카드'

를 선택하시면 될 것 같습니다!

국제 학생증 카드는 약간 다른 분야인 것 같아서 뺐어요 ;<

저는 카드가 사용 가능한 곳에서는 마스터카드를 쓰고 싶고 필요할 떄는 atm 인출도 이용할 것 같아서

썸타는 우리 체크카드를 사용하려고 합니다.

(사실, 이미 가지고 있는 카드라 더 발급받기 귀찮아서 ㅎㅎㅎ)

태국 가시는 분들은 카드 결제가 별로 없고, atm이용해서 바트를 직접 뽑는 경우가 많아서 우리 one 체크카드 많이 발급받아 가시더라구요!

우리 카드 정리

우리 카드 정리

저는 1,000,000\(백만원)은 '리브'로 직접 수령하는 바트 환전을 하고

남은 금액은 '우리 썸 체크카드'에 넣어둔 후, 부족하면 인출하여 사용하기로 결정했습니다!

모두 행복한 여행되세요 :>


치앙마이 한달살기 준비(예방접종) 타이틀

@예방접종@

3/5일 태국으로 떠나기 위해 여러가지를 알아보던 중, 지인이 예방주사에 대한 이야기를 꺼냈어요.

전혀 생각하지 못했기 때문에 혹여 늦은 건 아닐까 부랴부랴 알아봤습니당!

질병관리본부 KCDC(http://www.cdc.go.kr/CDC/map/nation_info_content.jsp?nation=TH&menuIds=HOME006-MNU2801-MNU2852-MNU3028) 에 들어가보면 해외질병 메뉴에서 여러 정보를 얻을 수 있습니다.

태국에서 주의해야할 질병에 대해 요약해보자면,

홍역, 지카바이러스, A형 간염, 장티푸스를 주의해야하며

B형 간염, 일본뇌염, 말라리아, 광견병, 황열 등은 특수 상황시 (성적 접촉, 의료 시술, 모기에 물림, 포유동물에 물림 등)에 주의해야한다고 합니다.

저는 질병관리본부 - 예방접종 도우미(https://nip.cdc.go.kr/irgd/member.do?MnLv1=2) 사이트에서 제가 현재까지 맞은 예방접종을 확인해보았는데요.

위 사이트에서 예방접종관리 -> 본인 예방접종 내역조회 에 가시면 예방 접종 내역 보기로 내역을 보실 수 있습니다.

저는 B형 간염, 파상풍, 홍역, 일본뇌염, 인플루엔자 예방주사를 이미 맞은 것으로 나와서 이번에 장티푸스 주사를 맞으러 가기로 했어요.

중랑구 보건소에 장티푸스 주사를 맞으러 갔는데, 항체로 인한 면역이 2주 후에야 생긴다고 하더라구요.

해외감염병 예방수칙

질병관리본부 페이지에 있는 '해외감염병 예방수칙'에도 나와있었어요.

예방접종은 꼭 출국 2주전에 맞기

그리고 주사 놔주시면서 태국에 갈거면 내과에서 말라리아 약도 받아가라고 하셔서 내과에 들렀는데요.

태국 중에서도 방콕과 치앙마이, 치앙라이 등 일부 지역은 말라리아 감염이 흔하지 않고

주에 한 번이 아니라 하루에 한 번 먹는 약을 먹어야 효과가 큰데, 약이 하나에 3,000원 가량해서

30일 정도를 여행하려면 약값만 100,000원이라시더군요 :<

그래서 말라리아 약은 안먹기로 하고 그냥 왔습니다.

대신 의사 선생님께서 예방하는 법을 알려주셨는데요.

모기가 기피하는 밝은 색 옷을 입고, 맨 살이 잘 드러나지 않도록 입으며

땀 냄새나 향수 냄새를 좋아하니 자제하고 산이나 풀숲에 갈때는 모기 기피제를 뿌리고 가라고 말씀해주셨습니다.

일단 불안하지만 말라리아는 태국 병원에 가도 초기에 가면 쉽게 치료할 수 있다고 하셔서 돌아왔습니다 :>

#정리

홍역, 지카바이러스, A형 간염, 장티푸스

보건소에서

2주전에 맞기

태국 예방접종 정리

즐겁게 여행 가서 아프지 말고 우리 건강하게 놀다 돌아옵시다! :>


+ Recent posts