해당 포스팅에서는,
요즘 유의깊게 살펴보고 있는 Vercel 팀에서 채택한 Tailwind CSS 를
React-Native 환경에서 어떻게 적용하고, 그 이유에 대해 정리 해 보고자 한다.

Why Tailwind ❓

사실 이전 프로젝트에서는 거의 모든 스타일을 Tailwind CSS 를 적용하여 작성 했는데,
요즘들어 Styled-Components 나 Panda CSS 등을 사용했던 것 같다.

Tailwind CSS 를 주로 사용하는 이유는 아래와 같다.

https://www.nativewind.dev/core-concepts/tailwindcss

공식 문서에도 있듯,
1️⃣ 유틸리티 클래스를 사용하여 HTML 에 직접 요소의 스타일을 지정할 수 있다.

• 이를 통해 클래스 이름을 추상화 하기 위해 시멘틱하게 정할 때 소요되는 리소스가 줄어든다.

2️⃣ 스타일 재사용을 통해 중복을 관리하고, 재사용 가능한 추상화를 생성한다.

• 사전에 정의된 모듈을 불러와 사용함으로 인해 빌드 시 발생하는 리소스 낭비를 줄일 수 있다.
  중복되어 작성된 비 효율적인 속성을 루프하여 관리할 수 있다.

  https://tailwindcss.com/docs/reusing-styles

3️⃣ 커스텀 스타일 적용 가능.

• 사전에 정의되어있는 스타일을 불러와 사용하지만, 종종 예외의 상황이 발생할 경우가 존재한다.
  이를 해결하기 위해 theme 섹션에 커스텀된 속성을 부여하여 사용할 수 있다.

init 💫

https://www.nativewind.dev/quick-starts/expo

먼저,
React-Native 환경에서 Tailwind CSS 를 사용하려면,
NativeWind 라는 라이브러리가 필요하다.

이는 React-Native 커뮤니티에 불어온 혁명같은 바람이었으며,
기존에 존재했던 Tailwind CSS 의 강력한 기능을 앱 개발에 도입함으로 인해
유의미한 영향이 끼쳤다고 본다.

설치 방법은 공식 문서에도 있지만, 매우 간단하다.

yarn add nativewind
yarn add --dev tailwindcss

패키지 매니저로 yarn 을 사용했지만 npm 도 무관하다.
단, pnpm 은 ios 빌드 시 에러가 발생하므로 권장하지 않는다.
👉 React-Native 와 pnpm 은 아직 호환이 되지 않는 것 같음.

Error 💥

yarn add --dev tailwindcss 명령으로 프로젝트에 tailwind 를 설치 할 경우,
의존성 에러가 발생했다.

이를 해결하기 위해 yarn add --dev tailwindcss@3.3.2 버전을 명시하여 설치 해 주었고,
발생한 에러를 해결할 수 있었다.

1️⃣ Setup - tailwind.config

npx tailwindcss init

해당 명령으로 프로젝트 루트경로에 tailwind.config.ts 파일이 생성 될 것이다.
CSS 파일에 대한 구성파일을 설정 해 주어야 한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

<custom directory> 부분에는 tailwind CSS 가 적용되기를 원하는 경로를 지정 해 주면 된다.
나의 경우 ./App 과 ./src 하위 모든 요소들을 지정 해 주었다.

2️⃣ Setup - babel.config

babel.config 를 수정함으로 인해,
소스코드를 컴파일 할 때 NativeWind 를 사용하여 컴파일 할 수 있다.

NativeWind 는,
CSS-in-JS 방식의 스타일로 관리하기에
이를 컴파일 하여 JavaScript 로 변환해야 한다.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],
  };
};

babel.config 를 수정하면 서버를 재시작 해 주어야 적용이 된다.

3️⃣ Setup - app.d.ts

간단했지만 모든 설정이 끝났다.
이제 기본 React-Native 문법에 맞춰 작성하고,
className 을 부여하여 스타일을 지정하려 하는데 에러가 발생한다.

이 에러는,
React-Native 환경에서 TypeScript 를 사용하려 할 때 주로 발생하며
기본적으로 View 컴포넌트는 className props 로 인식하지 않는다.

이를 해결하기 위해,
app.d.ts 파일을 추가하여 TypeScript 에서 사용자 지정 타입을 선언했다.

/// <reference types="nativewind/types" />

NativeWind 를 사용할 때 React-Native 에 사용할 수 있는 유형을 확장 해 주어야 하는데,
해당 유형을 참조하기 위해 삼중 슬래시 지시어를 통해 명시 해 주었다.
https://www.nativewind.dev/getting-started/typescript

Reference 🌊

https://enfp-jake.tistory.com/261
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/?ref=codenary
https://www.nativewind.dev/getting-started/typescript
https://tailwindcss.com/docs/utility-first
https://www.nativewind.dev/quick-starts/expo
https://www.codenary.co.kr/techstack/detail/tailwind

보통 프로젝트를 진행하다보면,
설계된 API 를 호출하기 위해 로직을 작성하는데
그 로직 안의 내용은 보통 아래와 같을것이다.

const db = require('../loaders/db');

module.exports = {
  getBrandData: async () => {
    const connection = await db();
    const [rows] = await connection.query(
      'SELECT brand_name, name, caffeine FROM brand'
    );
    connection.end();
    return rows;
  }
};

로직을 살펴보면,
외부에 정의된 데이터베이스초기화 로직을 불러와 connection 변수에 비동기로 담아 사용한다.

DB 에 접근이 성공하게되면,
쿼리문을 날려 명령을 수행한 뒤 불필요한 리소스 낭비를 방지하기 위해 DB 의 연결을 해제한다.

이와 같은 방식을 단일 커넥션 이라고 하며,
각 클라이언트 또는 사용자에 대해
하나의 데이터베이스 연결(createConnection) 만을 유지하는 방식의 개념을 갖는다.

그럼 이와 반대되는 개념인 커넥션 풀 에 대해
장, 단점을 알아보고 이를 로직에 적용해 보고자 해당 포스팅을 시작한다.

단일 커넥션 (Single Connection) 👼

위에서 간략하게 설명했듯,
단일 커넥션의 경우 작은 규모의 프로젝트에서 주로 채택되는 방식이다.

장점 👍

• 간단한 구현
  👉 작은 규모의 애플리케이션에서는 그에 상응하는 간단한 구현이 가능하다.
• 적은 리소스
  👉 연결을 생성하고 필요한 만큼만 사용 후 즉시 닫을 수 있음
• 간단한 코드
  👉 커넥션 관리가 간단하여 코드가 간결해짐

단점 👎

• 동시 접속
  👉 동시에 많은 접속이 발생 할 경우 유연한 대체가 불편하다.
• 생명주기 관리
  👉 트랜잭션의 생명주기가 다��하고 길어질 경우 커넥션을 효과적으로 관리하기 어려움.

커넥션 풀 (Connection Pool) 💫

장점 👍

• 동시 접속
  👉 여러 사용자의 동시 접속을 효과적으로 처리 가능.
• 리소스
  👉 미리 생성된 커넥션을 재 사용하여 발생하는 오버헤드를 감소시키고 리소스에도 유의미한 영향을 끼침
• 연결 지속
  👉 장기적인 연결을 통해 트랜잭션 간 효율적인 데이터 전송 가능

단점 👎

• 복잡성
  👉 커넥션 풀의 구현 및 관리는 상대적으로 복잡할 수 있다.
• 리소스
  👉 미리 생성된 커넥션들이 항상 메모리를 차지하고 있음
• 오버헤드
  👉 일부 상황에서는 커넥션 풀 자체의 오버헤드가 발생할 수 있음.

오버헤드란 ❓
Task 를 처리하기 위해 사용되는 추가적인 비용이나 리소스를 말한다.
기본 작업의 수행을 위한것이 아닌,
시스템 & 프로세스를 관리하고 유지하기 위한 부가적인 요소에서 발생하는 것을 말한다.

장 단점을 확인 해 봤으니,
두 방법을 코드로 구현 해 보며 확인 해 보도록 하자 ✅

Example 💌

createConnection 🔌

require('dotenv').config();
const mysql = require('mysql');
const {
  DB_HOST,
  DB_PORT,
  DB_USER,
  DB_PASSWORD,
  DB_SCHEMA
} = require('../config/index');

const conn = async () => {
    mysql
        .createConnection({
          host: DB_HOST,
          port: Number(DB_PORT),
          user: DB_USER,
          password: DB_PASSWORD,
          database: DB_SCHEMA
        })
        .connect(err => {
          err ? console.log(err) : console.log('DB_CONNECTED');
        });
};

module.exports = conn;

