재밌는 Coding

1. 시험환경

    · React Native

    · expo cli

    · vsCode

    · Android Studio / AVD(Android Virtual Device)

2. 목적

    · expo cli를 이용하여 프로젝트를 생성하고 실행한다.

    · 핸드폰 단말기에 Expo Go 앱을 설치하여 배포 앱을 확인한다.

3. 적용

    ① [휴대폰] Android 및 iPhone 단말기에 "Expo Go" 앱을 설치한다.

        - 윈도우 개발환경에서는 iPhone 에뮬레티어를 실행할 수 없기 때문에 iPhone 단말기를 준비해야 한다.

    ② 안드로이드 에뮬레이터를 사용하기 위해 Android Studio 및 AVD를 설치한다.

        - 참고 : https://languagestory.tistory.com/174

        - 참고 : https://languagestory.tistory.com/175

    ③ node.js를 설치한다.

        - 참고 : https://languagestory.tistory.com/24

    ④ expo 최신 패키지를 설치한다.

        - npm install expo@latest

    ⑤ expo cli를 이용하여 프로젝트를 생성한다.

        - npx create-expo-app [프로젝트명]

    ⑥ 생성된 프로젝트 폴더로 이동하여 프로젝트를 실행한다.

        - cd [프로젝트명]

        - npx expo start

    ⑦ 안드로이드) AVD 실행 후 ⑥에서 실행한 콘솔은 유지하고 별도의 콘솔에서 아래 명령어를 실행한다.

        - npm run android

    ⑧ 아이폰) ⑥ 실행시 나타나는 QR 코드를 핸드폰 "Expo Go" 앱을 열어서 코드스캔한다.

        - QR 스캔 핸드폰은 개발 PC와 동일 네트워크에 있어야 함에 주의한다.

4. 결과

    · 핸드폰에서 실행된 앱을 확인한다.

1. 시험환경

    ˙ 윈도우 11

    ˙ MySQL 5.7

    ˙ Docker, Docker-Compose

2. 목적

    ˙ 도커, 도커컴포즈 기반으로 워드프레스를 설치한다.

    ˙ DB 및 Wordpress 데이터를 로컬 드라이브에 별도로 저장한다.

3. 적용

    ① 윈도우 운영체제에 도커 데스크탑이 설치 및 실행된 상태이어야 한다.

        - URL : https://www.docker.com/products/docker-desktop/

    ② 도커 컴포트 파일을 구성한다.

        - DB와 Wordpress의 데이터를 윈도우 로컬 디렉토리로 마운트 설정한다.

        - 아래 양식에서 <<Window 로컬 디렉토리>> 부분을 마운트할 경로로 대체하여 작성한다.

    ③ 도커 컴포즈를 실행한다.

        - docker-compose  -f  [파일명].yml  up

    ④ 도커 데스트탑에서 "Running" 상태인지 확인한다.

    ⑤ 워드프레스에 접속하여 초기 설치를 진행한다.

        - http://localhost:8090 (여기서는 Local 접속 8090 포트 사용)

4. 결과

    ˙ LocalPC Mount 경로에 저장된 DB 데이터

    ˙ LocalPC Mount 경로에 저장된 WP 데이터

1. 시험환경

    ˙ Gemini (Google AI Studio) 서비스

2. 목적

    ˙ AI 앱 개발을 위해 Gemini를 연동할 경우 사전 준비사항으로 API 키 발급 받는 절차를 알아보자.

3. 적용

    ① Gemini 사이트에 접속하여 계정생성 및 로그인한다.

        - URL : https://ai.google.dev/

    ② 로그인 후 나타나는 첫 화면에서 "Get API key in Google AI Studio" 메뉴를 클릭한다.

    ③ 최초 로그인시 나타나는 팝업창에서 필수조항 체크 후 "Continue" 버튼을 클릭한다.

    ④ "Get API Key" 메뉴에서 "Create API Key" 버튼을 클릭하 서비스별 API 키를 발급한다.

    ⑤ Gemini 1.0 Pro의 API는 현재기준(2024년 3월) 과금없이 사용가능하다.

4. 결과

    ˙ API 연동 예제 프로그램(python)을 작성하여 테스트하면 응답 결과를 확인할 수 있다.

        - 샘프코드 작성

1. 시험환경

    ˙ Chat GPT (Open AI) 서비스

2. 목적

    ˙ AI 앱 개발을 위해 Chat GPT를 연동할 경우 사전 준비사항으로 API 키 발급 받는 절차를 알아보자.

3. 적용

    ① Open AI 사이트에 접속하여 계정생성 및 로그인한다.

        - URL : https://openai.com/

    ② 로그인 후 나타나는 첫 화면에서 "API" 메뉴를 클릭한다.

    ③ 좌측 아이콘에서 [API keys] 메뉴를 클릭한다.

    ④ "Create new secret key" 버튼을 클릭하여 서비스별 API 키를 발급한다.

    ⑤ "Settings" → "Billing" → "Add payment details" 버튼을 클릭하여 결재카드를 등록한다.

        - 발급받은 Key를 사용하기 위해 결재방법 등록 및 과금 결재(선불)해야 한다.

    ⑥ 선불 결재 결과를 확인한다 (10% tax는 별도 부과된다)

