14강 부모 컴포넌트의 State 변경을 통한 고객 정보 갱신 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
지난 시간까지 작성되었던 소스코드 상으로는 새로운 고객(Customer) 정보가 추가되면 페이지 새로고침(Refresh)를 통해서 새롭게 등록된 고객에 대한 정보를 확인할 수 있습니다. 하지만 기본적으로 리액트(React)는 SPA(Single Page Application)의 구조로 동작합니다. 그러므로 전체 페이지를 새로고침하는 것은 비효율적이며 고객 추가(Customer Add) 컴포넌트에서 부모 컴포넌트의 상태(State)를 변경하는 식으로 필요한 부분만 새로고침 되도록 설정하면 됩니다.
이 때는 기본적으로 부모 컴포넌트에서 자식 컴포넌트로 함수를 props로 건내주는 방식으로 구현합니다.
※ 전체 고객 목록 다시 불러오기 ※
고객 목록 추가 이후에 새로고침 하는 과정을 구현하는 가장 대표적인 방법은 전체 고객 목록을 다시 불러옴으로써 State를 갱신하는 방식입니다. App.js에 있던 기존의 state 초기화 변수를 제거해주신 뒤에, 윗 부분을 다음과 같은 소스코드로 채우시면 됩니다.
class App extends Component {
constructor(props) {
super(props);
this.state = {
customers: '',
completed: 0
}
this.stateRefresh = this.stateRefresh.bind(this);
}
stateRefresh() {
this.setState({
customers: '',
completed: 0
});
this.callApi()
.then(res => this.setState({customers: res}))
.catch(err => console.log(err));
}
이후에 Customer Add 컴포넌트로 stateRefresh() 함수를 보내주시면 돼요. 그러면 Customer Add 컴포넌트가 해당 함수를 호출해서 부모 컴포넌트인 App 컴포넌트의 State를 갱신하게 됩니다.
마지막으로 CustomerAdd.js로 가서 window.location.reload() 함수를 제거하고 다음의 구문을 넣습니다.
다만 고객 목록 데이터를 불러오는 과정은 비동기적으로 수행된다는 점에서 항상 고객 데이터를 추가(Add)한 이후에 고객 목록 데이터를 불러온다는 것을 보장하지 못합니다. 따라서 다음과 같이 고객 추가 이후에 서버로부터 응답을 받고 나서 비로소 고객 목록을 다시 불러오도록 설정해야 합니다.
handleFormSubmit(e) {
e.preventDefault()
this.addCustomer()
.then((response) => {
console.log(response.data);
this.props.stateRefresh();
})
this.setState({
file: null,
userName: '',
birthday: '',
gender: '',
job: '',
fileName: ''
})
}
이제 테스트를 진행 해보시면 다음과 같이 정상적으로 동작합니다.
추가 이후에는 전체 페이지 새로고침 없이 다음과 같이 고객 목록이 출력됩니다. 또한 고객 추가 창은 비워지게 됩니다.
※ 고객 정보 갱신 방법에 대해서 ※
위에서 구현한 방식은 고객 데이터가 많을 때에는 매 번 새로고침을 거치는 과정에서 리소스를 비효율적으로 사용하게 됩니다. 그래서 실제로 상용 서비스에 적용할 때는 최근 10개의 고객 목록만 가져오도록 하여, 이후의 고객 정보에 대해서는 스크롤을 통해 새롭게 불러오는 식으로 구현할 수 있습니다.
물론 이렇게 만든 고객 관리 시스템을 자기 혼자 사용하는 경우에는 매 번 서버와 통신하지 않아도 됩니다. 고객을 추가한 이후에 자신의 화면에서 바로 추가된 고객 정보만을 추가적으로 보여주면 됩니다.
하지만 일반적인 고객 관리 시스템은 여러 명의 관리자가 동시에 작업할 수 있다는 점에서 현재의 방법이 더 효율적일 수 있습니다.
'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글
React 이벤트 처리(Event Handling)
기본적으로 리액트(React) 요소에 대한 이벤트 핸들링은 기본적인 자바스크립트에서의 방식과 매우 흡사합니다. 다만 리액트 이벤트는 카멜 케이스(Camel Case) 네이밍 규칙을 사용한다는 특징이 있으며 JSX 문법을 사용해 함수를 호출할 수 있습니다.
class EventHandling extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log('이벤트 처리');
}
render() {
return (
<button onClick={this.handleClick}>버튼</button>
);
}
}
ReactDOM.render(
<EventHandling />,
document.getElementById('root')
);
이후에 가장 대표적인 예제인 버튼 토글 예제에 대해서 알아보도록 하겠습니다.
class EventHandling extends React.Component {
constructor(props) {
super(props);
this.state = {
isToggleOn: true
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}))
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<EventHandling />,
document.getElementById('root')
);
자바스크립트(JavaScript)에서는 바인딩(Binding)이 기본 설정으로 제공되지 않습니다. 그래서 만약 바인딩 처리를 해주는 것을 잊으면 소스코드가 정상적으로 동작하지 않습니다
'리액트(React)' 카테고리의 다른 글
| React의 LifeCycle과 API 호출 (3) | 2019.01.04 |
|---|---|
| React의 State (0) | 2018.12.25 |
| React의 Component와 Props (0) | 2018.12.25 |
| React에서 JSX란? (0) | 2018.12.25 |
| 코드펜(Codepen)을 이용한 React 개발환경 구축하기 (0) | 2018.12.25 |
React의 LifeCycle과 API 호출
이번 시간에는 React의 LifeCycle의 개념에 대해서 이해한 뒤에 API 호출에 대해서 알아보도록 하겠습니다. React는 말 그대로 프론트 엔드(Front-End) 라이브러리입니다. 따라서 서버 개발자와 API를 이용해서 소통할 수 있어야 합니다. 하지만 React를 처음 공부하시는 분은 정확히 언제 API를 호출해서 데이터를 가져와 화면에 보여주어야 할 지 감이 안 잡힐 수 있어요. 이번 시간에는 그러한 내용에 대해서 다룰 거예요.
※ 초기 구성 ※
React 컴포넌트 객체가 DOM에 실제로 삽입되기 전까지의 과정은 다음과 같습니다. 이러한 과정을 마운팅(Mounting)이라고 부릅니다.
1) contructor()
2) componentWillMount()
3) render()
4) componentDidMount()
기본적으로 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 API 호출을 수행하면 효과적이라는 것만 기억하시면 됩니다. SNS에 처음 로그인 했을 때 최근 타임라인 데이터를 API로부터 호출해서 화면에 보여주는 것이 그 예시입니다.
※ 데이터 변경 ※
기본적으로 화면에 특정한 객체를 렌더링하기 위해서는 props 혹은 state를 사용해야 합니다. props와 state는 이러한 과정이 서로 다르지만 대략적으로 다음과 같은 순서로 수행된다는 것을 기억하시면 됩니다.
1) shouldComponentUpdate()
2) componentWillUpdate()
3) render()
4) componentDidUpdate()
기본적으로 컴포넌트의 데이터와 화면(View)에 출력된 내용이 다를 때 shouldComponentUpdate() 함수가 동작합니다. 이 함수는 기본적으로 true 값을 반환합니다. 또한 화면에 출력되는 화면 구성을 변경하고자 할 때는 componentDidUpdate()를 많이 사용합니다. 실제로 데이터 변경과 관련한 함수들을 우리가 처리하게 되는 일은 많지 않습니다.
※ 컴포넌트 해제 ※
컴포넌트가 마운팅 해제 될 때 수행되는 함수는 componentWillUnmount() 함수입니다. 우리는 이 함수를 이용해서 컴포넌트의 동작을 위해 사용되었던 메소드들의 리소스를 제거해주게 됩니다. 애플리케이션의 성능 향상을 위해서 사용되는 경우가 많은 함수입니다.
※ API 호출 예제 ※
이제 실제로 위와 같은 라이프 사이클의 개념을 활용하여 API를 호출하는 예제를 다루어 보도록 하겠습니다. API 호출을 연습하고자 할 때는 가짜(Fake) 온라인 REST API 사이트를 이용하시면 됩니다.
▶ JSON Placeholder 사이트: https://jsonplaceholder.typicode.com/
사이트에 접속해서 [Try it]을 클릭해 보시면 그 결과 응답(Response) JSON 데이터를 확인할 수 있습니다.
이제 우리는 결과 JSON 데이터에서 title 정보만 받아서 화면에 출력해보도록 하겠습니다.
※ JavaScript 소스코드 ※
class ApiExample extends React.Component {
constructor(props) {
super(props);
this.state = {
data: ''
}
}
callApi = () => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(res => res.json())
.then(json => {
this.setState({
data: json.title
})
})
}
componentDidMount() {
this.callApi();
}
render() {
return (
<h3>{this.state.data ? this.state.data : '데이터 불러오는 중'}</h3>
)
}
}
ReactDOM.render(
<ApiExample />,
document.getElementById('root')
);
'리액트(React)' 카테고리의 다른 글
| React 이벤트 처리(Event Handling) (2) | 2019.01.04 |
|---|---|
| React의 State (0) | 2018.12.25 |
| React의 Component와 Props (0) | 2018.12.25 |
| React에서 JSX란? (0) | 2018.12.25 |
| 코드펜(Codepen)을 이용한 React 개발환경 구축하기 (0) | 2018.12.25 |
AWS EC2에 AWS RDS 연동하기
이번 시간에는 AWS EC2에 AWS RDS를 연동하는 방법에 대해서 알아보도록 하겠습니다. 기존에 운영하는 AWS EC2 서비스가 있을 때 이에 안전한 방법으로 데이터베이스를 연결해야 하는 경우가 존재할 수 있습니다. 따라서 그럴 때를 대비하여 한 번 AWS EC2에 AWS RDS를 연동해보도록 하겠습니다.
※ AWS EC2 인스턴스의 VPC 정보 확인 ※
일단 자신이 현재 가지고 있는 AWS EC2 정보를 먼저 파악하는 것이 중요합니다. 우리는 이 EC2에 AWS RDS 서비스를 연결할 것이기 때문에 EC2와 동일한 VPC에 AWS RDS를 설치해야 해요. 그러므로 VPC ID를 확인하는 것이 첫 번째입니다. 이후에는 [보안 그룹]을 확인합니다. 현재 제 AWS EC2 인스턴스의 보안 그룹은 launch-wizard-2입니다.
※ DB 보안 그룹 설정하기 ※
따라서 [보안 그룹] 탭으로 이동해보도록 합시다. 그러면 아까 확인했던 launch-wizard-2라는 이름의 보안 그룹이 눈에 보입니다. 이 보안 그룹의 ID 값을 기록하세요. 우리는 이 보안 그룹에서만 DB에 접근할 수 있도록 설정할 것입니다. 이후에 [보안 그룹 생성] 버튼을 눌러보도록 합시다.
이제 DB Security Group이라는 이름으로 우리가 만들 DB가 들어갈 보안 그룹을 만들어 주시면 됩니다. 이 때 [인바운드] 보안 그룹 규칙으로 방금 우리가 확인했던 EC2의 보안 그룹에서만 접근할 수 있도록 설정해주시면 됩니다. 이 때 저는 MySQL DB를 사용할 것이므로 MySQL 포트인 3306으로 설정했습니다.
※ DB 서브넷 그룹 설정하기 ※
이제 AWS RDS의 [서브넷 그룹] 탭으로 이동하여 [DB 서브넷 그룹 생성] 버튼을 눌러서 서브넷 그룹을 만들어 보도록 하겠습니다.
다음과 같이 DB Subnet Group이라는 이름으로 서브넷 그룹을 만든 이후에 EC2와 동일한 VPC를 선택합니다. 그리고 [이 VPC와 관련된 모든 서브넷 추가] 버튼을 누르시면 됩니다.
결과적으로 DB 서브넷 그룹을 생성해주시면 됩니다. 그러면 다음과 같이 하나의 서브넷 그룹 생성이 완료됩니다.
※ DB 한글 설정을 위한 파라미터 그룹 설정하기 ※
MySQL 데이터베이스는 기본적으로 한글을 지원하지 않습니다. 그래서 [파라미터 그룹] 탭으로 이동하여 한글 지원을 위한 [파라미터 그룹 생성]을 진행하셔야 합니다.
다음과 같이 MySQL 5.6 버전의 파라미터 그룹을 만들어 줍시다.
이제 만들어진 파라미터 그룹으로 들어가 편집을 수행합니다.
가장 먼저 [char]를 검색하여 모든 캐릭터 인코딩 관련 값을 UTF8으로 변경해주세요.
이후에 [collation]을 검색하여 모든 값을 utf8_general_ci로 변경해 주시면 됩니다.
이후에는 꼭 [변경 사항 저장] 버튼을 눌러서 저장해 주시면 됩니다.
※ AWS RDS 데이터베이스 생성하기 ※
이제 실질적으로 MySQL 데이터베이스를 생성해보도록 하겠습니다. 그리고 AWS EC2에서만 접속이 가능하도록 설정할 것입니다.
다음과 같이 MySQL 엔진을 선택하여 [RDS 프리 티어에 적용되는 옵션만 사용]을 체크해주세요. 무료로 이용하는 편이 좋을 거예요.
결과적으로 다음과 같이 MySQL 5.6을 선택하여 만들어 주시면 됩니다.
다만 고급 설정 구성을 하실 때에는 서브넷 그룹으로는 우리가 만들었던 DB Subnet Group을 선택한 뒤에, 보안 그룹도 마찬가지로 우리가 만들었던 DB Security Group을 선택하시면 됩니다. 그리고 [퍼블릭 액세스 가능성]을 아니요로 선택해주셔야 VPC 내부의 EC2에서만 접근이 가능합니다.
결과적으로 데이터베이스 옵션으로는 아까 만들었던 한글 전용 파라미터 그룹을 선택하시고, 나머지는 기본 설정으로 데이터베이스를 생성해주시면 됩니다.
결과적으로 다음과 같이 DB 인스턴스가 생성되었습니다.
※ AWS RDS에 연결하기 ※
이제 만들어진 데이터베이스의 정보를 확인해보도록 합시다.
다음과 같이 [연결] 탭에서 엔드포인트를 확인하시면 됩니다. 이 엔드포인트 주소로 접속할 수 있어요.
이제 한 번 접속을 해봅시다.
▶ MySQL 접속 명령어: mysql -u empo -p --host empo.crtzcfwok2ed.ap-northeast-2.rds.amazonaws.com
다음과 같이 외부 IP에서 해당 MySQL에 접속하려고 하면 연결 오류 메시지가 출력됩니다. 보안 그룹이 우리를 지켜주고 있는 거예요.
하지만 같은 VPC 내에 있는 EC2에서 접근을 시도하면 다음과 같이 성공적으로 연결이 이루어지는 것을 확인할 수 있습니다.
따라서 성공적으로 AWS EC2에 AWS RDS를 연동하게 된 것입니다.
'기타' 카테고리의 다른 글
| XML, JSON, YAML 형식 내용 정리 및 비교 분석 (0) | 2019.01.20 |
|---|---|
| 다른 사람 컴퓨터에서 깃 허브(Git Hub) 이용할 때 주의할 점 (0) | 2019.01.19 |
| AWS VPC 안에 포함되어 있는 서비스들을 통째로 제거하는 방법 (2) | 2019.01.03 |
| AWS VPC를 이용해 EC2와 RDS를 안전하게 관리하기 (1) | 2019.01.02 |
| 노션(Notion)을 활용한 팀 프로젝트 관리 (0) | 2018.12.31 |
AWS VPC 안에 포함되어 있는 서비스들을 통째로 제거하는 방법
기본적으로 AWS VPC 안에 다양한 AWS 서비스를 포함하여 전체 시스템을 구축하는 경우가 많습니다. 다만 AWS VPC를 제거하고자 할 때 여러 개의 서비스가 서로 복잡하게 연결되어 있으면 제거가 안 될 수도 있습니다. 따라서 이번 시간에는 AWS VPC 안에 포함되어 있는 서비스들을 통째로 제거하는 방법에 대해서 알아보도록 하겠습니다.
※ 제거 순서를 고려하여 제거하기 ※
기본적으로 VPC, [보안 그룹] 등을 지우기 전에는 그 안에 포함되어 있는 EC2나 RDS와 같은 실제 서비스들을 먼저 제거하셔야 합니다. 저는 지난 포스트(http://ndb796.tistory.com/224)에서 EC2와 RDS를 하나의 VPC 안에 넣어서 관리하는 방법에 대해서 알아보았습니다. 저는 이렇게 만들어진 시스템 구성을 통째로 제거해 볼 것입니다. 당연히 EC2와 RDS를 먼저 제거해야 합니다.
따라서 다음과 같이 EC2 관리 화면에서 인스턴스부터 [제거] 해주겠습니다. 제거할 때는 [인스턴스 상태] 탭에서 [종료] 버튼을 누르시면 됩니다. 실제로는 인스턴스를 종료했을 때 완전히 제거가 이루어집니다.
인스턴스를 종료하면 자동으로 볼륨 저장소가 제거됩니다. 당연한 겁니다.
이후에 해당 인스턴스의 공인 IP를 위해 사용되던 탄력적 IP가 있다면 [탄력적 IP] 탭에서 이 또한 제거해주시면 됩니다.
다음과 같이 [주소 연결 해제]를 먼저 진행해 주시고, [주소 릴리즈]까지 해주시면 됩니다.
이제 EC2가 완전히 VPC에서 제거되었으므로 RDS 또한 지워주도록 하겠습니다. AWS RDS 서비스에서 [데이터베이스] 탭에 가서 우리 VPC에 포함되어 있는 데이터베이스를 찾아서 [수정] 버튼을 눌러주시면 됩니다.
기본적으로 데이터베이스는 [삭제 방지] 기능이 적용되기 때문에 이를 비활성화 처리 해주셔야 합니다.
다음과 같이 삭제 방지 비활성화 처리를 [즉시 적용] 해주시면 됩니다.
이후에 데이터베이스를 삭제할 수 있습니다. [삭제] 버튼을 눌러 삭제해주세요.
데이터베이스는 EC2보다 삭제하는 과정이 귀찮습니다. 왜냐하면 실제로 상당수 서비스에서 가장 중요한 데이터는 모두 데이터베이스 안에 있기 때문입니다. 그래서 [delete me]라는 문구를 입력하여 삭제를 진행해주셔야 합니다.
이제야 VPC로 돌아오셔서 VPC를 삭제 처리할 수 있습니다. VPC 안에 포함되어 있는 EC2 및 RDS가 모두 제거된 상태라면 어렵지 않게 VPC를 삭제할 수 있습니다.
다음과 같이 [Delete VPC] 버튼을 눌러서 VPC를 제거해보세요.
만약 네트워크 인터페이스 등이 존재하는 경우 VPC를 곧바로 제거하실 수 없습니다. 이럴 때는 네트워크 인터페이스를 먼저 제거해주시면 됩니다.
다음과 같이 네트워크 인터페이스를 먼저 제거해주세요.
이제 VPC를 다시 제거해주시면 안정적으로 제거가 완료됩니다.
VPC를 지우면서 연관된 오브젝트를 한꺼번에 지우도록 처리하시면 깔끔하게 제거가 완료됩니다.
'기타' 카테고리의 다른 글
| 다른 사람 컴퓨터에서 깃 허브(Git Hub) 이용할 때 주의할 점 (0) | 2019.01.19 |
|---|---|
| AWS EC2에 AWS RDS 연동하기 (3) | 2019.01.03 |
| AWS VPC를 이용해 EC2와 RDS를 안전하게 관리하기 (1) | 2019.01.02 |
| 노션(Notion)을 활용한 팀 프로젝트 관리 (0) | 2018.12.31 |
| Freenom 서비스로 무료 도메인 호스팅 이용하기! (2) | 2018.12.31 |
AWS VPC를 이용해 EC2와 RDS를 안전하게 관리하기
※ AWS VPC 서비스를 이용해 AWS EC2와 RDS를 관리하는 방법 ※
이번 시간에는 AWS VPC 서비스를 이용해 AWS EC2와 RDS를 안전하게 관리하는 방법에 대해서 알아보도록 하겠습니다. 우리는 일반적으로 AWS EC2를 이용해 웹 서버를 구동시키고, MySQL과 같은 데이터베이스는 AWS RDS 서비스를 이용하여 별도의 독립된 공간에서 관리합니다. 이 때 EC2는 웹 서버가 있다는 점에서 퍼블릭(Public) 상태여야 하며 RDS는 EC2에서만 접근할 수 있는 프라이빗(Private) 상태여야 해요.
다시 말해 다음과 같이 시스템을 구성하는 것이 안전하며 효과적입니다.
말 그대로 외부에서는 EC2에만 접근할 수 있으며 AWS RDS 데이터베이스는 EC2를 거쳤을 때만 이용할 수 있습니다. 그래서 외부에서 바로 DB에 접근할 수 없다는 점에서 중요한 정보를 안전하게 보관할 수 있다는 것입니다. 이는 가장 간단하면서도 보편적인 시스템 구성도입니다. 결과적으로 VPC라는 것을 이용해 AWS EC2와 AWS RDS를 감싸야 합니다. 따라서 가장 먼저 AWS VPC를 만들어 보도록 하겠습니다.
※ VPC 만들어보기 ※
▶ VPC 관리: https://console.aws.amazon.com/vpc/
VPC는 해당 사이트에 접속해서 생성할 수 있습니다. 바로 [VPC 만들기] 버튼을 눌러 이동합니다.
우리는 2번째 옵션인 [퍼블릭 및 프라이빗 서브넷이 있는 VPC]를 선택하면 됩니다. 외부에서 접속 가능한 퍼블릭(Public) 서브넷을 반드시 열어 두어야 합니다. 이후에 Public Subnet이라는 이름으로 외부에서 접속 가능한 서브넷을 만들 예정입니다.
다음과 같이 퍼블릭 서브넷(Public Subnet)과 프라이빗 서브넷(Private Subnet)의 이름을 설정하면 됩니다. 이 때 프라이빗 서브넷의 가용 영역을 기억해두시면 좋습니다. 나중에 프라이빗 서브넷을 하나 더 만드는데, 그 프라이빗 서브넷의 설정에 있어서 필요한 정보이기 때문입니다. 그리고 NAT 게이트웨이로 NAT 인스턴스를 사용하시면 됩니다. 어차피 저는 NAT 인스턴스 사용 설정만 해 놓고, 실제로는 사용하지 않을 생각입니다.
그러면 NAT 인스턴스의 세부 정보를 설정할 수 있습니다. 저는 가장 기본적인 인스턴스인 t2.nano를 이용했습니다. 어차피 NAT 인스턴스는 지운 다음에 다시 만들어 줄 생각이에요. 이후에 [VPC 만들기] 버튼을 눌러서 VPC를 생성하시면 됩니다.
이후에 [서브넷] 탭으로 이동해 보시면 다음과 같이 방금 우리가 만들었던 Public Subnet과 Private Subnet이 존재하는 것을 확인할 수 있습니다. 다만 VPC의 정상적인 동작을 위해서는 한 개의 Private Subnet을 더 만들어야 합니다. 따라서 [서브넷 생성] 버튼을 누를 수 있습니다.
서브넷을 생성할 때는 아까 우리가 생성했던 VPC를 대상 VPC로 설정해주시면 됩니다.
다만 이번에 만드는 두 번째 프라이빗 서브넷은 처음에 만들었던 프라이빗 서브넷과 다른 [가용 영역]을 사용해야 합니다. 만약 같은 가용 영역을 사용하시는 경우, 나중에 최종 단계에서 가용 영역이 최소 2개 이상 필요하다는 오류 메시지를 만나게 될 거예요. 또한 IPv4 CIDR 블록으로는 10.0.2.0/24를 사용하시면 됩니다. 이후에 [생성]을 진행해주시면 됩니다.
이제 다음과 같이 Private Subnet이 2개 존재하는 것을 확인할 수 있습니다. 이 두 개의 프라이빗 서브넷이 동일한 라우팅 테이블을 가지는지 확인해주시면 됩니다. 다음 사진과 같이 각 서브넷을 클릭해서 [라우팅 테이블] 탭에서 확인하시면 됩니다.
※ 보안 그룹 설정하기 ※
이제 실제로 어떠한 프로토콜을 이용해서 우리의 VPC에 접근할 수 있는지를 설정하기 위해서 [보안 그룹] 탭으로 이동해서 [Create Security Group] 버튼을 눌러서 보안 그룹을 만들어 주시면 됩니다.
기본적으로 외부에서 접속이 가능한 보안 그룹으로 Security Group을 생성합니다. 마찬가지로 대상 VPC로는 처음에 만들었던 VPC를 넣어주신 뒤에 [Create] 버튼을 눌러서 생성해주시면 됩니다.
보안 그룹을 만든 이후에는 다음과 같이 만들어진 보안 그룹을 클릭하여 [Edit Rules] 버튼을 눌러서 규칙(Rule)을 추가하시면 됩니다.
이후에 다음과 같이 SSH와 HTTP 프로토콜을 열어서 외부에서 접속할 수 있도록 설정하시면 됩니다.
결과적으로 다음 그림과 같이 인바운드 규칙(Inbound Rule)을 확인해 보시면 80번 포트 및 22번 포트로는 외부에서 접속이 가능한 것을 확인할 수 있습니다. 이제 내부망에서 DB에 접속할 수 있는 보안 그룹 또한 만들어주도록 하겠습니다.
이후에 다음과 같이 DB Security Group이라는 이름으로 보안 그룹을 만든 뒤에 대상 VPC를 설정해주시면 됩니다.
이번에 만들어진 보안 그룹도 마찬가지로 [Edit Rules]를 눌러서 규칙을 추가할 수 있습니다. 이 때, 아까 만들었든 Security Group의 그룹 ID를 저장해 두시면 됩니다.
다음과 같이 3306 포트로만 접속할 수 있도록 설정하시면 됩니다. 이 때 [소스] 탭으로는 아까 만들었던 Security Group의 그룹 ID를 넣으시면 됩니다. 그러면 Security Group에 속해 있는 컴퓨터만 DB Security Group에 접근할 수 있게 됩니다.
※ 데이터베이스 서브넷 설정 ※
이제 하나의 데이터베이스를 만들어서 설정을 해보도록 하겠습니다. 가장 먼저 [서브넷 그룹] 탭으로 이동해서 [DB 서브넷 그룹 생성] 버튼을 누르시면 됩니다.
이후에 다음과 같이 DB 서브넷 그룹을 만들어 주세요. 만드실 때는 처음에 생성했던 VPC로 설정하시고 [이 VPC와 관련된 모든 서브넷 추가] 버튼을 눌러서 VPC와 관련된 서브넷을 모두 추가하시면 됩니다.
결과적으로 모든 서브넷이 추가된 것을 확인할 수 있습니다.
※ 데이터베이스 만들기 ※
결과적으로 [데이터베이스] 탭으로 이동해서 [데이터베이스 생성] 버튼을 눌러서 데이터베이스를 만들어 보도록 하겠습니다.
다음과 같이 프리 티어로 MySQL을 만들어 보도록 하겠습니다.
이후에 다음과 같이 DB 세부 정보를 지정할 수 있습니다. 저는 MySQL 5.6으로 설정하고 기본 설정 그대로 진행했습니다.
이후에 고급 설정 탭에서 VPC의 세부 설정을 진행하시면 됩니다. 다음과 같이 아까 만들어 주었던 DB Subnet Group과 DB Security Group으로 설정을 해주시면 됩니다. 그러면 동일한 VPC에 있는 Security Group에서만 이 DB에 접근할 수 있게 됩니다.
이후에 나머지 설정을 해주시고 DB 인스턴스를 만들어 주시면 됩니다.
※ AWS EC2 인스턴스 만들기 ※
이제 AWS EC2 인스턴스를 만들어서 퍼블릭(Public)한 접근이 가능하도록 설정하겠습니다. 따라서 AWS EC2 관리 페이지의 [인스턴스] 탭에서 [인스턴스 시작] 버튼을 눌러 인스턴스를 만들어 보도록 하겠습니다.
저는 우분투(Ubuntu) 서버로 생성을 진행하여 인스턴스까지 설정해보도록 하겠습니다.
이후에 인스턴스 세부 정보를 편집하여 VPC 설정을 진행하도록 하겠습니다.
다음과 같이 처음에 만들었던 VPC로 설정을 진행하시면 됩니다. 또한 서브넷 설정에 있어서 만들었던 Public Subnet으로 설정하시면 됩니다.
이후에 [보안 그룹 구성] 탭으로 이동하여 아까 만들었던 Security Group으로 설정하여 외부에서 접근 가능하도록 설정합니다.
이후에 인스턴스를 시작해주시면 됩니다.
또한 해당 인스턴스에 접근하기 위하여 키 페어를 설정합니다.
이제 인스턴스가 생성되었습니다.
다만 이렇게 만들어진 인스턴스는 기본적으로 공인 IP가 할당되어 있지 않습니다. 따라서 탄력적 IP(Elastic IP)를 설정해줍니다.
하나의 탄력적 IP를 선택해 [주소 연결] 기능을 눌러 다음과 같이 방금 생성했던 인스턴스를 설정해주시면 됩니다.
이제 이 인스턴스에 해당 퍼블릭 IP로 접속할 수 있습니다.
실제로 접속을 해보면 다음과 같습니다.
※ VPC 내부의 MySQL 접속하기 ※
이제 VPC 내부에 있는 MySQL에 접속해보도록 하겠습니다. AWS RDS 서비스로 가서 아까 만들었던 DB를 확인합니다. 그러면 해당 DB에 접속할 수 있는 URL이 보입니다.
이제 외부에서 여기에 접속하려고 하면 접속 실패 메시지가 뜨는 것을 확인할 수 있습니다.
따라서 EC2에서 MySQL을 설치해서 EC2에서 해당 MySQL 서버에 접속해보도록 하겠습니다.
▶ APT 업데이트: sudo apt-get update
▶ MySQL 설치: sudo apt install mysql-client-core-5.7
다음 사진과 같이 동일 VPC 내의 EC2에서 접속했을 때 비로소 접속이 되는 것을 확인할 수 있습니다.
▶ MySQL 접속하기: sudo mysql -u user -p --port 3306 --host db.crtzcfwok2ed.ap-northeast-2.rds.amazonaws.com
이로써 VPC 내부에서만 접속이 가능한 MySQL 데이터베이스가 구축이 되었습니다. 반면에 EC2는 퍼블릭(Public)한 공간에 있기 때문에 누구나 언제든지 접속이 가능합니다. 이와 같은 구성이 많이 사용되는 이유는 EC2에 MySQL을 설치하는 것보다 RDS 서비스로 따로 분리하는 것이 더 효과적인 DB 관리가 가능하기 때문이에요.
'기타' 카테고리의 다른 글
| AWS EC2에 AWS RDS 연동하기 (3) | 2019.01.03 |
|---|---|
| AWS VPC 안에 포함되어 있는 서비스들을 통째로 제거하는 방법 (2) | 2019.01.03 |
| 노션(Notion)을 활용한 팀 프로젝트 관리 (0) | 2018.12.31 |
| Freenom 서비스로 무료 도메인 호스팅 이용하기! (2) | 2018.12.31 |
| Xshell 6 개인 무료 라이센스로 설치하여 사용하는 방법 (0) | 2018.12.31 |
13강 Express에서 파일 업로드 요청 처리 및 DB에 데이터 삽입 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
이번 시간에는 사용자가 보낸 고객 데이터를 Node.js Express로 처리하여 서버의 특정한 폴더에 파일 업로드 처리를 하는 방법에 대해서 알아보도록 하겠습니다. 이후에 고객 정보를 실제 MySQL 데이터베이스(Database)에 삽입하고, 업로드 폴더를 클라이언트에서 접근할 수 있도록 하여 고객이 이를 확인할 수 있도록 처리하는 시간을 가져 볼 것입니다.
▶ CustomerAdd.js
따라서 가장 먼저 CustomerAdd.js의 handleFormSubmit() 함수를 수정해주도록 합시다. 데이터를 전송한 이후에는 고객 추가 양식(Form)을 비운 뒤에 페이지를 새로고침(Refresh)하여 등록된 고객 데이터를 확인하는 것입니다. 실제 배포 버전에서는 전체 페이지를 새로고침 하는 방향으로 코딩을 하면 안 되지만 빠른 테스트를 위해서 잠시 이와 같이 코딩해주도록 하겠습니다.
handleFormSubmit(e) {
e.preventDefault()
this.addCustomer()
.then((response) => {
console.log(response.data);
})
this.setState({
file: null,
userName: '',
birthday: '',
gender: '',
job: '',
})
window.location.reload();
}
이제 node.js에서 이러한 파일 업로드 요청을 처리하시면 됩니다. 이 때는 multer 라이브러리를 사용하시면 됩니다. 따라서 루트 폴더로 이동하셔서 npm install --save multer 명령어를 수행하신 뒤에 다음 소스코드를 작성합니다.
▶ server.js
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const data = fs.readFileSync('./database.json');
const conf = JSON.parse(data);
const mysql = require('mysql');
const multer = require('multer');
const upload = multer({dest: './upload'})
const connection = mysql.createConnection({
host: conf.host,
user: conf.user,
password: conf.password,
port: conf.port,
database: conf.database
});
connection.connect();
app.get('/api/customers', (req, res) => {
connection.query(
'SELECT * FROM CUSTOMER',
(err, rows, fields) => {
res.send(rows);
}
)
});
app.use('/image', express.static('./upload'));
app.post('/api/customers', upload.single('image'), (req, res) => {
let sql = 'INSERT INTO CUSTOMER VALUES (null, ?, ?, ?, ?, ?)';
let image = '/image/' + req.file.filename;
let name = req.body.name;
let birthday = req.body.birthday;
let gender = req.body.gender;
let job = req.body.job;
let params = [image, name, birthday, gender, job];
connection.query(sql, params,
(err, rows, fields) => {
res.send(rows);
}
)
});
app.listen(port, () => console.log(`Listening on port ${port}`));
이제 루트 폴더에서 upload 폴더를 생성해 주세요. 또한 사용자가 업로드한 파일은 깃 허브(Git Hub)에 공개적으로 올라가면 안 된다는 점에서 .gitignore에도 이 내용을 추가해주도록 합니다.
# upload
/upload
※ 실행 결과 ※
실제로 고객 데이터와 파일이 업로드 된 이후에 새로고침이 자동으로 이루어지면서 추가된 고객 정보를 확인할 수 있습니다.
결과적으로 다음과 같이 upload 폴더에서도 업로드 된 파일을 확인할 수 있습니다. 파일의 이름은 multer 라이브러리에 의해서 중복되지 않는 형태로 자동으로 바뀌어서 올라가게 됩니다.
(+ 추가)
실제로는 이러한 이미지 업로드 기능은 AWS S3과 같은 서비스를 이용해서 저장하면 매우 효과적입니다. 현재 소스코드 상으로는 데이터베이스와 서버에 업로드 된 이미지가 완전히 일치한다는 것을 보장하기 어렵기 때문입니다. 그리고 현재 소스코드에서는 새로운 고객 데이터가 등록된 이후에, 이를 확인하기 위해 전체 페이지를 새로고침(Refresh)하지만 실제로는 다시 고객 목록 데이터를 가져오는 식으로 코드를 동작시켜야 합니다.
'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글
12강 고객 추가 양식(Form) 구현하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
React에서 Form을 처리하기 위해서는 이벤트 처리(Event Handling)를 수행해야 합니다. 이번 시간에는 그러한 이벤트 처리 방법에 대해서 이해하고, 결과적으로 서버로 고객 데이터를 전송하여 데이터베이스에 신규 고객 정보를 등록하는 방법까지 알아보도록 하겠습니다. 따라서 가장 먼저 React 클라이언트의 components 폴더에 CustomerAdd.js를 만들어 보도록 하겠습니다.
이제 디자인을 입히지 않은 상태로 하나의 <form> 태그를 작업하는 시간을 가져보도록 하겠습니다. 이를 위해 가장 먼저 서버와의 통신 목적의 라이브러리인 axios를 설치해주도록 하겠습니다. client 폴더로 이동하여 npm install --save axios 명령어를 입력하시면 됩니다. 이제 CustomerAdd.js 컴포넌트를 작업해 줍니다.
▶ CustomerAdd.js
import React from 'react'
import { post } from 'axios';
class CustomerAdd extends React.Component {
constructor(props) {
super(props);
this.state = {
file: null,
userName: '',
birthday: '',
gender: '',
job: '',
fileName: ''
}
this.handleFormSubmit = this.handleFormSubmit.bind(this)
this.handleFileChange = this.handleFileChange.bind(this)
this.handleValueChange = this.handleValueChange.bind(this)
this.addCustomer = this.addCustomer.bind(this)
}
handleFormSubmit(e) {
e.preventDefault()
this.addCustomer()
.then((response) => {
console.log(response.data);
})
}
handleFileChange(e) {
this.setState({
file: e.target.files[0],
fileName: e.target.value
});
}
handleValueChange(e) {
let nextState = {};
nextState[e.target.name] = e.target.value;
this.setState(nextState);
}
addCustomer(){
const url = '/api/customers';
const formData = new FormData();
formData.append('image', this.state.file)
formData.append('name', this.state.userName)
formData.append('birthday', this.state.birthday)
formData.append('gender', this.state.gender)
formData.append('job', this.state.job)
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
return post(url, formData, config)
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<h1>고객 추가</h1>
프로필 이미지: <input type="file" name="file" file={this.state.file} value={this.state.fileName} onChange={this.handleFileChange} /><br/>
이름: <input type="text" name="userName" value={this.state.userName} onChange={this.handleValueChange} /><br/>
생년월일: <input type="text" name="birthday" value={this.state.birthday} onChange={this.handleValueChange} /><br/>
성별: <input type="text" name="gender" value={this.state.gender} onChange={this.handleValueChange} /><br/>
직업: <input type="text" name="job" value={this.state.job} onChange={this.handleValueChange} /><br/>
<button type="submit">추가하기</button>
</form>
)
}
}
export default CustomerAdd
▶ App.js
이제 작업한 CustomerAdd 컴포넌트를 화면에 출력해 보도록 하겠습니다. 따라서 App.js를 수정해 봅시다.
import CustomerAdd from './components/CustomerAdd';
위와 같이 CustomerAdd 컴포넌트를 추가해주신 이후에 다음과 같이 렌더링 되는 부분을 수정합니다.
<div>
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>번호</TableCell>
<TableCell>이미지</TableCell>
<TableCell>이름</TableCell>
<TableCell>생년월일</TableCell>
<TableCell>성별</TableCell>
<TableCell>직업</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.customers ?
this.state.customers.map(c => {
return <Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
}) :
<TableRow>
<TableCell colSpan="6" align="center">
<CircularProgress className={classes.progress} variant="determinate" value={this.state.completed} />
</TableCell>
</TableRow>
}
</TableBody>
</Table>
</Paper>
<CustomerAdd/>
</div>
실제로 이를 브라우저의 개발자 도구에서 테스트를 해보시면 서버로 데이터를 전송하는 것을 알 수 있습니다.
아래쪽에 고객 추가 양식이 존재하며 여기에 데이터를 입력하여 실제로 고객을 추가할 수 있습니다.
데이터를 입력해 [추가하기] 버튼을 누른 결과 다음과 같이 서버로 데이터가 전송되는 것을 알 수 있습니다. 실제로 이미지 파일은 바이너리 코드 형태로 서버로 전달됩니다. 따라서 다음 시간에 이러한 사용자의 요청 데이터를 적절히 처리하여 데이터베이스에 등록한 뒤에 그에 맞는 응답을 보내주는 작업을 수행해야 하빈다.
'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글
11강 고객(Customer) DB 테이블 구축 및 Express와 연동하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
지난 시간에는 AWS RDS 서비스를 이용해서 우리 고객 관리 시스템 프로젝트의 데이터베이스를 구축하는 시간을 가졌습니다. 이번 시간에는 실제로 우리가 지난 시간에 만든 MySQL 데이터베이스에 고객(Customer) 테이블을 구축한 뒤에 데이터를 삽입하는 시간을 가져보도록 하겠습니다.
※ 데이터베이스 테이블 구축하기 ※
데이터베이스 이름을 management로 설정했으므로 여기에 들어가서 고객 테이블을 구축하여 데이터를 넣도록 소스를 작성해보겠습니다.
USE management;
CREATE TABLE CUSTOMER (
id INT PRIMARY KEY AUTO_INCREMENT,
image VARCHAR(1024),
name VARCHAR(64),
birthday VARCHAR(64),
gender VARCHAR(64),
job VARCHAR(64)
) DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
INSERT INTO CUSTOMER VALUES (1, 'https://placeimg.com/64/64/1', '홍길동', '960508', '남자', '대학생');
INSERT INTO CUSTOMER VALUES (2, 'https://placeimg.com/64/64/2', '나동빈', '961222', '남자', '프로그래머');
INSERT INTO CUSTOMER VALUES (3, 'https://placeimg.com/64/64/3', '이순신', '961127', '남자', '디자이너');
SELECT * FROM CUSTOMER;
※ .gitignore ※
이제 데이터베이스와 연동하는 작업을 처리하도록 하겠습니다. 기본적으로 데이터베이스 관련 정보는 Git Ignore 처리를 해서 깃 허브(Git Hub)에 올라가지 않도록 처리해야 합니다. 따라서 서버 프로그램의 .gitignore 파일을 다음과 같이 수정합니다.
# database
/database.json
이후에 database.json에서 데이터베이스 정보를 설정하시면 됩니다.
{
"host": 데이터베이스 주소,
"user": 데이터베이스 사용자,
"password": 데이터베이스 비밀번호,
"port": "3306",
"database": 데이터베이스 이름
}
그러면 위와 같이 프로젝트가 구성됩니다.
※ Node.js와 MySQL 연동하기 ※
이제 Node.js와 MySQL을 연동해 봅시다. 가장 먼저 NPM을 이용하여 MySQL 라이브러리를 설치하셔야 합니다.
▶ npm install -S mysql
이후에 설치된 mysql 라이브러리를 활용하여 node.js와 MySQL을 연동할 수 있습니다.
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const data = fs.readFileSync('./database.json');
const conf = JSON.parse(data);
const mysql = require('mysql');
const connection = mysql.createConnection({
host: conf.host,
user: conf.user,
password: conf.password,
port: conf.port,
database: conf.database
});
connection.connect();
app.get('/api/customers', (req, res) => {
connection.query(
'SELECT * FROM CUSTOMER',
(err, rows, fields) => {
res.send(rows);
}
)
});
app.listen(port, () => console.log(`Listening on port ${port}`));
결과적으로 다음과 같이 서버 API가 정상적으로 동작하는 것을 확인할 수 있습니다.
이후에 깃 허브(Git Hub)에 소스코드를 반영하면 다음과 같습니다.
데이터베이스 설정 파일인 database.json 파일은 깃 허브에 올라가지 않는 것을 확인할 수 있습니다.
'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글
10강 AWS RDS 서비스를 이용하여 MySQL DB 구축하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
이번 시간에는 AWS RDS 서비스를 이용하여 MySQL DB를 구축해보는 시간을 가져보도록 하겠습니다. 실제로 고객에 대한 정보를 저장하기 위해서는 MySQL과 같은 데이터베이스 시스템이 필요합니다. 따라서 이번 시간에는 AWS(Amazon Web Service)를 이용해서 데이터베이스를 구축하도록 하겠습니다. 일반적으로 AWS RDS를 이용하면 MySQL과 같은 관계형 데이터베이스 시스템을 쉽고 빠르게 구축할 수 있어요.
심지어 프리티어(Free-Tier) 서비스를 이용하면 무료로 이용할 수 있다는 점에서 매우 효과적이랍니다.
※ AWS RDS로 데이터베이스 만들기 ※
AWS RDS 서비스를 검색하여 관계형 데이터베이스를 관리할 수 있습니다.
이후에 [데이터베이스 생성]란에 들어가서 데이터베이스를 만들어 주시면 됩니다.
저는 MySQL 서비스를 이용하도록 하겠습니다. 이 때 [RDS 프리 티어에 적용되는 옵션만 사용] 란에 체크해주시면 됩니다.
이후에 DB 세부 정보를 지정할 수 있습니다. 저는 MySQL 5.6 버전을 이용하도록 하겠습니다.
이후에 기본 스토리지 크기인 20GiB를 사용하시면 됩니다. 그리고 이후에 데이터베이스에 접속하기 위한 계정 정보를 넣어주세요.
이제 [고급 설정 구성]을 진행하시면 됩니다. 일반적으로 DB 보안 관리를 꼭 해주셔야 하지만 저는 강의를 위해서 일단 외부에서 쉽게 접속할 수 있도록 [퍼블릭 액세스 가능성]을 예(Yes)로 설정하겠습니다.
포트(Port) 번호 또한 기본 포트인 3306번 포트를 사용하시면 됩니다. DB 이름도 설정하시면 돼요.
이후에 다음과 같이 [데이터베이스 생성]을 진행할 수 있습니다.
인스턴스를 생성한 이후에는 [DB 인스턴스 세부 정보 보기]를 눌러서 세부 정보를 확인할 수 있습니다.
기본적으로 MySQL은 영어로 설정되어 있으므로 한글을 넣고자 한다면 UTF-8으로 인코딩 설정을 해야 합니다. 따라서 [파라미터 그룹] 탭으로 이동해서 [파라미터 그룹 생성]을 진행하시면 됩니다.
저는 다음과 같이 utf8-parameter라는 이름으로 파라미터 그룹을 생성해보았습니다.
가장 먼저 char를 검색해서 나오는 모든 속성에 대해서 값으로 UTF-8 설정을 해주세요.
이후에 collation을 검색하여 값으로 utf8_general_ci를 설정하시면 됩니다.
이제 이렇게 만들어진 파라미터 그룹을 우리의 데이터베이스에 적용해보도록 하겠습니다.
해당 데이터베이스에서 [수정] 탭으로 들어가 적용해주시면 됩니다.
결과적으로 [변경 중] 표시가 뜨면서 약간의 시간이 흐른 뒤에 파라미터 그룹이 적용됩니다.
혹여 파라미터 그룹 설정이 적용이 되지 않는 경우에는 데이터베이스를 재시작하시면 됩니다.
※ HeidiSQL을 이용해 데이터베이스에 접속하기 ※
이제 HeidiSQL을 이용해서 데이터베이스에 접속하는 방법에 대해서 알아보도록 하겠습니다.
▶ HeidiSQL 설치 경로: https://www.heidisql.com/download.php
위 경로에 접속하여 HeidiSQL을 설치할 수 있습니다.
기본적인 설치 프로그램으로 설치를 진행하시면 됩니다. 이후에 해당 프로그램을 실행해 주시면 됩니다.
저는 위와 같이 신규 세션(Session)을 만들어 주었습니다. MySQL 접속 경로는 AWS RDS 관리 페이지에서 확인할 수 있습니다.
이전에 자신이 설정했던 계정 정보로 그대로 로그인을 해주시면 됩니다.
로그인 이후에는 다음과 같이 데이터베이스가 구성되어 있는 것을 확인할 수 있습니다. 왼쪽 탭에서는 데이터베이스 정보가 출력됩니다. 아까 전에 우리가 만들었던 management라는 이름의 데이터베이스가 존재합니다.
간단히 쿼리(Query) 탭으로 이동하여 select version(); 명령어를 실행해 MySQL 버전을 확인할 수 있습니다.
※ 데이터베이스 접속이 안 되는 경우 ※
혹시 데이터베이스 접속이 안 되는 경우 데이터베이스의 [보안 그룹]을 확인하시는 것이 중요합니다.
보안 그룹의 [인바운드] 규칙을 확인했을 때 다음과 같이 접속하고자 하는 소스(Source)가 0.0.0.0(위치 무관)으로 설정되어 있어야 언제 어디서든 해당 데이터베이스에 접근할 수 있습니다.
