kdh22q

1. 덤프(restore)

# 덤프 명령어

mysqldump -h <RDS_ENDPOINT> -P <PORT> -u <USERNAME> -p <DATABASE_NAME> > dump01.sql

• <RDS_ENDPOINT>: RDS 인스턴스의 엔드포인트 주소.
• <PORT>: MySQL 서버 포트 (기본값 3306).
• <USERNAME>: 데이터베이스 사용자 이름.
• <DATABASE_NAME>: 덤프할 데이터베이스의 이름.
• dump01.sql: 생성될 덤프 파일의 이름.
• 생성되는 경로 : 현재 경로

# 덤프시 생기는 에러

경고 메세지 (넘버링은 편의상 사용):

1. "Warning: 
A partial dump from a server that has GTIDs will by default include 
the GTIDs of all transactions, even those that changed suppressed parts of 
the database."
2. "If you don't want to restore GTIDs, pass --set-gtid-purged=OFF. To make a 
complete dump, pass --all-databases --triggers --routines --events.
Warning: 
A dump from a server that has GTIDs enabled will by default include 
the GTIDs of all transactions, even those that were executed during its extraction 
and might not be represented in the dumped data. This might result in an 
inconsistent data dump. In order to ensure a consistent backup of the database, 
pass --single-transaction or --lock-all-tables or --master-data."

이 경고 메시지는 MySQL 데이터베이스를 덤프할 때 GTID (Global Transaction Identifier)와 관련된 사항과 데이터의 일관성을 보장하기 위한 설정에 대한 경고이다. 

1.  GTID 관련 경고

• 해석: GTID가 활성화된 서버에서 덤프를 생성하면 기본적으로 모든 트랜잭션의 GTID가 포함된다. 이 GTID는 덤프 파일에서 제외된 데이터베이스의 일부를 변경한 트랜잭션의 GTID도 포함될 수 있다.
• 해결 방법: GTID를 덤프에서 제외하려면 --set-gtid-purged=OFF 옵션을 사용해야 한다. 

mysqldump -h <RDS_ENDPOINT> -P <PORT> -u <USERNAME> -p --set-gtid-purged=OFF <DATABASE_NAME> > dumpfile01.sql

2.  일관성 있는 백업 경고

• 해석: 전체 데이터베이스의 덤프를 만들려면 --all-databases, --triggers, --routines, --events 옵션을 추가하여 덤프를 생성해야 한다.

mysqldump -h <RDS_ENDPOINT> -P <PORT> -u <USERNAME> -p --all-databases --triggers --routines --events > dumpfile01.sql

• 일관성 보장: 데이터베이스의 일관성을 보장하려면 --single-transaction 또는 --lock-all-tables 또는 --master-data 옵션을 추가할 수 있다.

• --single-transaction: InnoDB 테이블을 사용하는 경우, 트랜잭션을 시작하고 전체 덤프를 한 트랜잭션 내에서 실행한다. (데이터베이스의 일관성을 유지 가능)

mysqldump -h <RDS_ENDPOINT> -P <PORT> -u <USERNAME> -p --single-transaction <DATABASE_NAME> > dumpfile01.sql

• --lock-all-tables: 모든 테이블을 잠그고 덤프를 생성한다. 이 옵션은 MyISAM 테이블을 사용할 때 유용하다.

mysqldump -h <RDS_ENDPOINT> -P <PORT> -u <USERNAME> -p --lock-all-tables <DATABASE_NAME> > dumpfile01.sql

• --master-data: 복제 정보를 포함하여 덤프를 생성한다. 주로 복제 설정을 위한 덤프에서 사용된다.

mysqldump -h <RDS_ENDPOINT> -P <PORT> -u <USERNAME> -p --master-data <DATABASE_NAME> > dumpfile01.sql

* 에러 해결 요약