4. 결과

    ˙ API 연동 예제 프로그램(python)을 작성하여 테스트하면 응답 결과를 확인할 수 있다.

        - 라이브러리 설치 : pip install langchain langchain-openai tiktoken

        - 샘프코드 작성

1. 시험환경

    ˙ Amazon Linux

    ˙ terraform(테라폼)

2. 목적

    ˙ Amazon 리눅스 환경에서 terraform을 설치한다.

3. 적용

    ① 테라폼(terraform) 공식 사이트에서 운영체제별 설치 가이드를 확인할 수 있다.

        - URL : https://developer.hashicorp.com/terraform/install

    ② 운영체제별 설치 가이드를 확인한다.

    ③ 설치 명령어 실행한다.

        - 여기에서 Amazon Linux 환경에 설치한다.

        $ sudo  yum  install  -y  yum-utils  shadow-utils

        $ sudo  yum-config-manager  --add-repo  https://rpm.releases.hashicorp.com/AmazonLinux/hashicorp.repo

        $ sudo  yum  -y  install  terraform

4. 결과

    ˙ 설치가 완료되면 설치경로 및 버전을 확인한다.

        - $ which terraform

        - $ terraform version

1. 시험환경

    ˙ ubuntu v20.04

    ˙ terraform(테라폼)

2. 목적

    ˙ ubuntu 리눅스 환경에서 terraform을 설치한다.

3. 적용

    ① 테라폼(terraform) 공식 사이트에서 운영체제별 설치 가이드를 확인할 수 있다.

        - URL : https://developer.hashicorp.com/terraform/downloads

    ② 설치 명령어를 copy한다.

        - 여기에서 ubuntu 환경에 설치한다.

4. 결과

    ˙ 설치가 완료되면 설치경로 및 버전을 확인한다.

        - $ which terraform

        - $ terraform version

1. 시험환경

    ˙ Node.js 20.11.1 LTS

    ˙ 윈도우

2. 목적

    ˙ node.js를 윈도우 환경에서 설치한다.

    ˙ node.js를 설치 시, 자동설치 되는 npm을 확인한다.

3. 적용

    ① node JS 공식 웹사이트에서 설치 파일을 다운 받는다.

        - URL : http://nodejs.org 

    ② 특별한 경우가 아니라면 LTS("안정화 버전")을 다운로드 받는다.

        - 2024년 3월 기준 안정화 버전은 20.11.1 LTS이다.

        - Release Schedule을 확인하여 지원종료가 되는 버전은 피하자.

    ③ 다운 받은 파일을 확인하고 실행한다.

    ④ Next 버튼을 클릭하며 설치 절차를 진행한다.

4. 결과

    ˙ npm -v 명령어를 실행하여 설치 버전을 확인한다.

    ˙ node -v 명령어를 실행하여 설치 버전을 확인한다.

1. 쿠키

    ˙ 사용자가 특정 웹 사이트에 접속할 때, 사용자의 컴퓨터에 저장하는 기록 파일

    ˙ ex) 로그인 시 ID와 PW 저장을 체크한 후 사이트 재접속 시 ID/PW를 기억하는 기능

2. 세션

    ˙ 서버에서 가지고 있는 객체(Object)로써, 특정 사용자의 로그인 정보를 유지하기 위해 사용하는 기술
    ˙  서버는 접속한 클라이언트에게 세션ID와 회원정보를 매핑하여 기록하고 Session ID를 부여하면,
    ˙  사용자는 접속할 때마다 발급받은 Session ID와 함께 요청(Request)한다.
    ˙  ex) 웹 사이트 로그인 후 다른 페이지 이동마다 접속 상태 유지하는 역할

    ① 장점

        - 개인정보가 포함되지 않은 세션ID(회원 식별 목적)를 사용자에게 제공하고, 회원 중요정보는 서버가 갖고 있음.

    ② 단점

        - 악의적인 공격자가 세션 ID를 탈취할 수 있음.

        - 웹 서버에서 세션 정보를 기록하고 있어야 하므로, 접속자가 많을 때 서버 메모리 부하 문제가 발생할 수 있음.

3. 세션과 쿠키의 관계

    ˙ 세션 ID는 일반적으로 쿠키에 저장되며, 세션 쿠키라고도 불린다.  

    ˙ 브라우저는 이 세션 쿠키를 갖고 있으면서 서버와의 상호 작용을 통해 세션 상태를 유지한다.

    ˙ 주로 사용되는 쿠키 타입은 HttpOnly 속성이 설정된 쿠키이며, JavaScript에서 쿠키에 접근하는 것을 방지하여 보안을 강화할 수 있다.
    ˙ SpringBoot에서도 세션 관리를 위한 설정이 가능하며, 세션 ID를 쿠키에 저장/유지하는 방식을 선택할 수 있다.