가장 기본적인 방법으로 구현된 DB 와 연결하는 로직이다.
Callback 함수를 사용하기 위해 MySQL2 모듈을 사용하였고,
createConnection 메서드를 호출하여 MySQL 에 대한 커넥션을 생성 해 주었다.

const db = require('../loaders/db');

module.exports = {
  getBrandData: async () => {
    const connection = await db();
    const [rows, fields] = await connection.query(
      'SELECT brand_name, name, caffeine FROM brand'
    );
    connection.end();
    return rows;
  }
};

분리된 코드를 불러와
생성된 DB 에 연결 및 사용 후 end, destory 등으로 커넥션을 제거하여 사용한다.

이와같이 단일 커넥션을 채택하여 사용했을 경우,
위의 단점에서도 언급했듯
커넥션을 삭제하고 재 생성됨에 따라 발생하는 handshake 비용,
프로세스 혹은 스레드 비용이 증가한다는 단점이 존재한다.

createPool 💫

커넥션 풀은 미리 필요한 수 만큼 커넥션을 생성 해 놓고,
사용 후 반납하는 개념이다.

이를 통해 단일 커넥션과는 다르게
커넥션을 다시 생성하는데 사용되는 비용이 소비되지 않는다는 장점이 있다.

const conn = async () => {
  const connection = await mysql.createPool({
    host: DB_HOST,
    port: Number(DB_PORT),
    user: DB_USER,
    password: DB_PASSWORD,
    database: DB_SCHEMA,
    connectionLimit: 10
  });
  return connection;
};

module.exports = conn;

async/await 을 사용하여 MySQL2 모듈의 Promise 기능을 활용했다.

위 로직과 차이점은,
connectionLimit 옵션을 추가함으로 서버에 가해지는 부하를 줄일 수 있는 점 이다.

connectionLimit: 10 은,
동시에 최대 10 개의 연결만 허용하겠다는 의미이며
11 번 째 요청은 Pending 되어 동시에 접근하는 연결을 분산시킬 수 있다.

하지만,
Pool 을 너무 적게 생성 해 놓으면 대기시간 (Pending) 이 발생할 수 있고,
너무 많이 생성 해 놓으면 메모리(리소스) 낭비가 크다는 단점이 있다.

exports.getCoffeeInfoSum = async ({ getReq }) => {
  const conn = await db();
  const getConn = await conn.getConnection();
  const params = [getReq];
  const sql = `
  SELECT SUM(caffeine)
  FROM post
  WHERE user_id = ?
  `;
  const [row] = await getConn.query(sql, params);
  getConn.release();
  return row;
};

마찬가지로 분리된 코드를 불러와
생성된 DB 에 getConnection 메서드를 사용하여
가져온 커넥션에 쿼리문을 날리고 release 메서드를 통해 연결된 커넥션을 풀 에 반납하여 사용한다.

getConnection 는,
MySQL 커넥션 풀 에서 새로운 연결을 가져오는 메서드 이다.

결론 🤹‍♂️

Node.js 환경에서 MySQL 모듈을 사용하여 DB 에 접근하는 두 가지의 방법을 살펴봤는데,

작은 규모의 애플리케이션이나
간단한 작업에서는 단일 커넥션으로 구현하는 것이 보다 효율적인 부분이 있으며

대규모 애플리케이션이나
웹 서버, 데이터베이스에 잦은 요청이 요구된다면,
커넥션 풀 을 사용하여 성능을 최적화 할 수 있을 것 같다.

단,
커넥션 풀은 대부분의 상황에서 권장되는 방법이다.

클라이언트가 동시에 서비스에 접근하거나 웹 앱의 경우와 같이 많은 수의 요청이 들어오는 상황에서
자원을 효율적으로 관리하고 성능을 최적화시킬 수 있기 때문이다.

이 글을 정리하며,
실제 단일 커넥션으로 구현되어있던 로직을 👉 커넥션 풀로 리펙토링하여 사용중 이다.

Reference 🌊

https://velog.io/@wngud4950/MySQL-%EB%8B%A8%EC%9D%BC-Connection-VS-Connection-Pool-%EB%B0%A9%EC%8B%9D%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://velog.io/@gwon713/Nodejs-MySQL-DB-connection-pool
https://techbless.github.io/2020/01/17/Node-js%EC%97%90%EC%84%9C-Mysql-Connection-Pool-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0/
https://m.blog.naver.com/collcr/222869575871

https://www.eaten.co.kr/

위 사이트에서 커피와 관련된 브랜드별 영양 정보 를 크롤링하여
필요한 정보만을 가공하여 사용하려고 한다.

크롤링한 데이터는 아래와 같다.

이 데이터에서 필요한 정보는 브랜드, 메뉴, 카페인 이다.

먼저,
번거롭지만 수기로 1 차 가공을 통해 아래와 같은 정보를 얻은 상태이다.

이 정보를 바탕으로,
MySQL 에 쿼리문을 사용하여 데이터를 적재하려고 하는데,
쿼리문으로 사용하기엔 다소 형식이 맞지 않다고 판단되어,
이를 {brand, name, caffeine} 형식으로 가공하여 적재하고자 한다.

생성 & 삽입 쿼리 🔮

CREATE TABLE IF NOT EXISTS brand (
    id INT AUTO_INCREMENT PRIMARY KEY,
    brand_name VARCHAR(255),
    name VARCHAR(255),
    caffeine INT,
    url VARCHAR(255)
);

위 쿼리문을 해석 해 보면,
먼저 고유한 id 값을 가지며 1씩 증가하는 옵션이 추가되어있다. 👉 AUTO_INCREMENT
다음으로는 문자열인 커피 브랜드, 메뉴 정보가 있고,
커피 메뉴에 따른 카페인 함량에 대한 정보가 정수형태로 저장될 테이블을 생성 해 준다.

다음으로는 생성한 테이블에 데이터를 삽입하기 위해 쿼리문을 날려주어야 하는데,
아래와 같이 작성 해 주면 될 것이다.

INSERT INTO brand (brand_name, name, caffeine) VALUES
('엔제리너스', '돌체라떼', 317),
('엔제리너스', '카페 연유다', 176),
('엔제리너스', '아메리치노 라떼', 317);

문제는 삽입할 데이터의 양이 너무 많다는것이다 🤦‍♂️

이를 일일히 수기로 작성하는것은 소위 미련한 짓이다.

때문에,
아래의 방법을 사용하여 쿼리문에 사용할 수 있도록 적절하게 가공하고자 한다.

Python 으로 추출하기 🤓

https://colab.research.google.com/

위 사이트는 Python 을 활용한 코드를 실행시킬 수 있는 IDE 환경이다.

먼저,
1 차 가공 을 마친 객체 형태의 데이터를 변수에 담아 할당 해 준다.

그리고 이를 파싱하여 튜플로 변환하고,
주어진 형식으로 튜플을 출력하고자 한다.

formatted_data = []

for brand, items in coffeeData.items():
    for item in items:
        formatted_data.append((item['brand'], item['name'], item['caffeine']))

# 튜플 형식으로 출력
output = ',\n'.join([str(item) for item in formatted_data])

print(output)

튜플 형태의 데이터를 저장할 formatted_data 변수에 빈 리스트를 할당하고,
이중 반복문을 통해 coffeeData 의 각 브랜드와 아이템에 접근한다.