• GTID 제외: --set-gtid-purged=OFF 옵션을 사용하여 GTID를 덤프에서 제외한다.
• 전체 덤프: --all-databases, --triggers, --routines, --events 옵션을 추가하여 전체 데이터베이스 덤프를 만든다.
• 데이터 일관성: --single-transaction, --lock-all-tables, --master-data 중 하나를 사용하여 데이터의 일관성을 보장한다.

2.  복원(restore)

# 복원시 주의사항

1. 데이터베이스 존재 여부: 복원시킬 데이터베이스가 존재해야 한다. 만약 데이터베이스가 없다면, 먼저 생성해야 한다. 데이터베이스를 생성하려면 다음 명령어를 사용할 수 있다

mysql -h localhost -u <USERNAME> -p -e "CREATE DATABASE data01;"

# 복원 명령어

mysql -h localhost -u <USERNAME> -p <database명> < <dump 파일명>
# 예시
mysql -h localhost -u root -p data01 < dumpfile.sql​

• localhost: 데이터베이스가 로컬호스트에 위치할 경우 사용.
• root: 데이터베이스 사용자 이름.
• data01: 복원할 데이터베이스 이름.
• dumpfile.sql: 덤프 파일의 이름.

복원 과정을 시작하면 비밀번호를 입력하라는 프롬프트가 표시된다. 비밀번호를 입력한 후 덤프 파일의 내용이 test04 데이터베이스에 복원된다.

쉘(shell)은 사용자 명령을 처리하는 인터페이스로, Bash와 Zsh는 가장 많이 사용되는 쉘 중 두 가지이다. 이 두 쉘은 로그인 쉘과 비로그인 쉘에 따라 서로 다른 설정 파일을 로드한다.

1. Bash의 시작 파일 로드 순서

Bash는 쉘이 로그인 쉘인지, 비로그인 쉘인지에 따라 서로 다른 파일을 읽는다.

로그인 쉘과 비로그인 쉘의 차이는 다음과 같다:

• 로그인 쉘: 시스템에 로그인할 때 생성되는 쉘. 주로 TTY(터미널)나 SSH와 같은 원격 연결을 통해 로그인할 때 사용.
• 비로그인 쉘: GUI 환경에서 터미널을 새로 열 때처럼 이미 로그인된 상태에서 시작되는 쉘.

Bash가 어떤 파일을 언제 로드하는지는 아래 표와 같다:

설명:

• 로그인 쉘에서는 /etc/profile을 먼저 읽고, 그 후에 ~/.bash_profile, ~/.bash_login, 또는 ~/.profile 중 첫 번째로 존재하는 파일을 로드한다.
• 비로그인 쉘에서는 /etc/bash.bashrc를 먼저 읽고, 그 다음 ~/.bashrc 파일을 로드한다.
• 스크립트를 실행할 때는 BASH_ENV 환경 변수에 설정된 파일을 읽는다.

2. Bash 설정 파일 관리 팁

대부분의 경우, 비로그인 쉘을 더 자주 사용하므로 주요 설정을 ~/.bashrc에 작성하는 것이 좋다. 그러나, 로그인 쉘에서도 동일한 설정을 사용하고 싶다면, ~/.bash_profile에 ~/.bashrc를 소스(source)하는 코드를 추가할 수 있다. 이렇게 하면 로그인 시에도 ~/.bashrc의 설정이 적용됩니다.

# ~/.bash_profile 내용
if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

위의 코드를 ~/.bash_profile에 추가하면 로그인 쉘에서도 ~/.bashrc의 설정을 사용할 수 있게 됩니다. 또는 ~/.bash_profile을 ~/.bashrc로 심볼릭 링크할 수도 있다.

ln -s ~/.bashrc ~/.bash_profile

3. Zsh의 시작 파일 로드 순서

Zsh는 Bash와는 다르게 로그인 여부에 상관없이 항상 ~/.zshrc 파일을 읽습니다. Zsh의 로드 순서는 아래와 같다:

설명:

