1. install

npm i react-native-dotenv

2.babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

3. .env

API_KEY= "asdasdasd"

4. import

import { API_KEY } from "@env"

5. 예시

6. 안될시

yarn start --reset-cache

를 해보고 안되면 vscode를 껐다 켜보던가 컴터를 껐다키던가 

저는 컴터를 껐다 키니까 됐습니다.

출처

https://yong-nyong.tistory.com/46

https://velog.io/@devstefancho/React-Native-environment-varible-%ED%8C%8C%EC%9D%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-.env

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소

• 간단한 키와 값을 저장할 수 있다. 키-밸류 스토리지의 형태
• 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성
• 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있음
• 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거
• 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장
• 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장! 
• 하지만 비밀번호같은 중요한 정보는 절대 저장 금지! 클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있음

로컬 스토리지(localStorage)

로컬 스토리지는 window.localStorage에 위치합니다. 키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 됩니다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환됩니다. 키도 문자열로 변환됩니다.

localStorage.setItem('name', 'zerocho');
localStorage.setItem('birth', 1994);
localStorage.getItem('name'); // zerocho
localStorage.getItem('birth'); // 1994 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

메소드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 됩니다. localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워집니다.

localStorage.setItem('object', { a: 'b' });
localStorage.getItem('object'); // [object Object]

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장됩니다. [object 생성자]형으로 저장되는 거죠. 객체를 저장하려면 두 가지 방법이 있습니다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있습니다.

• 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해야됩니다.
• 객체 형식 그대로 문자열로 변환하는 거죠. 받을 때는 JSON.parse하면 됩니다.

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }

이렇게 데이터가 지우기 전까지는 계속 저장되어 있기 때문에 유저 커스터마이제이션에 좋을 것 같습니다. 사용자의 설정(보안에 민감하지 않은)이나 데이터들을 넣어두면 됩니다.

세션 스토리지(sessionStorage)

세션 스토리지는 window.sessionStorage에 위치합니다. clear, getItem, setItem, removeItem, key 등 모든 메소드가 같습니다. 단지 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다.

출처

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 쿠키 또는 세션을 사용

기본적으로 HTTP 프로토콜 환경은 "connectionless, stateless"한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야합니다. 이 특성을 보완하기 위해서 쿠키와 세션을 사용하게됩니다.

     connectionless

• 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징
• HTTP는 먼저 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response를 보내고 접속을 끊는 특성
• 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용하는데 HTTP1.1에서는 이것이 디폴트다.
• HTTP가 tcp위에서 구현되었기 때문에 (tcp는 연결지향,udp는 비연결지향) 네트워크 관점에서 keep-alive는 옵션으로 connectionless의 연결비용을 줄이는 것을 장점으로 비연결지향이라 한다.

     stateless

• 통신이 끝나면 상태를 유지하지 않는 특징
• 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.
  
  쿠키와 세션은 위의 두 가지 특징을 해결하기 위해 사용
  
  예를 들어, 쿠키와 세션을 사용하지 않으면 쇼핑몰에서 옷을 구매하려고 로그인을 했음에도, 페이지를 이동할 때 마다 계속 로그인을 해야 합니다.
  
  쿠키와 세션을 사용했을 경우, 한 번 로그인을 하면 어떠한 방식에 의해서 그 사용자에 대한 인증을 유지하게 됩니다.

쿠키 (Cookie)

     쿠키란?

• 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다.
• 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있습니다.
• 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
• 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장합니다.
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.

     쿠키의 구성 요소

• 이름(Name) : 각각의 쿠키를 구별하는 데 사용되는 이름
• 값(Value) : 쿠키의 이름과 관련된 값
• 유효시간(Expires) : 쿠키의 유지시간
• 도메인(Domain): 쿠키를 전송할 도메인
• 경로(Path): 쿠키를 전송할 요청 경로

     쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

     쿠키의 사용 예

• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니

