이재만 교수의 공간

npm create vite@latest

Vanilla

Vue

React

Preact

Lit

Svelte

Others

global SESSIONS

사용자의 전화번호, 적립 횟수 담고 있음

각 상태 정보는  32글자의 랜덤 ID를 Key로 가짐

이 ID는 session_id로 쿠키에 저장

요청할 때마다 쿠키에서 session_id를 조회

쿠키에 session_id가 없다면

랜덤으로 session_id를 생성

이렇게 session_id 예측을 최소화 해서 보완성을 강화

세션

서비스에 접속한 사용자의 상태를 저장/유지하기 위한 방식

메모리

디스크

데이터베이스 서버(MySQL, PostgreSQL)

캐시 서버 (memcached, redis)

웹 서비스에서 세션 데이터는 매 요청을 처리할 때마다 조회가 발생

데이터베이스의 데이터에 비해 변경 및 삭제가 많이 일어남

세션 데이터의 입출력 속도가 빨라야

서비스 응답 속도도 빨라짐

웹 브라우징할 때 쿠키는 까페의 쿠폰과 같은 역할

까페에 방문할 때마다 쿠폰을 가져가서

커피를 구매하면 스탬프를 받듯이

브라우저도 서버로부터 받은 쿠키를 저장해 두었다가 

웹사이트에 다시 방문할 때마다 

해당 쿠키 정보를 서버로 자동 전송

이 과정은 cookie 라는 요청 헤더를 통해서 진행

서버는 사용자의 행동에 따라 

새로운 쿠키를 발급하거나

기존 쿠키를 업데이트 

해야 한다고 판단할 때 

응답 헤더에 Set-Cookie 를 포함시켜

쿠키 정보를 전달하면

브라우저는 이 쿠키를 저장

쿠키의 만료 시간을 Expires 로 설정

브라우저는 해당 웹사이트에 요청을 보낼 때마다

cookie 헤더를 통해 자동으로 전송

쿠키는 발급된 도메인에 한해서만 유효

이것은 특정 까페에서만 사용되는 쿠폰과 같음

쿠키는 서버와 클라이언트 간에

정보를 공유고 교환하기 위한 데이터 저장 구조 방식

웹사이트에서 보내는 모든 요청은 쿠키를 자동 전송

웹사이트 방문, 웹사이트 새로고침, 링크 클릭,

자바스크립트를 이용한 http 요청에서 쿠키는 자동 전송

응답 객체에서 set_cookie로 설정된 쿠키 값은 

사용자가 브라우저 개발자 도구를 통해 

손쉽게 바꿀 수 있음

만약 사용자의 쿠키 값 변경을 막으려면

set_signed_cookie( ) 를 이용해서

서명된 쿠키를 생성

서명된 쿠키는 브라우저에서

값 확인만 가능하고 변경은 불가능

쿠키는 이름 : 값으로 설정

추가로 만료 시간인 max_age와 expires 인자 설정

쿠키가 유효한 도메인을 지정하는 domain 인자

https에서만 설정되는 secure 인자

다른 사이트로의 요청에서 쿠키 전송에 대한 정책을 지정하는

samesite 인자

브라우저에서는 document.cookie 문자열 속성을 이용해 

브라우저의 쿠키 내역을 확인

쿠키 생성할 때 httponly 옵션이 설정된 쿠키는

자바스크립트를 통해서는 조회할 수 없고

브라우저의 개발자 도구로는 모든 쿠키 확인

쿠키는 브라우저의 개발자 도구에

애플리케이션 - 쿠키 에서 확인하고

이곳에서 직접 수정 가능

쿠폰 적립 횟수 같은 정보는 사용자가 쉽게 변경 가능해서

쿠키에 저장하는 것은 적절하지 않음

쿠키에 저장하기 적절한 예시

사용자 선호, 테마 설정, 장바구나 정보, 

최근 검색어, 최근 본 상품, 광고 추적 ID 등

민감하지 않은 상태 정보들

HTTP에서는 다른 페이지와 상태를 공유하기 위해 쿠키를 사용

스탬프 적립할 때 쿠키에 전화번호를 저장 