• 로그인 쉘에서는 /etc/zshenv, ~/.zshenv, /etc/zprofile, ~/.zprofile 등의 파일을 순차적으로 읽는다.
• 비로그인 쉘에서는 /etc/zshenv, ~/.zshenv, /etc/zshrc, ~/.zshrc를 차례로 읽는다.
• 스크립트를 실행할 때는 /etc/zshenv와 ~/.zshenv 파일만 읽는다.

4. Zsh 설정 파일 관리 팁

Zsh는 로그인 쉘과 비로그인 쉘 모두에서 ~/.zshrc 파일을 읽기 때문에, 모든 Zsh 설정을 ~/.zshrc에 작성하면 된다. 만약 로그인 시에만 실행하고 싶은 설정이 있다면, ~/.zprofile에 작성할 수 있다.

5. 비로그인 쉘과 로그인 쉘 구분

쉘이 로그인 쉘인지 비로그인 쉘인지 구분하는 방법은 여러 가지가 있다. Bash에서 쉘이 로그인 쉘인지 확인하려면 아래 명령어를 사용할 수 있다:

shopt -q login_shell && echo "이건 로그인 쉘이에유~" || echo "이건 비로그인 쉘이에유~"

Zsh에서는 $ZLOGIN 변수를 이용해 쉘이 로그인 쉘인지 확인할 수 있다.

요약

• Bash: 대부분의 설정은 ~/.bashrc에 작성하고, ~/.bash_profile에서 ~/.bashrc를 불러오면 로그인 쉘과 비로그인 쉘에서 동일한 설정을 사용할 수 있다.
• Zsh: 모든 설정을 ~/.zshrc에 작성하면 된다. Zsh는 로그인 여부와 상관없이 ~/.zshrc를 항상 읽는다.

Flexbox는 레이아웃을 구성할 때 매우 강력한 도구로, 다양한 화면 크기와 해상도에 대응할 수 있도록 해준다. 주로 flexDirection, justifyContent, alignItems, flex, flexWrap 등의 속성을 설정하여 레이아웃을 조절한다.

1. flexDirection: 이 속성은 자식 요소들이 배치되는 방향을 결정한다. 기본값은 column으로, 위에서 아래로 쌓인다. row로 설정하면 왼쪽에서 오른쪽으로 배치된다.
2. justifyContent: 이 속성은 주 축(main axis) 방향으로 자식 요소들이 어떻게 정렬되는지를 설정한다. 예를 들어, center로 설정하면 중앙에 정렬되고, space-between으로 설정하면 요소들 사이에 균등한 간격을 둔다.
3. alignItems: 이 속성은 교차 축(cross axis) 방향으로 자식 요소들이 어떻게 정렬되는지를 설정한다. flex-start, center, flex-end, stretch 등을 사용하여 정렬을 조절할 수 있다.
4. flex: 이 속성은 자식 요소가 남은 공간을 얼마나 차지할지를 설정한다. flex: 1로 설정하면 자식 요소가 가능한 모든 공간을 차지하게 된다.
5. flexWrap: 이 속성은 자식 요소들이 주 축 방향으로 넘칠 때 어떻게 처리할지를 설정한다. nowrap(기본값)으로 설정하면 넘치는 요소들이 한 줄에 표시되며, wrap으로 설정하면 다음 줄로 넘어가게 된다.

Flexbox를 잘 활용하면 다양한 화면 크기와 방향에서도 일관된 레이아웃을 유지할 수 있다. 각 속성들을 조합하여 원하는 레이아웃을 쉽게 구현할 수 있다.

React Native의 스타일링 시스템은 프레임워크를 통해 개발자가 JavaScript 및 React를 사용하여 iOS 및 Android용 기본 앱을 만들 수 있는 방법의 핵심적인 측면이다. 스타일 지정에 CSS가 사용되는 웹 기반 애플리케이션과 달리 React Native는 기본 레이아웃과 성능을 염두에 두고 CSS와 유사한 스타일의 하위 집합을 기반으로 하는 다른 시스템을 사용한다.