외부 루프 (`for brand, items in coffeeData.items(): )
👉 브랜드와 그에 해당하는 아이템을 가져온다.

내부 루프 (for item in items: )
👉 각 브랜드의 아이템을 하나씩 가져와 처리한다.

내부 루프 에서는,
아이템의 정보를 추출하여 formatted_data 리스트에 튜플 형식으로 저장한다.
이 때,
각 튜플은 브랜드, 아이템 이름, 카페인 형식으로 구성된다.

다음으로는 리스트 컴프리헨션 문법을 사용하여
formatted_data 리스트의 각 튜플을 문자열로 반환 한 후,
',\n' 을 구분자로 사용하여 하나의 문자열로 결합(join) 한다.

위 코드를 실행하면 아래와 같이 가공된 데이터를 얻을 수 있다.

JavaScript 로 추출하기 ⚡

크롤링이 아무리 Python 이 쉽다 한들,
이를 JavaScript 에서도 구현 가능해야 옳잖은가 ?

로직은 Python 과 매우 유사하다.
단,
for 문을 사용하지 않고 자바스크립트 내장함수 인 map 을 사용하여 반복할 것이다..

const formattedData =
    Object.values(coffeeData).flatMap(items =>
        items.map(item => [item['brand'], item['name'], item['price']])
);

const output =
    formattedData.map(item =>
        `(${item.map(i => JSON.stringify(i)).join(', ')})`).join(',\n');

console.log(output);

주어진 커피 데이터 👉 1 차 가공된 데이터 를 준비하고,
이를 Object.valuse 를 사용하여 객체 형태의 값을 배열로 변환 해 준다.

flatMap 함수를 사용하여 각 브랜드의 아이템들을 하나의 배열로 평탄화(?) 해 준다.

map 함수를 사용하여 각 아이템들을 튜플 형식으로 변환하고
join 메서드를 사용하여 전체 배열을 문자열로 합친다.

평탄화 란 ❔❗
아래와 같이 두개의 동일한 예제가 있을 때
map 함수 사용 시 2 차원 배열 이 생성되는 반면,
flatMap 함수를 사용하면 이를 1 차원 배열 로 return 한다.
즉, 중첩된 이중 구조를 가진 데이터를 단일 수준으로 펼친다 라는 의미를 갖고있다.

const arr = [1, 2, 3];

const mapArr = arr.map((num) => [num, num * 2]);
console.log(mapArr); // [[1, 2], [2, 4], [3, 6]]

const flatMapArr = arr.flatMap((num) => [num, num * 2]);
console.log(flatMapArr); // [1, 2, 2, 4, 3, 6]

���이터 삽입 및 DB 확인 👀

위에 있던 데이터 삽입 쿼리를 Workbench 에서 가공한 데이터를 삽입하고 확인하려 한다.

INSERT INTO brand (brand_name, name, caffeine) VALUES
('엔제리너스', '돌체라떼', 317),
('엔제리너스', '카페 연유다', 176),
('엔제리너스', '아메리치노 라떼', 317);

가공된 데이터를 출력하여 이를 복 붙 하여 가져왔다..
좀 더 단순화 하는 방법이 있을텐데 현재로써는 이게 최선이었다 😭

쿼리문을 실행한 후 생성된 테이블을 조회하면 아래와 같은 레코드를 확인할 수 있다.

Reference 🌊

https://jerryjerryjerry.tistory.com/159
https://dang-dang12.tistory.com/18
https://inpa.tistory.com/entry/MYSQL-%F0%9F%93%9A-%EA%B8%B0%EB%B3%B8-SQL%EB%AC%B8-%EC%A0%95%EB%A6%AC-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%A1%B0%ED%9A%8C-%EC%83%9D%EC%84%B1-%EC%88%98%EC%A0%95-%EC%82%AD%EC%A0%9C
https://121202.tistory.com/25

이전 포스팅을 확인 해 보면,
AWS 에서 생성한 EC2 인스턴스에 MySQL 을 설치하여 외부에서 접근이 가능한 환경을 구축했다.

다만 문제가 있었다.

프리티어 로 생성한 서버였기에
t2.micro 메모리로는 MySQL 까지 돌리기에는 버거웠는지 서버가 종종 터지는 경우가 발생했다.

Git 을 설치하여 Node 서버가 존재함

보통 위와같은 화면이 지속되면 서버가 터졋다 라고 간주할 수 있다.

해당 문제를 해결하기 위해 조언을 구하고 얻은 답변을 통해

도커의 이미지로 EC2 와 DB 를 분리하여 띄워도 보고,
조금 더 가벼운 SQLite 로 마이그레이션 하여 환경을 구축 해 봤지만
해당 이슈를 해결할 수 없었다 😭

해당 포스팅에서는 마지막 최후의 방법인,
RDS 사용하여 데이터베이스를 구축하고 인스턴스와 연결하는 과정을 기록하고자 한다.

RDS ❓

RDS 란, AWS 에서 제공하는 관계형 데이터베이스이다.

클라우드 환경에서 제공하는 관계형데이터베이스를 통해 보다 쉬운 설정, 운영 및 확장의 기능까지 제공한다.

인스턴스 내부에 MySQL 을 설치하여 사용해도 무관하지만,
위에서 발생한 이슈도 존재할 뿐더러 여러 방면에서 효율적이지 못하다고 한다.

RDS 에서 제공하는 스냅샷 기능이 있는데,
이는 데이터베이스를 일정한 주기로 저장하여 예상치 못한 삭제나 버그 등으로 발생한 이슈에서 롤백이 가능하다.

예약 인스턴스 기능은,
데이터베이스를 실행하는 시간을 사전에 정의해둠으로써
프리티어로 제공된 시간 안에서 ���다 많은 서버를 돌릴 수 있다.

RDS 생성 🚀

서비스 검색에서 RDS 를 검색 후 데이터베이스 탭에서 생성 가능하다.

다양한 데이터베이스를 제공하는데 해당 포스팅에서는 MySQL 환경을 선택 해 생성할 것이다.

Amazon Aurora 도 MySQL 과 작동방식은 같지만 보다 우수한 성능을 자랑한다 라고 일단 알고있자 ❗❗

낮은 버전으로 생성 할 경우,
레거시코드를 사용하면 작동되지 않은 버전이 존재할 수 있기에 가급적 최신 버전을 유지하도록 하자.

지정한 식별자를 통해 데이터베이스에 접근하기 때문에,
가급적 식별자를 자세히 명시 해 주는것이 좋다.

이제 생성된 데이터베이스를 MySQL 에서 제공하는 GUI 프로그램인 워크벤치를 통해 연결 해 보려고 한다.

RDS 연결

사실 데이터베이스를 비쥬얼라이징 도구 (GUI) 에서 확인하는 방법은 매우 간단하다.

생성된 데이터베이스의 상세정보를 확인 해 보면,
엔드포인트가 생성 되어있을텐데 이를 워크벤치의 Host 부분에 넣어주면 끝이다.

음.. 근데 연결에 실패했다 🤦‍♂️

위와 같이 연결에 실패 할 경우 체크해야할 부분이 2️⃣ 개가 있다.

• 퍼블릭 엑세스
• 인바운드 규칙

예상했던 대로 인바운드 규칙 이 추가되지 않아 해당 포트(3306) 으로의 접근이 불가능한 상태였고,
이를 보안그룹에서 추가 해 주었다.

Test Connection 을 해 보면 아래와 같이 정상적으로 연결 됨을 확인할 수 있다.

EC2 와의 연결 🔌

생성된 인스턴스 와 RDS, 보안그룹, 서브넷그룹 모두
같은 네트워크 안에서 사용해야 하기 때문에 해당 정보를 파악하고 있어야 한다.

빨간 네모 영역의 정보를 사용할 것이다.

EC2 와 RDS 를 연결하기 위해서는,
인스턴스를 생성할 때 사용된 VPC 를 기준으로 RDS 를 생성 해 주어야 한다.

해당 자료는 어떤 레퍼런스에서도 설명이 없어 굉장히 많은 삽질을 해서 얻은 결과이다.. 😭

나의 경우 각각 독립적으로 인스턴스 와 RDS 를 생성 해 놓은 상태였고,
VPC 또한 하나에 몰아서 생성하는 경우 보안적인 이슈가 발생할 수 있다 라고 인지하고 있는 상태였기에,
서비스마다 새 VPC 를 생성하여 분리 생성 해 놓은 상태였다.

이미 생성 한 서비스는 VPC 를 변경 할 수 없다.

보안그룹 생성 🚧

위에서 한 번 설명했듯,
EC2 와 연결하기 위해 인스턴스 에 연결 해 놓은 보안그룹에 RDS 보안그룹을 생성 해 줄 것이다.

이게 무슨 말이냐 ?

이런 형태로 통신이 이루어질 것이다.

먼저 인스턴스를 생성하면서 발급받은 VPC 아래에
인스턴스 와 보안그룹1 과 보안그룹2 가 존재 할 것이고,
그 VPC 를 기준으로 RDS 를 생성하여 종속되게끔 지정 해 주는 것이다.

기본 값으로 RDS 를 생성 할 때 정의한 default 보안그룹이 연결되어있을 것이다.
이 보안그룹에 접근하여 아래와 같이 추가 해 주면 된다.

소스 부분에는 EC2 에 연결되어있는 보안그룹 ID 를 선택 해 주면된다.
해당 보안그룹 역시 하나의 VPC 안에서 생성 했다면 선택할 수 있는 드롭다운박스에서 선택할 수 있을것이다.

MySQL 제거 🚫✅

먼저 인스턴스를 연결하여 터미널에 접근 해 ls 명령어로 현재 디렉토리상의 파일/폴더 를 확인한다.

아래 명령어를 실행하여 MySQL과 관련된 모든 패키지와 설정 파일들을 완전히 제거 해 준다.

sudo apt-get purge mysql* -y

-y 옵션은 사용자에게 확인 메세지를 표시하지 않고 강제로 제거하기 위해 추가

그리고 MySQL 관련 디렉토리를 모두 제거 해 준다.

sudo rm -rf /var/log/mysql
sudo rm -rf /var/log/mysql.*
sudo rm -rf /var/lib/mysql
sudo rm -rf /etc/mysql

이렇게 다시 ls 로 확인 해 보면 mysql 폴더가 사라졌음을 확인할 수 있다.

더불어 아래 명령을 통해 MySQL 이 제거되었는지 확인할 수 있다.
(만약 제거가 되지 않았다면 버전이 정상적으로 출력이 될 것임.)

특정 IP 주소 접근 🌐

기존에 설정한 보안그룹의 인바운드 규칙 에서는
테스트 ��적으로 모든 접근을 허용하기 위해 0.0.0.0 으로 지정했었다.

하지만 이는 보안적으로 외부 침입에 대한 이슈가 발생할 수 있기에 안전하지 않다.
그렇기에 팀원들의 ip 주소만 허용하여
특정 주소만 DB 에 접근이 가능하게 설정 해 주려고 한다.

설정을 모두 마친 모습은 아래와 같다.

해당 ip 주소는 각 로컬 커맨드 창에서 ipconfig 명령으로 주소를 획득할 수 있으며,
이를 넣어주면 된다.

외부 접근 IP 💻

테스트 해 본 결과 ipconfig 로 획득한 ip 주소는,
말 그대로 로컬 컴퓨터 자체의 ip 주소 이며 외부와 통신이 불가능 한 형태였다.

해당 IPv4 주소를 인바운드 규칙에 추가 시 MySQL 접근 안됨 ❗❗

검색 해 본 결과,
AWS 의 RDS 는 외부에서 운영중인 서비스 이므로 해당 서비스에 접근하기 위해서는
인터넷을 통해 접속 가능한 외부 IP 주소 를 획득하여 추가해야한다고 한다.

Window 환경
👉 https://www.whatismyip.com/
Linux 환경
👉 curl ifconfig.me
Mac 환경
👉 ifconfig or ipconfig getifaddr en0

문제는,
해당 IP 주소는 연결된 네트워크의 환경에 따라 동적으로 바뀌게 된다.

가장 쉬운 방법은
AWS 에서 팀원들에게 할당해준 IAM 유저로 인바운드 규칙에 접근하여 직접 내 IP 를 추가 해 주는것이다.

이를 통해
매번 다른 환경(장소 👉 집, 카페, 학교, etc..) 에서
접속한 네트워크 환경마다 다른 ip 주소를 추가하여 DB 에 접근할 수 있었다.

Reference 🌊

https://velog.io/@yoonth95/AWS-04.-RDS-MySQL-%EC%97%B0%EA%B2%B0-%EB%B0%8F-Workbench#1-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1
https://dooyeoung.tistory.com/31
https://deepmal.tistory.com/9
https://velog.io/@whytili/AWS-RDS%EC%99%80-EC2-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

매번 해야지.. 라고만 생각했던 알고리즘 공부 를 어떤 계기를 통해

드디어 시작하게되었다.

멋쟁이사자처럼 프론트엔드 플러스 스쿨 에서 만나게 된 팀원들과 함께
팀 프로젝트를 진행하고,
교육과정 수료 후 까지 인연이 깊어지며
정말 하고싶었던 알고리즘 스터디 를 결성하게 되었다 🤓💨

스크립트를 작성하며 매번 자신감이 없었는데,
개인적으로 개발자스러운 사고회로가 부족하다고 생각했기 때문이다.

이는 매번 효율적인 코드를 작성하는 방법을 생각하지 않고,
ctrl + c , ctrl + v 만 하던 내게 스노우볼처럼 크게 다가왔다.

해당 문제를 분명 인지하고 있던 나 였지만,

보다 보여지는 부분에서도 부족하다고 생각했기에
프로젝트나 경험 위주로의 코딩을 해왔던 나 였다.

이번 기회를 통해
보다 나은 개발자 가 되는 첫 발돋음으로 삼을 수 있는 계기가 될 수 있었으면 좋겠다 상원아 ❗❗

코딩테스트는 프로그래머스 를 통해 진행 할 계획이며,
하루 4 문제씩
0 레벨부터 기초적인 부분부터 가능한 문제를 생각하며 풀어볼 생각을 갖고 있다.

서로를 감시자 삼아 동기부여를 얻을 수 있는 스터디 가 필요했던 나 이니까

꾸준히 열심히 해보자 상원아 ❗❗
스터디 저장소 👉 https://github.com/4CCF/CC

이번 포스팅에서는 진행중이었던 DDocker 프로젝트를
파이어베이스에서 Node.js 서버로 마이그레이션 하는 과정에서
Firestore 의 기능을,
AWS 의 EC2 에 MySQL 을 설치하여 구현하는 방법을 기록하고자 한다.

RDS 란 ❔

데이터베이스를 다루다 보면,
비 관계형 데이터베이스 (NoSQL) 나 관계형 데이터베이스 (SQL) 들을 한 번쯤은 들어 봤을 것이다.

RDS 는 관계형 데이터베이스의 약자이며,
AWS 에서 제공하는 클라우드 형태의 관계형 데이터베이스를 AWS RDS 라고 칭한다.

만약,
데이터베이스를 로컬에서 관리한다고 가정해보자.
제일 먼저 이를 관리할 개발자가 필요할 것이며,
서버의 과부하로 인해
사용자가 데이터베이스에 접근하지 못하는 경우를 대비하여 24시�� 내내 감시할 사람이 필요 할 것이다.

이를 위해 중앙화 된 서버(클라우드) 를 통해 위와같은 불편함을 대신 처리해주는 역할을
AWS 의 RDS 서비스가 대신 처리 해 준다.

하지만,
해당 포스팅에서는 AWS 의 RDS 서비스를 사용하지 않고,
이 모든 과정을 직접 경험 해 보고자
직접 EC2 안에 관계형데이터베이스 (MySQL) 을 설치하여 사용하는 목적으로 작성하고자 한다.

MySQL 설치 💻

터미널에 아래 리눅스 명령으로 MySQL 서버를 설치 해 준다.

apt-get install mysql-server

위 사진과 같이 Permission denied 에러가 발생한다면 sudo 명령을 통해 관리자 모드로 접근 하면 된다.

sudo apt-get install mysql-server

설치가 끝난다면 아래와 같은 화면을 볼 수 있을텐데,
이를통해 MySQL 서버가 정상적으로 설치 됬음을 알 수 있다.

Running kernel seems to be up-to-date.
No services need to be restarted.
No containers need to be restarted.
No user sessions are running outdated binaries.
No VM guests are running outdated hypervisor (qemu) binaries on this host.
👉 시스템의 커널이 최신 상태이며, 업데이트를 통해 변경된 부분이나
재시작이 필요한 서비스, 컨테이너, 사용자세션, 가상머신 등이 없음을 의미한다.

설치된 MySQL 의 버전을 확인한다.

mysql --version

그리고,
데이터베이스를 실행하는 명령어를 입력하는데, 명령어를 실행하면 터미널에 아무것도 출력되지 않는게 정상이다.

sudo service mysql start

실행중인 데이터베이스를 확인하려면 아래 명령어를 실행하면 된다.

sudo service mysql status

이미 EC2 에 MySQL 이 설치가 되어있었다..🤦‍♂️
해당 게시물 참조 👉 https://bit.ly/3TMAz7J

사용자 설정 👶

설치 후 MySQL 을 실행하면,
임시로 root 계정과 비밀번호가 발급되어있는 상태이므로
CLI 명령으로 데이터베이스에 접근하여 계정과 비밀번호를 변경 해 주어야한다.

만약, 암호 설정 없이 EC2 를 종료 할 경우 찾을 방법이 없다.
초기화 하는 방법이 있지만 다소 번거로운 작업이 필요하다.

sudo mysql -u root -p

초기 상태이므로 비밀번호를 입력하라는 Enter password: 가 나온다면 엔터 키를 누르면 된다.

아래 명령을 통해 비밀번호를 변경 할 수 있다.

5 버전의 경우 👉 UPDATE user SET PASSWORD=PASSWORD("암호") WHERE user="root";
8 버전의 경우 👉 ALTER user "root"@"localhost" identified WITH mysql_native_password BY "변경할 비밀번호";

이전과 같이 빈 값을 입력하여 root 사용자에 접근하려하면 에러가 발생하고,
변경한 비밀번호를 적게되면 정상적으로 접근이 가능함을 확인할 수 있다.

외부 접근 허용 👋

MySQL 에서 제공하는 GUI 프로그램인 Workbench 를 통해
할당받은 EC2 IP 주소로 접근하려하면 에러가 발생할 것이다.

아래와 같이 EC2 에 인바운드 규칙 을 추가 해 주어야 한다.

그리고, 다시 터미널로 돌아와
mysqld.cnf 파일을 수정 해 주어야 한다.

먼저 관리자 계정으로 접근하고,
/etc/mysql 경로로 이동하여 bind-address 를 찾아 수정 해 주면 된다.

grep -r 'bind' ./

cd 명령으로 해당 경로로 이동 후, 설정 파일을 열어 해당 부분을 0.0.0.0 으로 변경 해 주면 된다.

이제 진짜 마지막이다 ❗❗
다시 터미널로 돌아와 MySQL 서버를 재 시작 해 주면 끝이다.

sudo systemctl restart mysql

MySQL Workbench 에서 생성된 데이터베이스에 접근 해 보겠다.

에러 발생….🤮
오 하지만 에러를 금방 해결할 수 있을 것 같다..❗

계정 생성 👼

위 에러 메세지를 보면,
외부 환경인 EC2 에 내가 접근하려고 하는데,
내부 ip 주소로는 외부 ip 주소에 접근할 수 가 없기 때문에 접속 가능한 계정을 생성 해 주어야 한다.

• 계정 조회

아래 명령을 통해 외부, 내부 ip 에 접근 가능한 계정을 생성 해 준다.

CREATE USER '계정아이디'@'localhost' IDENTIFIED BY '비밀번호';
CREATE USER '계정아이디'@'호스트' IDENTIFIED BY '비밀번호';

그리고, 생성한 계정에 권한을 부여 해 주어야 한다.

GRANT ALL PRIVILEGES ON *.* TO '계정아이디'@'localhost';
GRANT ALL PRIVILEGES ON *.* TO '계정아이디'@'호스트';

권한 부여 후에는 이를 적용하는 명령어를 실행 해 주어야 한다.

FLUSH PRIVILEGES;

모든 적용이 끝난 후 다시 MySQL WorkBench 에서 생성한 외부ip 접근 가능 사용자 정보를 입력하고,
Test Connection 을 해 보면 정상적으로 연결이 됨을 확인할 수 있다 ✨

인코딩 방식 변경 🔮

아래 설정은 기존의 UTF-8 방식의 4Btye 가변 길이 인코딩 방식을 적용하는 방법이다.

MySQL 은 UTF-8 방식의 인코딩 방식을 지원하지만,
3Byte 방식을 지원했었으며 이후 업데이트를 통해 4Btye 를 추가했다.
👉 이는 MySQL 5.5 & MariaDB 5.5 이후 버전에서만 사용 가능하다.

루트 경로로 이동하여
/mysql 디렉토리에 있는 my.cnf 파일에 vim 에디터를 사용하여 접근한다.

vim 은, 별도의 설치 없이 파일을 수정할 수 있는 에디터 기능을 제공한다.

파일 내부로 진입했다면, 네모 박스의 옵션을 추가 해 주고 저장한다.

파일의 변경이 있을 경우, 재시작을 해 주어야 한다.

sudo service restart mysql

Reference 🌊

https://velog.io/@ghldjfldj/AWS-RDS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-zuaaizv4
https://velog.io/@cptkuk91/AWS-EC2%EC%97%90-MySQL-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://joonyon.tistory.com/entry/MySQL-root-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EC%84%A4%EC%A0%95
https://www.lesstif.com/dbms/mysql-error-1698-28000-89555999.html
https://goddaehee.tistory.com/292
https://goddaehee.tistory.com/331

AWS 에서 생성한 EC2 인스턴스 에 MySQL 설치 명령을 실행하니,
아래와 같이 원격 서버에 접속이 되지 않는 상황이다.

실행한 명령은 다음과 같다.

Permission denied 에러가 발생하여 권한(sudo)을 추가 해 주었다.

이후 설치가 멈추더니, VSCode 에디터가 종료되었고
아래와 같이 원격 서버를 실행하기 위한 로딩 화면이 무한 반복되고있다 😭😭

[22:50:29.446] Log Level: 2
[22:50:29.480] SSH Resolver called for "ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d", attempt 1
[22:50:29.481] "remote.SSH.useLocalServer": false
[22:50:29.482] "remote.SSH.useExecServer": false
[22:50:29.482] "remote.SSH.showLoginTerminal": false
[22:50:29.482] "remote.SSH.remotePlatform": {"LocalServer":"linux","DDocker_LocalServer":"linux"}
[22:50:29.482] "remote.SSH.path": undefined
[22:50:29.482] "remote.SSH.configFile": undefined
[22:50:29.483] "remote.SSH.useFlock": true
[22:50:29.483] "remote.SSH.lockfilesInTmp": false
[22:50:29.484] "remote.SSH.localServerDownload": auto
[22:50:29.484] "remote.SSH.remoteServerListenOnSocket": false
[22:50:29.484] "remote.SSH.showLoginTerminal": false
[22:50:29.484] "remote.SSH.defaultExtensions": []
[22:50:29.485] "remote.SSH.loglevel": 2
[22:50:29.486] "remote.SSH.enableDynamicForwarding": true
[22:50:29.486] "remote.SSH.enableRemoteCommand": false
[22:50:29.486] "remote.SSH.serverPickPortsFromRange": {}
[22:50:29.486] "remote.SSH.serverInstallPath": {}
[22:50:29.488] VS Code version: 1.85.1
[22:50:29.488] Remote-SSH version: remote-ssh@0.107.1
[22:50:29.488] win32 x64
[22:50:29.490] SSH Resolver called for host: DDocker_LocalServer
[22:50:29.490] Setting up SSH remote "DDocker_LocalServer"
[22:50:29.495] Using commit id "0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2" and quality "stable" for server
[22:50:29.500] Install and start server if needed
[22:50:29.506] Checking ssh with "C:\Program Files\Eclipse Adoptium\jdk-11.0.19.7-hotspot\bin\ssh.exe -V"
[22:50:29.509] Got error from ssh: spawn C:\Program Files\Eclipse Adoptium\jdk-11.0.19.7-hotspot\bin\ssh.exe ENOENT
[22:50:29.510] Checking ssh with "C:\Ruby32-x64\bin\ssh.exe -V"
[22:50:29.511] Got error from ssh: spawn C:\Ruby32-x64\bin\ssh.exe ENOENT
[22:50:29.511] Checking ssh with "C:\Windows\system32\ssh.exe -V"
[22:50:29.513] Got error from ssh: spawn C:\Windows\system32\ssh.exe ENOENT
[22:50:29.514] Checking ssh with "C:\Windows\ssh.exe -V"
[22:50:29.516] Got error from ssh: spawn C:\Windows\ssh.exe ENOENT
[22:50:29.517] Checking ssh with "C:\Windows\System32\Wbem\ssh.exe -V"
[22:50:29.518] Got error from ssh: spawn C:\Windows\System32\Wbem\ssh.exe ENOENT
[22:50:29.518] Checking ssh with "C:\Windows\System32\WindowsPowerShell\v1.0\ssh.exe -V"
[22:50:29.520] Got error from ssh: spawn C:\Windows\System32\WindowsPowerShell\v1.0\ssh.exe ENOENT
[22:50:29.520] Checking ssh with "C:\Windows\System32\OpenSSH\ssh.exe -V"
[22:50:29.748] > OpenSSH_for_Windows_8.1p1, LibreSSL 3.
[22:50:29.749] > 0.2

[22:50:29.755] Running script with connection command: "C:\Windows\System32\OpenSSH\ssh.exe" -T -D 52752 "DDocker_LocalServer" bash
[22:50:29.758] Terminal shell path: C:\Windows\System32\cmd.exe
[22:50:30.135] > ]0;C:\Windows\System32\cmd.exe
[22:50:30.136] Got some output, clearing connection timeout
[22:50:51.200] > ssh: connect to host DDocker_LocalServer port 22: Connection timed out
[22:50:51.254] > 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:50:52.528] "install" terminal command done
[22:50:52.528] Install terminal quit with output: 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:50:52.528] Received install output: 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:50:52.529] Failed to parse remote port from server output
[22:50:52.532] Resolver error: Error:
	at g.Create (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:642703)
	at t.handleInstallOutput (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:640069)
	at t.tryInstall (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:761983)
	at async c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:722522
	at async t.withShowDetailsEvent (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:725828)
	at async I (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:719493)
	at async t.resolve (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:723199)
	at async c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:907003
[22:50:52.552] ------




[22:50:54.951] Opening exec server for ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d
[22:50:55.037] Initizing new exec server for ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d
[22:50:55.102] Using commit id "0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2" and quality "stable" for server
[22:50:55.106] Install and start server if needed
[22:50:55.129] Running script with connection command: "C:\Windows\System32\OpenSSH\ssh.exe" -T -D 52780 "DDocker_LocalServer" bash
[22:50:55.131] Terminal shell path: C:\Windows\System32\cmd.exe
[22:50:55.469] > ]0;C:\Windows\System32\cmd.exe
[22:50:55.470] Got some output, clearing connection timeout
[22:51:16.497] > ssh: connect to host DDocker_LocalServer port 22: Connection timed out
[22:51:16.521] > 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:51:17.785] "install" terminal command done
[22:51:17.786] Install terminal quit with output: 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:51:17.786] Received install output: 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:51:17.787] Failed to parse remote port from server output
[22:51:17.788] Exec server for ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d failed: Error
[22:51:17.788] Error opening exec server for ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d: Error

에러 확인 ❌

로그를 보면,
SSH 호스트에 연결하려고 시도하고 있지만, 시간 ⏱ 이 초과되는 문제가 발생하고있다 ✅

ssh: connect to host DDocker_LocalServer port 22: Connection timed out

SSH 클라이언트를 실행 하는 중 문제 ❌ 가 발생했다.

프로세스에서 없는 파이프에 쓰려고 했습니다.

이는 SSH 클라이언트 실행 중에 다른 문제가 발생한 것으로,
명령이 중단되거나 비 정상적으로 종료되었다는 것을 의미한다.

해결 방법 💨

known_hosts 🙄

앞서 EC2 인스턴스를 생성할 때 발급받은 .pem 키를 저장한 디렉토리로 가 보면,

known_hosts 파일이 생성되어 있을텐데,
이 파일을 열어보면 서버 IP ssh - ras 키 순으로 여러 줄이 작성되어 있을것이다.

여기서 접속이 되지 않는 IP 주소 (Remote) 를 찾아
그 줄을 제거 후 다시 SSH 접속을 하면 대부분 해결이 된다.

해당 에러는 이전 호스트들과 충돌하여 발생하는 문제 때문에 발생하는 에러이다.

하지만, 내가 마���친 에러는 이 해결방법으로 해결이 되지 않아 다른 방법을 시도해야할것같다.

Uninstall VSCode Server 💥

1️⃣ VSCode 에서 명령 팔레트를 열고,
Remote-SSH: Kill VS Code Server on Host... 를 선택하고
종료 할 Remote 서버를 선택하여 종료 후 재 시도한다.

2️⃣ 1️⃣ 번으로 해결이 되지 않을 경우,
Remote-SSH: Uninstall VS Code Server from Host... 를 선택후
Remote 서버를 삭제 후 재 설치 하여 다시 시도해본다.

SSH Key Permission 🔑

위 두가지의 방법으로도 해결이 되지 않아 이 방법까지 왔을텐데,
나는 실제 이 방법으로 해결이 되었다.

먼저, EC2 를 생성하며 발급받은 .pem 키가 있는 디렉토리에서,
파일의 속성을 클릭한다.

[보안] 탭에서 [고급] 으로 접근한다.

이미 존재하는 사용 권한 항목들을 아래 [상속 사용 안 함] 버튼을 클릭하여 모두 제거 해 준다.

빈 값이 확인되면, [보안 주체 선택] 을 클릭하여 사용자를 추가 해 준다.

위 과정을 모두 마치면,
VSCode 의 Remote 서버에 정상적으로 접근이 가능해 진다.

Reference 🌊

https://lovflag.tistory.com/17
https://bonita-sy.tistory.com/entry/VSCode-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4%EC%97%90%EC%84%9C-%EC%97%86%EB%8A%94-%ED%8C%8C%EC%9D%B4%ED%94%84%EC%97%90-%EC%93%B0%EB%A0%A4%EA%B3%A0-%ED%96%88%EC%8A%B5%EB%8B%88%EB%8B%A4-The-process-tried-to-write-to-a-nonexistent-pi

해당 포스팅의 시작은 AWS 에서 생성한 EC2 인스턴스 를
VSCode 의 SSH Extension 으로 실행했을 때 발생한 에러를 기록하고자 한다.

위 사진은 VSCode 에서 SSH 로 원격 서버를 실행했을 때 발생한 무��� 부팅 (?) 에러이다.

[22:17:58.478] Log Level: 2
[22:17:58.495] VS Code version: 1.85.1
[22:17:58.495] Remote-SSH version: remote-ssh@0.107.1
[22:17:58.496] win32 x64
[22:17:58.499] SSH Resolver called for "ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d", attempt 1
[22:17:58.500] "remote.SSH.useLocalServer": false
[22:17:58.500] "remote.SSH.useExecServer": false
[22:17:58.500] "remote.SSH.showLoginTerminal": false
[22:17:58.500] "remote.SSH.remotePlatform": {"LocalServer":"linux","DDocker_LocalServer":"linux"}
[22:17:58.501] "remote.SSH.path": undefined
[22:17:58.501] "remote.SSH.configFile": undefined
[22:17:58.501] "remote.SSH.useFlock": true
[22:17:58.501] "remote.SSH.lockfilesInTmp": false
[22:17:58.501] "remote.SSH.localServerDownload": auto
[22:17:58.504] "remote.SSH.remoteServerListenOnSocket": false
[22:17:58.504] "remote.SSH.showLoginTerminal": false
[22:17:58.504] "remote.SSH.defaultExtensions": []
[22:17:58.504] "remote.SSH.loglevel": 2
[22:17:58.504] "remote.SSH.enableDynamicForwarding": true
[22:17:58.505] "remote.SSH.enableRemoteCommand": false
[22:17:58.505] "remote.SSH.serverPickPortsFromRange": {}
[22:17:58.505] "remote.SSH.serverInstallPath": {}
[22:17:58.515] SSH Resolver called for host: DDocker_LocalServer
[22:17:58.515] Setting up SSH remote "DDocker_LocalServer"
[22:17:58.520] Using commit id "0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2" and quality "stable" for server
[22:17:58.526] Install and start server if needed
[22:17:58.533] Checking ssh with "C:\Program Files\Eclipse Adoptium\jdk-11.0.19.7-hotspot\bin\ssh.exe -V"
[22:17:58.538] Got error from ssh: spawn C:\Program Files\Eclipse Adoptium\jdk-11.0.19.7-hotspot\bin\ssh.exe ENOENT
[22:17:58.538] Checking ssh with "C:\Ruby32-x64\bin\ssh.exe -V"
[22:17:58.540] Got error from ssh: spawn C:\Ruby32-x64\bin\ssh.exe ENOENT
[22:17:58.540] Checking ssh with "C:\Windows\system32\ssh.exe -V"
[22:17:58.542] Got error from ssh: spawn C:\Windows\system32\ssh.exe ENOENT
[22:17:58.542] Checking ssh with "C:\Windows\ssh.exe -V"
[22:17:58.544] Got error from ssh: spawn C:\Windows\ssh.exe ENOENT
[22:17:58.544] Checking ssh with "C:\Windows\System32\Wbem\ssh.exe -V"
[22:17:58.546] Got error from ssh: spawn C:\Windows\System32\Wbem\ssh.exe ENOENT
[22:17:58.546] Checking ssh with "C:\Windows\System32\WindowsPowerShell\v1.0\ssh.exe -V"
[22:17:58.550] Got error from ssh: spawn C:\Windows\System32\WindowsPowerShell\v1.0\ssh.exe ENOENT
[22:17:58.550] Checking ssh with "C:\Windows\System32\OpenSSH\ssh.exe -V"
[22:17:58.640] > OpenSSH_for_Windows_8.1p1, Lib
[22:17:58.640] > reSSL 3.0.2

[22:17:58.645] Running script with connection command: "C:\Windows\System32\OpenSSH\ssh.exe" -T -D 53233 "DDocker_LocalServer" bash
[22:17:58.650] Terminal shell path: C:\Windows\System32\cmd.exe
[22:17:58.965] > ]0;C:\Windows\System32\cmd.exe
[22:17:58.965] Got some output, clearing connection timeout
[22:18:20.019] > ssh: connect to host DDocker_LocalServer port 22: Connection timed out
[22:18:20.033] > 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:18:21.322] "install" terminal command done
[22:18:21.322] Install terminal quit with output: 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:18:21.323] Received install output: 프로세스에서 없는 파이프에 쓰려고 했습니다.
[22:18:21.324] Failed to parse remote port from server output
[22:18:21.326] Resolver error: Error:
	at g.Create (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:642703)
	at t.handleInstallOutput (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:640069)
	at t.tryInstall (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:761983)
	at async c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:722522
	at async t.withShowDetailsEvent (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:725828)
	at async I (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:719493)
	at async t.resolve (c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:723199)
	at async c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-ssh-0.107.1\out\extension.js:2:907003
[22:18:21.340] ------

[22:18:23.868] Opening exec server for ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d
[22:18:23.899] Initizing new exec server for ssh-remote+7b22686f73744e616d65223a2244446f636b65725f4c6f63616c536572766572227d
[22:18:23.906] Using commit id "0ee08df0cf4527e40edc9aa28f4b5bd38bbff2b2" and quality "stable" for server
[22:18:23.911] Install and start server if needed
[22:18:23.933] Running script with connection command: "C:\Windows\System32\OpenSSH\ssh.exe" -T -D 53263 "DDocker_LocalServer" bash
[22:18:23.935] Terminal shell path: C:\Windows\System32\cmd.exe
[22:18:24.276] > ]0;C:\Windows\System32\cmd.exe
[22:18:24.277] Got some output, clearing connection timeout

터미널도 열리지 않고,
아무런 키가 작동을 하지 않아 여러 방면으로 검색 등을 활용 해 봤지만
필요한 정보는 얻을 수 없었다.

어제까지만 해도 잘 열리던 서버인데 먼가 이상하다..🙄

그런 중 EC2 인스턴스 관리 페이지에서 아래와 같은 정보를 확인할 수 있었다.

CPU 의 사용량이 비 정상적인 수치로 확인되고있다.

에러 확인 💥

확인 해 본 결과,
위 에러는 비 정상적으로 치솟은 CPU 사용량에 의해
연결되어있는 SSH 서버 가 모두 끊기는 (터지는) 현상이었다.

원인없는 결과는 존재할수없듯,
내가 시도했던 방법을 추적해본 결과

무언가를 설치하는 명령어 를 실행할때마다 CPU 사용량이 기하급수적으로 치솟았다.

즉,
리눅스 쉘에서 외부와 통신하는 명령어를 실행 할 때
이를 수행할 메모리에 부하가 기준치보다 높게 측정되어 발생하는게 원인이었다.

프리티어로 생성한 EC2 인스턴스 의 경우 보통 t2.micro 를 사용하게 될 텐데,
지원되는 메모리의 크기가 작고,
네트워크의 성능이 비교적 낮음을 확인할 수 있다.

이 경우 인스턴스 유형을 업그레이드 하여
보다 좋은 성능을 가진 인스턴스를 사용하면 문제가 가볍게 해결될테지만,
그에 따른 과금되는 요금또한 만만치 않으며

미니 프로젝트를 위한 인스턴스로는 t2.micro 로도 감사하다..🙏

아..❗
언제 문득 EC2 인스턴스 를 도커 (Docker) 로 가져와 이미지를 띄운다는 얘기를 들었던것 같은데
혹시 이와 같은 문제를 해결하기 위해서..❔ 일까..❔

알면 알수록 궁금해지는게 많은 백엔드(서버) 인 것 같다 👶

에러 해결 ✅

인스턴스 재부팅 💫

내가 마주친 에러와 같은 경우,
인스턴스를 재 부팅 해 주면 거의 왠만하면 해결이 된다.

재부팅으로도 해결이 되지 않는다면,
인스턴스 중지 후 다시 인스턴스 시작 을 해 준다.

하지만,
인스턴스를 재부팅을 할 경우
퍼블릭 IPv4 주소 와 퍼블릭 IPv4 DNS 가 바뀌어 새로 할당되는데,
이 경우 연결되어있는 SSH 가 해제되며 다시 연결 해 주어야 하는 상황이 발생한다.

탄력적 IP (EIP) 🌐

해당 파트는,
인스턴스를 재 부팅하거나 중지 후 재 시작을 할 경우
퍼블릭 IPv4 주소 와 퍼블릭 IPv4 DNS 가 재 할당되는데,

생성한 EC2 는 낮은 버전의 메모리를 사용하는 환경이므로 잦은 재부팅을 해야할지도 모르는 상황이기에
한 번 발급받은 IP 주소를 고정시킬 수 없을까 ? 에서 시작하려한다.

이미 나와 같은 생각을 한 사람이 수 없이 많이 존재했고,
비교적 쉽게 정보를 얻을 수 있었다.

바로 탄력적 IP 인데,
이는 특정 주소를 할당받아 동적으로 IP 주소 가 변경되지 않게하는 AWS 의 서비스 이다 👉 EIP

해당 서비스를 이용하기 전,
유의사항으로는 과금이 발생할 수도 있다는 것이다.

단,
아래 사항에 해당하는 경우에만 말이다.

사이드 프로젝트를 통해 AWS 의 서비스를 이용하는데,
문서를 다시금 확인하여 불필요한 사항에서 과금이 발생하지 않게 유의하자 ❗❗
참조 링크 👉 https://repost.aws/ko/knowledge-center/elastic-ip-charges

먼저,
왼쪽의 사이드 바 에서 탄력적 IP 를 선택하여 해당 탭으로 이동한다.

[탄력적 IP 주소 할당] 버튼을 통해 생성 해 준다.

네트워크 그룹을 사용자의 현재 위치에 맞게끔 지정하고,
[할당] 버튼을 통해 탄력적 IP 를 생성 해 준다.

비교적 간단하게 생성할 수 있으며, 이를 기존의 인스턴스와 연결 만 해 주면 끝이다.

생성된 탄력적 IP 주소를 확인하고,
[인스턴스] 를 선택 후 연결할 인스턴스와 프라이빗 IP 주소를 입력한다.

위 과정을 통해,
발급받은 탄력적 IP 주소와 인스턴스를 연결 완료하였고,

인스턴스에 올바르게 적용 되었는지 확인하면 끝이다.

Reference 🌊

https://velog.io/@yesparrot/EC2-%ED%83%84%EB%A0%A5%EC%A0%81-IP-%EC%A0%81%EC%9A%A9-AWS-EIP
https://repost.aws/ko/knowledge-center/elastic-ip-charges
https://assaeunji.github.io/aws/2020-03-30-elastic-ip/
https://hjjooace.tistory.com/42
https://velog.io/@kkj53051000/AWS-EC2-CPU-%EC%82%AC%EC%9A%A9%EB%A5%A0-100-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EA%B3%BC%EC%A0%95
https://vlog.tion.co.kr/aws-ec2-cpu-%EC%82%AC%EC%9A%A9%EB%9F%89-100-%EC%84%9C%EB%B2%84%EB%B6%80%ED%95%98-%EC%9B%90%EC%9D%B8/

AWS (Amazon Web service),
클라우드 서비스를 제공하는 플랫폼 중 가장 많은 사용자 를 보유하고 있는 플랫폼이다.

네트워킹을 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라 등의 다양한 서비스를 제공하고 있다.

클라우드 ⛅

클라우드 ❔ 클라우드 컴퓨팅 ❔
왜 클라우드 라고 부를까 ❓

서버 단일의 개채를 하나의 원 이라고 칭할 때,
서버가 많아지게 된다면 아래의 그림처럼 구름의 형태 를 띌 것이다.

이처럼 수 없이 많은 가상 서버 의 집합을 구름 형태의 모습에 빗대어 클라우드 라고 부르게 되었다.
위에서 클라우드를 가상 서버 라고 정의했는데,
우리가 AWS 에서 서버를 띄울 때는 보통 VM (가상머신) 을 통해 사용하기 때문에 가상 서버 라 칭했다.

EC2 💻

EC2 는 == EC2 인스턴스 (instance) 라고 칭한다.

EC2 는, AWS 에서 가장 기본이 되는 컴퓨터(서버)의 단위로 생각할 수 있다.
이 서버 (가상머신) 을 통해 구현하고자 하는 모든 것을 구현할 수 있다.

즉,
컴퓨터 그 자체를 물리적으로 구할 수 없으니,
가상의 환경 을 구축하는 것을 의미한다.

이 안에는 데이터베이스를 설치하여 사용하던가 파일을 저장하거나 하는 실제 컴퓨터의 기능을 모두 구현할 수 있다.

VSCode 와 EC2 연결 🔌

사전에 먼저 생성 단계에서,
키 페어 🔑 를 생성해야하는데 아래와 같이 이름을 지정하고 RSA , .pem 방식으로 생성해 주면 된다.

생성된 .pem 키를 저장하는 경로는
Window 의 경우 👉 C:\user\{username}\.ssh\
Mac & Linux 의 경우 👉 ~/.ssh/ 경로에 저장하는것이 좋다.

생성한 키 페어 🔑 를 가지고 있다면, 3 가지 방법 으로 인스턴스를 연결 🔌 할 수 있다.

• 홈 페이지 에서 직접 연결
• Putty 를 사용한 연결
• VSCode 에서의 SSH 연결

우리는 마지막 방법인
VSCode 에서 SSH 방식으로 생성한 인스턴스에 접근할 것이다.

먼저 VSCode 의 Extensions 탭에서 Remote Development 검색하여 설치 해 준다.

후에 F1 키를 눌러 SSH 를 검색하고,

Remote-SSH: Open COnfiguration File 를 선택하여 config 파일로 접근한다.

이곳에는 빈 값이 들어있을텐데, 아래와 같이 설정을 추가 해 주면 된다.

Host 👉 생성될 리모트 서버 이름
HostName 👉 퍼블릭 IPv4 주소 & 퍼블릭 IPv4 DNS
User 👉 EC2 사용자 이름
Port 👉22
IdentifyFile 👉 .pem 키가 있는 경로

설정을 모두 마쳤다면, 좌측 Remote Explorer 에 Host 로 생성된 목록이 생긴다.
이를 클릭하면 EC2 인스턴스 와 성공적으로 연결이 된 것이다.

만약 목록이 보이지 않는다면 👉 새로고침 버튼 클릭 ❗❗

해당 버튼을 클릭하면 새 창으로 VSCode 가 열리는데, 여기서 운영체제를 선택할 수 있다.

모든 연결이 끝났다면,
터미널에서 ls 명령어를 통해 설치된 초기세팅을 확인할 수 있고,
나는 여기에 Github Repository 를 /home 경로에 받아왔다.

해당 터미널에서는 리눅스(Linux) 명령어를 실행할 수도 있고,
npm 명령어 또한 사용 가능하다.

user “root”….

만약,
터미널을 실행했는데 아래와 같은 메세지 가 반복되어 출력된다면,

sudo apt-get update

위 명령을 통해 업데이트 를 진행 해 주면 말꼼히 사라지게 된다.

Reference 🌊

https://goddaehee.tistory.com/174
https://goddaehee.tistory.com/328
https://m.cafe.daum.net/candan/GLyp/8?listURI=%2Fcandan%2F_rec

정보의 바다라고 불리는 웹 사이트는 지금 이 시간에도 무수히 많은 정보가 쏟아져 나오고 있다.
이처럼 방대한 양의 정보(데이터) 를 사용자에게 보다 쉽게 전달하기 위해
우리 (프론트엔드 as 개발자) 는 페이지들을 인덱싱 하여 화면에 렌더링 해 준다.

만약,
가공되지 않은 데이터를 누군가가 인덱싱 & 저장 하여 관리하지 않는다면,
사용자는 해당 컨텐츠에 접근할 수 있는 방법이 존재하지 않을 것이다.

그래서 등장한 개념이 크롤링 이고,
이를 보다 쉽게 사용하기 위해 소프트웨어로 감싼것을 크롤러 라고 한다.

위키 백과 👇
https://namu.wiki/w/%ED%81%AC%EB%A1%A4%EB%A7%81

그럼,
크롤링을 사용해야하는 이유는 뭘까 ?

결론부터 말하자면 당신의 시간은 소중하니까 라고 할 수 있다.
즉,
필요한 데이터를 복사 + 붙여넣기를 통해 번거로운 작업을 하는것이 아닌
크롤링의 자동화를 통해 정보(데이터)를 취득하는 시간을 효율적으로 관리한다는 점에 의미를 두고 있다.

밈 으로 👉 '진정한 개발자는 게을러야 한다' 라는 말이 있듯,
개발자라면 반복적인 작업을 지양해야하며
이는 자동화된 프로그램을 만들어 업무 효율을 증가시킨다 라는 의미를 가진다.

Deep inf 👀

위 모든 과정을 가장 잘 다루는 곳은 어딜까 ?

바로, Google 이다.

Google 은 앞서 말했듯,
무한히 늘어나는 웹 페이지를 인덱싱함으로 인해 보다 쉽게 정보를 제공하여 사용자 경험을 증가시켜 준다.

해당 분야에서 가장 대표적인 소프트웨어로는,
Python 의 Beautiful Soup 이 있고,
Java 의 jsoup 이라는 HTML 파싱 라이브러리가 존재한다.

실제로 구글에 크롤링 이라는 키워드로 검색하면,
Beautiful Soup 를 활용한 예제가 대부분임을 확인할 수 있다..🙄

하지만 Beautiful Soup 같은 경우는 동적으로 데이터를 추출하는 크롤러가 아닌,
정적으로 이미 그려진 웹 페이지를 Seed == baseURL 로 하여
데이터를 추출하는 스크래퍼, 스크래핑 쪽에 조금 더 가깝다.

스크래퍼를 동적으로 추출하는 크롤링의 개념을 적용하기 위해 등장한 라이브러리가
Python 의 Selenium 이다.

Selenium 은,
다양한 옵션을 제공하는데 크롤링은 방대한 양의 데이터를 추출해야 함으로 자동화 를 목적으로 두고있기 때문에,
WebDriver와 Headless 옵션을 통해 CLI 창에서 데이터를 추출하고 가공할 수 있다.

추가적으로 우리가 주로 다뤄야하는, 다루는 언어인 JavaScript 에서도
위와 같은 기능이 구현된 라이브러리가 존재한다.

Cheerio 와 Puppeteer 가 있는데,
바로 다음 포스팅에서 두 라이브러리의 차이와 예제를 통해 학습했던 방법을 정리하려고 한다.

Robots.txt 🤖

아, 이제 크롤링에 대한 어느정도 이해도 끝났고,
내가 원하는 데이터를 추출하여 멋진 웹 사이트를 만들어 봐야지 ❗❗

라고 한다면 큰 실수일 수도 있다 🚫
보통 웹 사이트에는 크롤링이 가능한 허용범위 ✅ 에 대한 정보가 담긴 문서가 존재한다.
이와 같은 정보는 Robots.txt 파일에 담겨있는데,
이 파일은 검색엔진최적화(SEO) 와 밀접한 관계가 있다.

크롤링 할 baseURL 뒤에 /robots.txt 를 입력 해 주면,
해당 사이트에 대한 크롤링 정책을 확인할 수 있다.
👉 네이버의 경우 .txt 파일이 다운로드 된다.

단, Params 로 지정된 하위 페이지 경로에서 robots.txt 를 붙이게 되면,
간혹 정책을 확인할 수 없는 경우도 있기에
하위 경로를 모두 제거한 최 상위 (메인 URL) 에서 확인하는게 가장 이상적인 방법이다 💌💨

SEO ⚡

아래 사진은 구글 URL 에서 robots.txt 를 추출하여 확인한 이미지 이다.

출처 👇
https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt?hl=ko

이 이미지가 의미하는 바는 다음과 같다.

• 이름이 Googlebot 인 사용자는 baseURL 에서 /nogooglebot 으로 시작하는 URL 을 크롤링 할 수 없다.
  👉 https://exaple.com/nogooglebot/...
  
  
• 그 외 사용자 (* == 와일드카드) 는 모든 경로 (/) 에서 크롤링을 할 수 있다.
  👉 해당 부분은 생략 가능
  
  
• Sitemap 은 크롤링 봇에게 알려주는 가이드 정도의 의미를 담고 있으며,
  .xml 형식의 파일로 작성되어있다.
  👉 해당 파일은 URL 뒤에 심어주는 형식으로 구성되어 있으며,
  Google Docs 를 참고하면 해당 파일을 생성하는 가이드라인과 커스텀이 가능한 프리셋을 제공하고 있다.
  

또한, 이 robots.txt 파일에 담긴 Googlebot 을 통해
우리가 만든 사이트를 검색엔진에 잘 노출시킬 수 있도록 최적화 시킬 수 있다.

검색엔진이 자료를 긁어가는 주기가 정확하진 않지만,
구글을 기준으로 한다면 1일 1회 이상 우리가 만든 DDocker 라는 사이트를
robots.txt 와 Sitemap.xml 을 기준으로 웹 사이트 안의 모든 정보를 크롤링 하여
구글 검색엔진 DB 에 저장하는 형태로 구현되어 있다.

우리는, 보다 효율적으로 검색엔진에 내 서비스를 노출시켜주어야 하는걸 목표로 두고 있기에
robots.txt 를 검색엔진에 노출��� 잘 되게끔 설정 해 주어야 한다.
이 파일은 프로젝트 내부 /public 경로에 생성하여 빌드하면 자동으로 반영이 된다.

설정 후 실제 반영은 24시간 정도 이후부터 된다고 한다.

실제 검색엔진에 잘 노출이 되게끔 하기 위해서는
크롤링 봇 🤖 에게 알려주는 robots.txt 와 Sitemap.xml 도 중요하지만
코드 내부에 정의하는 각종 태그에도 영향을 받는다.

검색엔진 최적화를 위해 태그를 수정하는 방법은 아래 링크를 참조하여 적용하면 좋을 것 같다.
https://yozm.wishket.com/magazine/detail/1540/

Reference 🌊

https://jins-sw.tistory.com/55
https://www.fun-coding.org/post/crawl_basic2.html#gsc.tab=0
https://brunch.co.kr/@webbible/5
https://youtu.be/xGkftwkoJK4?si=IhnTcFQy8qQJzJr4