다른 페이지에서 쿠키의 전화번호를 조회

unable to load script. make sure you're either running metro (run 'npx react-native start')

이 에러가 떴을 때 다시 로딩 해야 한다

npx react-native start

r - reload app 

이거를 선택해야 한다

위의 것을 시작했는데 아래와 같은 메세지가 뜬다면

No apps connected. Sending "reload" to all React Native apps failed

npx react-native start --reset-cache

--reset-cache 옵션을 넣어준다

npx react-native doctor

$s3Client = new S3Client([ 'profile' => 'default', 'region' => 'us-east-2', 'version' => '2006-03-01' ]);

$bucket = 'your-bucket';

$key = 'my-file.zip'; // Using stream instead of file path

$source = fopen('/path/to/large/file.zip', 'rb');

$uploader = new ObjectUploader( $s3Client, $bucket, $key, $source );

do {

    try {

        $result = $uploader->upload();

        if ($result["@metadata"]["statusCode"] == '200') {

            print('<p>File successfully uploaded to ' . $result["ObjectURL"] . '.</p>');

        }

        print($result);

       } catch (MultipartUploadException $e) {

           rewind($source);

           $uploader = new MultipartUploader($s3Client, $source, [ 'state' => $e->getState(), ]);

       }

} while (!isset($result));

fclose($source);

npx create-expo-app myapp

1. node.js 설치

2. vs code 설치

3. expo 설치 (mobile)

4. expo 가입 후 로그인 (PC, mobile) 

5. Expo CLI 설치

npm i -g expo-cli

6. expo 앱 실행

npx create-expo-app myapp

7. EAS CLI 설치

npm i -g eas-cli

8. EAS 로그인

eas login

9. 프로젝트 설정

cd myapp

eas build:configure

eas.json 파일 생성됨

10. eas.json 파일에 다음 코드 설정

https://docs.expo.dev/build-reference/apk/

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}

11. eas 빌드

eas build -p android --profile preview

12,, 앱 링크 다운로드 후 설치

https://expo.dev/artifacts/eas/3UEpTvYEoE2ojiejRmLhTp.apk

13. React Native webview 설치

npx expo install react-native-webview

14. web 링크 설정

App.js 코드를 다음과 같이 변경

import * as React from 'react';
import { WebView } from 'react-native-webview';


export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

const styles = StyleSheet.create({ ... }); 

15. 다시 eas 빌드

11번 참고

Fotorama

Plan - trello, notion

Design - figma

Image - unsplash

Code - visual studio code

CSS - bootstrap, foundation, tailwind css, bluma css

Git - github, gitlab, bitbucket

API - REST, GraphQL

End - Insomnia, Altair

Search Engine - Algoria

User Auth - Auth0, AWS Cognito

Email - mailgun, mailchimp

SSL certificate - letsencrypt

Database - Amazon DynamoDB(25GB),

                  Google Cloud Firestore(1GB)

                  MongoDB Atlas,

                  FaunaDB

File Upload - google cloud storage(5GB), cloudinary

Error Reporting - Sentry

Chat - Pusher

Notification - One signal

Feed - getstream.io

Analytics - google analytics, hotjar, mixpanel

Time Management - Waka Time

https://jquerymobile.com/download/

핸드폰 앱으로 Expo를 설치하고

expo 프로젝트에서 npm start를 하면 QR 코드가 뜨는데

Expo로 이 QR을 스캔하면 앱이 실행되어 

Expo 에 떠야 하지만 오류가 나서 안 뜰 때는 

네트워크가 동일해야 한다

예를 들어서 

노트북에서 와이파이를 사용하면

핸드폰도 같은 와이파이를 사용해야 한다

왜 이런 걸 도대체 제대로 알려주는 곳이 없고

그냥 무조건 설치만 하면 된다고 하는지

정말 제대로 알고 하는 사람은 별로 없는 거 같다

1. PC에 expo-cli 설치

npm i -g expo-cli

2. react native apple 프로젝트 설치

npx expo init apple

npx create-expo-app apple

3. 프로젝트 실행

cd apple

npm start

4. 핸드폰에 Expo go 설치

5. Expo go 실행 후 QR code 찍어서 실행