1. 스타일 지정을 위한 JavaScript 개체

React Native에서 스타일은 CSS 파일이 아닌 JavaScript 객체를 사용하여 정의된다. 이러한 객체에는 CSS와 유사하지만 기본 모바일 성능에 최적화된 속성이 포함되어 있다. 스타일은 style 소품을 통해 구성 요소에 전달된다.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

• 스타일은 스타일을 최적화하고 유효성을 검사하는 데 도움이 되는 StyleSheet.create 메서드를 사용하여 생성된다.
• style 소품은 View 및 Text 구성 요소 모두에 전달된다.

2. CSS와의 차이점

React Native의 스타일링 구문은 CSS와 유사하지만 특정 기능들이 부족하다.

• No cascade: React Native에는 CSS와 같은 계단식 스타일 시스템이 없다. 각 스타일은 적용되는 구성요소에 따라 다르다.
• No inheritance: 하위 요소가 특정 스타일을 상속할 수 있는 HTML과 달리 React Native 구성 요소는 명시적으로 전달되지 않는 한 상위 요소에서 스타일을 상속하지 않는다.
• Limited selectors: .class, #id 또는 element와 같은 CSS 선택기는 지원되지 않는다. 스타일은 style 소품을 통해 직접 적용된다.

3. 측정 단위

• React Native는 CSS에서 사용되는 전통적인 픽셀 단위('px')가 아닌 밀도 독립적 픽셀(DIP)을 사용한다. 이렇게 하면 픽셀 밀도가 다양한 화면에서 UI가 보기 좋게 표시된다.
• em, rem, % 또는 vh와 같은 단위를 사용할 수 있는 웹과 달리 React Native는 크기, 여백, 패딩 등에 대해 절대 숫자에만 거의 전적으로 의존한다.

4. 레이아웃용 Flexbox

React Native는 레이아웃 관리를 위해 Flexbox에 크게 의존한다. Flexbox는 컨테이너 내에서 구성 요소를 정렬하고 배포하는 효율적인 방법을 제공하는 레이아웃 모델이다.

React Native의 주요 Flexbox 속성은 다음과 같다:

• flexDirection: 기본 축(행 또는 열)을 결정한다. 기본값은 'column'인 반면 웹 Flexbox에서는 기본값이 'row'이다.
  • row: 하위 구성요소가 가로로 배치
  • column: 하위 구성요소가 수직으로 배치
• justifyContent: 기본 축을 따라 하위 항목을 정렬한다.
  • 값: flex-start, flex-end, center, space-between, space-around, space-evenly
• alignItems: 교차축을 따라 하위 요소를 정렬한다.
  • 값: stretch(기본값), flex-start, flex-end, center.
• flex: 형제에 비해 구성 요소가 어떻게 성장해야 하는지 제어한다. flex: 1이 있는 구성 요소는 flex가 있는 다른 구성 요소가 경쟁하지 않는 경우 사용 가능한 공간을 모두 차지한다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

5. 플랫폼별 스타일

React Native는 Platform 모듈이나 조건부 논리를 통해 플랫폼별 스타일을 허용한다.

• 앱이 iOS에서 실행되는지, Android에서 실행되는지에 따라 조건부로 스타일을 적용할 수 있다.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  text: {
    ...Platform.select({
      ios: {
        fontFamily: 'Arial',
      },
      android: {
        fontFamily: 'Roboto',
      },
    }),
  },
});

여기서 Platform.select는 플랫폼에 따라 적절한 글꼴이 사용되도록 보장해준다.

6. 스타일시트와 인라인 스타일

React Native는 스타일을 정의하는 두 가지 주요 방법을 제공한다.