세션 ( Session )

     세션이란?

• 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.
• 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다.
• 물론 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능 합니다.
• 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다.
• 즉 동접자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 됩니다.
• 클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션 ID입니다.

     세션의 동작 방식

1. 클라이언트가 서버에 접속 시 세션 ID를 발급 받음
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

     세션의 특징

• 각 클라이언트에게 고유 ID를 부여
• 세션 ID로 클라이언트를 구분해서 클라이언트의 요구에 맞는 서비스를 제공
• 보안 면에서 쿠키보다 우수
• 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨

     세션의 사용 예

• 로그인 같이 보안상 중요한 작업을 수행할 때 사용

     쿠키와 세션의 차이

• 쿠키와 세션은 비슷한 역할을 하며, 동작원리도 비슷합니다. 그 이유는 세션도 결국 쿠키를 사용하기 때문입니다.
• 가장 큰 차이점은 사용자의 정보가 저장되는 위치입니다. 때문에 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용합니다.
• 보안 면에서 세션이 더 우수하며, 요청 속도는 쿠키가 세션보다 더 빠릅니다. 그 이유는 세션은 서버의 처리가 필요하기 때문입니다.
• 보안, 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid 만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋습니다.
• 라이프 사이클, 쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다. 또한 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때 까지 유지될 수도 있습니다.
• 반면에 세션도 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제됩니다. 예를 들어, 크롬에서 다른 탭을 사용해도 세션을 공유됩니다. 다른 브라우저를 사용하게 되면 다른 세션을 사용할 수 있습니다.
• 속도, 쿠키에 정보가 있기 때문에 서버에 요청시 속도가 빠르고 세션은 정보가 서버에 있기 때문에 처리가 요구되어 비교적 느린 속도를 가집니다.

     세션을 사용하면 좋은데 왜 쿠키를 사용할까?

세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어질 수가 있고 속도가 느려질 수 있기 때문에 쿠키가 유리한 경우가 있습니다.

     쿠키/세션은 캐시와 엄연히 다르다!

• 캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것입니다.
• 한번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있는데 이런 부분을 캐시를 지워주거나 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시하는 방법등을 이용할 수 있습니다.
• 보통 쿠키와 세션의 차이를 물어볼 때 저장위치와 보안에 대해서는 잘 말하는데 사실 중요한 것은 라이프사이클을 얘기하는 것입니다.

출처

https://interconnection.tistory.com/74

1. npx expo install expo-location  

3.  위치 코드

4. 날씨까지 완성 코드

•    1. HTML이 아니기에 div 사용 못함 => 대신에 View를 사용 View는 container 항상 import 해야함

import { StyleSheet, Text, View } from "react-native"

•    2. text는 text component에 들어가야함 => p, span, div,h1,h2,h3 사용X

•    3. View에는 style이 있음. // StyleSheet.create << 자동완성을 제공함. 유용해서 선호함
•    4. 일부 component는 IOS 및 Android 운영 체제와 소통하기 위함 // StatusBar

<View style={styles.container}>
   <Text>Hello</Text>
   <StatusBar style="auto"/>
</View>

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: "#fff",
},
text:{
fontSize:28,
}
})

•     5. 리액트 css 기본설정은 row(가로),  네이티브는  Column(세로)
•     6. 기존 display:flex;하고  flex-direction 넘어가야 함 , 네이티브 Container View 는 이미 Flex Container 그러므로 가로 설정은 flexDirection: "row"
•    7. 핸드폰 기종마다 크기가 다 다르기에 반응형으로 만듬 => width, height 는 거의 사용하지 않음
•    8. 가운데 정렬    justifyContent: "center",   alignItems: "center",