StyleSheet.create: 이 방법은 유효성 검사와 더 나은 성능을 제공하므로 선호된다. 스타일을 캐시하고 네이티브 브리지에 맞게 최적화한다.
인라인 스타일: 스타일은 인라인 JavaScript 개체로 직접 전달될 수도 있다. 그러나 이는 모든 렌더링의 스타일을 다시 계산하므로 효율성이 떨어진다.

<View style={{ backgroundColor: 'blue', padding: 10 }} />

인라인 스타일은 간단한 사용 사례에 작동하지만 보다 복잡한 스타일에는 StyleSheet.create를 사용하는 것이 좋다.

7. 스타일 결합

style prop에 배열을 전달하여 단일 구성요소에 대해 여러 스타일을 결합할 수 있다.

const baseStyle = {
  color: 'black',
  fontSize: 18,
};

const boldStyle = {
  fontWeight: 'bold',
};

<Text style={[baseStyle, boldStyle]}>Bold Text</Text>

이 경우 baseStyle과 boldStyle의 스타일이 모두 적용된다. 충돌이 있는 경우 배열의 뒷부분에 있는 스타일이 이전 스타일을 재정의한다.

8. 동적 및 조건부 스타일

스타일은 JavaScript 개체이므로 상태, 소품 또는 기타 논리를 기반으로 조건부 스타일이나 동적 스타일을 쉽게 적용할 수 있다.

const isActive = true;
const styles = {
  text: {
    color: isActive ? 'green' : 'red',
  },
};

동적 스타일을 사용하여 사용자 작업, 화면 크기 등에 따라 다양한 스타일을 적용할 수 있다.

9. 그림자 및 테두리 속성

React Native는 기본 그림자 및 테두리 속성을 지원한다.

• 그림자 속성: iOS에서 사용할 수 있다.
• shadowColor, shadowOffset, shadowOpacity, shadowRadius.
• Elevation(Android 그림자용): Android에서는 elevation 속성을 사용하여 그림자가 생성된다.

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 3,
    elevation: 5, // 안드로이드 그림자
  },
});

10. 의사 클래스 및 미디어 쿼리

React Native는 :hover, :focus 또는 :before와 같은 의사 클래스를 지원하지 않는다. 대신 JavaScript 로직(예: 사용자 상호 작용 이벤트)을 사용하여 이러한 상태를 관리해야 한다.
마찬가지로 미디어 쿼리는 기본적으로 지원되지 않지만 react-native-Response와 같은 타사 라이브러리를 사용하거나 Dimensions를 쿼리하여 다양한 화면 크기를 수동으로 처리할 수 있다.

11. 반응형 디자인

React Native는 기본적으로 미디어 쿼리를 제공하지 않지만 다음을 통해 반응형 레이아웃을 만들 수 있다.

- 'Dimensions' 사용

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

기기 크기에 따라 UI 크기를 조정하기 위한 'react-native-Response' 또는 'react-native-size-matters'와 같은 라이브러리이다.

12. 애니메이션 및 변형

React Native는 Animated 라이브러리를 통해 기본적으로 애니메이션을 지원하며 구성 요소에 애니메이션 스타일을 적용할 수 있다. 또한 rotate, scale, translateX 등과 같은 transform 속성을 사용하여 시각적 모양을 동적으로 조작할 수 있다.

const animatedValue = new Animated.Value(0);
const animatedStyle = {
  transform: [{ translateY: animatedValue }],
};

React에서 useState는 함수형 컴포넌트에 상태(state)를 추가할 수 있게 해주는 Hook이다. 이는 현대 React 개발에서 중요한 구성 요소로, 사용자 입력이나 동적인 데이터 등을 렌더링 사이에 기억하도록 한다.

# React에서의 상태(state)란?

React에서 상태는 컴포넌트가 렌더링되고 동작하는 방식을 결정하는 객체이다. 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 새로운 상태를 반영한다. 상태는 사용자 입력, 서버에서 가져온 데이터, 계산 결과 등 동적인 정보를 포함할 수 있다.

전통적으로 상태 관리는 클래스 컴포넌트에서 this.state와 this.setState를 사용하여 이루어졌다. 그러나 React 16.8 버전에서 Hooks가 도입된 이후, 이제는 함수형 컴포넌트에서도 useState를 통해 상태를 관리할 수 있다.

# useState 문법

setCount(prevCount => prevCount + 1);

• state: 현재 상태 값을 나타낸다. 이 값은 React가 컴포넌트를 렌더링하는 데 사용된다.
• setState: 상태 값을 업데이트할 때 사용하는 함수이다. 이 함수를 호출하면 React가 새로운 상태로 컴포넌트를 다시 렌더링한다.
• initialState: 컴포넌트가 처음 렌더링될 때의 초기 상태 값을 나타낸다. 원시 값, 객체, 배열 또는 함수가 될 수 있다.

# useState 사용 예시

import React, { useState } from 'react';

function Counter() {
  // "count"라는 상태 변수를 선언하고 초기 값을 0으로 설정
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>당신은 {count}번 클릭했습니다</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

export default Counter;

예시 설명

• const [count, setCount] = useState(0);
• count는 상태 변수를 의미
• setCount는 count를 업데이트하는 함수
• useState(0)는 count의 초기 값을 0으로 설정

버튼을 클릭하면 setCount(count + 1)이 호출되어 count 상태가 1 증가하고, 컴포넌트가 다시 렌더링된다.

# useState에 대한 중요한 사항

1. 렌더링 간 상태 유지: 일반 변수와 달리, React는 렌더링 사이에 상태를 "기억"한다. 예를 들어 count가 업데이트되면, React는 이 값을 렌더링할 때마다 유지한다.

2. 반응성: setState 함수를 사용하여 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링한다. 이를 통해 UI가 현재 상태를 반영하게 된다.

3. 함수형 업데이트: 새로운 상태가 이전 상태에 의존하는 경우, setState에 함수를 전달하는 것이 더 안전하다. 이렇게 하면 React가 상태 업데이트를 올바르게 처리할 수 있다. prevCount는 이전 상태 값을 나타낸다.  

setCount(prevCount => prevCount + 1);

4. 지연 초기화: 초기 상태가 계산의 결과일 경우, 함수를 useState에 전달할 수 있다. 이 함수는 컴포넌트가 처음 렌더링될 때만 호출된다. 이 경우, expensiveComputation 함수는 초기 렌더링 시에만 실행된다.

const [count, setCount] = useState(() => expensiveComputation());

# 일반적인 패턴 및 모범 사례

1. 여러 개의 useState 호출: 하나의 컴포넌트에서 여러 개의 상태를 관리하기 위해 useState를 여러 번 호출할 수 있다.

const [name, setName] = useState(''); const [age, setAge] = useState(0);

const [user, setUser] = useState({ name: 'Alice', age: 25 }); // 중첩된 상태를 업데이트하는 올바른 방법 
setUser(prevUser => ({ ...prevUser, age: 26 }));

// 잘못된 방식 
user.age = 26; 
// 올바른 방식 
setUser({ ...user, age: 26 });

# useState의 사용 사례

• 폼 처리: 입력 필드의 값을 관리하는 데 사용.
• 카운터: 값의 증가나 감소를 관리 (예: 투표 시스템, 장바구니 수량 등).
• 토글 상태: true/false 값을 전환하는 데 사용 (예: 요소 표시/숨기기).
• 데이터 가져오기: API로부터 가져온 데이터를 저장.

# 요약

• useState는 함수형 컴포넌트에 상태를 추가하는 기본적인 Hook이다.
• 상태가 변경되면 React는 해당 상태에 따라 컴포넌트를 다시 렌더링한다.
• React는 렌더링 사이에 상태를 유지하며, 상태는 setState 함수를 통해 업데이트된다.

이 Hook은 React 함수형 컴포넌트에서 상호작용적이고 동적인 UI를 구축하는 기초이다.