•    9. 스크롤은 View이기에 자동적으로 안됨 import
• import { ScrollView } from 'react-native';
• horizontal << 가로 스크롤
• contentContainerStyle << 스크롤하면 스타일은 이걸로 변경
•    10. 핸드폰 width, height 알고싶으면 import => 이걸 활용해서 문구를 가운데 둘 수 있음 ( 가로 스크롤시)
• import { Dimensions,} from 'react-native';

   11. (가로)페이지 넘김 자연스럽게 => pagingEnabled

   12. (가로)스크롤바 숨김 => showsHorizontalScrollIndicator={"flase"}

   13. (가로)스크롤바 색 변경(아이폰) => indicatorStyle="white"

   14. 터치이벤트 => TouchableOpacity

   15. 비밀번호 텍스트입력 => secureTextEntry

   16. 멀티라인( default값=싱글라인) => multLine

   17. onChange => onChangeText

   18. 인풋값이 뭔지 => onSubmitEditing

REST ?

- REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다.

1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
2. HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해
3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.

REST API ?

- REST API란 REST의 원리를 따르는 API를 의미한다

1. URL은 동사보다 명사를, 대문자보단 소문자를 사용한다
2. 마지막에 슬래시는 포함하지 않는다.
3. 언더바X 하이폰
4. 파일 확장자는 URL에 포함하지 않는다. (ex// photo.jpg =>photo )
5. 행위를 포함하지 않는다. (ex// delete-post => post)

RESTful ?

REST의 원리를 따르는 시스템을 의미한다. 하지만 REST를 사용했다하여 모두가 RESTful 한 것은 아니다 REST API의 설계 규칙을 올바르게 지킨 시스템을  RESTful 하다 말할 수 있으며 모든 CRUD 기능을 POST로 처리 하는 API 또는 URL 규칙을 올바르게 지키지 않은 API처럼 REST API의 설계 규칙을 올바르게 지키지 못한 시스템은 REST API를 사용하였지만 RESTful 하지 못한 시스템이라고 할 수 있다. 

RESTful API ?

간결하고 직관적인 디자인으로 애플리케이션 간 상호 작용을 쉽게 할 수 있도록 도와주며, 웹 서비스를 만들고 통합하는데 널리 사용된다. RESTful 아키텍쳐 스타일은 HTTP의 강력한 기능을 활욜하여 자원을 다루는 방법을 정의하며, 웹 및 모바일 애플리케이션에서 많이 사용된다.

References

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

프로토콜?

- 컴퓨터 네트워크와 통신 시스템에서 데이터를 교환하는 데 사용되는 규칙과 규정의 체계이다

- 프로토콜은 데이터를 보내고 받는 디바이스나 시스템 간에 상호 작용을 조정하고 통신을 원활하게 하기 위한 약속된 규칙의 집합이다.

주요 목적

1. 데이터 전송

2. 오류 처리

3. 보안

4. 세션 및 연결 관리

HTTP (Hypertext Transfer Protocol)와 HTTPS (Hypertext Transfer Protocol Secure)은 웹에서 정보를 전송하는 데 사용되는 프로토콜이다. 이 두 프로토콜은 웹 브라우징과 웹 서버 간의 통신을 안전하게 관리하기 위한 목적으로 사용된다. 

HTTPS는 민감한 정보를 전송하는 데 필수이며, 웹 보안과 개인 정보 보호를 강화하는데 중요한 역할

단순 정보조회 또는 노출이 되어도 괜찮은 데이터면 HTTP 사용 가능

1. cmd => npx create-expo-app 앱이름

2. 핸드폰에서 어플 설치 후 회원가입 ,로그인

3. vscode 터미널 => npx expo login => 핸드폰 어플에서 입력했던 이메일또는 이름과 패스워드

4. expo start --tunnel

5. QR코드 또는 어플로 들어가서 제대로 나오나 확인

우선 어플 설치후 회원가입 후 로그인 했고 vscode에서 expo login 후에 npm run start를 하니 되지 않았다.

"There was a problem loading the requested app"

이 문구가 나왔고 찾아보니  

npm start 말고 expo start --tunnel로 했을때 해결!!