_민주

[Badminton Without Nets] 개인 정보 처리 방침

_민주 — Fri, 14 Nov 2025 08:45:08 +0900

[Badminton Without Nets] 개인 정보 처리 방침

이 개인정보 정책은 Badminton Without Nets 앱(이하 "애플리케이션")에 적용되며, 무료 서비스로 제공됩니다. 이 서비스는 "있는 그대로" 사용하도록 의도되었습니다.

정보 수집 및 사용
애플리케이션은 다운로드하여 사용할 때 정보를 수집합니다. 이 정보에는 다음과 같은 정보가 포함될 수 있습니다.

사용자 기기의 인터넷 프로토콜 주소(예: IP 주소)
방문한 애플리케이션의 페이지, 방문 시간과 날짜, 해당 페이지에서 보낸 시간
애플리케이션에서 보낸 시간
모바일 기기에서 사용하는 운영 체제
애플리케이션은 사용자 모바일 기기의 정확한 위치 정보를 수집하지 않습니다.

서비스 제공자는 중요한 정보, 필수 알림 및 마케팅 프로모션을 제공하기 위해 수시로 사용자가 제공한 정보를 사용하여 연락할 수 있습니다.

애플리케이션 사용 경험을 개선하기 위해 서비스 제공자는 이메일을 포함하되 이에 국한되지 않는 특정 개인 식별 정보를 요청할 수 있습니다. 서비스 제공자가 요청한 정보는 저장되며 본 개인정보 정책에 설명된 대로 사용됩니다.

제3자 접근
집계되고 익명화된 데이터만 서비스 제공자가 애플리케이션 및 서비스 개선을 돕기 위해 주기적으로 외부 서비스에 전송됩니다. 서비스 제공자는 본 개인정보 정책에 설명된 방식으로 제3자와 귀하의 정보를 공유할 수 있습니다.

애플리케이션은 자체 개인정보 처리방침을 가진 제3자 서비스를 사용한다는 점을 유의하십시오. 다음은 애플리케이션에서 사용하는 제3자 서비스 제공자의 개인정보 보호정책 링크입니다:

Google Play Services
서비스 제공자는 다음과 같은 경우 사용자 제공 및 자동으로 수집된 정보를 공개할 수 있습니다:

소환장 또는 유사한 법적 절차와 같이 법률에서 요구하는 경우
서비스 제공자의 권리를 보호하거나, 사용자의 안전 또는 타인의 안전을 보호하거나, 사기를 조사하거나, 정부 요청에 응답하기 위해 공개가 필요하다고 선의로 판단하는 경우
서비스 제공자를 대신하여 작업하며, 서비스 제공자가 공개하는 정보를 독립적으로 사용하지 않고, 본 개인정보 정책에 명시된 규칙을 준수하기로 동의한 신뢰할 수 있는 서비스 제공자와 함께
옵트아웃 권리
애플리케이션을 제거함으로써 모든 정보 수집을 쉽게 중단할 수 있습니다. 모바일 기기의 일부로 제공되거나 모바일 애플리케이션 마켓플레이스 또는 네트워크를 통해 제공될 수 있는 표준 제거 프로세스를 사용할 수 있습니다.

데이터 보존 정책
서비스 제공자는 사용자가 애플리케이션을 사용하는 동안 및 그 후 합리적인 시간 동안 사용자가 제공한 데이터를 보관할 것입니다. 애플리케이션을 통해 제공한 사용자 제공 데이터를 삭제하고 싶다면 jasonjimin2009@gmail.com으로 연락하시면 합리적인 시간 내에 응답해 드리겠습니다.

아동
서비스 제공자는 13세 미만 아동의 데이터를 수집하거나 이들을 대상으로 마케팅하기 위해 애플리케이션을 사용하지 않습니다.

애플리케이션은 13세 미만의 사용자를 대상으로 하지 않습니다. 서비스 제공자는 13세 미만 아동의 개인 식별 정보를 고의로 수집하지 않습니다. 서비스 제공자가 13세 미만 아동이 개인 정보를 제공한 것을 발견한 경우, 서비스 제공자는 즉시 서버에서 이를 삭제할 것입니다. 귀하가 부모 또는 보호자이고 자녀가 개인 정보를 제공했다는 사실을 알게 된 경우, 서비스 제공자(jasonjimin2009@gmail.com)에게 연락하여 필요한 조치를 취할 수 있도록 해주십시오.

보안
서비스 제공자는 귀하의 정보 기밀성을 보호하는 데 관심이 있습니다. 서비스 제공자는 서비스 제공자가 처리하고 유지하는 정보를 보호하기 위한 물리적, 전자적, 절차적 보호 장치를 제공합니다.

변경사항
본 개인정보 정책은 어떤 이유로든 수시로 업데이트될 수 있습니다. 서비스 제공자는 새 개인정보 정책으로 이 페이지를 업데이트하여 개인정보 정책의 변경 사항을 알려드릴 것입니다. 모든 변경 사항을 지속적으로 사용하는 것은 모든 변경 사항에 대한 승인으로 간주되므로 본 개인정보 정책을 정기적으로 확인하는 것이 좋습니다.

이 개인정보 정책은 2025-11-13부터 유효합니다.

귀하의 동의
애플리케이션을 사용함으로써, 귀하는 현재 및 당사에 의해 개정된 본 개인정보 정책에 명시된 대로 귀하의 정보 처리에 동의하는 것입니다.

연락처
애플리케이션 사용 중 개인정보에 관한 질문이 있거나 관행에 대해 질문이 있으시면 이메일(jasonjimin2009@gmail.com)을 통해 서비스 제공자에게 문의하십시오.

[Badminton without nets] 개인 정보 처리 방침

_민주 — Sat, 27 Sep 2025 10:06:47 +0900

[Badminton without nets] 개인 정보 처리 방침

이 개인정보 정책은 Badminton without nets 앱(이하 "애플리케이션")에 적용되며, 무료 서비스로 제공됩니다. 이 서비스는 "있는 그대로" 사용하도록 의도되었습니다.

정보 수집 및 사용
애플리케이션은 다운로드하여 사용할 때 정보를 수집합니다. 이 정보에는 다음과 같은 정보가 포함될 수 있습니다.

사용자 기기의 인터넷 프로토콜 주소(예: IP 주소)
방문한 애플리케이션의 페이지, 방문 시간과 날짜, 해당 페이지에서 보낸 시간
애플리케이션에서 보낸 시간
모바일 기기에서 사용하는 운영 체제
애플리케이션은 사용자 모바일 기기의 정확한 위치 정보를 수집하지 않습니다.

서비스 제공자는 중요한 정보, 필수 알림 및 마케팅 프로모션을 제공하기 위해 수시로 사용자가 제공한 정보를 사용하여 연락할 수 있습니다.

애플리케이션 사용 경험을 개선하기 위해 서비스 제공자는 이메일을 포함하되 이에 국한되지 않는 특정 개인 식별 정보를 요청할 수 있습니다. 서비스 제공자가 요청한 정보는 저장되며 본 개인정보 정책에 설명된 대로 사용됩니다.

제3자 접근
집계되고 익명화된 데이터만 서비스 제공자가 애플리케이션 및 서비스 개선을 돕기 위해 주기적으로 외부 서비스에 전송됩니다. 서비스 제공자는 본 개인정보 정책에 설명된 방식으로 제3자와 귀하의 정보를 공유할 수 있습니다.

애플리케이션은 자체 개인정보 처리방침을 가진 제3자 서비스를 사용한다는 점을 유의하십시오. 다음은 애플리케이션에서 사용하는 제3자 서비스 제공자의 개인정보 보호정책 링크입니다:

Google Play Services
서비스 제공자는 다음과 같은 경우 사용자 제공 및 자동으로 수집된 정보를 공개할 수 있습니다:

소환장 또는 유사한 법적 절차와 같이 법률에서 요구하는 경우
서비스 제공자의 권리를 보호하거나, 사용자의 안전 또는 타인의 안전을 보호하거나, 사기를 조사하거나, 정부 요청에 응답하기 위해 공개가 필요하다고 선의로 판단하는 경우
서비스 제공자를 대신하여 작업하며, 서비스 제공자가 공개하는 정보를 독립적으로 사용하지 않고, 본 개인정보 정책에 명시된 규칙을 준수하기로 동의한 신뢰할 수 있는 서비스 제공자와 함께
옵트아웃 권리
애플리케이션을 제거함으로써 모든 정보 수집을 쉽게 중단할 수 있습니다. 모바일 기기의 일부로 제공되거나 모바일 애플리케이션 마켓플레이스 또는 네트워크를 통해 제공될 수 있는 표준 제거 프로세스를 사용할 수 있습니다.

데이터 보존 정책
서비스 제공자는 사용자가 애플리케이션을 사용하는 동안 및 그 후 합리적인 시간 동안 사용자가 제공한 데이터를 보관할 것입니다. 애플리케이션을 통해 제공한 사용자 제공 데이터를 삭제하고 싶다면 jasonjimin2009@gmail.com으로 연락하시면 합리적인 시간 내에 응답해 드리겠습니다.

아동
서비스 제공자는 13세 미만 아동의 데이터를 수집하거나 이들을 대상으로 마케팅하기 위해 애플리케이션을 사용하지 않습니다.

애플리케이션은 13세 미만의 사용자를 대상으로 하지 않습니다. 서비스 제공자는 13세 미만 아동의 개인 식별 정보를 고의로 수집하지 않습니다. 서비스 제공자가 13세 미만 아동이 개인 정보를 제공한 것을 발견한 경우, 서비스 제공자는 즉시 서버에서 이를 삭제할 것입니다. 귀하가 부모 또는 보호자이고 자녀가 개인 정보를 제공했다는 사실을 알게 된 경우, 서비스 제공자(jasonjimin2009@gmail.com)에게 연락하여 필요한 조치를 취할 수 있도록 해주십시오.

보안
서비스 제공자는 귀하의 정보 기밀성을 보호하는 데 관심이 있습니다. 서비스 제공자는 서비스 제공자가 처리하고 유지하는 정보를 보호하기 위한 물리적, 전자적, 절차적 보호 장치를 제공합니다.

변경사항
본 개인정보 정책은 어떤 이유로든 수시로 업데이트될 수 있습니다. 서비스 제공자는 새 개인정보 정책으로 이 페이지를 업데이트하여 개인정보 정책의 변경 사항을 알려드릴 것입니다. 모든 변경 사항을 지속적으로 사용하는 것은 모든 변경 사항에 대한 승인으로 간주되므로 본 개인정보 정책을 정기적으로 확인하는 것이 좋습니다.

이 개인정보 정책은 2025-08-12부터 유효합니다.

귀하의 동의
애플리케이션을 사용함으로써, 귀하는 현재 및 당사에 의해 개정된 본 개인정보 정책에 명시된 대로 귀하의 정보 처리에 동의하는 것입니다.

연락처
애플리케이션 사용 중 개인정보에 관한 질문이 있거나 관행에 대해 질문이 있으시면 이메일(jasonjimin2009@gmail.com)을 통해 서비스 제공자에게 문의하십시오.

[Shoulders] 개인 정보 처리 방침

_민주 — Thu, 28 Aug 2025 08:55:39 +0900

[Shoulders] 개인 정보 처리 방침

이 개인정보 정책은 Shoulders 앱(이하 "애플리케이션")에 적용되며, 무료 서비스로 제공됩니다. 이 서비스는 "있는 그대로" 사용하도록 의도되었습니다.

정보 수집 및 사용
애플리케이션은 다운로드하여 사용할 때 정보를 수집합니다. 이 정보에는 다음과 같은 정보가 포함될 수 있습니다.

사용자 기기의 인터넷 프로토콜 주소(예: IP 주소)
방문한 애플리케이션의 페이지, 방문 시간과 날짜, 해당 페이지에서 보낸 시간
애플리케이션에서 보낸 시간
모바일 기기에서 사용하는 운영 체제
애플리케이션은 사용자 모바일 기기의 정확한 위치 정보를 수집하지 않습니다.

서비스 제공자는 중요한 정보, 필수 알림 및 마케팅 프로모션을 제공하기 위해 수시로 사용자가 제공한 정보를 사용하여 연락할 수 있습니다.

애플리케이션 사용 경험을 개선하기 위해 서비스 제공자는 이메일을 포함하되 이에 국한되지 않는 특정 개인 식별 정보를 요청할 수 있습니다. 서비스 제공자가 요청한 정보는 저장되며 본 개인정보 정책에 설명된 대로 사용됩니다.

제3자 접근
집계되고 익명화된 데이터만 서비스 제공자가 애플리케이션 및 서비스 개선을 돕기 위해 주기적으로 외부 서비스에 전송됩니다. 서비스 제공자는 본 개인정보 정책에 설명된 방식으로 제3자와 귀하의 정보를 공유할 수 있습니다.

애플리케이션은 자체 개인정보 처리방침을 가진 제3자 서비스를 사용한다는 점을 유의하십시오. 다음은 애플리케이션에서 사용하는 제3자 서비스 제공자의 개인정보 보호정책 링크입니다:

Google Play Services
서비스 제공자는 다음과 같은 경우 사용자 제공 및 자동으로 수집된 정보를 공개할 수 있습니다:

소환장 또는 유사한 법적 절차와 같이 법률에서 요구하는 경우
서비스 제공자의 권리를 보호하거나, 사용자의 안전 또는 타인의 안전을 보호하거나, 사기를 조사하거나, 정부 요청에 응답하기 위해 공개가 필요하다고 선의로 판단하는 경우
서비스 제공자를 대신하여 작업하며, 서비스 제공자가 공개하는 정보를 독립적으로 사용하지 않고, 본 개인정보 정책에 명시된 규칙을 준수하기로 동의한 신뢰할 수 있는 서비스 제공자와 함께
옵트아웃 권리
애플리케이션을 제거함으로써 모든 정보 수집을 쉽게 중단할 수 있습니다. 모바일 기기의 일부로 제공되거나 모바일 애플리케이션 마켓플레이스 또는 네트워크를 통해 제공될 수 있는 표준 제거 프로세스를 사용할 수 있습니다.

데이터 보존 정책
서비스 제공자는 사용자가 애플리케이션을 사용하는 동안 및 그 후 합리적인 시간 동안 사용자가 제공한 데이터를 보관할 것입니다. 애플리케이션을 통해 제공한 사용자 제공 데이터를 삭제하고 싶다면 jiminjasonkang@gmail.com으로 연락하시면 합리적인 시간 내에 응답해 드리겠습니다.

아동
서비스 제공자는 13세 미만 아동의 데이터를 수집하거나 이들을 대상으로 마케팅하기 위해 애플리케이션을 사용하지 않습니다.

애플리케이션은 13세 미만의 사용자를 대상으로 하지 않습니다. 서비스 제공자는 13세 미만 아동의 개인 식별 정보를 고의로 수집하지 않습니다. 서비스 제공자가 13세 미만 아동이 개인 정보를 제공한 것을 발견한 경우, 서비스 제공자는 즉시 서버에서 이를 삭제할 것입니다. 귀하가 부모 또는 보호자이고 자녀가 개인 정보를 제공했다는 사실을 알게 된 경우, 서비스 제공자(jiminjasonkang@gmail.com)에게 연락하여 필요한 조치를 취할 수 있도록 해주십시오.

보안
서비스 제공자는 귀하의 정보 기밀성을 보호하는 데 관심이 있습니다. 서비스 제공자는 서비스 제공자가 처리하고 유지하는 정보를 보호하기 위한 물리적, 전자적, 절차적 보호 장치를 제공합니다.

변경사항
본 개인정보 정책은 어떤 이유로든 수시로 업데이트될 수 있습니다. 서비스 제공자는 새 개인정보 정책으로 이 페이지를 업데이트하여 개인정보 정책의 변경 사항을 알려드릴 것입니다. 모든 변경 사항을 지속적으로 사용하는 것은 모든 변경 사항에 대한 승인으로 간주되므로 본 개인정보 정책을 정기적으로 확인하는 것이 좋습니다.

이 개인정보 정책은 2025-06-12부터 유효합니다.

귀하의 동의
애플리케이션을 사용함으로써, 귀하는 현재 및 당사에 의해 개정된 본 개인정보 정책에 명시된 대로 귀하의 정보 처리에 동의하는 것입니다.

연락처
애플리케이션 사용 중 개인정보에 관한 질문이 있거나 관행에 대해 질문이 있으시면 이메일(jiminjasonkang@gmail.com)을 통해 서비스 제공자에게 문의하십시오.

1년 미만 근로자의 중소기업청년전세대출 (순서 꿀팁)

_민주 — Tue, 26 Nov 2024 14:48:28 +0900

중소기업 청년전세대출 (중기청)

: 청년들이 중소기업에 다니며 안정적으로 전세자금을 마련할 수 있도록 지원하는 제도

: 만 19세 이상 34세 이하 청년 / 중소기업에 재직 중 (또는 일정 소득 이하의 개인사업자) / 연 소득 3천 5백만원 이하 / 무주택자

순서

1. 집 구하기

부동산이나 온라인사이트(네이버부동산, kb부동산 등)을 통해 모든대출, 버팀목 전세대출, 중소기업 청년전세대출이 가능한 집을 찾는다.

단, 2억이하이며 최대 대출 한도는 1억이므로 1억을 제외한 보증금은 보유하거나 다른 대출이 필요합니다.

원하는 집을 발견한 후 계약서 작성 시

" - 해당 계약 건은 중소기업취업청년전세대출 계약 건으로 임대임, 주택의 문제로 전세 대출이 불가할 경우 가계약금 포함 계약금은 모두 반환한다.(임차인 귀책사유로 대출이 거절 날 경우에는 반환의무 없음) " 문구를 특약사항으로 반드시 기재해달라고 요청해야 합니다.

2. 기금e든든 사전심사

기금e든든 홈페이지( https://menhuf.molit.go.kr )에 접속하여 대출 신청 (mac으로 신청불가 반드시 window로 진행)

* 대출신청 시 다른 서류는 필요없습니다. 계약일이 명시되어 있어야 하므로 계약서 작성 후 신청해야합니다.

* 대출신청일로부터 최소 30일 이후로 신청해야해서 기간 넉넉히 잡으시는 거 추천드립니다.

* 신청 시 은행을 선택하게 되는 데 2번정도 방문해야하므로 가까운 은행을 추천합니다. (경험 공유)

저는 주거래 은행인 우리은행을 회사 근처로 신청하였습니다.(다른 블로그에서 우리은행이 대출 잘해준다했음) 사전심사 적격 판정이 난 후 신청한 은행의 담당자 번호가 적힌 카톡이 와서 연락하였는데 급여통장 물어보길래 신한은행이라고 했더니 주거래은행임에도 불구하고 급여통장이 담당은행으로 되어있다면서 공문내려왔다고 안된다했습니다... 다음날 급여통장은행인 신한은행으로 가서 상담하고 진행가능하다고 하였고 원래 자격되면 해주는건데 귀찮아서 안해주는거라고 하셨습니다... (주거래은행 바꿈!)

* 아무튼 주거래라도 급여통장은행으로 가는거 추천!

3. 은행 방문

사전심사 적격 판정이 뜨면 담당자 번호가 적힌 연락이 오고 전화한 후 서류들고 직접 방문하면 됩니다. ( 대출관련 서류 작성 약 40분정도 소요 )

위에서 말했다시피 은행 지점이 변경되는 거는 상관없는데 은행이 바뀌는 경우에는 기존 사전 심사를 취소하고 재신청해야해서 시간이 더 소요됨

사전심사 하기 전 가까운 은행 방문해서 대출 가능여부 확인하고 기금e든든 신청하는것을 추천드립니다!

순서 꿀팁

계약서 작성 -> 급여통장 은행 방문하여 신청여부 확인 -> 기금e든든 사전심사 신청 -> 아래 필요한 서류 발급 -> 서류 갖고 은행 방문

필요한 자료

- 본인

주민등록등본(최근 5년 주소변경이력포함 / 마스킹 x ) 대출 신청일 기준 1개월 이내에 발급
신분증

가족관계증명서

건강보험자격득실확인서

1년 미만 재직자 급여통장 사본

고용 보험 자격 이력 내역서(근로자용)

- 부동산
확정일자가 찍혀있는 임대차 계약서 (확정일자는 집 근처 주민센터에서 신청)

계약금 납부 영수증(이체확인증)

임대인 통장계좌번호(계약서에 작성되어있음)

임차목적물의 등기사항 전부 증명서

- 회사

사업자등록증 사본 (직인필수)

주업종코드 확인서 (직인필수)

재직증명서

근로소득원천징수부(입사월~최근) : 1년 미만 (직인 필수)

저는 1년 미만 재직자라서 걱정했는데 HUG로 대출최대한도인 1억 대출받았습니다.
대출이 처음이라 걱정과 고민되는 부분이 많았는데 검색하면 최신글이 없어서 다른분들께 도움이 되고자 글을 작성하게 되었습니다.
보시고 도움이 되셨으면 좋겠습니다! 궁금한 점 있으시면 댓글 남겨주세요!

Next14 App Router react-quill 사용 (build 시 prerendered error 해결)

_민주 — Fri, 22 Nov 2024 13:20:07 +0900

react-quill 이란?

- html editor를 활용할 . 수있는 라이브러리

- 러닝커브가 낮아 많이 사용

- next13에서 사용한 코드를 next14 App Router로 작성 중 build 시 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생

react-quill 사용방법

1. react-quill 설치

yarn add react-quill

2. 코드 작성

//Next13

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

const Editor = () => {
    const Quill = ReactQuill.Quill;
    const Font = Quill.import("formats/font");
    Font.whitelist = ["Gothic", "Myeongjo", "BlackHanSans", "Brush", "Dongle"];
    Quill.register(Font, true);

    const quillRef = useRef(null);
    
    const modules = useMemo(
        () => ({
            toolbar: {
                container: [
                    [{ header: "1" }, { header: "2" }],
                    ["bold", "italic", "underline", "strike"],
                    [
                        { size: ["small", false, "large", "huge"] },
                        { color: [] },
                        { background: [] },
                        { font: [...Font.whitelist] }
                    ],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }, { align: [] }],
                    ["blockquote", "code-block", "link"]
                ]
            },
            clipboard: {
                matchVisual: false
            }
        }),
        []
    );
    return (
        <div
            style={{
                marginBottom: "1rem",
                border: "1px solid #ccc",
                borderBottom: "none",
                borderRadius: "0.5rem"
            }}
        >
            <ReactQuill
                ref={quillRef}
                modules={modules}
                placeholder={"내용을 입력하세요."}
                theme="snow"
                formats={[
                    "header",
                    "bold",
                    "italic",
                    "underline",
                    "strike",
                    "size",
                    "color",
                    "background",
                    "font",
                    "list",
                    "bullet",
                    "indent",
                    "align",
                    "blockquote",
                    "code-block",
                    "link"
                ]}
            />
        </div>
    );
};

export default Editor;

Next14 App Router 에러 해결

[Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생 이유

ReactQuill과 같은 브라우저 전용 라이브러리가 Next.js의 SSR (서버 사이드 렌더링) 환경에서 초기 로드 시 오류를 일으킬 수 있기 때문입니다. 특히 Next.js에서 서버에서 브라우저 전용 객체를 접근하려고 하면 prerender-error가 발생할 수 있습니다.

해결 방법

Next.js 서버 측에서는 DOM 객체와 관련된 작업을 피해야 합니다. ReactQuill은 브라우저에서만 사용할 수 있는 라이브러리이므로, dynamic 함수를 사용하여 클라이언트에서만 로드되도록 설정할 수 있습니다.
Next.js의 next/dynamic을 사용하여 ReactQuill을 동적으로 import하고 SSR을 비활성화합니다.

해결된 코드

//Next14 App Router

'use client'
import { Dispatch, SetStateAction, useMemo, useRef } from "react";
import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";

// 클라이언트에서만 ReactQuill 로드
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

const Editor = () => {
    const modules = useMemo(() => {
        return {
            toolbar: {
                container: [
                    [{ header: "1" }, { header: "2" }],
                    ["bold", "italic", "underline", "strike"],
                    [
                        { size: ["small", false, "large", "huge"] },
                        { color: [] },
                        { background: [] },
                        { font: ["Gothic", "Myeongjo", "BlackHanSans", "Brush", "Dongle"] }
                    ],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }, { align: [] }],
                    ["blockquote", "code-block", "link"]
                ]
            },
            clipboard: {
                matchVisual: false
            }
        };
    }, []);
    return (
        <div
        >
            <ReactQuill
                modules={modules}
                placeholder={"내용을 입력하세요."}
                theme="snow"
                formats={[
                    "header",
                    "bold",
                    "italic",
                    "underline",
                    "strike",
                    "size",
                    "color",
                    "background",
                    "font",
                    "list",
                    "bullet",
                    "indent",
                    "align",
                    "blockquote",
                    "code-block",
                    "link"
                ]}
            />
        </div>
    );
};

export default Editor;

Next 로그인 (google provider 백엔드 구현 및 session에 사용자 정보 저장) (feat. next14 app-router)

_민주 — Tue, 2 Jul 2024 16:00:25 +0900

Project Explanation

- 2024.07.02 - [next] - Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)에서

구현했던 NextAuth Google Provider를 백엔드로 이동

- 코드 수정된 부분만 남겨놓겠습니다

backend 좀 더 공부하고 링크 첨부 예정

Project Folder

app

┣ api

┃ ┗ auth

┃ ┃ ┗ [...nextauth]

┃ ┃ ┃ ┗ route.ts

┣ login

┃ ┣ googleLogin

┃ ┃ ┗ page.tsx

┃ ┗ page.tsx

┣ layout.tsx

┗ page.tsx

lib

┗ axios.ts

providers

┗ SessionProvider.tsx

src

┣ server

┃ ┣ services

┃ ┃ ┗ userService.ts

┃ ┗ auth.ts

┗ types

┗ next-auth.d.ts

- app > login > googleLogin > page.tsx 추가

app > login > googleLogin > page.tsx

'use client'
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
import { signIn } from 'next-auth/react';

const GoogleLogin = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get('token');
    
  useEffect(() => {
    if (token) {
      (async () => {
        await signIn('custom-google', { token, redirect: false });
        router.push('/');
      })();
    }
  }, [token]);

  return <div>로그인 처리 중...</div>;
};

export default GoogleLogin;

src > server > auth.ts

import { User, NextAuthOptions, getServerSession } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import * as process from "process";
import { userService } from "./services/userService";
import jwt from 'jsonwebtoken';

interface LocalUser {
    sub: string;
    email: string;
    name: string;
    image: string;
}

function decodeToken(token: string): LocalUser | null {
    try {
        // 디코드된 토큰의 페이로드 부분을 반환합니다.
        return jwt.decode(token) as LocalUser;
    } catch (e) {
        return null;
    }
}

export const authOptions: NextAuthOptions = {
    secret: process.env.NEXTAUTH_SECRET,
    providers: [
        CredentialsProvider({
            name: "Credentials",
            credentials: { email: { label: "아이디" }, password: { label: "비밀번호" } },

            async authorize(credentials, req) {
                const { email, password } = credentials as {
                    email: string;
                    password: string;
                };
                const user = await userService.authenticate(email, password);
                return user as User | null;
            }
        }),
        CredentialsProvider({
          id: 'custom-google',
          name: 'Google',
          credentials: { token: { label: 'Token', type: 'text' },},

        async authorize(credentials): Promise<User | null> {
            try {
                const token = credentials?.token;                
                const user: LocalUser | null = decodeToken(token as string) as LocalUser;
                
                return user as User | null;
            } catch (error) {
                console.error('Authorize error:', error);
                return null;
            }
        }
        })
    ],
    callbacks: {
        async signIn({user, account, profile}) {
            if (account?.provider === "credentials") {
                return true;
            }
            else if (account?.provider === "custom-google") {
                return true;
            }
            return false;
        },
        async jwt({ token, user, trigger, session }) {
            if (trigger === "update") {
                return { ...token, ...session.user };
            }
            return { ...token, ...user };
        },
        async session({ session, token, user }) {
            session.user = token as any;
            return session;
        }
    },
    pages: {
        signIn: "/login"
    }
};

export const getServerAuthSession = () => getServerSession(authOptions);

- providers

┗ custom-google Google 토큰으로 인증 처리

app > login > page.tsx

"use client"
import React, { useState } from "react";
import { FormControl,InputLabel, IconButton, Input, InputAdornment} from "@mui/material";
import { FormEventHandler } from "react";
import { signIn } from "next-auth/react";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import CircularProgress from "@mui/material/CircularProgress";
import Image from "next/image";
import Link from "next/link";

export default function page() {
  const [showPassword, setShowPassword] = useState<boolean>(false);
  const [userInfo, setUserInfo] = useState({ email: "", password: "" });
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  
  const handleClickShowPassword = () => setShowPassword(show => !show);

  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
      event.preventDefault();
  };

  const handleSubmit: FormEventHandler<HTMLFormElement> = e => {
    e.preventDefault();
    setErrorMessage("");
    if (userInfo.email === "") {
        setErrorMessage("아이디를 입력해주세요.");
        return;
    }
    if (userInfo.password === "") {
        setErrorMessage("비밀번호를 입력해주세요.");
        return;
    }

    setLoading(true);
    signIn("credentials", {
        email: userInfo.email,
        password: userInfo.password,
        redirect: false,
        callbackUrl: "/"
    })
    .then(res => {
        if (res?.status === 401) {
            setErrorMessage("아이디 또는 비밀번호가 일치하지 않습니다.");
            return;
        } else if (res?.ok === false) {
            setErrorMessage("서버에 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
            return;
        } else {
            window.location.href = "/";
        }
    })
    .finally(() => {
        setLoading(false);
    });
  };

  return (
    <div className='pt-28 flex flex-col items-center justify-center'>
      <p className="font-bold">로그인</p>
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <FormControl sx={{ width: "100%" }} variant="standard" className=''>
              <InputLabel className="px-2">아이디</InputLabel>
              <Input
                  autoComplete={"username"}
                  value={userInfo.email}
                  type={"text"}
                  onChange={({ target }) => {
                      setErrorMessage("");
                      setUserInfo({ ...userInfo, email: target.value });
                  }}
              />
          </FormControl>
          <FormControl sx={{ width: "100%" }} variant="standard" className=''>
              <InputLabel className="px-2">비밀번호</InputLabel>
              <Input
                  value={userInfo.password}
                  type={showPassword ? "text" : "password"}
                  autoComplete={"current-password"}
                  name={"password"}
                  onChange={({ target }) => {
                      setErrorMessage("");
                      setUserInfo({ ...userInfo, password: target.value });
                  }}
                  endAdornment={
                      <InputAdornment position="end">
                          <IconButton
                              aria-label="toggle password visibility"
                              onClick={handleClickShowPassword}
                              onMouseDown={handleMouseDownPassword}
                          >
                              {showPassword ? <VisibilityOff /> : <Visibility />}
                          </IconButton>
                      </InputAdornment>
                  }
              />
          </FormControl>

          <p className='text-sm text-center'>{errorMessage}</p>
          {loading ? (
              <button disabled>
                  <CircularProgress sx={{ height: "20px !important", width: "20px !important" }} />
              </button>
          ) : (
              <button className='mx-auto text-white bg-[#599A7A] hover:bg-opacity-70 rounded-lg text-sm px-4 py-2 text-center' onClick={() => handleSubmit}>
                  로그인
              </button>
          )}
            <Link href='http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:3000/login/googleLogin' className='flex gap-2 items-center justify-center mx-auto text-white bg-[#FFFFFF] hover:bg-opacity-70 rounded-lg text-sm px-4 py-2 text-center'>
                <Image src={'/images/google.svg'} width={24} height={24} alt={'구글'}></Image>
                <div className='text-[#000000]'>Google로</div>
                <div></div>
            </Link>
        </form>
    </div>
  );
}

- <Link href='http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:3000/login/googleLogin' className='flex gap-2 items-center justify-center mx-auto text-white bg-[#FFFFFF] hover:bg-opacity-70 rounded-lg text-sm px-4 py-2 text-center'> : google 인증을 마친 후 redirect_uri 에 리 다이렉션 되어 사용자 정보를 session에 저장

Link로 API를 호출해서 응답을 받고 그 값을 세션에 저장하는 방법을 잘 모르겠어서,

리디렉션된 페이지에서 next-auth의 signIn을 사용하여 처리를 했습니다.

혹시 이 부분에 대해 아시는 분이 있다면 댓글로 남겨주시면 감사하겠습니다.

Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)

_민주 — Tue, 2 Jul 2024 11:38:38 +0900

Project Setting

Would you like to use TypeScript? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use App Router? (recommended) Yes

Project Folder

app
┣ api
┃ ┗ auth
┃ ┃ ┗ [...nextauth]
┃ ┃ ┃ ┗ route.ts
┣ login
┃ ┗ page.tsx
┣ layout.tsx
┗ page.tsx
lib
┗ axios.ts
providers
┗ SessionProvider.tsx
src
┣ server
┃ ┣ services
┃ ┃ ┗ userService.ts
┃ ┗ auth.ts
┗ types
┗ next-auth.d.ts

File Explanation

app>api>auth>[...nextauth]>route.ts

import NextAuth from "next-auth";
import { authOptions } from "@/src/server/auth";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

- NextAuth handler를 사용하여 GET / POST 요청 처리

- autoOptions를 가져와 인증설정과 기타설정을 적용

app>layout.ts

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
import { SessionProvider } from "@/providers/SessionProvider";
import { getServerSession } from "next-auth";

export const metadata: Metadata = {
  title: "login",
  description: "login",
};

export default async function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {

  const session = await getServerSession();

  return (
    <html lang="ko_KR">
      <body className='flex flex-col min-h-screen'>
        <SessionProvider session={session}>
        <Header />
        <main className="pt-[70px] flex-grow w-full break-keep flex items-center flex-col">
          {children}
        </main>
        <Footer />
        </SessionProvider>
      </body>
    </html>
  );
}

app > lib > axios.ts

const BASE_URL = "http://localhost:50101";
import axios from "axios";

export default axios.create({
    baseURL: BASE_URL,
    headers: {
        // 'Content-Type': 'application/json',
    }
});

export const axiosAuth = axios.create({
    baseURL: BASE_URL,
    headers: {
        "Content-Type": "application/json"
    }
});

app > providers > SessionProvider.tsx

"use client"
import React from 'react'
import { Session } from 'next-auth'
import { SessionProvider as Provider} from 'next-auth/react'

type Props = {
  session: Session | null;
  children: React.ReactNode;
}

export const SessionProvider = ({session, children}: Props) => {
  return (
    <Provider session={session}>
      {children}
    </Provider>
  )
}

src > server > auth.ts

import NextAuth,{ User, NextAuthOptions, getServerSession } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "@/lib/axios";
import jwt from "jwt-decode";
import * as process from "process";
import { userService } from "./services/userService";
import GoogleProvider from "next-auth/providers/google";

const API_URL = `${process.env.NEXT_PUBLIC_API_URL}`;

export const authOptions: NextAuthOptions = {
    secret: process.env.NEXTAUTH_SECRET,
    events: {
        async signOut(message) {
            try {
                await axios.post(
                    API_URL + "/api/users/logout",
                    {},
                    { headers: { AccessToken: `Bearer ${message.token.accesstoken}` } }
                );
            } catch (error: any) {
                if (error.response.status === 400) {
                    axios
                        .post(
                            API_URL + "/api/lms/account/refreshAccessToken",
                            {},
                            { headers: { RefreshToken: `Bearer ${message.token.refreshtoken}` } }
                        )
                        .then(res => {
                            axios
                                .post(
                                    API_URL + "/api/users/logout",
                                    {},
                                    { headers: { AccessToken: `Bearer ${res.headers.accesstoken}` } }
                                )
                                .then(res => {
                                    if (res.status === 200) {
                                        window.location.href = "/";
                                    }
                                });
                        });
                }
            }
            return Promise.resolve();
        }
    },
    providers: [
        CredentialsProvider({
            name: "Credentials",
            credentials: { userId: { label: "아이디" }, password: { label: "비밀번호" } },

            async authorize(credentials, req) {
                // credentials = {userId:, password:, redirect:, callbackUrl:, csrfToken:,json:}
                const { userId, password } = credentials as {
                    userId: string;
                    password: string;
                };
                return userService.authenticate(userId, password);
            }
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET as string
        })
    ],
    callbacks: {
        async jwt({ token, user, trigger, session }) {
            if (trigger === "update") {
                return { ...token, ...session.user };
            }
            return { ...token, ...user };
        },
        async session({ session, token, user }) {
            session.user = token as any;
            return session;
        }
    },
    pages: {
        signIn: "/login"
    }
};

export const getServerAuthSession = () => getServerSession(authOptions);

- 인증에 필요한 옵션을 설정

- events : 이벤트에 대한 추가 작업을 수행

┗ signOut : 로그아웃 시 서버에 로그아웃 요청과 엑세스 토큰 갱신

- callbacks : 인증 흐름을 제어

┗ jwt : JWT 토큰이 생성되거나 업데이트될 때 호출

┗ session : 세션이 생성되거나 접근될 때 호출

- pages : 인증 관련 페이지 설정

- getServerAuthSession : authOptions를 사용하여 세션 관리

src > server > services > userService.ts

import axios from "axios";
import NextAuth,{ User, NextAuthOptions } from "next-auth";
import jwt from "jwt-decode";

export const userService = {
    authenticate
};

const API_URL = `${process.env.NEXT_PUBLIC_API_URL}`;

async function authenticate(userId: string, password: string) {
    try {
        const res = await axios.post(
            API_URL + "/api/users/login",
            {
                userId,
                password
            },
            {
                headers: {}
            }
        );
        if (res) {
            const token = res.headers.accesstoken;
            const user: User = jwt(token);

            user.refreshtoken = res.headers.refreshtoken;
            user.accesstoken = res.headers.accesstoken;

            return user;
        } else {
            return null;
        }
    } catch (e) {
        return null;
    }
}

- authenticate : 사용자 인증을 처리하는 함수

사용자 ID 와 password를 받아서 서버에 로그인 요청을 보내고 서버로부터 토큰과 리프레스 토큰을 받음

받은 액세스 토큰을 디코딩하여 사용자 정보를 추출하고 토큰 정보를 사용자 객체에 추가

"use client"
import React, { useState } from "react";
import { FormControl,InputLabel, IconButton, Input, InputAdornment} from "@mui/material";
import { FormEventHandler } from "react";
import { signIn } from "next-auth/react";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import CircularProgress from "@mui/material/CircularProgress";
import Image from "next/image";
import Link from "next/link";

export default function page() {
  const [showPassword, setShowPassword] = useState<boolean>(false);
  const [userInfo, setUserInfo] = useState({ email: "", password: "" });
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);

  const handleClickShowPassword = () => setShowPassword(show => !show);

  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
      event.preventDefault();
  };

  const handleSubmit: FormEventHandler<HTMLFormElement> = e => {
    e.preventDefault();
    setErrorMessage("");
    if (userInfo.email === "") {
        setErrorMessage("아이디를 입력해주세요.");
        return;
    }
    if (userInfo.password === "") {
        setErrorMessage("비밀번호를 입력해주세요.");
        return;
    }

    setLoading(true);
    signIn("credentials", {
        email: userInfo.email,
        password: userInfo.password,
        redirect: false,
        callbackUrl: "/"
    })
        .then(res => {
            if (res?.status === 401) {
                setErrorMessage("아이디 또는 비밀번호가 일치하지 않습니다.");
                return;
            } else if (res?.ok === false) {
                setErrorMessage("서버에 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
                return;
            } else {
              window.location.href = "/";
            }
            // Todo : send ip address to sentry
        })
        .finally(() => {
            setLoading(false);
        });
  };

  const handleGoogleLogin = async (provider: string) => {
    if (provider === 'google') {
      await signIn(provider, { callbackUrl:'/' });
    }
  }
  
  return (
    <div className='pt-28 flex flex-col items-center justify-center'>
        <h1>로그인 페이지</h1>
        <div className='px-3 py-2 gap-4 flex justify-between cursor-pointer rounded-md bg-[#FFFFFF]' onClick={() => handleOauthLogin('google')}>
          <Image src={'/images/google.svg'} width={24} height={24} alt='google' />
             구글로그인
        </div>
      </div> */}
      <p className="font-bold">로그인</p>
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <FormControl sx={{ width: "100%" }} variant="standard" className=''>
              <InputLabel className="px-2">아이디</InputLabel>
              <Input
                  autoComplete={"username"}
                  value={userInfo.email}
                  type={"text"}
                  onChange={({ target }) => {
                      setErrorMessage("");
                      setUserInfo({ ...userInfo, email: target.value });
                  }}
              />
          </FormControl>
          <FormControl sx={{ width: "100%" }} variant="standard" className=''>
              <InputLabel className="px-2">비밀번호</InputLabel>
              <Input
                  value={userInfo.password}
                  type={showPassword ? "text" : "password"}
                  autoComplete={"current-password"}
                  name={"password"}
                  onChange={({ target }) => {
                      setErrorMessage("");
                      setUserInfo({ ...userInfo, password: target.value });
                  }}
                  endAdornment={
                      <InputAdornment position="end">
                          <IconButton
                              aria-label="toggle password visibility"
                              onClick={handleClickShowPassword}
                              onMouseDown={handleMouseDownPassword}
                          >
                              {showPassword ? <VisibilityOff /> : <Visibility />}
                          </IconButton>
                      </InputAdornment>
                  }
              />
          </FormControl>

          <p className='text-sm text-center'>{errorMessage}</p>
          {loading ? (
              <button disabled>
                  <CircularProgress sx={{ height: "20px !important", width: "20px !important" }} />
              </button>
          ) : (
              <button className='mx-auto text-white bg-[#599A7A] hover:bg-opacity-70 rounded-lg text-sm px-4 py-2 text-center' onClick={() => handleSubmit}>
                  로그인
              </button>
          )}
          <div className='flex gap-2 items-center justify-center mx-auto text-white bg-[#FFFFFF] hover:bg-opacity-70 rounded-lg text-sm px-4 py-2 text-center' onClick={() => handleGoogleLogin('google')}>
                <Image src={'/images/google.svg'} width={24} height={24} alt={'구글'}></Image>
                <div className='text-[#000000]'>Google로</div>
                <div></div>
           </div>
        </form>
    </div>
  );
}

이전에는 Next.js 13의 Pages Router를 사용하여 프로젝트를 개발했지만,

이번에는 Next.js 14의 App Router를 사용하여 새로운 프로젝트를 개발했습니다.

이 경험을 바탕으로 앞으로의 프로젝트에 참고할 수 있도록 이번 프로젝트의 개발 과정을 기록해두었습니다.

api 파일 분리 시 axios의 응답이 console에 안나오는 경우

_민주 — Wed, 17 Jan 2024 09:42:34 +0900

문제상황

분리된 API 파일(StorePostApi.js)에서는 response 로그를 남길 경우 나오지만

react파일(StorePage.js)에서 res 값을 찍을 경우 나오지 않음

// StorePage.js API호출 부분
StorePostApi(data)
.then(res =>{
  console.log("res",res)

  if(res){
    setUserCheck(true);

    setTimeout(() => {
      navigate('/signup/stores/pos');
    }, 500);

  } else{
    throw new Error("토큰이 없습니다")
  }
})
.catch(err=>{
  console.error('API 호출 또는 토큰 발급 실패:',err)
})

방법 (해결)

StorePostApi 함수에서 직접적으로 axios의 응답을 사용하도록 변경

React - Recoil 사용 중 놓쳤던 특징

_민주 — Tue, 16 Jan 2024 19:00:31 +0900

Recoil 특징

- 해당 상태를 구독하는 구성요소를 가진 함수가 리렌더링된다.

문제상황

회원가입 후 Recoil을 사용하여 회원의 유무를 판단하고 
PrivateRoute와 PublicRoute에서 useRecoilState를 사용했더니

다음 페이지로 넘어가야 되는 부분이 렌더링 되고 나서 
PrivateRoute와 PublicRoute가 또 실행되어 원하지 않는 페이지로 이동

과정 1.

PublicRoute 와 PrivateRoute 에서 UserStateCheck Recoil 변수를 사용 x
=> token 값의 유무로 판단

    // PublicRoute.js
    const userCheck = useRecoilValue(UserCheckState)
    return userCheck ? element : <Navigate replace to="/"/>;
    
    // 수정
    
    const tokenCheck = localStorage.getItem('access_token')
    return tokenCheck !==null ? element : <Navigate replace to="/"/>;

과정1 - 오류

- PrivateRoute가 2번 실행됨

- 로그아웃 기능이 안됨

과정 2.

과정 1에서 발생한 오류 중 로그인 안되는 부분 수정

const logout=()=>{
    localStorage.removeItem('access_token');
    localStorage.removeItem('csrf_token');
    tokenCheckfunc()
}
const tokenCheckfunc=()=>{
    const tokenCheck = localStorage.getItem('access_token')
    console.log("tokenCheckfunc",tokenCheck)

    if(tokenCheck !== null){
        setUserCheck(true)
    }else{
        setUserCheck(false)
    }
}

// useEffect(()=>{
//     tokenCheckfunc()
// },[userCheck])




수정

 const logout=()=>{
    localStorage.removeItem('access_token');
    localStorage.removeItem('csrf_token');
    setUserCheck(false)
    navigate('/')
}

과정 3

userCheck를 true로 변경 후 useEffect 가 실행되기때문에 privateRoute가 실행되어 home으로 라우팅 됨

조건을 추가하여

카테고리 비어있을 경우 pospage 머물기

  // Poscategory.js
  useEffect(()=>{
    if(categories.length == 0){
      setCategoryState(true)
      console.log("setCategoryState(true)",categories.length)
    }else{
      setCategoryState(false)
      console.log("setCategoryState(false)",categories.length)
    }
  },[categories])
  
// Header.js

//kiosk 상태
const [isKiosk , setIsKiosk] = useRecoilState(KioskState)
// 카테고리 데이터 상태 체크 [0인경우 true]
const [categoryState, setCategoryState] = useRecoilState(CategoryState)
useEffect(()=>{
    const checkCategory = async () => {
        try{
            const category = await CategoryGetApi();
            if(category.categories.length !== 0){
                setCategoryState(false)
            }else{
                setCategoryState(true)
            }            
        } catch(err){
            console.log(err)
        }
    }
    checkCategory()
},[])
    
useEffect(() => {

    // isKiosk 값이 변경될 때마다 실행되는 useEffect를 이용하여 라우팅을 수행합니다.
    if (isKiosk) {
        navigate('/kiosk');
    }
    else if(!isKiosk && !categoryState){
        console.log("Header.js - useEffect[isKiosk] - !isKiosk")
        navigate('/home')
    }

}, [isKiosk]);

// CategoryState.js - recoil
import { atom } from "recoil";

export const CategoryState = atom({
    key: "CategoryState",
    default: false
});

로직을 바꾸는 방법도 있었지만 끝까지 해결하고 싶어 이틀정도 걸렸던 것 같다.
조건을 추가하는 방법말고도 다른 방법이 있을 것 같지만 시간을 더이상 투자하기에는 무리였다...

프로젝트 끝나고 다른방법을 찾아봐야겠다

git file 하나만 되돌리기

_민주 — Tue, 16 Jan 2024 09:29:07 +0900

문제상황

오류 수정 중 해결하지 못하고
최초 코드로 돌아가고 싶었다.

git pull 을 했지만 최초코드로 돌아가지 못했음

그대로 유지 되었음을 확인

해결

git checkout -- 파일 경로

파일 색상이 변경되고 origin에 있는 코드를 가져왔음

Axios - http -> https 변경 시 오류

_민주 — Fri, 12 Jan 2024 15:41:38 +0900

문제상황

SSL 인증서를 붙혀서 통신 URI가 `https://api.salesync.site`로 변경됨

해당하는 URI에 맞춰 JS 요청 엔드포인트 변경

./src/api/BaseUrl.js

변경 전

const URL = "[http://api.salesync.site"](http://api.salesync.site"); export default URL;

변경 후

const URL = "[https://api.salesync.site"](https://api.salesync.site"); export default URL;

오류

배포시 통신 오류가 뜨고 데이터를 조회할 수 없음

분명 `https`로 변경했으나 `http`로 통신이 감

# 해결시도1 참조 : [https://velog.io/@shin6949/HTTPS에서-HTTP-요청-블락-에러-해결하기]

요청을 `http://` `https://`로 시작하는 것이 아닌 **"//"** 으로 시작하면 됩니다.
그럼 자동으로 접속되었던 방식으로 선택되어 넘어갑니다.

다시 한 번 JS 요청 엔드포인트 변경

./src/api/BaseUrl.js

변경 후

const URL = "//api.salesync.site";

export default URL;

# 해결시도1 - 오류

# 해결시도2 - 해결

CloudFront는 CDN이라 정적파일이 남아있음

캐시가 쌓여있어서 새롭게 배포한 React SPA가 반영이 안 됨 
(코드를 https로 수정해도 적용되지 않고 이미 기존의 http가 계속 유지됨)

## JS 요청 엔드포인트 변경

변경 후

./src/api/BaseUrl.js

const URL = "https://api.salesync.site";

export default URL;

## CloudFront 캐시 제거 스크립트 추가

변경 후

./.github/workflows/deploy.yml

name: Deploy to Amazon S3 bucket

on:
  push:
    branches: [ "main" ]

env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: salesync.site

  CLOUDFRONT_NAME: secret

:
:

      - name: CloudFront delete cache
        uses: chetan/invalidate-cloudfront-action@v2
        env:
          DISTRIBUTION: ${{ env.CLOUDFRONT_NAME }}
          PATHS: "/*"
          AWS_REGION: ${{ env.AWS_REGION }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

`https` 통신이 되고 정상 작동되는 것을 확인

2023 김나영 연말 콘서트 "Na" On The Voice [Songnando] 후기 - 2층 좌석

_민주 — Sun, 3 Dec 2023 07:45:23 +0900

12월 2일 토요일 18시 첫콘 후기!

광나루역 스타벅스에서 토피넛 라떼 구매하고 흡입하면서 갔는데 5분도 안걸렸다.

3일전에 예매해서 2층 좌석을 예매하게 되었지만 yes24 라이브홀 크기가 작아서 괜찮았다.

우선 결론부터 말하자면 대만족!!!

공연장 내에 물 제외하고 음료는 반입금지라 후다닥 마시고 들어갔다.

표 보여주고 입장하니 포토부스도 있었고!

15분 정도 전에 입장했는데 무대가 연말 분위기에 맞게 꾸며져 있었고 각 좌석에 플랜카드가 있었다.

극 E라 발라드 콘서트 가면 힘들지 않을까 했는데 오히려 차분해지고 마음이 편안해졌다?

콘서트 다녀와서 12월 플레이리스트는 김나영으로 가득 채워져버렸다

셋업리스트 기억나는 거는

홀로 / 솔직하게 말해서 나/ 너의 번호를 누르고 / 못해 / 어땠을까 / 신곡 외롭지 않아 / 너는 바다 / 어쩔 수가 없나봐 / The Youngest Day 등등

중간에 발라드만 들으면 지루할까봐 직접 만드는 Sing na young 코너라고 다른 가수 분의 노래 준비하셔서 불러주셨다.

사다리게임으로 나오는 장르에 맞는 노래를 불러주셨는데 밴드는 기억이 안나고 캐롤 - 징글벨 나왔고 추가로 박진영- 허니까지 발라드만 잘하시는게 아니라 신나는곡도 잘하신다.....S2 허니추시고 혼자 부끄럼 타시는거 너무 귀여웠어요..

아 콘서트장을 스노우볼 내부라고 생각하시면서 무대와 의상을 생각하신거라고 말씀하시는데도 하나하나 생각했다는게 멋있었다.

앵콜 곡으로 홀로 불러주셧는데 실수하셨다고 다시불러주시고 진짜 완벽그자체

2시간동안 노래부르시느라 목 걱정했는데 앵콜까지 무려 앵콜도 2곡

저 팬 아니였는데 팬할래요

솔로 콘서트라 MC나 게스트 있을 줄 알았는데

노래도 부르고 진행도 하면서 홀로 무대를 꽉 채우셨다. 2시간 30분동안 시간가는줄 몰랐던

음원으로 듣는것과 라이브로 듣는 것의 차이를 너무 느껴 버렸고...

고음내는 부분에서 소름이 몇번이나 돋았는지

너무 주절주절했나..

아무튼 너무너무너무 좋았고 2시간동안 행복했다.

2층 좌석도 괜찮았습니다. 혹시 오늘 이 글을 읽고 계시고 시간이 되신다면 꼭 예매하고 다녀와보시길 추천해드립니다.

마음이 따뜻해지고 12월을 행복하게 보낼 수 있을 것 같아요...

( 콘서트 오랜만에가서 주절주절했습니다..ㅎ )

AWS - Terraform

_민주 — Mon, 27 Nov 2023 19:32:52 +0900

목표
이전에 aws로 배포했던 웹 어플리케이션을 테라폼을 사용하여
인프라를 효율적으로 프로비저닝

참고
https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask <= flask_codedeploy/github Action
https://kalswn.tistory.com/entry/AWS-Flask-MySQL-react-%EB%B0%B0%ED%8F%AC <= AWS로 웹 어플리케이션 배포

#1 Terraform 사용자 생성

#2 Terraform VPC 생성

### vpc.tf ###

provider "aws" {
    region = "ap-northeast-2"
}

# vpc
resource "aws_vpc" "vpc" {
  cidr_block = "10.0.0.0/16"
  enable_dns_support = true
  enable_dns_hostnames = true

  tags = {
    Name = "vpc"
  }
}

# subnet (public)
resource "aws_subnet" "public_subnet_2a" {
  vpc_id =  aws_vpc.vpc.id
  cidr_block = "10.0.10.0/24"
  availability_zone = "ap-northeast-2a"
  tags = {
    Name = "public_subnet_2a"
  }
}

resource "aws_subnet" "public_subnet_2c" {
  vpc_id =  aws_vpc.vpc.id
  cidr_block = "10.0.30.0/24"
  availability_zone = "ap-northeast-2c"
  tags = {
    Name = "public_subnet_2c"
  }
}

# subnet (private)
resource "aws_subnet" "private_subnet_2a" {
  vpc_id =  aws_vpc.vpc.id
  cidr_block = "10.0.20.0/24"
  availability_zone = "ap-northeast-2a"
  tags = {
    Name = "private_subnet_2a"
  }
}
resource "aws_subnet" "private_subnet_2c" {
  vpc_id =  aws_vpc.vpc.id
  cidr_block = "10.0.40.0/24"
  availability_zone = "ap-northeast-2c"
  tags = {
    Name = "private_subnet_2c"
  }
}

# igw
resource "aws_internet_gateway" "vpc_igw" {
  vpc_id = aws_vpc.vpc.id

  tags = {
    Name = "vpc_igw"
  }
}

# route_table(public)
resource "aws_route_table" "public_route_table" {
  vpc_id = aws_vpc.vpc.id
  route {
    cidr_block = "0.0.0.0/0"
    gateway_id = aws_internet_gateway.vpc_igw.id
  }
  tags = {
    Name = "public_route_table"
  }
}

resource "aws_route_table_association" "public_rtb_a" {
  subnet_id      = aws_subnet.public_subnet_2a.id
  route_table_id = aws_route_table.public_route_table.id
}


resource "aws_route_table_association" "public_rtb_b" {
  subnet_id      = aws_subnet.public_subnet_2c.id
  route_table_id = aws_route_table.public_route_table.id
}

# route_table(private)
resource "aws_route_table" "private_route_table_1" {
  vpc_id = aws_vpc.vpc.id
  tags = {
    Name = "private_route_table_1"
  }
}
resource "aws_route_table_association" "private_rtb_1_a" {
  subnet_id = aws_subnet.private_subnet_2a.id
  route_table_id = aws_route_table.private_route_table_1.id
}

resource "aws_route_table" "private_route_table_2" {
  vpc_id = aws_vpc.vpc.id
  tags = {
    Name = "private_route_table_2"
  }
}
resource "aws_route_table_association" "private_rtb_2_a" {
  subnet_id = aws_subnet.private_subnet_2c.id
  route_table_id = aws_route_table.private_route_table_2.id
}

C:\aws>terraform apply

# front bucket 생성

### s3_front.tf ###

# bucket 생성
resource "aws_s3_bucket" "fs-front-bucket" {
  bucket = "fs-front-bucket"
  tags = {
    Name = "fs-front-bucket"
  }
}

# 정적 웹 사이트의 기본 index 페이지에 연결
resource "aws_s3_bucket_website_configuration" "fs-front-bucket" {
  bucket = aws_s3_bucket.fs-front-bucket.id

  index_document {
    suffix = "index.html"
  }

  error_document {
    key = "index.html"
  }
}

resource "aws_s3_bucket_versioning" "fs-front-bucket" {
  bucket = aws_s3_bucket.fs-front-bucket.id
  versioning_configuration {
    status = "Enabled"
  }
}

# Amazon S3 버킷 소유권 컨트롤을 정의
resource "aws_s3_bucket_ownership_controls" "fs-front-bucket" {
  bucket = aws_s3_bucket.fs-front-bucket.id
  rule {
    object_ownership = "BucketOwnerPreferred"
  }
}

#  Amazon S3 버킷에 대한 퍼블릭 액세스 허용
resource "aws_s3_bucket_public_access_block" "fs-front-bucket" {
  bucket = aws_s3_bucket.fs-front-bucket.id

  block_public_acls       = false
  block_public_policy     = false
  ignore_public_acls      = false
  restrict_public_buckets = false
}

# ACL 공개 읽기 권한 설정 -정적 웹 호스팅을 위해
resource "aws_s3_bucket_acl" "fs-front-bucket" {
   depends_on = [  
    aws_s3_bucket_ownership_controls.fs-front-bucket,  
    aws_s3_bucket_public_access_block.fs-front-bucket
   ]
  
  bucket = aws_s3_bucket.fs-front-bucket.id
  acl = "public-read"
}

output "fs-front-bucket-url" {
  value = aws_s3_bucket.fs-front-bucket.website_endpoint
}

# aws_s3_bucket.FS_front_bucket will be created
  + resource "aws_s3_bucket" "FS_front_bucket" {
      + acceleration_status         = (known after apply)
      + acl                         = (known after apply)
      + arn                         = (known after apply)
      + bucket                      = "FS_front_bucket"
      + bucket_domain_name          = (known after apply)
      + bucket_prefix               = (known after apply)
      + bucket_regional_domain_name = (known after apply)
      + force_destroy               = false
      + hosted_zone_id              = (known after apply)
      + id                          = (known after apply)
      + object_lock_enabled         = (known after apply)
      + policy                      = (known after apply)
      + region                      = (known after apply)
      + request_payer               = (known after apply)
      + tags                        = {
          + "Name" = "FS_front_bucket"
        }
      + tags_all                    = {
          + "Name" = "FS_front_bucket"
        }
      + website_domain              = (known after apply)
      + website_endpoint            = (known after apply)
    }

  # aws_s3_bucket_acl.FS_front_bucket will be created
  + resource "aws_s3_bucket_acl" "FS_front_bucket" {
      + acl    = "public-read-write"
      + bucket = (known after apply)
      + id     = (known after apply)
    }

** ERROR

Error: validating S3 Bucket (fs_front_bucket) name: only lowercase alphanumeric characters and hyphens allowed in "fs_front_bucket"

< S3 버킷(fs_front_bucket) 이름 유효성 검사 중: "fs_front_bucket"에는 소문자 알파벳, 숫자, 및 하이픈만 허용됩니다.>

해결

철자 확인!

**ERROR

Error: creating S3 Bucket (fs-front-bucket) ACL: operation error S3: PutBucketAcl, https response error StatusCode: 403, RequestID: Q4PQR0K6M9SDRYHT, HostID: Sq7CAn32Jz3MrjxBVjabNIE2vKpPzxbDC+iJeV82/vdShgL3f6Xhxrc74BAWn61ecP6H/xRpc+SrROkwGIQMPg==, api error AccessDenied: Access Denied

resource "aws_s3_bucket_public_access_block" "fs-front-bucket" {
  bucket = aws_s3_bucket.fs-front-bucket.id

  block_public_acls       = false
  block_public_policy     = false
  ignore_public_acls      = false
  restrict_public_buckets = false
}

resource "aws_s3_bucket_acl" "fs-front-bucket" {
   depends_on = [  
    aws_s3_bucket_public_access_block.fs-front-bucket
   ]
  
  bucket = aws_s3_bucket.fs-front-bucket.id
  acl = "public-read"
}

- 브라우저에서 버킷 웹 사이트 엔드포인트로 접속

# back bucket 생성

### s3_back.tf ###

# bucket 생성
resource "aws_s3_bucket" "fs-back-bucket" {
  bucket = "fs-back-bucket"

  tags = {
    Name = "fs-back-bucket"
  }
}

resource "aws_s3_bucket_versioning" "fs-back-bucket" {
  bucket = aws_s3_bucket.fs-back-bucket.id
  versioning_configuration {
    status = "Enabled"
  }
}

#  Amazon S3 버킷에 대한 퍼블릭 액세스 차단
resource "aws_s3_bucket_public_access_block" "fs-back-bucket" {
  bucket = aws_s3_bucket.fs-back-bucket.id

  block_public_acls       = true
  block_public_policy     = true
  ignore_public_acls      = true
  restrict_public_buckets = true
}
# bucket 정책 설정
resource "aws_s3_bucket_policy" "bucket-policy" {
  bucket = aws_s3_bucket.fs-back-bucket.id

  depends_on = [
    aws_s3_bucket_public_access_block.fs-back-bucket
  ]

  policy = <<EOF
  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": {
          "Service": "codedeploy.amazonaws.com"
        },
        "Action": "s3:Get*",
        "Resource": [
          "${aws_s3_bucket.fs-back-bucket.arn}",
          "${aws_s3_bucket.fs-back-bucket.arn}/*"
        ]
      },
      {
        "Effect": "Allow",
        "Principal": {
          "Service": "codedeploy.amazonaws.com"
        },
        "Action": "s3:List*",
        "Resource": [
          "${aws_s3_bucket.fs-back-bucket.arn}"
        ],
        "Condition": {
          "StringEquals": {
            "s3:prefix": [
              "",
              "folder/"
            ],
            "s3:delimiter": [
              "/"
            ]
          }
        }
      }
    ]
  }
  EOF
}

output "fs-back-bucket-arn" {
  value = aws_s3_bucket.fs-back-bucket.arn
}

**ERROR

Error: putting S3 Bucket (fs-back-bucket) Policy: operation error S3: PutBucketPolicy, https response error StatusCode: 400, RequestID: 7GG2M4SY0R7WJT29, HostID: iZTv28amEdl0ybcu5gX7rqTOVb1oVPhNUs9Yx5luVZ///6cbVRSjmGdwZ+jOlvkcT+LEv4HsRbc=, api error MalformedPolicy: Policy has invalid action

S3 버킷 정책이 올바른 형식이 아니거나 유효하지 않은 액션을 포함하고 있다는 것

S3 버킷 정책은 JSON 형식을 따라야 하며, 정책 내에 유효한 S3 액션을 지정

"Action": "s3:List",

"Action": "s3:List*", <= 수정

- back bucket 생성 확인

# flaskserver 인스턴스 생성

resource "aws_instance" "flaskServer" {
    ami = "ami-086cae3329a3f7d75"
    instance_type = "t2.micro"
    subnet_id = aws_subnet.public_subnet_2a.id
    key_name = aws_key_pair.my_key_pair.key_name
    vpc_security_group_ids = [aws_security_group.flask_sg.id]
    associate_public_ip_address = true

    # 인스턴스에 IAM 역할 할당
    iam_instance_profile = aws_iam_instance_profile.flask_profile.name
    user_data = <<EOF
    #!/bin/bash
    sudo apt-get update
    sudo spt-get install -y php
    sudo systemctl restart apache2
    sudo apt update
    sudo apt install -y ruby-full
    sudo apt install wget
    cd /home/ubuntu
    wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
    sudo ./install auto
    EOF
    tags = {
      Name = "flaskServer"
    }
}

# RSA private 키 생성
resource "tls_private_key" "my_key" {
  algorithm = "RSA"
  rsa_bits = 4096
}

resource "aws_key_pair" "my_key_pair" {
  key_name = "myKeyPair"
  public_key = tls_private_key.my_key.public_key_openssh
}

resource "local_file" "my_downloads_key" {
  filename = "myKeyPair.pem"
  content = tls_private_key.my_key.private_key_pem
}

# 보안그룹 생성
resource "aws_security_group" "flask_sg" {
  name_prefix = "flask_sg"
  vpc_id = aws_vpc.vpc.id
}

resource "aws_security_group_rule" "flask_sg_ingress_ssh" {
  type = "ingress"
  from_port = 22
  to_port = 22
  protocol = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
  security_group_id = aws_security_group.flask_sg.id
}

resource "aws_security_group_rule" "flask_sg_ingress_http" {
  type = "ingress"
  from_port = 80
  to_port = 80
  protocol = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
  security_group_id = aws_security_group.flask_sg.id
}
resource "aws_security_group_rule" "flask_sg_ingress_flask" {
  type = "ingress"
  from_port = 5000
  to_port = 5000
  protocol = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
  security_group_id = aws_security_group.flask_sg.id
}
resource "aws_security_group_rule" "flask_sg_egress_mysql" {
   type = "egress"
  from_port = 3306
  to_port = 3306
  protocol = "tcp"
  cidr_blocks = ["0.0.0.0/0"]
  security_group_id = aws_security_group.flask_sg.id
}
resource "aws_security_group_rule" "flask_sg_egress_all" {
  type = "egress"
  from_port = 0
  to_port = 0
  protocol = "-1"
  cidr_blocks = ["0.0.0.0/0"]
  security_group_id = aws_security_group.flask_sg.id
}

# 역할생성
resource "aws_iam_role" "flask_role" {
  name = "flask_role"
  assume_role_policy = <<EOF
{
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Principal": {
                    "Service": "ec2.amazonaws.com"
                },
                "Action": "sts:AssumeRole"
            }
        ]
    }
    EOF
} 
  
# AmazonS3FullAccess 정책을 연결
resource "aws_iam_role_policy_attachment" "s3_full_access" {
  role       = aws_iam_role.flask_role.name
  policy_arn = "arn:aws:iam::aws:policy/AmazonS3FullAccess"
}

# EC2 인스턴스 프로필 생성 및 역할 연결
resource "aws_iam_instance_profile" "flask_profile" {
  name = "flask-instance-profile"
  role = aws_iam_role.flask_role.name
}

output "flask_ip" {
  value = aws_instance.flaskServer.public_ip
}
output "access_key" {
  value = tls_private_key.my_key.private_key_pem
  sensitive = true
}

**ERROR

Error: Inconsistent dependency lock file
│
│ The following dependency selections recorded in the lock file are inconsistent with the current configuration:
│   - provider registry.terraform.io/hashicorp/local: required by this configuration but no version is selected
│   - provider registry.terraform.io/hashicorp/tls: required by this configuration but no version is selected
│
│ To update the locked dependency selections to match a changed configuration, run:
│   terraform init -upgrade

일반적으로 Terraform에서 모듈 또는 공급자(Provider)의 종속성을 관리하는 데 사용되는 terraform.tfstate 또는 terraform.tfstate.backup 파일이 예상과 다르다는 것

버전 충돌이나 파일이 손상되었을 때 발생

해결

C:\aws>terraform init

**ERROR

Error: Output refers to sensitive values
│
│ on flaskInastance.tf line 115:
│ 115: output "access_key" {

민감한 정보는 로그로 출력해주지 않음

해결

방법 x

ssh client로 접속하기 위해 key 내용을 확인하고 싶었던건데

폴더에 파일로 저장되어 파일을 import에 접속

**ERROR

2023-11-27T07:09:28 ERROR [codedeploy-agent(10689)]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller: Missing credentials - please check if this instance was started with an IAM instance profile

AWS CodeDeploy 에이전트가 실행 중인 인스턴스에서 AWS 자격 증명을 찾을 수 없을 때 발생

해결

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "ec2.amazonaws.com"    <=  ec2 가 아닌 lambda 로 설정되어 있었음
            },
            "Action": "sts:AssumeRole"
        }
    ]
}

#최종실행

#1 terraform init

C:\aws\FIRSTSTEP_Terraform>terraform init
Initializing the backend...

Initializing provider plugins...
- Finding latest version of hashicorp/aws...
- Finding latest version of hashicorp/local...
- Finding latest version of hashicorp/tls...
- Installing hashicorp/aws v5.26.0...
- Installed hashicorp/aws v5.26.0 (signed by HashiCorp)
- Installing hashicorp/local v2.4.0...
- Installed hashicorp/local v2.4.0 (signed by HashiCorp)
- Installing hashicorp/tls v4.0.4...
- Installed hashicorp/tls v4.0.4 (signed by HashiCorp)

Terraform has created a lock file .terraform.lock.hcl to record the provider
selections it made above. Include this file in your version control repository
so that Terraform can guarantee to make the same selections by default when
you run "terraform init" in the future.

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your working directory. If you forget, other
commands will detect it and remind you to do so if necessary.

#2 terraform apply

C:\aws\FIRSTSTEP_Terraform>terraform apply

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the
following symbols:
  + create

Terraform will perform the following actions:

  # aws_iam_instance_profile.flask_profile will be created
  + resource "aws_iam_instance_profile" "flask_profile" {
      + arn         = (known after apply)
      + create_date = (known after apply)
      + id          = (known after apply)
      + name        = "flask-instance-profile"
      + name_prefix = (known after apply)
      + path        = "/"
      + role        = "flask_role"
      + tags_all    = (known after apply)
      + unique_id   = (known after apply)
    }

  # aws_iam_role.flask_role will be created
  + resource "aws_iam_role" "flask_role" {
      + arn                   = (known after apply)
      + assume_role_policy    = jsonencode(
            {
              + Statement = [
                  + {
                      + Action    = "sts:AssumeRole"
                      + Effect    = "Allow"
                      + Principal = {
                          + Service = "ec2.amazonaws.com"
                        }
                    },
                ]
              + Version   = "2012-10-17"
            }
        )
        
        
        
        
...

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value:                     <= "yes"

Apply complete! Resources: 36 added, 0 changed, 0 destroyed.

Outputs:

access_key = <sensitive>
flask_ip = "52.78.4.158"
fs-back-bucket-arn = "arn:aws:s3:::fs-back-bucket"

#flaskserver 인스턴스로 접속

# flaskserver 인스턴스 초기 설정 CodeDeploy agent 설치

sudo apt-get update

sudo apt-get install -y php

sudo systemctl restart apache2

sudo apt update

sudo apt install -y ruby-full

sudo apt install wget

cd /home/ubuntu

# wget https://bucket-name.s3.region-identifier.amazonaws.com/latest/install

# 서울 region의 경우

wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install

chmod +x ./install

sudo ./install auto

ubuntu@ip-10-0-10-149:~$ sudo service codedeploy-agent status
● codedeploy-agent.service - LSB: AWS CodeDeploy Host Agent
     Loaded: loaded (/etc/init.d/codedeploy-agent; generated)
     Active: active (running) since Mon 2023-11-27 09:57:12 UTC; 8s ago
       Docs: man:systemd-sysv-generator(8)
    Process: 9813 ExecStart=/etc/init.d/codedeploy-agent start (code=exited, status=0/SUCCESS)
      Tasks: 2 (limit: 1121)
     Memory: 58.8M
        CPU: 1.095s
     CGroup: /system.slice/codedeploy-agent.service
             ├─9843 "codedeploy-agent: master 9843" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "">
             └─9845 "codedeploy-agent: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller of m>

Nov 27 09:57:12 ip-10-0-10-149 systemd[1]: Starting LSB: AWS CodeDeploy Host Agent...
Nov 27 09:57:12 ip-10-0-10-149 codedeploy-agent[9813]: Starting codedeploy-agent:
Nov 27 09:57:12 ip-10-0-10-149 systemd[1]: Started LSB: AWS CodeDeploy Host Agent.
lines 1-15/15 (END)

- 생성 확인

Terraform
- VPC
- S3 bucket front / back
- flaskServer 인스턴스
생성 됨을 확인

# 리소스 정리

terraform destroy

AWS - Lambda 함수 사용 _ boardList / login

_민주 — Fri, 24 Nov 2023 15:35:19 +0900

목표
제작한 웹 어플리케이션의 게시판 목록조회를 lambda 함수로 구현

참고
https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS
https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS

#1 람다 계층 생성

계층 (layer) : 모든 Lambda 함수에 있어 공통적으로 필요한 패키지 파일을 언제든 재활용해서 쓸 수 있도록 하는 기능

C:\>cd FirstStep_project

C:\FirstStep_project>mkdir python

C:\FirstStep_project>cd python

C:\FirstStep_project\python>pip install pymysql -t .
Collecting pymysql
  Downloading PyMySQL-1.1.0-py3-none-any.whl.metadata (4.4 kB)
Downloading PyMySQL-1.1.0-py3-none-any.whl (44 kB)
   ---------------------------------------- 44.8/44.8 kB 734.6 kB/s eta 0:00:00
Installing collected packages: pymysql
Successfully installed pymysql-1.1.0

C:\FirstStep_project\python>pip install pyjwt -t .
Collecting pyjwt
  Using cached PyJWT-2.8.0-py3-none-any.whl.metadata (4.2 kB)
Using cached PyJWT-2.8.0-py3-none-any.whl (22 kB)
Installing collected packages: pyjwt
Successfully installed pyjwt-2.8.0

C:\FirstStep_project\python>cd ../

C:\FirstStep_project>tar -acf lambda_layer.zip .\python

C:\FirstStep_project>dir lambda_layer.zip
 C 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: D0A5-3978

 C:\FirstStep_project 디렉터리

2023-11-22  오후 08:51           204,504 lambda_layer.zip
               1개 파일             204,504 바이트
               0개 디렉터리  54,888,493,056 바이트 남음

#2 람다 함수 생성

boardList

#2-1 생성한 람다 함수에 계층 추가

#2-2 코드 작성 후 Deploy

#2-3 테스트 이벤트 생성

#2-4 환경변수 설정

#2-5 lambda함수를 vpc 연결

#2-6 RDS에 lambda 연결

https://kalswn.tistory.com/entry/AWS-Flask-MySQL-react-%EB%B0%B0%ED%8F%AC RDS 생성 참조

AWS - Flask / MySQL / react 배포

목표 - 온프레미스 및 클라우드 환경에서 서비스 인프라를 (자동) 구성 - 어플리케이션 코드를 자동으로 배포, 실행하는 환경을 구성 참고 backend - flask : https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS.git fron

kalswn.tistory.com

** CloudWatch 를 통해 로그 확인

**ERROR

Unable to import modul 'lambda_function' : No module named 'PIL'

PIL 모듈이 존재하지 않아서 오류가 발생

해결

파이썬 기본 라이브러리와 AWS SDK를 제외한 외부 라이브러리는 직접 추가해 줘야 함

#1 layer를 생성하고 #2-1 계층을 추가하는 이유

#3 API Gateway

#3-1 API 생성

#3-2 API 배포

#3-3 CORS 활성화

** ERROR

has been blocked by CORS policy :

cors 오류 발생

해결

#3-4 API 재배포 후 확인

- 한글 깨짐 현상 발생

import json
import pymysql
import os

# 데이터 베이스 연결
def getCon():
  return pymysql.connect(host=os.environ['RDS_HOST'],
                             user=os.environ['RDS_USER'],
                             password=os.environ['RDS_PASSWORD'],
                             database=os.environ['RDS_DATABASE']) 
                                                                  <== 삭제
                             
def json_default(value):
  if isinstance(value, datetime.date):
    return value.strftime('%Y-%m-%d')
  raise TypeError('not JSON serializable') 

def lambda_handler(event, context):
    
    con = getCon()
    cursor = con.cursor()
    cursor.execute("SELECT b.boardId, b.title, u.ID, b.location, date_format(b.createAt, '%Y-%m-%d') AS createAt FROM board as b LEFT OUTER JOIN user as u on u.userId = b.userId WHERE b.status = 'active' ORDER BY b.createAt DESC;")
    data = cursor.fetchall()

    return json.dumps(data, default=json_default, ensure_ascii=False)

# login 람다 함수 (boardlist 함수와 동일)

**ERROR

secret key 환경변수를 설정해주지 않아서 발생하는 오류

Test Event Name
lambdaEvent

Response
{
  "errorMessage": "'ID'",
  "errorType": "KeyError",
  "requestId": "62474b5f-da46-4948-99f8-fb97128bc7dd",
  "stackTrace": [
    "  File \"/var/task/lambda_function.py\", line 23, in lambda_handler\n    cursor.execute(sql, event['ID'])\n"
  ]
}

Function Logs
START RequestId: 62474b5f-da46-4948-99f8-fb97128bc7dd Version: $LATEST
[ERROR] KeyError: 'ID'
Traceback (most recent call last):
  File "/var/task/lambda_function.py", line 23, in lambda_handler
    cursor.execute(sql, event['ID'])END RequestId: 62474b5f-da46-4948-99f8-fb97128bc7dd
REPORT RequestId: 62474b5f-da46-4948-99f8-fb97128bc7dd	Duration: 10.44 ms	Billed Duration: 11 ms	Memory Size: 128 MB	Max Memory Used: 48 MB

Request ID
62474b5f-da46-4948-99f8-fb97128bc7dd

**error

AWS - GitHub Actions_ react

_민주 — Fri, 24 Nov 2023 10:59:07 +0900

목표
 front GitHub Action을 사용해 workflow 자동화
 
 참고 
 https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS.git
 https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask <= S3 버킷 생성 참조

#1 S3 버킷 생성

https://kalswn.tistory.com/entry/AWS-CodeDeploy-Flask 참조

AWS - CodeDeploy _ Flask

목표 back-flask server GitHub Action을 사용해 workflow 자동화 AWS CodeDeploy 사용하여 EC2에 자동 배포 참고 https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS.git * CodeDeploy 먼저 설명되어있지만 GithubAction부터 해보는 것이

kalswn.tistory.com

#2 GitHub Actions에서 사용할 사용자를 생성하고 권한을 부여

firststepGitActionUser

#3 GitHub 레포지터리에 Secrets를 추가

#4 GitHub Actions 워크플로우를 작성

name: Deploy to Amazon EC2

on:
  push:
    branches: [ "main" ]

env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: firststepbucket
  CODE_DEPLOY_APPLICATION_NAME: ReactApplication
  CODE_DEPLOY_DEPLOY_GROUP_NAME: ReactDeployGroup

permissions:
  contents: read

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    environment: production
    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ${{ env.AWS_REGION }}

    - name: Upload to AWS S3
      run: |
        aws deploy push \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --s3-location s3://$S3_BUCKET_NAME/$GITHUB_SHA.zip \
          --ignore-hidden-files \
          --source .

    - name: Deploy to AWS EC2 from S3
      run: |
        aws deploy create-deployment \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --deployment-config-name CodeDeployDefault.AllAtOnce \
          --deployment-group-name ${{ env.CODE_DEPLOY_DEPLOY_GROUP_NAME }} \
          --s3-location bucket=$S3_BUCKET_NAME,key=$GITHUB_SHA.zip,bundleType=zip

**ERROR

npm build 시 오류

1. Line 20:7: React Hook useEffect has a missing dependency: 'boardId'. Either include it or remove the dependency array react-hooks/exhaustive-deps

해결 // eslint-disable-next-line react-hooks/exhaustive-deps 추가

 useEffect(() => {
        axios.get(`${process.env.REACT_APP_SERVER_URL}/boardlist/${boardId}/commentlist`)
        .then(response => {
            setComments(response.data)
            console.log(response.data)
        }).catch(error => console.log(error));
        // eslint-disable-next-line react-hooks/exhaustive-deps <==  추가
    },[])

2. Line 10:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

해결 웹 표준에 따라 img 태그는 alt를 작성 <img src = {image} alt = "face"/>

<img src={backgroundImg} alt = "face"/> 	<= 수정

3. Line 41:31: Expected '!==' and instead saw '!=' eqeqeq

해결 !=를 !== 로 수정

4. Line 1:10: 'useEffect' is defined but never used no-unused-vars

해결 사용하지 않는 모듈, 함수, 변수 등을 삭제

#5 GitHub Actions 확인

AWS - CodeDeploy / GitHub Actions _ Flask

_민주 — Fri, 24 Nov 2023 10:41:01 +0900

목표
 back-flask server GitHub Action을 사용해 workflow 자동화
 AWS CodeDeploy 사용하여 EC2에 자동 배포
 
 참고 
 https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS.git
 
 * CodeDeploy 먼저 설명되어있지만 GithubAction부터 해보는 것이 더 편리할 것 같음.

CodeDeploy

#1 flask app 과 CodeDeploy 에서 사용할 코드 작성

### appspec.yml ###

version: 0.0
os: linux
files:
  - souce: /
    destination: /home/ubuntu/FIRSTSTEP_BE_AWS
hooks:
  BeforeInstall:
    - location: scripts/before_install.sh
      runas: root
  AfterInstall:
    - location: scripts/after_install.sh
      runas: root

### scripts/before_install.sh ###

#!/bin/bash
rm -rf /home/ubuntu/FIRSTSTEP_BE_AWS
mkdir /home/ubuntu/FIRSTSTEP_BE_AWS

### scripts/after_install.sh ###

#!/bin/bash
cd /home/ubuntu/FIRSTSTEP_BE_AWS

echo ">>> pip install ================="
pip install -r requirements.txt

echo ">>>remove template files =============="
rm -rf appspec.yml requirements.txt

echo ">>> change owner to ubuntu ================"
chown -R ubuntu /home/ubuntu/FIRSTSTEP_BE_AWS

echo ">>> run app ======================"
python3 app.py

#2 git repository 소스 등록

User@DESKTOP-UDC737O MINGW64 /c/FirstStep_project/FIRSTSTEP_BE_AWS (main)
$ git add .

User@DESKTOP-UDC737O MINGW64 /c/FirstStep_project/FIRSTSTEP_BE_AWS (main)
$ git commit -m "codedeploy edit"

User@DESKTOP-UDC737O MINGW64 /c/FirstStep_project/FIRSTSTEP_BE_AWS (main)
$ git push origin

#3 어플리케이션 생성

FlaskApplication

#4 CodeDeploy에서 사용할 역할 생성 - firststepCodeDeployRole

#5 EC2 인스턴스에 적용할 정책과 역할을 생성

firststepCodeDeployEC2Policy / firststepCodeDeployEC2Role

#6 flaskserver 인스턴스 접속 - codedeploy agent 설치 후 실행

# PHP 설치
ubuntu@ip-10-0-2-206:~$ sudo apt install -y php
ubuntu@ip-10-0-2-206:~$ sudo systemctl restart apache2
ubuntu@ip-10-0-2-206:~$ cd /var/www/html

sudo apt update
sudo apt install ruby-full
sudo apt install wget

cd /home/ubuntu
# wget https://bucket-name.s3.region-identifier.amazonaws.com/latest/install
# 서울 region의 경우
wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install

chmod +x ./install

ubuntu@ip-10-0-10-203:~$ sudo service codedeploy-agent status
● codedeploy-agent.service - LSB: AWS CodeDeploy Host Agent
     Loaded: loaded (/etc/init.d/codedeploy-agent; generated)
     Active: active (running) since Thu 2023-11-23 05:23:24 UTC; 34s ago
       Docs: man:systemd-sysv-generator(8)
    Process: 30031 ExecStart=/etc/init.d/codedeploy-agent start (code=exited, status=0/SUCCESS)
      Tasks: 2 (limit: 1121)
     Memory: 57.3M
        CPU: 1.069s
     CGroup: /system.slice/codedeploy-agent.service
             ├─30037 "codedeploy-agent: master 30037" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" >
             └─30039 "codedeploy-agent: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller of >

Nov 23 05:23:24 ip-10-0-10-203 systemd[1]: Starting LSB: AWS CodeDeploy Host Agent...
Nov 23 05:23:24 ip-10-0-10-203 codedeploy-agent[30031]: Starting codedeploy-agent:
Nov 23 05:23:24 ip-10-0-10-203 systemd[1]: Started LSB: AWS CodeDeploy Host Agent.
lines 1-15/15 (END)

<region별 버킷 참조>

https://docs.aws.amazon.com/ko_kr/codedeploy/latest/userguide/resource-kit.html#resource-kit-bucket-names

#7 배포 그룹 생성

FlaskApplicationDeployGroup

#8 배포 생성

- commit id 확인

#9 flaskserver 인스턴스로 접속해서 로그확인

ubuntu@ip-10-0-10-203:~$ sudo systemctl status codedeploy-agent
● codedeploy-agent.service - LSB: AWS CodeDeploy Host Agent
     Loaded: loaded (/etc/init.d/codedeploy-agent; generated)
     Active: active (running) since Thu 2023-11-23 05:23:24 UTC; 19min ago
       Docs: man:systemd-sysv-generator(8)
    Process: 30031 ExecStart=/etc/init.d/codedeploy-agent start (code=exited, status=0/SUCCESS)
      Tasks: 2 (limit: 1121)
     Memory: 57.8M
        CPU: 1.163s
     CGroup: /system.slice/codedeploy-agent.service
             ├─30037 "codedeploy-agent: master 30037" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" >
             └─30039 "codedeploy-agent: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller of >

Nov 23 05:23:24 ip-10-0-10-203 systemd[1]: Starting LSB: AWS CodeDeploy Host Agent...
Nov 23 05:23:24 ip-10-0-10-203 codedeploy-agent[30031]: Starting codedeploy-agent:
Nov 23 05:23:24 ip-10-0-10-203 systemd[1]: Started LSB: AWS CodeDeploy Host Agent.

배포 작업 디렉터리 확인

**ERROR

ERROR [codedeploy-agent(3039) ]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller:Missing credentials - please check if this instance was started with am IAM instance profile

해당 에러가 발생하게 된 원인

1. IAM 역할을 지정하지 않고 인스턴스를 실행

2. 이후 실행시킨 인스턴스에 CodeDeploy Agent를 설치

3. 이때 설치된 CodeDeploy에는 해당 역할을 실행 할 수 있는 자격증명이 없기에 위와 같은 에러가 발생 하는 것

해결

아무 권한이 없이 역할을 하나 생성해서 EC2에 부여

flaskDummyRole

- 아무것도 지정하지 않고 다음

- codedeploy agent 재시작

sudo service codedeploy-agent restart
ubuntu@ip-10-0-10-203:/opt/codedeploy-agent$ sudo service codedeploy-agent status
● codedeploy-agent.service - LSB: AWS CodeDeploy Host Agent
     Loaded: loaded (/etc/init.d/codedeploy-agent; generated)
     Active: active (running) since Thu 2023-11-23 06:01:21 UTC; 5s ago
       Docs: man:systemd-sysv-generator(8)
    Process: 30234 ExecStart=/etc/init.d/codedeploy-agent start (code=exited, status=0/SUCCESS)
      Tasks: 2 (limit: 1121)
     Memory: 56.4M
        CPU: 1.046s
     CGroup: /system.slice/codedeploy-agent.service
             ├─30241 "codedeploy-agent: master 30241" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "">
             └─30243 "codedeploy-agent: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller of master 30241"

Nov 23 06:01:20 ip-10-0-10-203 systemd[1]: Stopped LSB: AWS CodeDeploy Host Agent.
Nov 23 06:01:20 ip-10-0-10-203 systemd[1]: codedeploy-agent.service: Consumed 1.686s CPU time.
Nov 23 06:01:20 ip-10-0-10-203 systemd[1]: Starting LSB: AWS CodeDeploy Host Agent...
Nov 23 06:01:21 ip-10-0-10-203 codedeploy-agent[30234]: Starting codedeploy-agent:
Nov 23 06:01:21 ip-10-0-10-203 systemd[1]: Started LSB: AWS CodeDeploy Host Agent.

**ERROR

CodeDeploy agent was not able to receive the lifecycle event. Check the CodeDeploy agent logs on your host and make sure the agent is running and can commect to the CodeDeploy server.

CodeDeploy에서 이벤트 주기가 가능하지 않으니, 배포하는 서버의 log를 보라는것

경로 : var/log/aws/codedeploy-agent/codedeploy-agent.log

ubuntu@ip-10-0-10-203:/opt/codedeploy-agent$ cat /var/log/aws/codedeploy-agent/codedeploy-agent.log
2023-11-23T06:07:56 WARN  [codedeploy-agent(30243)]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller: Calling PutHostCommandComplete: "Code Error"

WARN [codedeploy-gent(30243)]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller: Calling PutHostCommandComplete: "Code Error"

=> code에서 발생하는 오류

해결 : 코드 확인

=> source 가 아닌 souce였다.....ㅎ

### appspec.yml ###

version: 0.0
os: linux
files:
  - source: /
    destination: /home/ubuntu/FIRSTSTEP_BE_AWS
hooks:
  BeforeInstall:
    - location: scripts/before_install.sh
      runas: root
  AfterInstall:
    - location: scripts/after_install.sh
      runas: root

** ERROR

### run_flask.sh ###

echo ">>> run app ==================="
python3 -u app.py > /dev/null 2> /home/ubuntu/flask.log </dev/null &

### after_install.sh ###

#!/bin/bash
cd /home/ubuntu/FIRSTSTEP_BE_AWS

echo ">>> pip install requirements.txt ================="
pip install -r requirements.txt

echo ">>>remove template files =============="
rm -rf appspec.yml requirements.txt

echo ">>> change owner to ubuntu ================"
chown -R ubuntu /home/ubuntu/FIRSTSTEP_BE_AWS

포그라운드에서 실행시 사용자가 다른 작업을 못함

* python3 -u app.py > /dev/null 2> /home/ubuntu/flask.log </dev/null &

- -u: Python의 출력 버퍼링을 사용하지 않도록 하는 옵션

> /dev/null : 표준 출력(stout)을 /dev/null로 리다이렉션하여 모든 출력을 무시

2> /dev/null: 표준 에러 출력을 /dev/null로 리다이렉션하여 모든 에러 메시지를 무시

< /dev/null: 표준 입력을 /dev/null에서 읽도록 지정

/dev/null은 아무것도 없음을 나타내는 파일로, 이 경우에는 표준 입력이 비어있는 것

& 백그라운드 작업으로 실행

=> 출력 및 에러를 무시하면서 백그라운드에서 실행

Github Actions

#1 버킷 생성

firststep-back

#2 Github 레포지터리에 Secrets를 추가

#3 Github Actions 워크플로우를 작성

name: Deploy to Amazon EC2

on:
  push:
    branches: [ "main" ]

env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: firststepbucket
  CODE_DEPLOY_APPLICATION_NAME: FlaskApplication
  CODE_DEPLOY_DEPLOY_GROUP_NAME: FlaskApplicationDeployGroup

permissions:
  contents: read

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    environment: production
    steps:
    - name: Checkout
      uses: actions/checkout@v3

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ${{ env.AWS_REGION }}

    - name: Upload to AWS S3
      run: |
        aws deploy push \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --s3-location s3://$S3_BUCKET_NAME/$GITHUB_SHA.zip \
          --ignore-hidden-files \
          --source . 

    - name: Deploy to AWS EC2 from S3
      run: |
        aws deploy create-deployment \
          --application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
          --deployment-config-name CodeDeployDefault.AllAtOnce \
          --deployment-group-name ${{ env.CODE_DEPLOY_DEPLOY_GROUP_NAME }} \
          --s3-location bucket=$S3_BUCKET_NAME,key=$GITHUB_SHA.zip,bundleType=zip

#4 Action 실행 결과를 확인

#5 배포 로그 확인

**ERROR

The overall deployment failed because too many individual instances failed deployment, too few healthy instances are available for deployment, or some instances in your deployment group are experiencing problems.

Access Denied

#5-1 EC2 인스턴스에 묶여 있는 역할에 S3와 관련한 권한을 추가

flaskDummyRole

#5-2 배포 재시도

#6 브라우저로 확인

** ERROR

Error: Credentials could not be loaded, please check your action inputs: Could not load credentials from any providers

해결

#2 Github Action에서 사용할 사용자를 생성하고 권한부여

#3 Secrets 추가

AWS - Flask / MySQL / react 배포

_민주 — Fri, 24 Nov 2023 00:01:00 +0900

목표
- 온프레미스 및 클라우드 환경에서 서비스 인프라를 (자동) 구성
- 어플리케이션 코드를 자동으로 배포, 실행하는 환경을 구성

참고
backend - flask : https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS.git
front - react : https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS.git

#1 VPC 생성

VPC 구성 - Public Subnet 2개와 Private Subnet 2개를 생성

#2 RDS 생성

myRds - MySQL

user : admin pw : Password

퍼블릭 액세스 - 아니요

vpc 내부에서만 접속할 수 있도록 하기 위해

#2-1 BastionHost 인스턴스 생성

- BastionHost

Bastion 요새 라는 뜻으로 보안을 위해 고안된 호스트

외부와 내부 네트워크 사이에서 게이트 역할

#2-2 BastionHost 인스턴스와 RDS 연결

개발자가 workbench로 접속하여 db를 설정하고 관리하기 위해

#2-3 workbench를 통해 생성한 RDS 연결 후 스키마 생성

create database firststep;

use firststep;

CREATE TABLE `user` (
    `userId` int unsigned AUTO_INCREMENT NOT NULL ,
    `name` varchar(20)  NOT NULL ,
    `ID` varchar(16)  NOT NULL ,
    `password` varchar(300)  NOT NULL ,
    `phoneNumber` varchar(30)  NOT NULL ,
    `status` varchar(10) default 'active' NOT NULL ,
    `createAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    `updateAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    PRIMARY KEY (
        `userId`
    )
);

CREATE TABLE `board` (
    `boardId` int unsigned AUTO_INCREMENT NOT NULL ,
    `userId` int unsigned  NOT NULL ,
    `title` varchar(30)  NOT NULL ,
    `content` varchar(1000)  NOT NULL ,
    `location` varchar(20)  NOT NULL ,
    `status` varchar(10) default 'active' NOT NULL ,
    `createAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    `updateAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    PRIMARY KEY (
        `boardId`
    )
);

CREATE TABLE `comment` (
    `commentId` int unsigned AUTO_INCREMENT NOT NULL ,
    `userId` int unsigned  NOT NULL ,
    `boardId` int unsigned  NOT NULL ,
    `content` varchar(1000)  NOT NULL ,
    `status` varchar(10) default 'active' NOT NULL ,
    `createAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    `updateAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    PRIMARY KEY (
        `commentId`
    )
);

CREATE TABLE `rent` (
		`rentId` int unsigned AUTO_INCREMENT NOT NULL,
		`boardId` int unsigned  NOT NULL ,
		`userId` int unsigned,
		`rent` varchar(10) default 'active' NOT NULL ,
		`rentAt` datetime,
		`returnAt` datetime, 
		PRIMARY KEY (
				`rentId`
		)
);

ALTER TABLE `board` ADD CONSTRAINT `fk_board_userId` FOREIGN KEY(`userId`)
REFERENCES `user` (`userId`);

ALTER TABLE `comment` ADD CONSTRAINT `fk_comment_userId` FOREIGN KEY(`userId`)
REFERENCES `user` (`userId`);

ALTER TABLE `comment` ADD CONSTRAINT `fk_comment_board_id` FOREIGN KEY(`boardId`)
REFERENCES `board` (`boardId`);

ALTER TABLE `rent` ADD CONSTRAINT `fk_rent_boardId` FOREIGN KEY(`boardId`)
REFERENCES `board` (`boardId`);

ALTER TABLE `rent` ADD CONSTRAINT `fk_rent_userId` FOREIGN KEY(`userId`)
REFERENCES `user` (`userId`);

#3 Flask 인스턴스 생성

포트범위 : EC2에서 5000 포트로 들어오는 요청을 받을 수 있게 설정

#3-1 RDS와 FlaskServer 인스턴스 연결

app.py 수정

def getCon():
  return pymysql.connect(host="<RDS 엔드포인트>", 
                     user="admin", password="Password", 
                     db="firststep",
                     charset="utf8",
                     port=3306,
                     cursorclass=pymysql.cursors.DictCursor)
...

if __name__ == "__main__" :
    app.run(host="0.0.0.0", debug=False)

user와 password 는 RDS 생성 시 설정한 정보로 입력

#3-2 Bitvise SSH Client 사용하여 flaskServer 인스턴스에 접속

sudo apt-get install python3

git clone <github url>

ubuntu@ip-10-0-10-203:~$ ls
FIRSTSTEP_BE_AWS

ubuntu@ip-10-0-10-203:~$ cd FIRSTSTEP_BE_AWS/

pip install flask

pip install -r requirements.txt

ubuntu@ip-10-0-10-203:~/FIRSTSTEP_BE_AWS$ flask run --host=0.0.0.0
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://10.0.10.203:5000
Press CTRL+C to quit

=> --host=0.0.0.0 : 옵션을 주지 않으면 인스턴스 로컬에 실행이되어 접근할 수 없어 외부로 실행되어야 함

**error

E: Unable to locate package python3-pip

- 해결 방법

sudo add-apt-repository universe 
sudo apt-get update 
sudo apt-get install python3-pip

#3-3 브라우저에서 접속

Not Found => 서버가 실행 중인 것

인스턴스 생성 시 인바운드 규칙에 5000 추가했기 때문에 연결 가능(인스턴스 생성 시 빼먹었다면 보안그룹에 가서 포트 열어주기!)

- postman을 통해 RDS와 연결 확인

#4 React

#4-1 S3 버킷 생성

firststep

#4-2 react 어플리케이션 코드 수정

flaskServer로 연결하는 axios url 을 flaskServer 퍼블릭주소:5000으로 변경

axios.get(`${process.env.REACT_APP_SERVER_URL}/board/detail/${boardId}/${sessionStorage.getItem('token')}`)
        .then(res => {
            console.log(res)
            
...

### .env ###
REACT_APP_SERVER_URL = http://52.78.120.29:5000 <= flask 퍼블릭주소

#4-3 react 어플리케이션을 빌드

User@DESKTOP-UDC737O MINGW64 /c/FirstStep_project/FIRSTSTEP_FE_AWS (main)
$ npm run build

> client@0.1.0 build
> react-scripts build

Creating an optimized production build...

...

#4-4 build 한 react app 파일을 S3버킷에 업로드

#4-4 브라우저에서 버킷 웹 사이트 엔드포인트로 접속

수정중

**error

AWS - EKS

_민주 — Wed, 22 Nov 2023 08:55:10 +0900

EKS (Amazon Elastic Kubernetes Service)

AWS 클라우드와 온프레미스 데이터 센터에서 Kubernetes를 실행하는 데 사용되는 관리형 Kubernetes 서비스

EKS 생성 방법

- Amazon EKS 클러스터 생성

https://docs.aws.amazon.com/ko_kr/eks/latest/userguide/create-cluster.html

- 관리형 노드 그룹 생성

https://docs.aws.amazon.com/ko_kr/eks/latest/userguide/create-managed-node-group.html

#1 VPC 생성 - CloudFormation을 이용

https://s3.us-west-2.amazonaws.com/amazon-eks/cloudformation/2020-10-29/amazon-eks-vpc-private-subnets.yaml

#2 클러스터 서비스 역할을 생성

컨트롤 플레인이 사용자를 대신해서 AWS 리소스를 관리하는데 사용하는 역할 (마스터 노드)

#3 클러스터 생성

클러스터 엔드포인트

- private : vpc내 특정 호스트를 통해서만 접근가능

- public : kubectl이 컴퓨터에 설치되어 있어 kubectl을 통해 접근해보기위해

#4 생성된 클러스터와 kubectl이 통신하도록 설정

C:\Users\User>aws eks update-kubeconfig --region ap-northeast-2 --name MyEKSCluster
Added new context arn:aws:eks:ap-northeast-2:561845507088:cluster/MyEKSCluster to C:\Users\user\.kube\config

** error

토큰 오류가 발생하는 경우 액세스 키를 새로 발급한 후 aws configure 명령으로 등록

C:\Users\User>aws eks update-kubeconfig --region ap-northeast-2 --name MyEKSCluster

An error occurred (UnrecognizedClientException) when calling the DescribeCluster operation: 
The security token included in the request is invalid.

C:\Users\User>aws configure
AWS Access Key ID [****************HJ2B]: 발급받은 access Key
AWS Secret Access Key [****************gk6f]: 발급받은 secret Key
Default region name [ap-northeast-2]:
Default output format [json]:


C:\Users\User>aws sts get-caller-identity     <= 등록 되었는지 확인
{
    "UserId": "748619042828",
    "Account": "748619042828",
    "Arn": "arn:aws:iam::748619042828:root"
}

#5 EKS 노드 역할을 생성

https://docs.aws.amazon.com/ko_kr/eks/latest/userguide/create-node-role.html

#6 노드 그룹 생성

노드그룹 = 쿠버네티스에서 관리하는 오토스케일링 그룹

C:\Users\user> kubectl get node
NAME                                                 STATUS   ROLES    AGE    VERSION
ip-192-168-176-11.ap-northeast-2.compute.internal    Ready    <none>   103s   v1.28.3-eks-e71965b
ip-192-168-195-146.ap-northeast-2.compute.internal   Ready    <none>   102s   v1.28.3-eks-e71965b

C:\Users\user> kubectl get ns
NAME              STATUS   AGE
default           Active   27m
kube-node-lease   Active   27m
kube-public       Active   27m
kube-system       Active   27m

C:\Users\user> kubectl get pod -n kube-system
NAME                       READY   STATUS    RESTARTS   AGE
aws-node-b9rrn             2/2     Running   0          2m40s
aws-node-sz57m             2/2     Running   0          2m41s
coredns-6fbff78dcc-6dqxr   1/1     Running   0          27m
coredns-6fbff78dcc-nvcgk   1/1     Running   0          27m
kube-proxy-7dfrm           1/1     Running   0          2m41s
kube-proxy-xl6pj           1/1     Running   0          2m40s

#7 클러스터에 디플로이먼트 및 서비스 생성

webserver 3개 실행 & 로드밸런서 실행

c:\aws\hostname-deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: hostname-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: webserver
  template:
    metadata:
      name: my-webserver
      labels:
        app: webserver
    spec:
      containers:
        - name: my-webserver
          image: alicek106/rr-test:echo-hostname
          ports:
            - containerPort: 80

/home/vagrant/hostname-loadbalancer.yaml

apiVersion: v1
kind: Service
metadata:
  name: hostname-loadbalancer
spec:
  type: LoadBalancer
  selector:
    app: webserver
  ports:
    - name: web-port
      port: 80
      targetPort: 80

C:\aws> kubectl apply -f hostname-deployment.yaml
deployment.apps/hostname-deployment created

C:\aws> kubectl apply -f hostname-loadbalancer.yaml
service/hostname-loadbalancer created

C:\aws> kubectl get all
NAME                                       READY   STATUS    RESTARTS   AGE
pod/hostname-deployment-7f7d7755d8-6qhgk   1/1     Running   0          49s
pod/hostname-deployment-7f7d7755d8-9qcgl   1/1     Running   0          49s
pod/hostname-deployment-7f7d7755d8-czxk5   1/1     Running   0          49s

NAME                            TYPE           CLUSTER-IP      EXTERNAL-IP                                                                   PORT(S)        AGE
service/hostname-loadbalancer   LoadBalancer   10.100.159.81   a4631ffd13c82447a83077629518842a-701860891.ap-northeast-2.elb.amazonaws.com   80:32253/TCP   14s
service/kubernetes              ClusterIP      10.100.0.1      <none>                                                                        443/TCP        34m

NAME                                  READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/hostname-deployment   3/3     3            3           50s

NAME                                             DESIRED   CURRENT   READY   AGE
replicaset.apps/hostname-deployment-7f7d7755d8   3         3         3       50s

C:\aws> kubectl get pod -o wide
NAME READY STATUS RESTARTS AGE IP NODE NOMINATED NODE READINESS GATES
hostname-deployment-7f7d7755d8-6qhgk 1/1 Running 0 2m24s 192.168.251.136 ip-192-168-195-146.ap-northeast-2.compute.internal <none> <none>
hostname-deployment-7f7d7755d8-9qcgl 1/1 Running 0 2m24s 192.168.227.0 ip-192-168-195-146.ap-northeast-2.compute.internal <none> <none>
hostname-deployment-7f7d7755d8-czxk5 1/1 Running 0 2m24s 192.168.166.25 ip-192-168-176-11.ap-northeast-2.compute.internal <none> <none>

C:\aws> kubectl get node -o wide
NAME STATUS ROLES AGE VERSION INTERNAL-IP EXTERNAL-IP OS-IMAGE KERNEL-VERSION CONTAINER-RUNTIME
ip-192-168-176-11.ap-northeast-2.compute.internal Ready <none> 11m v1.28.3-eks-e71965b 192.168.176.11 <none> Amazon Linux 2 5.10.198-187.748.amzn2.x86_64 containerd://1.6.19
ip-192-168-195-146.ap-northeast-2.compute.internal Ready <none> 11m v1.28.3-eks-e71965b 192.168.195.146 <none> Amazon Linux 2 5.10.198-187.748.amzn2.x86_64 containerd://1.6.19

#8 service/hostname-loadbalancer의 external -IP 를 통해 브라우저에서 접속 가능

http://a4631ffd13c82447a83077629518842a-701860891.ap-northeast-2.elb.amazonaws.com/

* EKS 를 통해 쿠버네티스를 실행할경우 장점

노드의 개수 - 내부적으로 노드에 부화가 생기면 추가 생성

파드의 개수도 쉽게 증가시킬수 있음

리소스 정리

EKS 노드 그룹 삭제

EKS 클러스터 삭제 → 인스턴스, 시작템플릿, ASG 등을 확인

CloudFormation 스택 삭제

VPC 삭제

계정, 역할 삭제

Terraform - 선언 블록

_민주 — Wed, 22 Nov 2023 08:47:09 +0900

HCL(Hashicorp Comfiguration Language)

테라폼에서 사용하는 설정 언어

확장자 .tf

선언 블록

- provider

클라우드 서비스 또는 인프라 스트럭처를 제공하는 공급자를 정의

테라폼과 외부 서비스를 연결해주는 기능을 하는 모듈

ex) AWS, Google Cloud Platform, Microsoft Azure - 범용 클라우드 서비스

GitHub, DataDog, DNSimple - 특정 기능을 제공하는 서비스

MySQL, RabbitMQ, Docker - 로컬 서비스

- resource

provider가 제공하는 실제 자원을 정의

- variable

변수를 정의 (외부에서 입력 받음)

- local

지역 변수를 정의 (해당 파일 안에 정의되어있음)

- output

결과를 출력

- data

provider가 제공해주는 리소스의 정보

- terraform

테라폼 구성을 정의

# provider

provider version

테라폼 v0.13 이전	테라폼 v0.13 이후
provider 블록에 프로바이더 버전을 명시	terraform 블록안에 required_providers에 정의
provider "aws" { version = "~> 4.2.0" region = "ap-northeast-2" }	terraform { required_version = ">= 1.0.0" required_providers { aws = { source = "hashicorp/aws" version = "~> 4.2.0" } } }

# resource

리소스 선언

resource "<프로바이더 이름>_<프로바이더가 제공하는 리소스 유형>" "<이름>" {

<인수> = <값>

}

terraform {
  required_version = ">= 1.0.0"
}


resource "local_file" "abc" {
  content  = "abc"
  filename = "${path.module}/abc.txt"
}


resource "local_file" "def" {
  content  = "def"
  filename = "${path.module}/def.txt"
}

C:\aws> terraform init -reconfigure

Initializing the backend...

Initializing provider plugins...
- Reusing previous version of hashicorp/local from the dependency lock file
- Using previously-installed hashicorp/local v2.4.0

Terraform has been successfully initialized!

You may now begin working with Terraform. Try running "terraform plan" to see
any changes that are required for your infrastructure. All Terraform commands
should now work.

If you ever set or change modules or backend configuration for Terraform,
rerun this command to reinitialize your working directory. If you forget, other
commands will detect it and remind you to do so if necessary.

C:\aws> terraform init -migrate-state

Initializing the backend...
Terraform has detected you're unconfiguring your previously set "local" backend.
Do you want to copy existing state to the new backend?
  Pre-existing state was found while migrating the previous "local" backend to the
  newly configured "local" backend. No existing state was found in the newly
  configured "local" backend. Do you want to copy this state to the new "local"
  backend? Enter "yes" to copy and "no" to start with an empty state.

  Enter a value: yes
  ...

C:\aws> terraform apply
local_file.test: Refreshing state... [id=1eebdf4fdc9fc7bf283031b93f9aef3338de9052]

Terraform used the selected providers to generate the following execution plan.
Resource actions are indicated with the following symbols:
  + create
  - destroy

Terraform will perform the following actions:

...

local_file.test: Destroying... [id=1eebdf4fdc9fc7bf283031b93f9aef3338de9052]
local_file.test: Destruction complete after 0s
local_file.abc: Creating...				⇐ 의존 관계가 없는 경우 테라폼은 병렬 실행 방식으로 동작
local_file.def: Creating...
local_file.def: Creation complete after 0s [id=589c22335a381f122d129225f5c0ba3056ed5811]
local_file.abc: Creation complete after 0s [id=a9993e364706816aba3e25717850c26c9cd0d89d]

Apply complete! Resources: 2 added, 0 changed, 1 destroyed.

#1 의존관계

terraform {
  required_version = ">= 1.0.0"
}


resource "local_file" "abc" {
  content  = "abc"
  filename = "${path.module}/abc.txt"
}


resource "local_file" "def" {
  content  = local_file.abc.content			# <<< local_file def가 abc에 의존하도록 수정
  filename = "${path.module}/def.txt"
}

C:\aws> terraform destroy
C:\aws> terraform apply
		:
local_file.abc: Creating...
local_file.abc: Creation complete after 0s [id=a9993e364706816aba3e25717850c26c9cd0d89d]
local_file.def: Creating...
local_file.def: Creation complete after 0s [id=a9993e364706816aba3e25717850c26c9cd0d89d]

Apply complete! Resources: 2 added, 0 changed, 0 destroyed.

- terraform graph

C:\aws> terraform graph
digraph {
        compound = "true"
        newrank = "true"
        subgraph "root" {
                "[root] local_file.abc (expand)" [label = "local_file.abc", shape = "box"]
                "[root] local_file.def (expand)" [label = "local_file.def", shape = "box"]
                "[root] provider[\"registry.terraform.io/hashicorp/local\"]" [label = "provider[\"registry.terraform.io/hashicorp/local\"]", shape = "diamond"]
                "[root] local_file.abc (expand)" -> "[root] provider[\"registry.terraform.io/hashicorp/local\"]"
                "[root] local_file.def (expand)" -> "[root] local_file.abc (expand)"
                "[root] provider[\"registry.terraform.io/hashicorp/local\"] (close)" -> "[root] local_file.def (expand)"
                "[root] root" -> "[root] provider[\"registry.terraform.io/hashicorp/local\"] (close)"
        }
}

- https://dreampuf.github.io/GraphvizOnline

#2 확실하게 의존관계를 명시하고 싶을 경우

terraform {
  required_version = ">= 1.0.0"
}


resource "local_file" "abc" {
  content  = "abc"
  filename = "${path.module}/abc.txt"
}


resource "local_file" "def" {

<======================================================
  depends_on = [ local_file.abc ]         # 명시적으로 의존 관계(=종속성)를 정의
======================================================>

  content  = "def"
  filename = "${path.module}/def.txt"
}

C:\aws> terraform destroy
C:\aws> terraform apply
		:
local_file.abc: Creating...
local_file.abc: Creation complete after 0s [id=a9993e364706816aba3e25717850c26c9cd0d89d]
local_file.def: Creating...
local_file.def: Creation complete after 0s [id=589c22335a381f122d129225f5c0ba3056ed5811]

#3 리소스 구성에서 인수와 속성을 참조할 수 있음

인수 : 리소스 생성 시 사용자가 선언하는 값

속성 : 사용자가 설정하는 것은 불가능하지만 리솟스 생성 이후 획득 가능한 리소스 고유값

- 리소스 참조

<프로바이더 이름>_<프로바이더가 제공하는 리소스 유형>.<이름>.<인수>

<프로바이더 이름>_<프로바이더가 제공하는 리소스 유형>.<이름>.<속성>

# 생명주기 메타인자(The lifecycle Meta-Argument)

기본 생명주기를 의도적으로 변경할 때 사용

create_before_destroy (bool): 리소스 수정 시 신규 리소스를 우선 생성하고 기존 리소스를 삭제
prevent_destroy (bool): 해당 리소스를 삭제하려 할 때 명시적으로 거부
ignore_changes (list): 리소스 요소에 선언된 인수의 변경 사항을 테라폼 실행 시 무시
precondition: 리스트 요소에 선언된 인수의 조건을 검증
postcondition: plan과 applay 이후의 결과를 속성 값으로 검증

# 입력 변수

선언

variable "<이름>" {

<인수> = <값>

}

variable "string" {
  type = string
  description = "string 변수"
  default = "mystring"
}

output "string" {
  value = var.string
}

variable "number" {
  type = number
  default = 1234  
}

output "number" {
  value = var.number
}

variable "boolean" {
  type = bool
  default = true
}

output "boolean" {
  value = var.boolean
}

variable "list" {
  type = list
  default = ["aaa", "bbb", "ccc", "ddd"]
}

output "list_index_0" {
  value = var.list.0
}

output "list_all" {
  value = var.list
}

output "list_all_upper" {
  value = [
    for v in var.list:
      upper(v)
  ]
}

variable "map" {
  type = map
  default = {
    aws = "amazon",
    azure = "microsoft",
    gcp = "google"
  }  
}

output "map_all" {
  value = var.map
}

output "map_all_upper" {
  value = [
    for k in var.map:
      upper(k)
  ]
}

#1 민감한 변수 취급

variable "password" {
  sensitive = true
}

resource "local_file" "abc" {
  content = var.password
  filename = "${path.module}/abc.txt"
}

C:\aws> terraform apply
var.password
  Enter a value:				⇐ 입력하는 내용이 표시되지 않음

local_file.abc: Refreshing state... [id=57b2ad99044d337197c0c39fd3823568ff81e48a]

Terraform used the selected providers to generate the following execution plan.
Resource actions are indicated with the following symbols:
-/+ destroy and then create replacement

Terraform will perform the following actions:

  # local_file.abc must be replaced
-/+ resource "local_file" "abc" {
      ~ content              = (sensitive value) # forces replacement ⇐ 입력하는 내용이 표시되지 않음
      ~ content_base64sha256 = "oHXRfz1FMHOFP4E4OMFbgCO4xIcDhDY1T+WZw5QuH5U=" -> (known after apply)
      ~ content_base64sha512 = 
...

# 데이터 소스

테라폼으로 정의되지 않는 외부 리소스 또는 저장된 정보를 테라폼 내에서 참조할 때 사용

데이터 소스 정의

data "<프로바이더>_<리소스 유형>" "<이름>" {

<인수> = <값>

}

데이터 소스 참조

terraform {
  required_version = ">= 1.0.0"
}


resource "local_file" "abc" {
  content  = "abc"
  filename = "${path.module}/abc.txt"
}


data "local_file" "abc" {
  filename = local_file.abc.filename
}


resource "local_file" "def" {
  content  = data.local_file.abc.content
  filename = "${path.module}/def.txt"
}

# local

variable "prefix" {
  default = "hello"
}

locals {
  name    = "terraform"
  content = "${var.prefix} ${local.name}"
}

resource "local_file" "abc" {
  content  = local.content
  filename = "${path.module}/abc.txt"
}

# terraform

-semantic versioning

  version = major.minor.patch
  --major 내부 동작의 API가 변경 또는 삭제되거나 하위 호환이 되지 않는 버전
  --minor 신규 기능이 추가되거나 개선되고 하위 호환이 가능한 버전
  --patch 버그 수정 또는 일부 기능이 개선된 하위 호환이 가능한 버전

버전 제약 구문

-- = 또는 연산자 없음 : 지정된 버전만 허용

-- != : 지정된 버전을 제외

-- >, >=, <, <= : 지정한 버전과 비교해서 조건에 맞는 경우 허용

-- ~> : 지정한 버전에서 가장 자리수가 낮은 구성요소만 증가하는 것을 허용

--- ~> x.y → x.y ~ x.y+n

--- ~> x.y.z → x.y.z ~ x.y.z+n

#1 테라폼 버전 확인

C:\aws> terraform version
Terraform v1.6.4
on windows_386
+ provider registry.terraform.io/hashicorp/aws v5.26.0

#2 main.tf 파일에 terraform 블록 추가

terraform {
  required_version = "< 1.0.0"
}

#3 terraform init

C:\aws> terraform init

Initializing the backend...
╷
│ Error: Unsupported Terraform Core version
│
│   on main.tf line 2, in terraform:
│    2:   required_version = "< 1.0.0"
│
│ This configuration does not support Terraform version 1.6.4. To proceed, either choose another supported
│ Terraform version or update this version constraint. Version constraints are normally set for good reason,
│ so updating the constraint may lead to other errors or unexpected behavior.

#4 실행 환경에 맞게 버전 조건을 수정한 후 terraform init 실행

terraform {
  required_version = ">= 1.0.0"
}

C:\aws> terraform init

Initializing the backend...
Initializing provider plugins...

...

# 백엔드 블록

테라폼 실행 시 저장된 상태 파일(State)의 저장 위치를 선언

-- 상태파일 : 코드로 관리되는 리소스 정보 -> 리소스 탐색 및 추적에 사용

작업자들이 테라폼 상태 파일을 공유하기 위해서는 외부 백엔드 저장소가 필요

민감한 데이터가 포함될 수 있으므로 접근 제어가 필요

기본적으로 활성화되는 백엔드는 local ⇒ 작업자의 로컬 환경에 저장하고 관리

테라폼이 실행되는 동안 .terraform.tfstate.lock.info 파일이 생성되면서 해당 상태를 동시에 사용하지 못하도록 잠금 처리

### .terraform.tfstate.lock.info ###
{
"ID":"d30715d2-3b6f-0247-8075-f11fb6e09ac9",
"Operation":"OperationTypeApply",
"Info":"",
"Who":"DESKTOP-O0MUMK8\\myanj@DESKTOP-O0MUMK8",
"Version":"1.6.4",
"Created":"2023-11-21T05:18:38.478762Z",
"Path":"terraform.tfstate"
}

#1 main.tf 수정

terraform {
  required_version = ">= 1.0.0"
}


# https://registry.terraform.io/providers/hashicorp/local/latest/docs/resources/file
resource "local_file" "test" {
  content  = "test content"
  filename = "${path.module}/test.txt"
}

#2 C:\aws> terraform init

-lock=false 옵션을 추가하면 잠금을 무시할 수 있음

#3 백엔드 설정 변경

### main.tf ###

terraform {
  required_version = ">= 1.0.0"

<=========================================
  backend "local" {					
    path = "state/myterraform.tfstate"    		
  }
=========================================>  
}


# https://registry.terraform.io/providers/hashicorp/local/latest/docs/resources/file
resource "local_file" "test" {
  content  = "test content"
  filename = "${path.module}/test.txt"
}

C:\aws> terraform apply

=> state 폴더

myterraform.tfstate 파일이 생성

#4 새로운 백엔드로의 전환을 위한 조건(옵션)

terraform {
  required_version = ">= 1.0.0"


  backend "local" {
    path = "state/myterraform.tfstate.v2"    
  }
}


# https://registry.terraform.io/providers/hashicorp/local/latest/docs/resources/file
resource "local_file" "test" {
  content  = "test content"
  filename = "${path.module}/test.txt"
}

C:\aws> terraform init -migrate-state

Initializing the backend...
Backend configuration changed!

Terraform has detected that the configuration specified for the backend
has changed. Terraform will now check for existing state in the backends.

Do you want to copy existing state to the new backend?
  Pre-existing state was found while migrating the previous "local" backend to the
  newly configured "local" backend. No existing state was found in the newly
  configured "local" backend. Do you want to copy this state to the new "local"
  backend? Enter "yes" to copy and "no" to start with an empty state.

  Enter a value: yes

...

=> state 폴더

myterraform.tfstate.v2 파일이 생성

C:\aws> terraform init -reconfigure

Initializing the backend...

Successfully configured the backend "local"! Terraform will automatically
use this backend unless the backend configuration changes.

Initializing provider plugins...
- Reusing previous version of hashicorp/local from the dependency lock file
- Using previously-installed hashicorp/local v2.4.0

...

⇒ myterraform.tfstate.v3 파일이 생성되지 않음

⇒ terraform apply 명령을 실행하면 myterraform.tfstate.v3 파일이 생성됨

#반복문

- count

resource "local_file" "abc" {
  count    = 5
  content  = "abc"
  filename = "${path.module}/abc${count.index}.txt"
}

variable "names" {
  type    = list(string)
  default = ["aaa", "bbb", "ccc"]
}


resource "local_file" "abc" {
  count    = length(var.names)
  content  = var.names[count.index]
  filename = "${path.module}/file-${var.names[count.index]}-${count.index}.txt"
}

- for_each

variable "venders" {
  type    = map
  default = {
    aws = "amazon",
    azure = "microsoft",
    gcp = "google"
  }
}


resource "local_file" "abc" {
  for_each = var.venders
  content  = each.value
  filename = "${path.module}/file-${each.key}.txt"
}

-for

복합 형식 값의 형태를 반환

-- list : 값 또는 인덱스와 값을 반환

-- map : key 또는 key와 value를 반환

-- set : key 값에 대해 반환

variable "venders" {
  type    = map
  default = {
    aws = "amazon",
    azure = "microsoft",
    gcp = "google"
  }
}

locals {
  products = [ for k, v in var.venders: "${upper(k)}" ]
  venders = [ for k, v in var.venders: "${upper(v)}" ]
  products-venders = [ for k, v in var.venders: "${upper(k)} - ${upper(v)}" ]
}

output "products" {
  value = local.products
}

output "venders" {
  value = local.venders
}

output "products-venders" {
  value = local.products-venders  
}

AWS - Terraform (ASG , LB)

_민주 — Tue, 21 Nov 2023 11:48:46 +0900

웹 서버 클러스터 배포

# ASG 구성

=> EC2 인스턴스 클러스터 시작, 각 인스턴스 상태 모니터링, 실패한 인스턴스 교체, 부하에 따른 클러스터 크기 조정 등 많은 작업을 자동으로 처리

=> 가용성을 제공

#1 시작 구성(Launch Configuration) 정의

~~~~~~~

ASG에서 EC2 인스턴스를 구성하는 방법을 지정

aws_launch_configuration 리소스를 사용 => https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/launch_configuration

- aws_instance 리소스와 거의 동일한 파라미터를 사용

- tags와 user_data_replace_on_change 파라미터를 지원하지 않음

~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~

| +-- ASG는 기본적으로 새 인스턴스를 시작하므로 필요하지 않음

+--- aws_autoscaling_group 리소스에서 처리

- 파라미터 중 다음 두 개는 다른 이름을 가짐

-- ami → image_id

-- vpc_security_group_ids → security_groups

### main.tf ###

provider "aws" {
  region = "ap-northeast-2"
}
<==================================================
# resource "aws_instance" "example" {
#   ami                    = "ami-086cae3329a3f7d75"
#   instance_type          = "t2.micro"
#   vpc_security_group_ids = [aws_security_group.webserversg.id]
#   user_data              = <<-EOF
#     #!/bin/bash
#     echo "Hello, World" > index.html
#     nohup busybox httpd -f -p ${var.service_port} &
#   EOF

#   user_data_replace_on_change = true

#   tags = {
#     Name = "terraform-example"
#   }
# }

resource "aws_launch_configuration" "webserverlg" {
  image_id        = "ami-086cae3329a3f7d75"
  instance_type   = "t2.micro"
  security_groups = [aws_security_group.webserversg.id]
  user_data       = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p ${var.service_port} &
  EOF
}
==================================================>

resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = var.service_port
    to_port     = var.service_port
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080
}

output "public_ip" {
  value       = aws_instance.example.public_ip
  description = "Public IP for WebServer"
}

output "service_url" {
  value       = "http://${aws_instance.example.public_ip}:${var.service_port}"
  description = "WebServer Service URL"
}

#2 ASG 정의

aws_autoscaling_group 리소스로 정의 ⇒ https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/autoscaling_group

### main.tf ###

provider "aws" {
  region = "ap-northeast-2"
}

# resource "aws_instance" "example" {
#   ami                    = "ami-086cae3329a3f7d75"
#   instance_type          = "t2.micro"
#   vpc_security_group_ids = [aws_security_group.webserversg.id]
#   user_data              = <<-EOF
#     #!/bin/bash
#     echo "Hello, World" > index.html
#     nohup busybox httpd -f -p ${var.service_port} &
#   EOF

#   user_data_replace_on_change = true

#   tags = {
#     Name = "terraform-example"
#   }
# }

resource "aws_launch_configuration" "webserverlg" {
  image_id        = "ami-086cae3329a3f7d75"
  instance_type   = "t2.micro"
  security_groups = [aws_security_group.webserversg.id]
  user_data       = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p ${var.service_port} &
  EOF
}

<=========================================================
resource "aws_autoscaling_group" "webserverasg" {
  launch_configuration = aws_launch_configuration.webserverlg.name
  min_size             = 2
  max_size             = 5
  tag {
    key                 = "Name"
    value               = "terraform-asg"
    propagate_at_launch = true
  }
}
=========================================================>

resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = var.service_port
    to_port     = var.service_port
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080
}

output "public_ip" {
  value       = aws_instance.example.public_ip
  description = "Public IP for WebServer"
}

output "service_url" {
  value       = "http://${aws_instance.example.public_ip}:${var.service_port}"
  description = "WebServer Service URL"
}

#3 수명 주기 설정

create_before_destroy를 true로 설정하면 테라폼은 리소스를 교체하는 순서를 반전하여 먼저 대체 리소스를 생성한 다음 (이전 리소스를 가리키는 모든 참조를 새로운 리소스를 가리키도록 업데이트한 후) 이전 리소스를 삭제함

### main.tf ###

provider "aws" {
  region = "ap-northeast-2"
}

# resource "aws_instance" "example" {
#   ami                    = "ami-086cae3329a3f7d75"
#   instance_type          = "t2.micro"
#   vpc_security_group_ids = [aws_security_group.webserversg.id]
#   user_data              = <<-EOF
#     #!/bin/bash
#     echo "Hello, World" > index.html
#     nohup busybox httpd -f -p ${var.service_port} &
#   EOF

#   user_data_replace_on_change = true

#   tags = {
#     Name = "terraform-example"
#   }
# }

resource "aws_launch_configuration" "webserverlg" {
  image_id        = "ami-086cae3329a3f7d75"
  instance_type   = "t2.micro"
  security_groups = [aws_security_group.webserversg.id]
  user_data       = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p ${var.service_port} &
  EOF
<========================================================================
  # 시작 구성을 재생성해야 하는 경우, 새로운 시작 구성을 먼저 생성한 후 
  예전 시작 구성을 삭제하도록 설정
  lifecycle {
    create_before_destroy = true
  }
========================================================================>
}

resource "aws_autoscaling_group" "webserverasg" {
  launch_configuration = aws_launch_configuration.webserverlg.name
  min_size             = 2
  max_size             = 5
  tag {
    key                 = "Name"
    value               = "terraform-asg"
    propagate_at_launch = true
  }
}

resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = var.service_port
    to_port     = var.service_port
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080
}

output "public_ip" {
  value       = aws_instance.example.public_ip
  description = "Public IP for WebServer"
}

output "service_url" {
  value       = "http://${aws_instance.example.public_ip}:${var.service_port}"
  description = "WebServer Service URL"
}

#4 데이터 소스를 이용해서 서브넷 정보를 조회

데이터 소스

- 테라폼을 실행할 때 마다 공급자에서 가져오는 읽기 전용 정보

- 공급자의 API를 호출해서 해당 데이터를 나머지 테라폼 코드에서 사용할 수 있도록 하는 방법

- 예) AWS 공급자의 경우, VPC 데이터, Subnet 데이터, AMI ID, IP 주소 범위, 현재 사용자의 ID 등

- data "<PROVIDER>_<TYPE>" "<NAME>" {

[CONFIG ...]

}

-- PROVIDER 공급자 이름 (예: aws)

-- TYPE 데이터 소스 유형 (예: vpc)

-- NAME 데이터 소스를 참조할 때 사용할 식별자

-- CONFIG 데이터 소스와 관련된 parametar

- 조회방법 data.<PROVIDER>_<TYPE>.<NAME>.<ATTRIBUTE>

### main.tf ###

provider "aws" {
  region = "ap-northeast-2"
}

# resource "aws_instance" "example" {
#   ami                    = "ami-086cae3329a3f7d75"
#   instance_type          = "t2.micro"
#   vpc_security_group_ids = [aws_security_group.webserversg.id]
#   user_data              = <<-EOF
#     #!/bin/bash
#     echo "Hello, World" > index.html
#     nohup busybox httpd -f -p ${var.service_port} &
#   EOF

#   user_data_replace_on_change = true

#   tags = {
#     Name = "terraform-example"
#   }
# }

resource "aws_launch_configuration" "webserverlg" {
  image_id        = "ami-086cae3329a3f7d75"
  instance_type   = "t2.micro"
  security_groups = [aws_security_group.webserversg.id]
  user_data       = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p ${var.service_port} &
  EOF
  lifecycle {
    create_before_destroy = true
  }
}

<========================================================
# https://registry.terraform.io/providers/hashicorp/aws/latest/docs/data-sources/vpc
data "aws_vpc" "default" {
  default = true
}

# https://registry.terraform.io/providers/hashicorp/aws/latest/docs/data-sources/subnets
data "aws_subnets" "default" {
  filter {
    name   = "vpc-id"
    values = [data.aws_vpc.default.id]
  }
}
========================================================>

resource "aws_autoscaling_group" "webserverasg" {
  launch_configuration = aws_launch_configuration.webserverlg.name
<========================================================
  vpc_zone_identifier  = data.aws_subnets.default.ids
========================================================>
  min_size             = 2
  max_size             = 5
  tag {
    key                 = "Name"
    value               = "terraform-asg"
    propagate_at_launch = true
  }
}

resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = var.service_port
    to_port     = var.service_port
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080
}

<========================================================
# aws_instance 리소스를 삭제했으므로 관련한 출력을 주석 처리
# output "public_ip" {
#   value       = aws_instance.example.public_ip
#   description = "Public IP for WebServer"
# }

# output "service_url" {
#   value       = "http://${aws_instance.example.public_ip}:${var.service_port}"
#   description = "WebServer Service URL"
# }
========================================================>

data "aws_vpc" "default" { default = true }	default vpc를 가져옴
filter { name = "vpc-id" values = [data.aws_vpc.default.id] }	default vpc 이름을 지닌 vpc의 서브넷을 추출
vpc_zone_identifier = data.aws_subnets.default.ids	default 값의 vpc의 서브넷 아이디를 추출

***error

디폴트 서브넷 중 일부는 t2.micro 인스턴스 타입을 지원하지 않는 가용영역에 생성되어 있으므로 인스턴스 생성 시 아래와 같은 오류가 발생할 수 있음

aws_autoscaling_group.webserverasg: Creating...
╷
│ Error: waiting for Auto Scaling Group (terraform-20231121005600354100000002) capacity satisfied: scaling activity (60b62fbd-8263-1441-9a0f-8165a3723c81): Failed: Authentication Failure. Launching EC2 instance failed.
│ scaling activity (66b62fbd-8260-c3f6-484d-9ea65ebf73b0): Failed: Authentication Failure. Launching EC2 instance failed.
│
│   with aws_autoscaling_group.webserverasg,
│   on main.tf line 50, in resource "aws_autoscaling_group" "webserverasg":
│   50: resource "aws_autoscaling_group" "webserverasg" {

해결방안 : 가용 영역 지우기 or filter 사용

- t2.micro 인스턴스 타입을 지원하지 않는 가용영역에 생성된 서브넷을 삭제하고 테스트를 진행

C:\aws> terraform apply
data.aws_vpc.default: Reading...
data.aws_vpc.default: Read complete after 1s [id=vpc-06c8a58be6f0a60f4]
data.aws_subnets.default: Reading...
data.aws_subnets.default: Read complete after 0s [id=ap-northeast-2]

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create

...

Plan: 3 to add, 0 to change, 0 to destroy.

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value: yes

aws_security_group.webserversg: Creating...
aws_security_group.webserversg: Creation complete after 1s [id=sg-0a292fea0dd4310dc]
aws_launch_configuration.webserverlg: Creating...
aws_launch_configuration.webserverlg: Creation complete after 1s [id=terraform-20231121012509275900000001]
aws_autoscaling_group.webserverasg: Creating...
aws_autoscaling_group.webserverasg: Still creating... [10s elapsed]
aws_autoscaling_group.webserverasg: Still creating... [20s elapsed]
aws_autoscaling_group.webserverasg: Still creating... [30s elapsed]
aws_autoscaling_group.webserverasg: Still creating... [40s elapsed]
aws_autoscaling_group.webserverasg: Creation complete after 44s [id=terraform-20231121012509767100000002]

Apply complete! Resources: 3 added, 0 changed, 0 destroyed.

propagate_at_launch : 인스턴스 이름 생성

# 로드밸런서 배포

로드밸런서를 배포해서 서버 전체에 트래픽을 분산하고 모든 사용자들에게 로드밸런서의 주소를 통해서 접근할 수 있도록 제한

#1 ALB(Aws Load Balancer) 생성 = aws_lb

https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/lb

resource "aws_lb" "webserverlb" {
  name               = "terraform-lb"
  load_balancer_type = "application"
  subnets            = data.aws_subnets.default.ids
}

#2 로드밸런스에 대한 리스너를 정의 = aws_lb_listener

https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/lb_listener

resource "aws_lb_listener" "http" {
  load_balancer_arn = aws_lb.webserverlb.arn
  port              = 80
  protocol          = "HTTP"
  # 리스너 규칙과 일치하지 않는 요청에 대해 기본 응답으로 404 페이지를 반환
  default_action {
    type = "fixed-response"          
    fixed_response {
      status_code  = 404
      content_type = "text/plain"
      message_body = "404 Not Found"
    }
  }
}

#3 보안 그룹 추가

들어오는 포드 80 허용 나가는 모든 포트 허용

resource "aws_security_group" "lbsg" {
  name = "terraform-lbsg"
  ingress {
    from_port   = 80
    to_port     = 80
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

#4 로드밸런스에 보안그룹을 적용

resource "aws_lb" "webserverlb" {
  name               = "terraform-lb"
  load_balancer_type = "application"
  subnets            = data.aws_subnets.default.ids
  security_groups    = [aws_security_group.lbsg.id]			# 추가
}

#5 로드밸런스의 대상그룹을 정의 = aws_lb_target-group

https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/lb_target_group

resource "aws_lb_target_group" "webservertg" {
  name     = "terraform-tg"
  port     = var.service_port
  protocol = "HTTP"
  vpc_id   = data.aws_vpc.default.id
  health_check {
    path                = "/"
    protocol            = "HTTP"
    matcher             = "200"
    interval            = 15
    timeout             = 3
    healthy_threshold   = 2
    unhealthy_threshold = 2
  }
}

#6 ASG에 대상 그룹 지정

인스턴스가 추가될 경우(새로 생성되는 경우) ALB 의 대상그룹에 포함되어야함

resource "aws_autoscaling_group" "webserverasg" {
  launch_configuration = aws_launch_configuration.webserverlg.name
  vpc_zone_identifier  = data.aws_subnets.default.ids

<=================================================================
  target_group_arns = [aws_lb_target_group.webservertg.arn]	# 추가
  health_check_type = "ELB"						# 추가
=================================================================>

  min_size = 2
  max_size = 5
  tag {
    key                 = "Name"
    value               = "terraform-asg"
    propagate_at_launch = true
  }
}

#7 리스너 규칙을 추가

로드밸런서로 들어와 ASG에 전달해야하므로

http 80으로 들어오면 모든 경로를 target그룹으로 포워드(전송)

resource "aws_lb_listener_rule" "asg" {
  listener_arn = aws_lb_listener.http.arn
  priority = 100
  condition {
    path_pattern {
      values = ["*"]
    }
  }
  action {
    type = "forward"
    target_group_arn = aws_lb_target_group.webservertg.arn
  }  
}

#8 로드밸런스의 주소(DNS 이름)를 출력

output "alb_dns_name" {
  value       = aws_lb.webserverlb.dns_name
  description = "Domain name of the ELB"
}

### main.tf ###

provider "aws" {
  region = "ap-northeast-2"
}

# resource "aws_instance" "example" {
#   ami                    = "ami-086cae3329a3f7d75"
#   instance_type          = "t2.micro"
#   vpc_security_group_ids = [aws_security_group.webserversg.id]
#   user_data              = <<-EOF
#     #!/bin/bash
#     echo "Hello, World" > index.html
#     nohup busybox httpd -f -p ${var.service_port} &
#   EOF

#   user_data_replace_on_change = true

#   tags = {
#     Name = "terraform-example"
#   }
# }

resource "aws_launch_configuration" "webserverlg" {
  image_id        = "ami-086cae3329a3f7d75"
  instance_type   = "t2.micro"
  security_groups = [aws_security_group.webserversg.id]
  user_data       = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p ${var.service_port} &
  EOF
  lifecycle {
    create_before_destroy = true
  }
}


data "aws_vpc" "default" {
  default = true
}

data "aws_subnets" "default" {
  filter {
    name   = "vpc-id"
    values = [data.aws_vpc.default.id]
  }
}

#1 ALB(Aws Load Balancer) 생성 = aws_lb
resource "aws_lb" "webserverlb" {
  name               = "terraform-lb"
  load_balancer_type = "application"
  subnets            = data.aws_subnets.default.ids
  security_groups    = [aws_security_group.lbsg.id]			#4 로드밸런스에 보안그룹을 적용
}
#5 로드밸런스의 대상그룹을 정의
resource "aws_lb_target_group" "webservertg" {
  name     = "terraform-tg"
  port     = var.service_port
  protocol = "HTTP"
  vpc_id   = data.aws_vpc.default.id
  health_check {
    path                = "/"
    protocol            = "HTTP"
    matcher             = "200"
    interval            = 15
    timeout             = 3
    healthy_threshold   = 2
    unhealthy_threshold = 2
  }
}
#2 로드밸런스에 대한 리스너를 정의 
resource "aws_lb_listener" "http" {
  load_balancer_arn = aws_lb.webserverlb.arn
  port              = 80
  protocol          = "HTTP"
  # 리스너 규칙과 일치하지 않는 요청에 대해 기본 응답으로 404 페이지를 반환
  default_action {
    type = "fixed-response"          
    fixed_response {
      status_code  = 404
      content_type = "text/plain"
      message_body = "404 Not Found"
    }
  }
}
#3 보안 그룹 추가
resource "aws_security_group" "lbsg" {
  name = "terraform-lbsg"
  ingress {
    from_port   = 80
    to_port     = 80
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
  egress {
    from_port   = 0
    to_port     = 0
    protocol    = "-1"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

resource "aws_autoscaling_group" "webserverasg" {
  launch_configuration = aws_launch_configuration.webserverlg.name
  vpc_zone_identifier  = data.aws_subnets.default.ids

  #6 ASG에 대상 그룹 추가
  target_group_arns = [aws_lb_target_group.webservertg.arn]	# 추가
  health_check_type = "ELB"						# 추가

  min_size             = 2
  max_size             = 5
  tag {
    key                 = "Name"
    value               = "terraform-asg"
    propagate_at_launch = true
  }
}
#7 리스너 규칙을 추가
resource "aws_lb_listener_rule" "asg" {
  listener_arn = aws_lb_listener.http.arn
  priority = 100
  condition {
    path_pattern {
      values = ["*"]
    }
  }
  action {
    type = "forward"
    target_group_arn = aws_lb_target_group.webservertg.arn
  }  
}


resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = var.service_port
    to_port     = var.service_port
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080
}

# aws_instance 리소스를 삭제했으므로 관련한 출력을 주석 처리
# output "public_ip" {
#   value       = aws_instance.example.public_ip
#   description = "Public IP for WebServer"
# }

# output "service_url" {
#   value       = "http://${aws_instance.example.public_ip}:${var.service_port}"
#   description = "WebServer Service URL"
# }

#8 로드밸런스의 주소(DNS 이름)를 출력
output "alb_dns_name" {
  value       = aws_lb.webserverlb.dns_name
  description = "Domain name of the ELB"
}

C:\aws> terraform apply
data.aws_vpc.default: Reading...
aws_security_group.webserversg: Refreshing state... [id=sg-0a292fea0dd4310dc]
aws_launch_configuration.webserverlg: Refreshing state... [id=terraform-20231121012509275900000001]
data.aws_vpc.default: Read complete after 0s [id=vpc-06c8a58be6f0a60f4]
data.aws_subnets.default: Reading...
data.aws_subnets.default: Read complete after 0s [id=ap-northeast-2]
aws_autoscaling_group.webserverasg: Refreshing state... [id=terraform-20231121012509767100000002]

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create
  ~ update in-place

...

aws_lb.webserverlb: Creation complete after 2m51s [id=arn:aws:elasticloadbalancing:ap-northeast-2:561845507088:loadbalancer/app/terraform-lb/793b1b20c2d72a4a]
aws_lb_listener.http: Creating...
aws_lb_listener.http: Creation complete after 1s [id=arn:aws:elasticloadbalancing:ap-northeast-2:561845507088:listener/app/terraform-lb/793b1b20c2d72a4a/77f59508b44f6040]
aws_lb_listener_rule.asg: Creating...
aws_lb_listener_rule.asg: Creation complete after 0s [id=arn:aws:elasticloadbalancing:ap-northeast-2:561845507088:listener-rule/app/terraform-lb/793b1b20c2d72a4a/77f59508b44f6040/ff57d8ec2a971a3d]

Apply complete! Resources: 5 added, 1 changed, 0 destroyed.

Outputs:

alb_dns_name = "terraform-lb-977828332.ap-northeast-2.elb.amazonaws.com"

리소스 정리

C:\aws> terraform destroy

AWS - 웹 서비스 환경 구성 실습

_민주 — Mon, 20 Nov 2023 23:58:23 +0900

#1 IAM 사용자 생성

admin / p@ssw0rd

#2 (다른 브라우저) 복사한 url 열고 생성한 admin 사용자로 로그인

#3 네트워크 구성 ( admin 사용자)

#3-1 vpc 생성

#3-2 서브넷 생성 (public-subnet-A / public-subnet-B)

#3-3 인터넷게이트웨이 생성

#3-4 라우팅 테이블에 인터넷 게이트웨이로의 라우팅을 추가

#3-5 public-subnet-A 서브넷을 퍼블릭 서브넷으로 설정(또는 확인)

#3-6 public-subnet-C 서브넷을 퍼블릭 서브넷으로 설정(또는 확인)

#3-7 보안 그룹 생성

서브넷에 생성할(배치할) 인스턴스로 HTTP(80), SSH(22) 접근을 허용하도록 설정

#4 웹 서버 인스턴스를 생성

#4-1 웹 서버 인스턴스를 생성

#!/bin/sh

amazon-linux-extras install -y lamp-mariadb10.2-php7.2 php7.2
yum -y install httpd php-mbstring

# Start the web server
chkconfig httpd on
systemctl start httpd

# Install the web pages for our lab
if [ ! -f /var/www/html/immersion-day-app-php7.tar.gz ]; then
cd /var/www/html
wget https://aws-joozero.s3.ap-northeast-2.amazonaws.com/immersion-day-app-php7.tar.gz
tar xvfz immersion-day-app-php7.tar.gz
fi

cat <<EOF > /var/www/html/get-index-meta-data.php
<?php
  \$hostname = gethostname();
  \$results = explode(".", \$hostname);
  echo "<table style='width:100%'>";
  echo "<tr><th style='width:30%'>Meta-Data</th><th style='width:70%'>Value</th></tr>";
  echo "<tr><td>Private IP DNS Name</td><td>".\$hostname."</td></tr>";
  echo "<tr><td>Private IP</td><td>".getHostByName(\$hostname)."</td></tr>";
  echo "<tr><td>Region</td><td>".\$results[1]."</td></tr>";
  echo "</table>";
?>
EOF

# Install the AWS SDK for PHP
if [ ! -f /var/www/html/aws.zip ]; then
cd /var/www/html
mkdir vendor
cd vendor
wget https://docs.aws.amazon.com/aws-sdk-php/v3/download/aws.zip
unzip aws.zip
fi

# Update existing packages
yum -y update

- 퍼블릭 IPv4주소로 확인해서 브라우저로 접근

- webserver EC2 인스턴스에 SSH 접속

- SSH Client 프로그램을 이용해서 접속

#4-2 (웹 서버 설정이 모든 끝난 상태에서) AMI를 생성

#4-3 생성한 webserver-ami 이미지를 이용해서 웹 서버 인스턴스를 public-subnet-C 서브넷에 인스턴스를 생성 → 사용자 데이터 항목에 입력했던 스크립트(프로그램 설치 및 설정)의 실행 과정을 생략할 수 있음

#5 로드밸런서 구성

동일한 내용의 서비스를 제공하는 인스턴스 두 개가 실행되고 있음
개별 인스턴스의 주소로 접속하는 경우, 이용의 불편과 부하 집중의 문제가 문제가 발생할 수 있음
⇒ 로드밸런서를 이용해서 서비스될 수 있도록 수정
⇒ 부하 분산과 서비스 편의를 제공

#5-1 애플리케이션 로드밸런서를 생성

#5-2 로드밸런서 유형을 선택

로드밸런서는 SSH 접속이 필요 없으므로, 80 포트 접속만 허용하는 보안 그룹을 새롭게 생성

#5-3 로드밸런서 상태 및 DNS 이름을 확인

#5-4 웹 브라우저를 이용해서 DNS 이름으로 접속

#6 로드밸런서를 통해서만 서비스를 이용할 수 있도록 제한

현재는 사용자가 로드밸런서를 이용하지 않고 개별 인스턴스로 직접 접근하는 것도 가능
⇒ 모든 요청을 로드밸런서를 통해서만 처리하도록 제한
⇒ 개별 인스턴스에 로드밸런서로부터 오는 HTTP(80)만 허용하도록 수정 ⇒ 보안 그룹(webserver-sg)을 수정

- 브라우저를 이용해서 개별 인스턴스의 퍼블릭 주소로 접속되는지를 확인

- 로드밸런서 주소로 접속하면 정상적으로 서비스되는 것을 확인

AWS - Terraform

_민주 — Mon, 20 Nov 2023 19:08:59 +0900

Terraform

공급자의 고유한 기능을 활용하여 각 공급자에 특정한 코드를 작성할 수 있도록 하는 동시에

모든 공급자에 대해 동일한 언어, 도구 세트 및 IaC 방식을 사용할 수 있도록 하는 것

인프라 구조를 코드로 정의하고 관리하는 도구로 클라우드 환경에서의 자원 배포 및 관리를 간편하게 할 수 있음

terraform 코드

확장자가 .tf 인 파일에 HCL(HachCorp 구성언어)로 작성

-- 선언적 언어

: 어떤 형태의 최종적인 인프라의 목표를 명시 최종적인 결과만 중요

항상 인프라의 최신 상태를 의미

<-> 절차적 언어: 실행되기 위한 과정들이 중요

- terraform init

테라폼 코드를 스캔하고, 사용 중인 공급자를 파악하고 해당 코드를 다운로드 ⇒ .terraform 폴더에 다운로드

C:\aws>terraform init

Initializing the backend...

Initializing provider plugins...
- Finding latest version of hashicorp/aws...
- Installing hashicorp/aws v5.26.0...                  ⇐ provider를 가져와서 설치
- Installed hashicorp/aws v5.26.0 (signed by HashiCorp)
...

- terraform plan

인프라를 변경하기 전에 테라폼이 수행할 작업을 확인

+ 리소스 추가

- 리소스 삭제

~ 리소스 수정

C:\aws> terraform plan

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create

Terraform will perform the following actions:
 # aws_instance.example will be created
  + resource "aws_instance" "example" {
      + ami                                  = "ami-01123b84e2a4fba05"
      + arn                                  = (known after apply)

...

- terraform apply

출력을 표시하고 실제로 이 계획을 진행할 것인지 확인하라는 메시지를 표시

C:\aws> terraform apply

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create

Terraform will perform the following actions:

  # aws_instance.example will be created
  + resource "aws_instance" "example" {
      + ami                                  = "ami-01123b84e2a4fba05"
      + arn                                  = (known after apply)
...

- terraform destroy

생성된 인프라를 삭제

C:\aws> terraform destroy
aws_security_group.webserversg: Refreshing state... [id=sg-0e6dca42f57a8b3f5]
aws_instance.example: Refreshing state... [id=i-06e3a32a8e93a8958]
...

단일 서버 배포

#1 AWS 계정 생성

#2 Terraform 설치

https://developer.hashicorp.com/terraform/install?product_intent=terraform

Install | Terraform | HashiCorp Developer

Explore Terraform product documentation, tutorials, and examples.

developer.hashicorp.com

C:\aws> set path
Path=C:\Program Files (x86)\VMware\VMware Workstation\bin\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Bandizip\;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Program Files\Git\cmd;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\jdk-17.0.2\bin;C:\Program Files\Go\bin;c:\Users\myanj\Downloads\openssl-0.9.8k_X64\bin\;c:\Users\myanj\Downloads\openssl-0.9.8k_X64\;C:\HashiCorp\Vagrant\bin;C:\minikube;C:\Program Files (x86)\Bitvise SSH Client;C:\Program Files\Docker\Docker\resources\bin;C:\Program Files\nodejs\;C:\Program Files\Amazon\AWSCLIV2\;C:\Users\myanj\AppData\Local\Programs\Python\Python311\Scripts\;C:\Users\myanj\AppData\Local\Programs\Python\Python311\;C:\Users\myanj\AppData\Local\Microsoft\WindowsApps;C:\Users\myanj\go\bin;C:\Users\myanj\AppData\Roaming\npm
PATHEXT=.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC

경로에 넣으면 어디에서든지 사용가능

C:\aws> terraform
Usage: terraform [global options] <subcommand> [args]
. . .

#3 AWS 계정 정보를 등록

C:\Users\User>aws configure
AWS Access Key ID [****************V6F4]: 사용자 생성시 발급받은 Access Key
AWS Secret Access Key [****************1/Sz]: 사용자 생성시 발급받은 Secret Key
Default region name [ap-northeast-2]:
Default output format [json]:

#4 기본 VPC를 추가

기본 vpc가 없는 경우 => 가상 네트워크를 생성하기 위해

#5 terraform provider 생성

### main.tf ###

# 사용하려는 공급자를 구성
# https://registry.terraform.io/providers/hashicorp/aws/latest/docs
provider "aws" {
  region = "ap-northeast-2"
}


# 일반적인 리소스 생성 구문
# resource "<PROVIDER>_<TYPE>" "<NAME>" {
#     [CONFIG ...]    
# }
resource "aws_instance" "example" {
  ami = "ami-086cae3329a3f7d75"     # 인스턴스 실행에 사용할 머신 이미지 => 반드시 Ubuntu 이미지를 사용
  instance_type = "t2.micro"        # 인스턴스 유형                       ~~~~~ 사용자 데이터 실행을 위해 
}

- terraform 초기화

C:\aws> terraform init
Initializing the backend...

Initializing provider plugins...
- Finding latest version of hashicorp/aws...
- Installing hashicorp/aws v5.26.0...				⇐ provider를 가져와서 설치
- Installed hashicorp/aws v5.26.0 (signed by HashiCorp)
...

- 배포할 리소스 확인

C:\aws> terraform plan

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create

Terraform will perform the following actions:

  # aws_instance.example will be created
  + resource "aws_instance" "example" {
      + ami                                  = "ami-01123b84e2a4fba05"
      + arn                  
...

- 배포

C:\aws> terraform apply

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create

Terraform will perform the following actions:

  # aws_instance.example will be created
  + resource "aws_instance" "example" {
      + ami                            
...

.tstate 실행된 정보들이 적혀있음 .lock 테라폼에서 관리하는 파일

=> 협업 시 동일한 인프라를 구성하기 위해 깃헙에 default 파일들을 공유

#6 main.tf를 수정 - 인스턴스의 이름을 부여

### main.tf ###
provider "aws" {
  region = "ap-northeast-2"
}

# https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance
resource "aws_instance" "example" {
  ami = "ami-01123b84e2a4fba05"
  instance_type = "t2.micro"
<======================================
  tags = {
    Name = "terraform-example"
  }
  ======================================>
}

C:\aws> terraform apply
aws_instance.example: Refreshing state... [id=i-060ecf5b27718c689]

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  ~ update in-place

Terraform will perform the following actions:

  # aws_instance.example will be updated in-place
  ~ resource "aws_instance" "example" {
        id                                   = "i-060ecf5b27718c689"
      ~ tags                                 = {
          + "Name" = "terraform-example"
        }
      ~ tags_all                             = {
          + "Name" = "terraform-example"
        }
        # (30 unchanged attributes hidden)

        # (8 unchanged blocks hidden)
    }

Plan: 0 to add, 1 to change, 0 to destroy.

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value: yes

aws_instance.example: Modifying... [id=i-060ecf5b27718c689]
aws_instance.example: Modifications complete after 1s [id=i-060ecf5b27718c689]

Apply complete! Resources: 0 added, 1 changed, 0 destroyed.

단일 웹 서버 배포 - HTTP 요청에 응답할 수 있는 웹 서버를 EC2 배포

#1 코드 수정

#!/bin/bash
echo "Hello, World" > index.html
nohup busybox httpd -f -p 8080 &

==> 간단한 웹 서버를 띄움 / 8080으로 접근하면 Hello, World 를 반환

### main.tf ###
provider "aws" {
  region = "ap-northeast-2"
}

resource "aws_instance" "example" {
  ami = "ami-01123b84e2a4fba05"
  instance_type = "t2.micro"
  
  =============================================
  # https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance#user_data
  # 사용자 데이터는 첫번째 부팅 시에만 실행
  # EC2 생성시 작성했던 userdata 와 같음
  =============================================
  user_data = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p 8080 &
  EOF
  =============================================
  # https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance#user_data_replace_on_change
  # user_data가 변경되면 원래 인스턴스를 종료하고 새로운 인스턴스를 시작

  user_data_replace_on_change = true
  =============================================
  
  tags = {
    Name = "terraform-example"
  }
}

** user_data_replace_on_change

: userdata 수정시 삭제하고 새로 생성

#2 재배포

C:\aws> terraform apply
aws_instance.example: Refreshing state... [id=i-060ecf5b27718c689]

   . . . 

    }

Plan: 1 to add, 0 to change, 1 to destroy.

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value: yes

aws_instance.example: Destroying... [id=i-060ecf5b27718c689]
aws_instance.example: Still destroying... [id=i-060ecf5b27718c689, 10s elapsed]
aws_instance.example: Still destroying... [id=i-060ecf5b27718c689, 20s elapsed]
aws_instance.example: Destruction complete after 30s
aws_instance.example: Creating...
aws_instance.example: Still creating... [10s elapsed]
aws_instance.example: Still creating... [20s elapsed]
aws_instance.example: Creation complete after 22s [id=i-004016526705354cc]

Apply complete! Resources: 1 added, 0 changed, 1 destroyed.

#3 새 인스턴스의 퍼블릭 주소 접근

⇒ 8080 포트로 접속이 허용되지 않음 = ssh 로 붙을 수 없음

#4 인바운드 8080 포트를 허용하는 보안그룹을 추가

### main.tf ###
provider "aws" {
  region = "ap-northeast-2"
}

resource "aws_instance" "example" {
  ami = "ami-01123b84e2a4fba05"
  instance_type = "t2.micro"
<================================================  
  # https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance#vpc_security_group_ids
  vpc_security_group_ids = [aws_security_group.webserversg.id]
================================================>
  user_data = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p 8080 &
  EOF

  user_data_replace_on_change = true
  
  tags = {
    Name = "terraform-example"
  }
}

<================================================
# https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/security_group
resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = 8080
    to_port     = 8080
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}
================================================>

C:\aws> terraform apply
aws_instance.example: Refreshing state... [id=i-004016526705354cc]

Terraform used the selected providers to generate the following execution plan. Resource actions are indicated
with the following symbols:
  + create
  ~ update in-place
...
       ~ vpc_security_group_ids               = [
          - "sg-0380b404f6530ca72",
        ] -> (known after apply)
...

aws_security_group.webserversg: Creating...
aws_security_group.webserversg: Creation complete after 1s [id=sg-0c791caedd7ddd330]
aws_instance.example: Modifying... [id=i-004016526705354cc]
aws_instance.example: Modifications complete after 2s [id=i-004016526705354cc]

Apply complete! Resources: 1 added, 1 changed, 0 destroyed.

***ERROR user_data 의 내용이 실행되지 않음

=> Amazon Linux 이미지에는 busybox 명령어가 없음

해결방안 busybox 를 설치 or ubuntu 이미지로 변경

#5 Amazon Linux 이미지를 ubuntu 이미지로 변경 후 배포

### main.tf ###

provider "aws" {
  region = "ap-northeast-2"
}

resource "aws_instance" "example" {
<========================================
  ami = "ami-086cae3329a3f7d75"     # 인스턴스 실행에 사용할 머신 이미지 => 반드시 Ubunt
========================================> 
  instance_type = "t2.micro"  
}

...

C:\aws>terraform destroy <=보안그룹과 인스턴스 내려감

#6 브라우저를 이용해서 서비스 접속을 확인

#7 종속 관계를 그래프로 확인

C:\aws> terraform graph
digraph {
        compound = "true"
        newrank = "true"
        subgraph "root" {
                "[root] aws_instance.example (expand)" [label = "aws_instance.example", shape = "box"]
                "[root] aws_security_group.webserversg (expand)" [label = "aws_security_group.webserversg", shape = "box"]
                "[root] provider[\"registry.terraform.io/hashicorp/aws\"]" [label = "provider[\"registry.terraform.io/hashicorp/aws\"]", shape = "diamond"]
                "[root] aws_instance.example (expand)" -> "[root] aws_security_group.webserversg (expand)"
                "[root] aws_security_group.webserversg (expand)" -> "[root] provider[\"registry.terraform.io/hashicorp/aws\"]"
                "[root] provider[\"registry.terraform.io/hashicorp/aws\"] (close)" -> "[root] aws_instance.example (expand)"
                "[root] root" -> "[root] provider[\"registry.terraform.io/hashicorp/aws\"] (close)"
        }
}

#7 GraphvizOnline 사이트에서 종속성 그래프를 이미지로 변환

https://dreampuf.github.io/GraphvizOnline

구성 가능한 웹 서버 배포

서비스 포트를 입력할 수 있도록 수정

서비스 포트에 따라서 보안그룹의 규칙도 함께 수정되도록 수정

입력 변수 정의

variable "NAME" {

[CONFIG ...]

}

description 변수가 어떻게 사용되는지 문서화

default 값이 전달되지 않을 때 사용하는 기본값

type type 제약 조건을 적용 (string, number, bool, list, map, set, object, tuple, any 등)

validation 입력 변수에 대한 유효성 검사

sensitive 민감 정보인 경우, plan 또는 apply를 실행할 때 기록하지 않음

provider "aws" {
  region = "ap-northeast-2"
}

resource "aws_instance" "example" {
  ami           = "ami-086cae3329a3f7d75"
  instance_type = "t2.micro"
  # https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance#vpc_security_group_ids
  vpc_security_group_ids = [aws_security_group.webserversg.id]
  user_data              = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p 8080 &
  EOF

  user_data_replace_on_change = true

  tags = {
    Name = "terraform-example"
  }
}

# https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/security_group
resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = 8080
    to_port     = 8080
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}
<====================================================
variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
}
====================================================>

변수값 지정 #1 기본값이 설정되지 않은 입력 변수를 정의하지 않은 상태에서 terraform apply

C:\aws> terraform apply

var.service_port
  Service Port for HTTP Request
  Enter a value: 				⇐ 입력 변수를 입력하도록 프롬프트를 제공

변수값 지정 #2 var 옵션을 이용해서 변수 값을 제공

C:\aws> terraform plan -var "service_port=8080"

aws_security_group.webserversg: Refreshing state... [id=sg-0e6dca42f57a8b3f5]

aws_instance.example: Refreshing state... [id=i-06e3a32a8e93a8958]
No changes. Your infrastructure matches the configuration.

Terraform has compared your real infrastructure against your configuration and found no differences, so no

changes are needed.

변수값 지정 #3 TF_VAR_<변수이름> 이름의 환경 변수를 이용해서 변수 값을 제공

C:\aws> set TF_VAR_service_port=8080			⇐ 환경변수 설정

C:\aws> echo %TF_VAR_service_port%			⇐ 환경변수 확인
8080

C:\aws> terraform plan
aws_security_group.webserversg: Refreshing state... [id=sg-0e6dca42f57a8b3f5]		
⇐ 변수 값을 묻지 않고 진행
aws_instance.example: Refreshing state... [id=i-06e3a32a8e93a8958]

No changes. Your infrastructure matches the configuration.

Terraform has compared your real infrastructure against your configuration and found no differences, so no
changes are needed.

기본값 설정

provider "aws" {
  region = "ap-northeast-2"
}

resource "aws_instance" "example" {
  ami           = "ami-086cae3329a3f7d75"
  instance_type = "t2.micro"
  # https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/instance#vpc_security_group_ids
  vpc_security_group_ids = [aws_security_group.webserversg.id]
  user_data              = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p 8080 &
  EOF

  user_data_replace_on_change = true

  tags = {
    Name = "terraform-example"
  }
}

# https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/security_group
resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = 8080
    to_port     = 8080
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080						<= 기본값으로 설정
}

변수 참조하는 방법 ⇒ var.<변수이름>

provider "aws" {
  region = "ap-northeast-2"
}

resource "aws_instance" "example" {
  ami                    = "ami-086cae3329a3f7d75"
  instance_type          = "t2.micro"
  vpc_security_group_ids = [aws_security_group.webserversg.id]
  user_data              = <<-EOF
    #!/bin/bash
    echo "Hello, World" > index.html
    nohup busybox httpd -f -p ${var.service_port} &  		<= 변수 적용
  EOF

  user_data_replace_on_change = true

  tags = {
    Name = "terraform-example"
  }
}

resource "aws_security_group" "webserversg" {
  name = "terraform-example-webserversg"

  ingress {
    from_port   = var.service_port					<= 변수 사용
    to_port     = var.service_port
    protocol    = "tcp"
    cidr_blocks = ["0.0.0.0/0"]
  }
}

variable "service_port" {
  description = "Service Port for HTTP Request"
  type        = number
  default     = 8080
}
<====================================
output "public_ip" {						<= 출력
  value       = aws_instance.example.public_ip
  description = "Public IP for WebServer"
}
====================================>

C:\aws> terraform apply
aws_security_group.webserversg: Refreshing state... [id=sg-0e6dca42f57a8b3f5]
aws_instance.example: Refreshing state... [id=i-06e3a32a8e93a8958]

No changes. Your infrastructure matches the configuration.

Terraform has compared your real infrastructure against your configuration and found no differences, so no
changes are needed.

Apply complete! Resources: 0 added, 0 changed, 0 destroyed.

Outputs:

public_ip = "3.35.175.254"		=> public IP 가 출력되는 것을 확인

변경 사항을 적용하지 않고 출력만 확인할 때

C:\aws> terraform output
public_ip = "3.35.175.254"

리소스 정리

C:\aws> terraform destroy
aws_security_group.webserversg: Refreshing state... [id=sg-0e6dca42f57a8b3f5]
aws_instance.example: Refreshing state... [id=i-06e3a32a8e93a8958]
...

AWS - EC2

_민주 — Sat, 18 Nov 2023 19:17:41 +0900

EC2 ( Elastic Compute Cloud)

안전하고 크기 조정이 가능한 컴퓨팅 파워를 클라우드에서 제공하는 웹 서비스

안정적인 확장 가능한 인프라에 온디맨드로 액세스

99.99%의 가용성을 지원하는 SLA 약정을 기반으로 몇 분 안에 용량 크기를 조정

AMI (Amazon Machine Image)

인스턴스를 시작하는데 필요한 정보를 제공하는 AWS에서 지원되고 유지 관리되는 이미지

EBS(Elastic Block Store)

EC2를 위해 설계된 사용이 쉽고 확장 가능한 고성능 블록 스토리지 서비스

EBS 볼륨은 특정 가용 영역에 위치하며 자동으로 복제되므로, 단일 구성 요소에 장애가 발생하더라도 안정하게 보호됨

모든 EBS볼륨 유형은 안정적인 스냅샷 기능을 제공하며, 높은 가용성을 제공하도록 설계

- EBS 스냅샷

데이터의 특정 시점 복사본이며, 재해 복구를 지원하고 리전 및 계정 간에 데이터를 마이그레이션하며 백업 규정 준수를 개선하는데 사용

EIP (Elastic IP, 탄력적 IP)

정적 IPv4 주소로, AWS 계정에 할당되며 릴리스할 때까지 할당된 상태를 유지

EC2 인스턴스를 중지하고 다시 시작하면 퍼블릭 IP주소가 변경되나, EC2 인스턴스에 EIP주소를 연결하면 다시 시작해도 동일한 IP 주소로 접속이 가능

ELB(Elastic Load Balacing)

네트워크 트래픽 분산을 통해 어플리케이션 확장성 개선

여러 가용영역을 기반으로 고가용성을 제공

Amazon EC2 Auto Scaling

변화하는 수요에 동적으로 대응하고 비용을 최적화

비정상적인 인스턴스 교체 / 수요에 맞게 확장

AWS - VPC

_민주 — Sat, 18 Nov 2023 17:23:26 +0900

VPC(Virtual Private Cloud)

AWS 사용자 계정 전용 가상 네트워크

AWS 클라우드에서 다른 가상 네트워크와 논리적으로 분리

하나의 AWS 리전 안에서만 존재할 수 있고, 한 리전에 만든 VPC는 다른 리전에서는 보이지 않음

생성시 RFC 1918에 지정된 프라이빗 주소 체계 사용을 권장

- 10.0.0.0/8 ⇒ 10.0.0.0 - 10.255.255.255 A클래스 사설 네트워크 주소 영역

- 172.16.0.0/12 ⇒ 172.16.0.0 - 172.31.255.255 B클래스 사설 네트워크 주소 영역

- 192.168.0.0/16 ⇒ 192.168.0.0 - 192.168.255.255 C클래스 사설 네트워크 주소 영역

기본 VPC (default VPC)

각 AWS 리전에는 기본 VPC가 존재

각 가용 영역의 퍼블릭 서브넷, 인터넷 게이트웨이, 및 DNS 확인 활성화 설정과 함께 제공

VPC 구성 옵션

- 가용영역 (AZ, Avality Zone)

AWS 리전에 중복 전원, 네트워킹 및 연결이 있는 하나 이상의 개별 데이터 센터

- 인터넷 게이트웨이

인터넷(누구나 연결할 수 있는 public 망) 에 vpc 연결

외부와 연결하기 위한 중계역할

- NAT 게이트 웨이

private 서브넷의 인스턴스가 아웃바운드 트랩픽을 전송할 수 있도록 하지만 인터넷의 리소스가 인스턴스에 연결하는 것을 방지

- 서브넷(subnet)

vpc 내 논리 구분

인스턴스는 서브넷 안에 위치 => EC2 인스턴스를 배치하는 장소

-- 한번 서브넷에 인스턴스를 생성하면 다른 서브넷으로 옮길 수 없음

인스턴스를 서로 격리하고, 인스턴스 간의 트래픽 흐름(public에 있는 인스턴스가 private 인스턴스로의 접근)을 제어하고, 인스턴스를 기능별로 묶는 역할

하나의 가용영역내에서만 존재할 수 있음

서브넷 CIDR 블록

** CIDR(Class Inter Domain Routing) : 주소의 영역을 여러 네트워크 영역으로 나누기 위해 IP를 묶는 방식

CIDR 블록 : 주소 범위를 지정 0.0.0.0/16 밑줄친 부분

VPC의 일부, VCP 내에서는 unique 해야함 = 중첩되면 안됨

모든 서브넷에서 처음 4개의 IP와 마지막 1개는 예약되어 있으므로 인스턴스에 할당할 수 없음

--예) 서브넷 CIDR이 172.16.100.0/24인 경우 - 172.16.100.0 네트워크 주소

- 172.16.100.1 AWS에서 VPC 라우터용으로 예약

- 172.16.100.2 DNS 서버 주소

- 172.16.100.3 AWS에서 나중에 사용하려고 예약

- 172.16.100.255 네트워크 브로드캐스트 주소

public 서브넷 : 서브넷이 인터넷 게이트 웨이로 향하는 라우팅이 있는 라우팅 테이블과 연결된 경우

private 서브넷 : 서브넷이 인터넷 게이트 웨이로 향아는 라우팅이 없는 라우팅 테이블과 연결된 경우

- 탄력적 네트워크 인터페이스(ENI, Elastic Network Interface)

물리 서버의 네트워크 인터페이스와 같은 기능을 수행 = 네트워크 카드 서비스

VPC에서 가상 네트워크 카드를 나타내는 논리ㅐ적 네트워크 구성 요소

여러 네트워크에 접근할 수 있음( 네크워크 카드를 뺐다 꼈다 하는 것과 같은 원리)

- 인터넷 게이트웨이(IGW, Internet Gate Way)

퍼블릭 IP 주소를 갖는 인스턴스가 인터넷에 연결할 수 있도록 기능을 제공

처음 VPC( default VPC x = 직접 생성한 VPC)를 만들면 IGW가 연결되어 있지 않으므로, 직접 IGW를 만들고 생성한 VPC와 연결해야 함

하나의 VPC에는 하나의 IGW 만 연결 가능

- 라우팅(routing)

VPC의 네트워크 트래픽을 전달할 위치를 결정하는데 사용되는 규칙

트래픽을 전달할 IP 주소 범위(대상 주소)와 트래픽을 전송할 게이트웨이, 네트워크 인터페이스 또는 연결(대상)을 지정

VPC는 소프트웨어 함수로 IP 라우팅을 구현 -> 사용자는 라우팅 테이블만 관리

- 라우팅테이블(routing table)

라우팅의 집합으로, 서브넷과 연결할 수 있음

라우팅 테이블의 항목들간의 순서는 중요하지 않음

default 라우팅 테이블 => VPC와 함께 자동으로 제공되는 라우팅 테이블

-- 기본 vpc인 경우, local 및 igw로의 라우팅을 포함

-- 기본 vpc가 아닌 경우, local 라우팅만 포함

-- 예시

--------------------------------- ---------------------
대상 주소 대상
--------------------------------- ---------------------
10.0.0.0/16 Local
2001:db8:1234:1a00::/56 Local
172.31.0.0/16 pcx-11223344556677889
0.0.0.0/0 igw-12345678901234567
::/0 eigw-aabbccddee1122334
--------------------------------- ---------------------

VPC(10.0.0.0/16) 내에서 라우팅되는 IPv4 트래픽은 Local 경로로 처리
VPC(2001:db8:1234:1a00::/56) 내에서 라우팅되는 IPv6 트래픽은 Local 경로로 처리
172.31.0.0/16의 경로는 피어링 연결로 트래픽을 전송
모든 IPv4 트래픽(0.0.0.0/0)의 경로는 인터넷 게이트웨이로 트래픽을 전송 ⇒ VPC 내 그리고 피어링 연결을 통한 트래픽을 제외한 모든 IPv4 트래픽은 인터넷 게이트웨이로 라우팅
모든 IPv6 트래픽(::/0)의 경로는 외부 전용 인터넷 게이트웨이로 트래픽을 전송 ⇒ VPC 내 트래픽을 제외한 모든 IPv6 트래픽은 외부 전용 인터넷 게이트웨이로 라우팅

- 보안그룹(security group)

인스턴스의 ENI(Elastic Network Ip) 에서 송수신하는 트래픽을 제어

모든 ENI는 최소 한 개 이상의 보안 그룹과 연결되어야 하고, 보안그룹은 여러 ENI와 연결될 수 있음 (N:N)

생성할때 보안그룹 이름, 설명, 포함될 vpc를 지정하고, 생성 후에 인바운드(인스턴스로 들어옴), 아웃바운드(인스턴스에서 나감) 규칙을 지정 => 트래픽을 허용

상태 저장 방화벽 역할 => 보안 그룹이 트래픽을 한 방향으로 전달하도록 허용할 때 반대 방향의 응답 트래픽을 지능적으로 허용 = 인바운드 source port를 기억하고 아웃바운드시 기억한 port를 사용

- 네트워크 접근 제어 리스트(NACL, Network Access Control List)

원본 또는 대상 주소 CIDR,프로토콜, 포트를 기반 트래픽을 인바운드,아웃바운드 규칙으로 제어 => 방어벽과 같은 역할

서브넷에 연결되어 해당 서브넷과 송수신되는 트래픽을 제어

상태비저장

-- NACL을 통과한 연결상태를 추적하지 않음

-- 모든 인바운드와 아웃바운드 트래픽의 허용 규칙을 별도로 작성해야 함

규칙을 적용할 때 규칙 번호의 오름차순으로 처리

보안그룹 vs NACL

보안 그룹	NACL
인스턴스 레벨에서 운영	서브넷 레벨에서 운영
허용 규칙만 지원	허용 및 거부 규칙 지원
트래픽 허용 여부를 결정하기 전에 모든 규칙을 평가 => 전체를 평가	트래픽 허용 여부를 결정할 때 가장 낮은 번호의 규칙부터 순서대로 규칙을 평가
상태 저장 : 규칙에 관계없이 반환 트래픽이 허용됨 인바운드가 저장되면 아웃바운드는 자동으로 저장	상태 비저장 : 반환 트래픽이 규칙에 따라 명시적으로 허용되어야함

AWS - IAM

_민주 — Sat, 18 Nov 2023 12:13:22 +0900

AWS IAM (Identity and Access Management)

서비스 및 리소스를 사용하도록 인증(로그인) 및 권한 부여된 대상을 제어

ID(IAM 자격 증명)

AWS 계정 루트 사용자

계정 생성 시 해당 계정의 모든 AWS 서비스 및 리소스에 대한 완전한 액세스 권한이 있는 단일 로그인 ID

사용자(user)

AWS의 기능과 자원을 이용하는 객체

사람 또는 어플리케이션에 대한 특정 권한을 가지고 있는 AWS 계정 내 자격 증명

- 사용자를 식별하는 방법

1) 사용자 생성 시 지정한 이름

2) 사용자의 고유 식별자

3) ARN(Amazon Resource Name) => arn:aws:service:region:account-id:resource 형식

- 사용자의 자격증명 방법

1) AWS Management Console 암호 => 사람이 AWS서비스를 사용하기 위해서 로그인할 때 사용

2) Access Key = Access Key ID + Secret Access Key => 프로그램 방식으로 서비스를 사용할 때 사용

3) ssh 키 => AWS에 생성한 EC2 인스턴스로 SSH 접속할 때 사용

4) 서버 인증서

사용자 그룹(user group)

여러사용자에게 공통으로 권한을 부여하고 일관된 권한 정책을 쉽게 관리

권한(permission)

AWS의 서비스나 자원에 어떤 작업을 수행할수 있는지 여부를 명시한 규칙

사용자, 사용자그룹, 역할에 권한을 직접 적용할 수 없고, 정책을 생성한 후 적용

정책(policy)

자격 증명이나 리소스와 연결될 때 해당 권한을 정의하는 AWS의 객체

- 자격증명 기반 정책 = 아이덴티티 정책

--관리형정책

다수의 사용자, 그룹, 역할에 독립적으로 연결할 수 있는 자격 증명 기반 정책

AWS 관리형 정책 AWS가 미리 예측해서 만들어놓은 정책
고객 관리형 정책 고객이 직접 만드는 정책

--인라인정책

단일 사용자, 그룹, 역할에 직접 추가하는 정책

- 리소스 기반 정책

요청이 적용되는 AWS 리소스(=서비스) 측에 연결하는 정책

지정된 보안 주체에 해당 리소스에 대한 특정 작업을 수행할 수 있는 권한을 부여하고 이러한 권한이 적용되는 조건을 정의

- 권한 경계 (permission boundary)

IAM 사용자 및 역할에 부여할 수 있는 권한의 최대범위를 제한하는 역할

IAM 사용자와 권한경계 교집합 = IAM 사용자 권한

- 서비스 제어 정책(SCP, Service Control Policies)

조직의 권한을 관리하는데 사용할 수 있는 조직 정책 유형

여러 AWS 계정에 걸쳐 중앙에서 AWS 서비스를 제어

- 접근 제어 목록(ACL, Access Control List)

연결된 리소스에 액세스할 수 있는 다른 계정의 보안 주체를 제어

- 세션 정책

역할 또는 페더레이션 사용자에 대해 임시 세션을 프로그래밍 방식으로 생성할 때 파라미터로 전달하는 고급 정책

- json 정책

version : 정책 문서의 형식 버전

Sid : 정책을 설명하기위한 용도

Effect : Action이나 Resource에 대해서 허용하는 정책 or 거부하는정책 , 명시적으로 거부(=일반적으로 거부)

Principal (선택 ) : 특정사용자 or 그룹에게 권한 부여

Action : 정책이 허용하거나 거부하는 작업목록

Resource: 해당 Action안에서 리소스를 특정지을때

condition(선택) : 정책을 세부적으로 제안할 때

역할(role)

객체가 사용자가 아닌 서비스나 다른 AWS 계정의 사용자

사용자가 아닌 특정 서비스에서 생성한 객체에 권한을 부여하는 데 사용

11월 1주차 (23.11.01 - 23.11.07)

_민주 — Wed, 8 Nov 2023 09:04:05 +0900

DAY1.

운동했다
프로젝트했다
하루가 끝났다

DAY2.

매니저님이 귀여운컵에 커피주셔서 기분 좋은 아침이었다.

테니스학원 근처에서 후다닥 해치우고 커피한잔사서 학원으로~

20분 수업받고 20분 볼머신기인데 자리남아서 20분 더하고
아침에 유산소 못한거 다했지요 뿌덧

DAY3.

프로젝트 때문에 어제 아침에 운동 못하고
3시간 자고 플젝 발표하고 레포트 작성하고 테니스 1시간 치고 집 도착 22시에 하자마자 침대에 폰던지고 씻고 누웠는데 그 후 기억이 없다ㅎㅎ 6시에 일어나서 아침운동하러 고고
천국계단 처음에는 6분도 못했는데 이제는 26분 할만하구여 러닝머신보다 더 재밌는거 같다...ㅎ
유산소하면 땀이 이상한곳에서 나는데 이거 맞는거죠??

주말에 결혼식 가야해서 전주내려가는길 짐 바리바리 싸들고 아빠가 프로틴쉐이크 먹고싶다고하셔서 초코맛 한통 챙겨갑네다~

점심에 맛집 추천 받아서 미슐랭 임병주 산동칼국수 갔는데 만두사진만 찍고 칼국수 사진은 왜 없는건가요?
그냥 바지락칼국수맛 그냥 만두맛
칼국수로 빌딩지었다는데 음...?

버스타기전에 과자먹구 핫도그먹구

DAY4.

도착하자마자 cu로 엄마택배 심부름 다녀왔구요

12시50분 전주 더메이에서 결혼식
15시 군산 호텔은파펠리스웨딩

전주에서 더메이 웨딩홀 뷔페 맛있다고 소문났는데 축의금내고 식권이 다 소진됐다고 못받는 기이한현상
가려는데 아저씨 한분께서 식권한장 더있다고 초록색 스티커 있으면 다시 들어갈 수 있다고 하셔서
뷔페를 맛보게 되었는데 사람 너무 많아서 정신없고 자리도 없어서 눈치싸움이여서 기가 빨렸다....
내가 만약 결혼식한다면 여기 절대 안해 뷔페도 그저그렇고....

5년전인가 세계태권도선수권대회 자원봉사하면서 일년에 한번씩이라도 연락했던 팀장님이 결혼을 하게 되어서 서울에서 군산까지 갔지요
신랑님 인스타에서만 보던 환호를 하며 등장 ㅋㅋ 역시 팀장님답다
오랜만에 김태훈매니저님도 보고 딸들도 보고 아기들이 나 좋아하는데..... 딸들이 날 싫어했다는.......
답례품으로 와인받구 인사하고 서울에서 만나기로 했지요

3개월동안 폐인처럼 다녔다가 오랜만에 꾸며서 하나 건짐 S2

외할머니 집가서 막내이모부랑 막내이모랑 술한잔하면서 간짬뽕이랑 불닭 섞어서 먹구 찰밥에 김 싸먹었습니다요
역시 외할머니 집에서 먹는건 다 맛있어

DAY5.

외할머니집에서 자고 일어나서
블루베리+당근+들깨+검은콩+꿀 등 건강음료 마시고 사과먹고 한숨자고 닭도리탕 먹고 싶다고 하니까 외할머니가 마트에서 닭사오셔서 뚝딱 만들어주고 존마탱..왜 사진 못찍었지.....
점심에 막내이모랑 엄마랑 외할머니랑 고스톱쳐서 침대에 누워서 넷플릭스 봤는데
5분만에 바로 잠들었어요... 이게 바로 번아웃....

집에 와서 매운갈비찜에 호박전 부쳐먹고

엄마랑 모듬튀김에 맥주 크~

DAY6.

9시까지 가야해서 전주에 하루 더있으려고 첫차타기 5시 45분!
8시30분쯤인가 차가 안움직여서 지도 찍어봤는데 54분.....ㅋㅋㅋㅋ
맘 놓고 있었는데 정체풀리더니 55분쯤 도착해서 뛰어서 지하철타고 달려서 도착
스릴넘쳤다ㅎㅎ

점심에 뜸들이다에서 어깨살간장덮밥먹고

1기 발표 엿들으러 가기
머싯다....나도 프로젝트 잘해야지

DAY7.

토일월 운동 못하고 오랜만에 유산소했더니 힘들었다... 3일동안 운동을 못하고 먹기만했더니 뱃살 가득 나왔구....26일까지 운동 열심히해야지!

z플립4 사용하고 있는데
상단화면에 세로줄 생기고 힌지부분에 검은가로줄 생기고 마지막으로 화면이 안켜졌다...
출근도장찍고 서비스센터 다녀왔는데 다행히 무상수리해주신다고......
아이폰으로 바꿀까 했는데 이번에 조심히 사용하고
고장날때까지 사용해야지.....

삼성서비스센터 대치점 접수대 12군데 있어서 대기없이 바로 접수했고
수리받는데 40분정도 걸렸습니다!

힌지부분에 상처있으면 무상수리 안된다고 하니까 확인해보세요!

한달 개근해서 스타벅스 기프티콘 받았다
기프티콘이 중요한게 아니라 조퇴하고 싶은날 꾹 참고 버텼다는것
뿌듯하다뿌듯해

유튜브에서만 보던 신궁동감자탕에서 뼈찜을 먹었다. 해장국도 같이 나온다.
생각보다 매웠고 예전에 먹었던 청량리? 근처에서 먹었던 음식점이 더 맛있는 것 같다.
매운거 못 먹는 사람은 가지 마세요

강습받기전 볼머신기 20분 그리고 강습 20분 그리고 볼머신기 50분 정도?
3개월 한번에 결제해서 나름? 저렴하게 강습받고 있는데 사람 많아지면 안되니 끝날때쯤 공개할게요
사실 목표는 2월 설에 본가가서 남동생이랑 랠리하고 싶네요

크리스마스 두달전부터 캐롤 듣고 있는데 이른건 아닌지.... 듣고 싶었던 건 아니고 유튜브에 뜨길래

It Is What It Is - Jenna Raine 요즘 빠져있는 곡 지금 상황에 딱 맞는 가사라 1곡 무한반복중

비 속에 꽃이 피어나다
Flowers bloom in the rain
성장하는 것은 고통이다
Growing up is a pain

불타는 곳에는 언제나 빛이 있다
There's always light where it burns

AWS - 리전 / 가용영역 / 로컬 영역 / AWS Wavelength

_민주 — Wed, 8 Nov 2023 05:47:04 +0900

리전( Region )

전 세계에서 데이터 센터를 클러스터링 하는 물리적 위치

각 AWS 리전은 지리적 영역 내에서 격리되고 물리적으로 분리된 최소 3개의 AZ로 구성

가용영역( AZ = Availability Zone)

AWS 리전의 중복 전력, 네트워킹 및 연결이 제공되는 하나 이상의 개별 데이터 센터로 구성

단일 데이터 센터를 사용하는 것보다 더 높은 가용성, 내결함성 및 확장성을 갖춘 프로덕션 애플리케이션과 데이터 베이스를 운영할 수 있음

모든 AZ는 상호 연결되어있어 AZ 간에 높은 처리량과 지연시간이 짧은 네트워킹을 제공

로컬영역(Edge Location)

AWS 서비스를 최종 사용자에게 더 가까운 위치에서 실행

지연 시간에 민감한 애플리케이션을 실행할 수 있는 AWS 리전의 확장

AWS Wavelength

대기시간이 매우 낮은 애플리케이션을 개발하고 배포하며 확장하기 위한 모바일 엣지 컴퓨팅 인프라를 제공

ex) 미디어 및 엔터테인먼트 애플리케이션 구축 - 고해상도 라이브 비디오 스트리밍

엣지에서 기계 학습 추론 가속화 = 인공지능 AI 및 기계 학습 ML 중심 비디오 및 이미지 분석을 실행

AWS - 공동 책임 모델

_민주 — Wed, 8 Nov 2023 05:05:01 +0900

공동 책임 모델

보안과 규정 준수는 AWS와 고객의 공동책임

AWS 책임 = 클라우드의 보안

AWS 클라우드에서 제공되는 모든 서비스를 실행하는 인프라를 보호할 책임

AWS 클라우드 서비스를 실행하는 하드웨어, 소프트웨어, 네트워킹 및 시설로 구성

고객 책임 = 클라우드에서의 보안

고객이 선택하는 AWS클라우드 서비스에 따라 달라짐

ex) EC2 서비스는 Iaas로 분류되며 고객이 필요한 모든 보안 구성 및 관리 작업을 수행하도록 요구

EC2 인스턴스를 배포하는 고객은 게스트 운영체제의 관리(업데이트, 보안 패치), 고객이 인스턴스에 설치한 모든 애플리케이션 소프트웨어 또는 유틸리티의 관리, 인스턴스별로 AWS에서 제공한 방화벽의 구성관리에 대한 책임이 있음

출처 https://aws.amazon.com/ko/compliance/shared-responsibility-model/

AWS - 클라우드 컴퓨팅

_민주 — Wed, 8 Nov 2023 04:34:26 +0900

클라우드 컴퓨팅

: IT 리소스를 인터넷을 통해 온디맨드로 제공하고 사용한 만큼만 비용을 지불하는 것

클라우드 공급자로부터 필요에 따라 컴퓨팅 파워, 스토리지, 데이터베이스와 같은 기술 서비스에 액세스 가능

** 온디맨드(On-Demand) : 내가 원하는 시간에 원하는 것을 얻을 수 있도록 한 플랫폼 서비스

On-Premise vs Cloud

구분	On-Premise	Cloud
도입비용	구매 시 많은 예산이 소요되며, 장비 교체 시 비용 발생 운영이 장기화되면 유지보수 비용 외의 추가비용이 적음	월정액 기반으로 사용한만큼 요금을 지불(예측가능) 서비스증설로 인한 추가적인 비용 상승 가능성
인력	시스템 운영 인력 필요	시스템 운영 인력 감원
구축기간	시스템 설계 후 하드웨어와 소프트웨어를 조달하고 배치하는 데 시간이 설림	클라우드 사업자가 준비한 인프라를 활용하여 신속하게 시스템 구축 가능
탄력성	서버 구축과 시스템 확장에는 고도의 기술과 엄청난 비용이 필요 구축된 시스템을 가볍게 확장하거나 축소 불가	컴퓨팅 리소스를 떼어서 팔기 때문에 필요할 때 필요한만큼 확장 및 축소 가능
경제성	사전에 시스템 이용 피크 타임을 예측해서 그만큼의 장비와 소프트웨어를 구매해야 함 피크타임 이외에는 리소스 낭비가 발생 클라우드에 비해 규모의 경제가 작동하지 않음	사용하고자 하는 기능을 사용하고자 하는 기간만 사용하므로 낭비가 적음 관리가 제대로 이루어지지 않을 경우 과다한 비용이 청구
가용성	시스템 이중화 및 백업 등의 조치가 필요	재해를 대비한 데이터센터를 이용하거나 장애에 대비한 시스템을 구성

**온프레미스(On-Premise) : 물리적 데이터 센터와 서버를 구입, 소유 및 유지 관리를 직접

클라우드 컴퓨팅 서비스 유형(서비스 범위에 따라 구분)

IaaS ( Infrastructure-as-a-Service )

네트워킹, 컴퓨팅 및 스토리지에 대한 인프라를 제공하는 서비스

PaaS( Platform-as-a-Service )

가상화된 인프라 위에 런타임 환경, os(운영체제), 미들웨어를 추가한 유형

Iaas 형태의 클라우드 인프라 위에 고객이 원하는 서비스를 개발하도록 개발환경(플랫폼)을 미리 구축하여 서비스형태로 제공

SaaS (Software-as-a-Service )

개발된 애플리케이션을 사용자가 용도에 맞게 바로 사용할 수 있도록 서비스를 제공

** 인프라 : IT 환경을 운영하고 관리하는 데 필요한 구성 요소

클라우드 컴퓨팅 환경(구성 방식에 따라 구분)

Private Cloud

단일 조직 전용 클라우드 컴퓨팅 환경

모든 리소스가 분리되어 하나의 조직에서 제어

Public Cloud

타사 제공업체가 인터넷을 통해 리소스를 제공하고 리소스를 사용하거나 구매하려는 조직 및 개인이 공유하는 컴퓨팅 유형

Hybrid cloud

기업의 퍼블릭 클라우드와 프라이빗 클라우드를 원활하게 통합하는 IT 인프라 설계

프라이빗 클라우드 컴퓨팅 모델을 퍼블릭 클라우드로 확장

Multi Colud

여러 클라우드 서비스 제공자들의 인프라와 서비스를 동시에 사용하여 IT 인프라, 애플리케이션, 및 서비스를 구축하고 관리하는 전략

클라우드 컴퓨팅 이점

민첩성

클라우드를 통해 광법위한 기술에 쉽게 엑세스 가능하며 단시간에 기술 서비스를 배포 할수 있음

탄력성

요구가 변화함에 따라 이러한 리소스를 확장하거나 축호하여 용량을 즉시 늘리거나 줄일 수 있음

비용절감

고정 비용(데이터 센터, 물리적 서버 등)을 가변 비용으로 전환하고, 사용한 만큼만 IT 비용을 지불할 수 있음

몇 분 만에 전 세계에 배포

새로운 지리적 리전으로 확장하고 전세계에 배포 가능

10월 일상 - Reverse

_민주 — Tue, 7 Nov 2023 00:41:56 +0900

28일

나름 2개월동안 6시에 일어나서 유튜브 보고 따라한다고 열심히 했는데 근육량 오르고 체지방률 낮아져서 뿌듯했네
더 열심히해야지
처음에는 웨이트기구 4개로 돌렸는데 지금은 방법익히면서 8개정도는 할줄 아는것같다!!

당황해서 사진 못찍었는데
23시까지 학원에서 공부하다가 나왔는데 문에 철창? 내려져있어서 관리아저씨 찾으로 전층 순회하다가 결국 혼자 버튼눌러서 올리고 나왔다^^ 학원에서 자야되는줄 알았네...ㅎ

27일

요즘 점심도시락 챙겨서 다니는데
밖에서 사먹을때보다 적정량 먹을수있어서 속이 편하다

주말의 학원 키는 제 담당입니다만

끝나고 치맥...ㅎ

사실 3시간 17분 잤는데 졸립지도 않고 피곤하지도 않았는데 집 오자마자 그냥 기절

26일

유산소 열심히 할라고 러닝말고 천국의 계단으로 바꿨는데요? 땀이 뚝뚝 떨어지더라구요?ㅎㅎㅎ

바리바리 보부상

공부열심히하라고 포스트잇 받았다!

도시락 안가져와서 한솥에서 10월 한정 유린기 도시락 먹었는데 존마탱 11월에도 진행시켜주세요
(유린기도시락 배승원씨가 먹고 3주동안 극찬했음)

25일

이정도면 운동 기록인거지
파주 아울렛가서 나이키 구경하다가 2만원대 초반이라 구매했는데 한글날 추가 할인들어가서 만구천원정도에 get!
7부 레깅스는 처음 입어보는데 생각보다 괜찮다

걷다가 빵 먹고 싶어서 LALA BAEKERY 들어갔는데 핸드크림으로 가장한 잼도 있았거 치킨으로 가장한 빵도 있었다ㅋㅋ

24일

렛풀다운 + 레그프레스 + 힙 쓰러스터 + 인어사이 + 아웃사이 +복근운동 + 폼롤러

운동 후 아아 한잔 느낌인데
테니스 하고 찍은 사진은 없네...
월목 수업받는데 최근에 새로 생긴 대치 테니스 홀릭에서 무료강습 1회 해준다고 하셨는데 지금 다니고 있는곳과 방식이 매우 달라서 고민중이다!

23일

조하선배 청첩장 받을 겸 빛내미를 오랜만에 만나 너무 들떴는지 인사하면서 이어폰 빼면서 이어캡 검정색인데 아스팔트 바닥에 떨어졌구요.... 결국 못찾았습니다...

z플립4 필름 힌지부분 들떠서 필름 교체할겸 서비스 센터 다녀왔는데 재고 없다고 예약해야한다 해서 하고
오늘 받았는데 맙소사

흰색이더라구요
땅에 떨어지면 잘 보이겠구나 그리고 덤벙거리는 나를 믿지 못해 4개나 미리 구비해둔덕에 짝짝이는 되지않았다는 점
암튼 qcy 사용하다가 버즈 프로 사용하니 신세계네요
다신 잃어버리지 않을게 잘 부탁해

22일

목감기 + 코감기 + 하루에 5시간 이하 잠 =피로만땅 상태였는데
6시부터 교회가야한다고 깨우고.... 교회는 너무 춥고.....
26년동안 나 자신도 믿지 못했는데.... 억지로 가는 게 맞을까요...? 쉬고싶어요...

교회다녀와서 콧물약 먹구 자고 잠 덜깬 상태로 저녁 먹고 다시 자고.....

21일

나이키에서 새로 산 레깅스 입고
러닝하고 하체 + 복근 + 스트레칭
프로티원 초코맛 첫 개시했는데 요거 JMT 물에 타먹었는데도 맛있더라구요

주말이지만 자습하려고 학원 나갔다가
배씨친구가 맛있다는 이가네 양꼬치 먹었습니다.
꼬치 2개까지는 정말 맛있었는데 꿔바로우 먹으니 느끼해지기 시작
조미료? 한접시에 청양고추 한접시 추가해서 먹었구요~
칭따오 논알코올 처음봐서 요건 못참지 하고 마셨는데
역시 맥주는 알코올이다~ (다신 안먹어)

20일

오운완! 인증샷은 계속 될테다!

한번도 비염을 걸려본적 없는 내가
카페트 깔려있는 강의실에서 비염이 걸린 것 같다....

매니저님께 이야기해서 공기청정기 마련하고
내 폰에 연결!
제발 코 살려주라........

3종류 김치 반찬과 미역국
JMT

결국 내 인생 처음으로 콧물약을 먹어봤고
빨리 나으려고 2개 먹었는데 졸림도 x2배가 되버렸다.....

10일

역삼역 에피스

대학교 홍보대사 선배 청첩장을 받기(?) 위해 역삼역 에피스에 모였다.
2년?3년? 만에 만나는 동기들
선배 덕분에 모일 수 있었고 내 인생 최초 대면청첩장이었다!!

기대된다 결혼식

API - 게시판 목록 조회, 상세 조회, 등록, 삭제 _ postman

_민주 — Sat, 28 Oct 2023 22:41:58 +0900

API( Application Programing Interface)

: 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법

flask.py

from flask import Flask, request
import pymysql
import json, datetime

app = Flask(__name__)

# 데이터 베이스 연결
def getCon():
  return pymysql.connect(host="localhost", 
                     user="root", password="1234", 
                     db="testConnection",
                     charset="utf8",
                     cursorclass=pymysql.cursors.DictCursor)

def json_default(value):
  if isinstance(value, datetime.date):
    return value.strftime('%Y-%m-%d')
  raise TypeError('not JSON serializable')  

# BoardContent.js 게시물 목록
@app.route('/boardlist', methods=['GET', 'POST'])
def boardlist() :
    con = getCon()
    cursor = con.cursor()
    cursor.execute("SELECT b.boardId, b.title, u.ID, b.location, date_format(b.createAt, '%Y-%m-%d') AS date FROM Board as b LEFT OUTER JOIN User as u on u.userId = b.userId WHERE b.status = 'active' ORDER BY b.createAt DESC;")
    data = cursor.fetchall()
    # return_data = json.dumps(data, default=json_default)

    # 반환할 때 json형식으로 반환
    return json.dumps(data, default=json_default)

# BoardContent.js 게시물 상세정보
@app.route('/boardDetail', methods=[ 'POST'])
def getBoardId():
  # boardId =int(request.get_data())
  boardId = request.get_json()
  id = boardId['id']

  con = getCon()
  cursor = con.cursor()
  sql = 'SELECT * FROM Board WHERE boardId = %s;'
  cursor.execute(sql, (id, ))
  data = cursor.fetchall()
  cursor.close()
    
  # 반환할 때 json형식으로 반환
  return json.dumps(data, default=json_default)

# BoardViewContent.js 게시물 수정
@app.route('/boardEdit', methods=['POST'])
def boardEdit() :
  boardData = request.get_json()
  print(boardData)
  con = getCon()
  cursor = con.cursor()

  cursor.execute("UPDATE Board SET title = '{}' WHERE boardId = {};".format(boardData['title'], boardData['boardId']))
  cursor.execute("UPDATE Board SET content = '{}' WHERE boardId = {};".format(boardData['content'], boardData['boardId']))
  cursor.connection.commit()


  return '성공적으로 수정되었습니다:)'

 # BoardViewContent.js 게시물 삭제
@app.route('/boardDelete', methods=['POST'])
def boardDelete() :
  boardData = request.get_json()
  print(boardData)
  con = getCon()
  cursor = con.cursor()

  cursor.execute("UPDATE Board SET status = 'inactive' WHERE boardId = {};".format(boardData['boardId']))
  cursor.connection.commit()


  return '성공적으로 삭제되었습니다'

# BoardWrite.js 게시물 등록
@app.route('/boardWrite', methods=['POST'])
def boardWrite() :
  boardData = request.get_json()
  print(boardData)

  con = getCon()
  cursor = con.cursor()
  sql = "INSERT INTO Board (userId, title, content, location) VALUES ((SELECT userId FROM User WHERE ID = %s), %s, %s, %s);"
  cursor.execute(sql, ('test', boardData['title'], boardData['content'], boardData['location']))
  cursor.connection.commit()


  return '성공적으로 등록되었습니다:)'


if __name__ == "__main__" :
    app.run(debug=True)

App.js

//게시물 목록
axios.get('/boardlist')
        .then(res => {
            console.log(res.data)
        }).catch(error => console.log(error));
    }, []);
    
//게시물 상세조회
axios.post('/boardDetail', {id : boardId}, { headers: { 'Content-Type': 'application/json' } })
        .then(res => {
            console.log(res.data)
        }).catch(err => console.log(err));
        
//게시물 등록
axios.post('/boardWrite', {title : title, location : location, content : content }, { headers: { 'Content-Type': 'application/json' } })
    .then(res => {
            console.log(res.data)
	}).catch(err => console.log(err));

 // 게시물 삭제
axios.post('/boardDelete', {boardId: boardId}, { headers: { 'Content-Type': 'application/json' } })
    .then(res => {
            console.log(res.data)
    }).catch(err => console.log(err));
    
// 게시물 수정
axios.post('/boardEdit', {title : title, content : content, boardId: boardId }, { headers: { 'Content-Type': 'application/json' } })
    .then(res => {
            console.log(res.data)
    }).catch(err => console.log(err));

postman 으로 api 잘 작동되는지 확인해보기

method=['GET']

method=['POST']

React - Flask - Mysql 연동

_민주 — Sat, 28 Oct 2023 22:16:18 +0900

1. 프로젝트 생성

react

C:\react>npx create-react-app data-app
C:\react>npm start

Flask

C:\react>mkdir server

C:\react>pip install Flask

workbench 사용하여 database를 만든 후

table을 생성했습니다.

create database testConnection;
use testConnection;
CREATE TABLE `testTable` (
    `id` int unsigned AUTO_INCREMENT NOT NULL ,
    `name` int unsigned  NOT NULL ,
    `age` varchar(30)  NOT NULL ,
     PRIMARY KEY (
        `id`
    )
);


데이터 삽입
INSERT INTO testTable(id,name,age) values(2,'233',26);
INSERT INTO testTable(id,name,age) values(1,'121',26);

App.js

import './App.css';
import { useEffect, useState } from 'react';
import axios from 'axios';

function App() {

  const [data, setData] = useState([])

  useEffect(() => {
    axios.get('/data')
    .then(res => {
        setData(res.data)
        console.log(res.data)
    }).catch(error => console.log(error));
  }, []);

  return (
    <>
      <h1> testTable data 가져오기 </h1>
    </>
  );
}

export default App;

사용하는모듈 설치

npm install axios

package.json

"proxy": "http://localhost:5000", 추가

server.py

from flask import Flask, jsonify, request
import pymysql
import json, datetime

app = Flask(__name__)

# 데이터 베이스 연결
def getCon():
  return pymysql.connect(host="localhost", 
                     user="root", password="1234", 
                     db="testConnection",
                     charset="utf8",
                     cursorclass=pymysql.cursors.DictCursor)

def json_default(value):
  if isinstance(value, datetime.date):
    return value.strftime('%Y-%m-%d')
  raise TypeError('not JSON serializable') 

# testConnection DB / testTable Table 가져오기
@app.route('/data', methods=['GET'])
def getData():
    print("1111111111111111")
    con = getCon()
    cursor = con.cursor()
    sql = 'SELECT * FROM testTable'
    cursor.execute(sql)
    
    data = cursor.fetchall()
    print(data)
    cursor.close()
    
    # 반환할 때 json형식으로 반환
    return json.dumps(data, default=json_default)

if __name__ == "__main__" :
    app.run(debug=True)

import json

: python이 기본적으로 지원하는 데이터 타입인 list와 dictionary 구조를 유지한 채 json 형식으로 바꿔주고, json문자열을 해독해서 python 데이터타입으로 바꿔주는 모듈

def json_default(value)

: json.dumps 에 데이터를 넣는 경우 json 이 알지못하는 타입이 포함되어있을때 json string으로 변환해주는 함수를 선언

대표적인 예로는 날짜/시간 형태의 데이터로 인해

TypeError: Object of type date is not JSON serializable 에러가 발생할수 있다.

SSG I&C project_2

_민주 — Sat, 28 Oct 2023 16:06:14 +0900

1. 데이터 반영 오류

: flask 에서 db 데이터를 react로 보내주는 과정 중

flask 서버를 새로 실행해줘야 sql에 넣는 데이터가 조회됨

App.js

import React, {useState, useEffect} from "react";
import axios, { Axios } from 'axios';

function App() {
	const [ data, setData ] = useState([{}]);
    
useEffect(() => {
        axios.post('/boardDetail', {id : boardId}, { headers: { 'Content-Type': 'application/json' } })
        .then(response => {
            setBoardData(response.data)
        }).catch(err => console.log(err));
    }, [])

  return (
    <>
     
    </>
  );
}

export default App;

server.py

from flask import Flask, jsonify, request
import pymysql
import json, datetime

app = Flask(__name__)

# 데이터 베이스 연결
db = pymysql.connect(host="localhost", 
                     user="root", password="1234", 
                     db="test3",
                     charset="utf8",
                     cursorclass=pymysql.cursors.DictCursor)
# cursor 열기
cursor = db.cursor()

def json_default(value):
  if isinstance(value, datetime.date):
    return value.strftime('%Y-%m-%d')
  raise TypeError('not JSON serializable')  

@app.route("/boardDetail", methods=['GET', 'POST'])
def boardDetail():
    #db connection 연결
    con = getCon()
    cursor = con.cursor()
   
    cursor.execute("select * from board")
    data = cursor.fetchall()
    cursor.close()
   
    # 반환할 때 json형식으로 반환
    return json.dumps(data, default=json_default)
  
if __name__ == "__main__" :
    app.run(debug=True)

수정한 server.py

db 연결하는 부분을 함수로 변경

from flask import Flask, jsonify, request
import pymysql
import json, datetime

app = Flask(__name__)
# 데이터 베이스 연결
def getCon():
  return pymysql.connect(host="localhost",
                     user="root", password="1234",
                     db="test3",
                     charset="utf8",
                     cursorclass=pymysql.cursors.DictCursor)

//JSON serializable 에러 피하기 위해
def json_default(value):
  if isinstance(value, datetime.date):
    return value.strftime('%Y-%m-%d')
  raise TypeError('not JSON serializable')

@app.route("/boardDetail", methods=['GET', 'POST'])
def boardDetail():
    #db connection 연결
    con = getCon()
    cursor = con.cursor()
   
    cursor.execute("select * from board")
    data = cursor.fetchall()
    cursor.close()
   
    # 반환할 때 json형식으로 반환
    return json.dumps(data, default=json_default)
    
if __name__ == "__main__" :
    app.run(debug=True)

React - Hooks _ useState / useEffect /useRef

_민주 — Fri, 27 Oct 2023 21:19:17 +0900

Hooks

: 함수형 컴포넌트에서 클래스형 컴포넌트에서 제공하는 기능(state,ref, life cycle function 등)을 지원하기 위해서 도입된 함수

1) useState

: 함수형 컴포넌트에서 상태(state)를 관리하기 위해서 사용

[상태변수 초기값, 상태변수를 변경하는 함수 ] 배열을 반환하는 함수

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

App.js

import Info from './Info';

function App() {
  return (
    <>
      <Info />
    </>  
  );
}
export default App;

Info.js => 사용자이름과 별명을 관리하는 컴포넌트를 구현

import { useState } from "react";

function Info() {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const handlerChangeName = e => setName(e.target.value);
    const handlerChangeNickname = e => setNickname(e.target.value);

    return (
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={handlerChangeName}/></p>
                <p>별명: <input type="text" value={nickname} onChange={handlerChangeNickname}/></p>
            </div>
        </>
    );
}
export default Info;

2) useEffect

클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 합친 사용법

useEffect(이펙트 함수, 의존성배열);

** 의존성 배열 : 이펙트가 의존하고 있는 배열 안에 있는 변수 중 하나라도 값이 변경되었을 때 이펙트 함수가 실행

Info.js => useEffect 추가 => 렌더링 될 때마다 이펙트 함수 실행

import { useEffect, useState } from "react";

function Info() {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const handlerChangeName = e => setName(e.target.value);
    const handlerChangeNickname = e => setNickname(e.target.value);

    // 의존 배열을 생략 	⇒ 마운트, 업데이트 시 마다 이팩트 함수를 실행
    //                  	⇒ 렌더링 완료 시 마다 이팩트 함수를 실행
    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({ name, nickname });
    });
    return (
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={handlerChangeName}/></p>
                <p>별명: <input type="text" value={nickname} onChange={handlerChangeNickname}/></p>
            </div>
        </>
    );
}
export default Info;

Info.js => 마운트 될때만 이펙트 함수가 실행되도록 수정

import { useEffect, useState } from "react";

function Info() {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const handlerChangeName = e => setName(e.target.value);
    const handlerChangeNickname = e => setNickname(e.target.value);

    // 의존 배열로 빈 배열([])을 설정
    // ==> 마운트될 때만 이팩트 함수를 실행
    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({ name, nickname });
    }, []);
    return (
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={handlerChangeName}/></p>
                <p>별명: <input type="text" value={nickname} onChange={handlerChangeNickname}/></p>
            </div>
        </>
    );
}
export default Info;

Info.js => 특정 값이 업데이트 될 때만 이펙트 함수가 실행되도록 수정 = 의존 배열에 검사할 상태 변수이름을 값으로 설정

import { useEffect, useState } from "react";

function Info() {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const handlerChangeName = e => setName(e.target.value);
    const handlerChangeNickname = e => setNickname(e.target.value);

    // 마운트될 때와 name 상태변수가 변경될 때만 이팩트 함수가 실행
    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({ name, nickname });
    }, [name]);
    return (
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={handlerChangeName}/></p>
                <p>별명: <input type="text" value={nickname} onChange={handlerChangeNickname}/></p>
            </div>
        </>
    );
}
export default Info;

Info.js => 후처리(cleanup) 함수를 추가

: component가 언마운트 또는 리렌더링되기 전에 어떤 작업을 수행하고 싶을때 cleanup 함수를 반환

useEffect의 첫번째 파라미터로 전달되는 콜백 함수(이펙트 함수)가 반환하는 함수

Info.js Info 컴포넌트를 보이고 / 숨기기

import { useEffect, useState } from "react";

function Info() {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const handlerChangeName = e => setName(e.target.value);
    const handlerChangeNickname = e => setNickname(e.target.value);

    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({ name, nickname });
        return () => console.log('cleanup', name);	⇐ componentWillUnmount() 함수와 동일한 역할
    }, [name]);					   의존 배열에 name 상태 변수가 설정되어 있기 때문에,
    return (						   name 상태 변수가 변경되거나 언마운트될 때 cleanup 함수가 실행
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={handlerChangeName}/></p>
                <p>별명: <input type="text" value={nickname} onChange={handlerChangeNickname}/></p>
            </div>
        </>
    );
}
export default Info;

App.js

import { useState } from 'react';
import Info from './hook/Info';

function App() {
  const [visible, setVisible] = useState(true);
  const handlerClick = () => setVisible(!visible);
  return (
    <>
      <button onClick={handlerClick}>{ visible ? '숨기기' : '보이기' }</button>
      <br />
      { visible && <Info /> }
    </>  
  );
}
export default App;

Info.js => 언마운트 될때만 cleanup함수가 호출되도록 하고 싶으면 의존 배열에 빈 배열을 설정

import { useEffect, useState } from "react";

function Info() {
    const [name, setName] = useState('');
    const [nickname, setNickname] = useState('');

    const handlerChangeName = e => setName(e.target.value);
    const handlerChangeNickname = e => setNickname(e.target.value);

    useEffect(() => {
        console.log('렌더링이 완료되었습니다.');
        console.log({ name, nickname });
        return () => console.log('cleanup', name);
    }, []);
    return (
        <>
            <div>
                <p>이름: {name}</p>
                <p>별명: {nickname}</p>
            </div>
            <div>
                <p>이름: <input type="text" value={name} onChange={handlerChangeName}/></p>
                <p>별명: <input type="text" value={nickname} onChange={handlerChangeNickname}/></p>
            </div>
        </>
    );
}
export default Info;

3) useRef

: 함수형 컴포넌트에서 DOM 요소를 직접 제어하기 위해서 사용

- 숫자를 입력할 수 있는 입력창과 입력한 숫자를 등록하는 버튼을 제공

- 입력창에 숫자를 입력하면 입력한 숫자를 입력값에 출력

- 등록 버튼을 클릭하면 등록된 숫자들을 리스트에 출력하고 입력창에 포커스를 이동

Average.js

import { useState, useRef } from "react";

const Average = () => {
    const [number, setNumber] = useState('');
    const [list, setList] = useState([]);

    const handlerChangeNumber = e => setNumber(e.target.value);
    const handlerButtonClick = e => {
        const newList = list.concat(number);
        setList(newList);

        setNumber('');
        inputElement.current.focus();		//current 잊지말기
    }

	useEffect(() => inputElement.current.focus(), []);		//마운트 될때마다 입력창에 포커스를 설정하도록 수정

    const inputElement = useRef(); 		//useRef 추가

    return (
        <>
            <div>
                등록된 숫자:
                <ul>
                    { list.map((num, idx) => <li key={idx}>{num}</li>) }
                </ul>
                <div>
                    <p>입력값: {number}</p>
                </div>
                <div>
                    <input ref={inputElement} type="number" value={number} onChange={handlerChangeNumber}/>
                    <button onClick={handlerButtonClick}>등록</button>
                </div>
            </div>
        </>
    );
};
export default Average;

React - Ref

_민주 — Wed, 25 Oct 2023 17:50:53 +0900

Ref

: DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는데 사용되는 특별한 속성

render 메소드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공

1. 사용방법

1) 콜백 ref useRef 를 이용

class MyComponent extends Component {

    const handler = () => {
		this.myref.focus();
	}
	render() {
		return <input ref={ x => this.myinput = x } />;
	}
}

2) React.createRef() API를이용 => current 사용하는거 잊지 말기

class MyComponent extends React.Component {
	constructor() {
		super();
		this.myref = React.createRef();
	}
	render() {
		return <input type="text" ref={this.myref} />;
	}
	const handler = () => {
		this.myref.current.focus();
	}
}

2. 예시

password 검증 컴포넌트

- 패스워드 입력창에 입력된 값이 "0000"와 일치하는 여부를 판단

일치하면 패스워드 입력창의 색깔을 파란색으로, 일치하지 않으면 패스워드 입력창의 색깔을 붉은색으로 설정

import { Component } from "react";

class ValidatePassword extends Component {
    state = {
        password: '',
        isValid: false
    };
    handlerPasswordChange = e => this.setState({ password: e.target.value });
    handlerPasswordCheck = () => {
        if (this.state.password === '0000') {
            this.setState({ isValid: true });
        } else {
            this.setState({ isValid: false });
        }
    };
    render() {
        return (
            <>
                <input type="password" 
                    value={this.state.password} 
                    onChange={this.handlerPasswordChange} 
                    style={this.state.isValid ? {backgroundColor: 'blue'} : {backgroundColor: 'red'}} />
                <button onClick={this.handlerPasswordCheck}>패스워드 검증</button>
            </>
        );
    }
}
export default ValidatePassword;

+) 패스워드를 잘못 입력했을 때 패스워드 입력창에 포커스를 전달하기

1) 콜백 ref 이용

import { Component } from "react";

class ValidatePassword extends Component {
    state = {
        password: '',
        isValid: false
    };
    handlerPasswordChange = e => this.setState({ password: e.target.value });
    handlerPasswordCheck = () => {
        if (this.state.password === '0000') {
            this.setState({ isValid: true });
        } else {
            this.setState({ isValid: false });
            console.log(this.passwordInput);
            this.passwordInput.focus();
        }
    };
    render() {
        return (
            <>
                <input type="password" 
                    ref={ x => this.passwordInput = x }
                    value={this.state.password} 
                    onChange={this.handlerPasswordChange} 
                    style={this.state.isValid ? {backgroundColor: 'blue'} : {backgroundColor: 'red'}} />
                <button onClick={this.handlerPasswordCheck}>패스워드 검증</button>
            </>
        );
    }
}
export default ValidatePassword;

2) React.createRef()를 이용

import React, { Component } from "react";

class ValidatePassword extends Component {
    state = {
        password: '',
        isValid: false
    };

    passwordInput = React.createRef();

    handlerPasswordChange = e => this.setState({ password: e.target.value });
    handlerPasswordCheck = () => {
        if (this.state.password === '0000') {
            this.setState({ isValid: true });
        } else {
            this.setState({ isValid: false });
            console.log(this.passwordInput);
            console.log(this.passwordInput.current);
            this.passwordInput.current.focus();
        }
    };
    render() {
        return (
            <>
                <input type="password" 
                    ref={this.passwordInput}
                    value={this.state.password} 
                    onChange={this.handlerPasswordChange} 
                    style={this.state.isValid ? {backgroundColor: 'blue'} : {backgroundColor: 'red'}} />
                <button onClick={this.handlerPasswordCheck}>패스워드 검증</button>
            </>
        );
    }
}
export default ValidatePassword;

k8s - pod

_민주 — Wed, 25 Oct 2023 08:54:49 +0900

pod?

: 쿠버네티스에서 관리하는 가장 작은 단위

단일 목적을 수행하기 위한 한 개 이상의 컨테이너로 구성된 컨테이너 집합

Voloume + Container

1. status

Container Creating	이미지 다운 중이거나 컨테이너 생성 중
CrashLoopBackOff	파드 내의 컨테이너가 종료되어 다음 기동시까지 대기 상태
Pending	리소스가 부족해 생성이 보류된상태
Terminating	컨테이너에 종료 요청 시그널을 보낸 후 컨테이너가 종료할때까지 대기 중을 의미
Completed	파드 내 컨테니너가 정상적으로 종료되었음을 의미 파드 내에 복수의 컨테이너가 생성된 경우, 첫 번째 컨테이너가 정상 종료된 경우
Error	컨테이너가 이상 종료된 경우 파드 재에 복수의 컨테이너가 생성된 경우 , 첫 번째 컨테이너가 이상 종료된 경우

2. pod 생성

nginx 컨테이너로 구성된 파드를 생성

1) CLI

root@master:/home/vagrant# kubectl run my-nginx-pod-cli --image=nginx:latest --port 80
pod/my-nginx-pod-cli created           ~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~  
                                       파드 이름        파드 생성에 사용할 이미지     컨테이너에서 사용하는 포트
root@master:/home/vagrant# kubectl get pod
NAME               READY   STATUS              RESTARTS   AGE
my-nginx-pod-cli   0/1     ContainerCreating   0          7s

root@master:/home/vagrant# kubectl get pod
NAME               READY   STATUS    RESTARTS   AGE
my-nginx-pod-cli   1/1     Running   0          2m12s

2) YAML

root@master:/home/vagrant# vi nginx-pod.yaml
apiVersion: v1				# YAML 파일에서 정의한 오브젝트의 API 버전
kind: Pod				# 리소스의 종류 ( kubectl api-resources 명령의 KIND 항목 )
metadata:				# 라벨, 주석(annotation), 이름과 같은 리소스의 부가 정의
  name: my-nginx-pod
spec:					# 리소스 생성을 위한 정보
  containers:
  - name: my-nginx-container
    image: nginx:latest
    ports:
    - containerPort: 80
      protocol: TCP


root@master:/home/vagrant# kubectl apply -f nginx-pod.yaml
pod/my-nginx-pod created

root@master:/home/vagrant# kubectl get pod
NAME               READY   STATUS              RESTARTS   AGE
my-nginx-pod       0/1     ContainerCreating   0          4s
my-nginx-pod-cli   1/1     Running             0          11m

root@master:/home/vagrant# kubectl get pod
NAME               READY   STATUS    RESTARTS   AGE
my-nginx-pod       1/1     Running   0          30s
my-nginx-pod-cli   1/1     Running   0          11m

3. pod의 자세한 정보 확인

root@master:/home/vagrant# kubectl describe pods my-nginx-pod
Name:             my-nginx-pod
Namespace:        default
Priority:         0
Service Account:  default
Node:             worker2/192.168.10.120
Start Time:       Thu, 05 Oct 2023 09:35:33 +0900
Labels:           <none>
Annotations:      cni.projectcalico.org/containerID: 0efd9cdd086dc6d97e07ac287031ed60737fb83a7394923c038ec9835267a28d
                  cni.projectcalico.org/podIP: 10.233.125.6/32
                  cni.projectcalico.org/podIPs: 10.233.125.6/32
Status:           Running
IP:               10.233.125.6	⇐ 파드 IP (클러스터 내부에서만 접근이 가능)
IPs:					   → 쿠버네티스 외부 또는 내부에서 파드에 접근하려면 서비스를 생성해야 함
  IP:  10.233.125.6
Containers:
  my-nginx-container:
    Container ID:   containerd://3270e6b5ba24638ed577aa27a222912244babee1915e44188a6ea9444dacf7ba
    Image:          nginx:latest
    Image ID:       docker.io/library/nginx@sha256:32da30332506740a2f7c34d5dc70467b7f14ec67d912703568daff790ab3f755
    Port:           80/TCP
    Host Port:      0/TCP
    State:          Running
      Started:      Thu, 05 Oct 2023 09:35:53 +0900
    Ready:          True
    Restart Count:  0
    Environment:    <none>
    Mounts:
      /var/run/secrets/kubernetes.io/serviceaccount from kube-api-access-bs4qt (ro)
Conditions:
  Type              Status
  Initialized       True
  Ready             True
  ContainersReady   True
  PodScheduled      True
Volumes:
  kube-api-access-bs4qt:
    Type:                    Projected (a volume that contains injected data from multiple sources)
    TokenExpirationSeconds:  3607
    ConfigMapName:           kube-root-ca.crt
    ConfigMapOptional:       <nil>
    DownwardAPI:             true
QoS Class:                   BestEffort
Node-Selectors:              <none>
Tolerations:                 node.kubernetes.io/not-ready:NoExecute op=Exists for 300s
                             node.kubernetes.io/unreachable:NoExecute op=Exists for 300s
Events:
  Type    Reason     Age   From               Message
  ----    ------     ----  ----               -------
  Normal  Scheduled  10m   default-scheduler  Successfully assigned default/my-nginx-pod to worker2
  Normal  Pulling    10m   kubelet            Pulling image "nginx:latest"
  Normal  Pulled     10m   kubelet            Successfully pulled image "nginx:latest" in 18.263s (18.264s including waiting)
  Normal  Created    10m   kubelet            Created container my-nginx-container
  Normal  Started    10m   kubelet            Started container my-nginx-container

쿠버네티스가 파드를 사용하는 이유

: 여러 리눅스 네임스페이스를 공유하는 여러 컨테이너들을 추상화된 집합으로 사용하기 위함

React - 이벤트 핸들링

_민주 — Tue, 24 Oct 2023 18:22:17 +0900

이벤트 핸들러

: 이벤트가 발생했을 때 처리되는 함수

1. 리액트에서 이벤트를 사용할 때 주의사항

1) 이벤트 이름은 카멜 표현식을 사용

첫 글자를 대문자로 적되, 맨 앞에 오는 글자는 소문자로 표기하는 것

ex) onClick , onChange...

2) 이벤트 핸들러로 자바스크립트 코드를 사용할 수 없고, 함수 형태로 전달

HTML  ⇒ <button onClick="console.log('클릭되었습니다.')" />
react ⇒ <button onClick={ () => console.log('클릭되었습니다.') } />

3) 이벤트는 DOM 요소(element)에만 사용이 가능

<div onMouseOver={ () => { ... } }> ... </div> 			⇐ div는 HTML DOM 요소이므로 이벤트 설정이 가능
<MyComponent onMouseOver={ () => { ... }> ... </MyComponent> 	⇐ MyComponent는 컴포넌트이므로 이벤트 설정이 불가

2. 리액트에서 처리할 수 있는 이벤트 종류

https://legacy.reactjs.org/docs/events.html#supported-events

SyntheticEvent – React

A JavaScript library for building user interfaces

legacy.reactjs.org

이벤트 종류마다 처리에 필요한 정보가 다르고, 해당 정보는 이벤트 객체(이벤트 핸들러 함수의 매개변수로 전달)을 통해서 전달

 <button onClick={e => console.log('onClick', e)}>클릭</button>
<br/>
<input type="text" onKeyUp={e => console.log('onKeyUp', e)} />

3. 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하고자하는 경우 =>

부모 컴포넌트에 이벤트 핸들러 함수를 정의하고 자식 컴포넌트의 props 변수로 전달하면, 자식 컴포넌트는 props

변수로 전달된 함수를 이벤트 핸들러 함수로 설정

import { Component, useState } from 'react';

function Child({ count, handlerReset }) {
  return (
    <>
      <h1>현재 카운트: {count}</h1>
      <button onClick={handlerReset}>리셋</button>
    </>
  );
}

function Parent() {
  const [count, setCount] = useState(0);
  const handlerPlusOne = () => setCount(count + 1);
  const handlerMinusOne = () => setCount(count - 1);
  const handlerReset = () => setCount(0);
  return (
    <>
      <Child count={count} handlerReset={handlerReset} />
      <h1>현재 카운트: {count}</h1>
      <button onClick={handlerPlusOne}>하나 증가</button>
      <button onClick={handlerMinusOne}>하나 감소</button>
      <button onClick={handlerReset}>리셋</button>
    </>
  );
}

function App() {
  return (
    <>
      <Parent />
    </>  
  );
}
export default App;

handlerReset함수를 부모컴포넌트에 정의하고 해당 함수를 자식 컴포넌트의 props로 전달해서 이벤트 핸들러로 설정

쿠버네티스(kubernetes, k8s)

_민주 — Mon, 23 Oct 2023 18:13:55 +0900

쿠버네티스란?

컨테이너 기반의 애플리케이션을 개발하고 배포할 수 있도록 설계된 오픈 소스 플랫폼

컨테이너 오케스트레이션 ( 시스템 전체를 통괄하고 여러개의 컨테이너를 관리) 도구

Docker	k8s
한대의 물리적 서버	여러 대의 물리적 서버
도커 컴포즈	매니페스트
컨테이너 생성에만 관여	컨테이너 상태를 유지(배포 , 관리)

1) 설치환경

개발용도
: minikube, Docker for Window 에 내장된 쿠버네티스=> 한대의 컴퓨터에 마스터노드와 워커노드 구축
테스트/ 운영 용도
: kops, kubespray, kubeadmin, EKS, AKS,GKE 등

2) cluster

: 애플리케이션 컨테이너를 실행하기 위한 일련의 노드 머신

마스터 노드와 워커 노드로 구성

마스터 노드	워커노드
전체적인 제어 담당	실제 동작을 담당
-kube-apiserver : 외부와 통신하는 프로세스, kubectl로부터 명령을 전달받아 실행 - kube-controller-manager : 컨트롤러를 통합 관리, 실행 - kube-scheduler : 파드를 워커노드에 할당 - cloud-controller-manager : 클라우드 서비스와 연동해 서비스 생성 - etcd : 클러스터 관련 정보 전반을 관리하는 데이터 베이스 => control-plane을 통해 워커노드를 관리	- kube-let : 마스터 노드의 kube-scheduler와 연동하며 워커노드에 파드릴 배치하고 실행 실행 중인 파드의 상태를 정기적으로 모니터링하여 kube-scheduler에 통지 - kube-proxy : 네트워크 통신의 라우팅 메커니즘

3) 쿠버네티스 리소스

pod	기본적으로 컨테이너 + 볼륨, 쿠버네티스에서 관리하는 가장 작은 단위
node	컨테이너를 배치하는 서버
replicaset	파드의 수를 관리하는 반장
deployment	파드의 디플로이(배포)를 관리
daemonset	각 노드에 파드를 하나씩 배치
service	여러개의 파드를 이끄는 반장
Ingress	외부에서 내부로 들어오는 네트워크 요청
namespace	리소스를 논리적으로 구분하는 장벽
configMap	컨테이너에서 필요한 환경설정 내용을 컨테이너와 분리해서 제공해 주기 위한 기능
secret	비밀번호, OAuth 토큰, ssh 키 같은 민감한 정보들을 저장하는 용도로 사용
Job	특정 개수만큼의 파드를 정상적으로 실행 / 종료 되는 것을 보장
CronJob	Job을 시간 기준으로 관리하도록 생성
Storage	저장소...
Statefulset	파드 집합의 디플로이먼트와 스케일링을 관리하고, 파드들의 순서 및 고유성을 보장

리소스 관련 내용과 실습은 정리 후 차례대로 링크 넣을 예정!

React - 상태변수 state / setState()

_민주 — Mon, 23 Oct 2023 12:46:35 +0900

상태변수 state

: 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값

상태 변수의 값이 변경되면 리렌더링이 발생

클래스형 컴포넌트는 setState() 메소드를 이용, 함수형 컴포넌트는 useState() 훅 함수가 반환하는 함수를 이용해서 값을 변경해야 함

1. 클래스형 컴포넌트

App.js

import Counter from './Counter';

function App(){
	return(
    	<>
        	<Counter />        
        </>
    );
}

export default App;

1) 클래스형 컴포넌트에서 state 사용

import { Component } from 'react';

class Counter extends Component{
	constructor(props){
            super(props);
            this.state = {
                number : 0       
            }
	};
	render(){
            return(
                <>
                        <h1> {this.state.number} </h1>
                        <button onClick={ () => {this.setState({number : this.state.number +1});
                        console.log(this.state.number);
                        }}> +1 </button>
                </>
            );
    };
};

export default Counter;

화면 : 버튼 클릭할 때마다 숫자가 증가함

console : 업데이트 이전의 값이 출력됨

2) 상태변수 setState() 를 사용하지않고, 변경하는 형태로 코드를 수정

  <button onClick={ () => {
                    console.log(this.state.number);
                    // this.setState({number : this.state.number +1});
                    this.state.number = this.state.number +1;
                    console.log(this.state.number);
                }}> +1 </button>

화면 : 버튼 클릭할 때마다 숫자가 증가하지않음

console : 업데이트 이전의 값과 클릭후 증가된 값이 변경됨을 확인

3) number 변수를 상태변수가 아닌 일반변수로 변경

import { Component } from 'react';

class Counter extends Component{

    number = 0;
	render(){
    	return(
        	<>
            	<h1> {this.number} </h1>

                <button onClick={ () => {
                    console.log(this.number);
                    this.number = this.number +1;
                    console.log(this.number);
                }}> +1 </button>
            </>
        );
    };
};

export default Counter;

화면 : 버튼 클릭할 때마다 숫자가 증가하지않음

console : 업데이트 이전의 값과 클릭후 증가된 값이 변경됨을 확인

=> 상태변수를 사용하는 이유

: 변수의 값 변화가 화면에 반영되어야 하는 경우 상태변수를 사용하고,

이때 상태변수의 값 변경을 위해서는 setState() 를 이용해야함

4) 상태변수를 지역변수로 재정의해서 사용

import { Component } from "react";

class Counter extends Component {

    constructor(props) {
    	super(props);
        this.state = {
            number: 0   // 상태변수이름 : 상태변수초기값
        };
    }

    render() {
        // 상태 변수가 하나 또는 개수가 적다면 아래와 같이 직접 선언
        // const number = this.state.number;
        
        // 일반적으로 객체 비구조화를 이용해서 상태변수의 값을 분해해서 지역변수로 할당
        const { number } = this.state;
        
        return (
            <>
                {/* 상태변수의 값을 출력 */}
                <h1>{number}</h1>

                {/* 버튼을 하나 추가해서 해당 버튼을 클릭할 때 마다 상태변수의 값을 하나씩 증가 */}
                <button onClick={() => {
                    console.log("Before:", number);
                    this.setState({ number: number + 1 });
                    console.log("After:", number);
                }}>하나 증가</button>
            </>
        );
    }
}
export default Counter;

setState()

: 컴포넌트 state의 변경사항을 대기열에 집어넣고, React에 해당 컴포넌트와 자식들이 갱신된 state를 사용하여 다시 렌더링 되어야한다고 알려줌

컴포넌트를 갱신하는 데에 있어 즉각적인 명령이 아닌 요청임.

1. 클래스형 컴포넌트

1) updater 함수 이용 => setState(updater[,callback])

<button onClick={ () => {
    console.log(number);
    // this.setState({ number: number + 1 }); 
    this.setState(currentState => ({number : currentState.number+1})); //update 함수 이용
    console.log(number);
}}> +1 </button>

화면 : 버튼 클릭할 때마다 숫자가 증가함

console : 업데이트 이전의 값이 출력됨

2) 변경객체를 전달하는 방법 => setState(stateChange[,callback])

<button onClick={ () => {
    console.log(number);
    // this.setState({ number: number + 1 }); 
    this.setState(currentState => ({number : currentState.number+1}),
    				()=> console.log(this.state.number)    				
                    ); //update 함수 이용
}}> +1 </button>

화면	console
+1 증가	before= after	this.setState({num : num +1}); this.setState({num : num +1}); this.setState({num : num +1});
+3 증가	before = after	this.setState(curNum => ({num: curNum.num+1})); this.setState(curNum => ({num: curNum.num+1})); this.setState(curNum => ({num: curNum.num+1}));
+3 증가	before ≠ after(+3)	this.setState(curNum => ({num: curNum.num+1}), ()=> console.log(this.state.num) );

2. 함수형 컴포넌트

import { useState } from 'react';

function Counter(){

    const {number, setCount} = useState('');
    return(
        <>
            <h1> {number} </h1>

            <button onClick={
                ()=>setCount(number+1)
            }> +1 </button>
        </>
    );

};
export default Counter;

클래스 Component	함수형 Component
this.setState(curState => ({num : curState.num +1}));	const {num , setNum} = useState(''); () => setNum(num + 1)

React Practice - 함수형 Component 사용하여 생성한 신호등 클래스형 Component로 변경해보기

_민주 — Mon, 23 Oct 2023 10:27:05 +0900

https://kalswn.tistory.com/17

React Practice - 함수형 Component 사용하여 _ 신호등 만들기

신호등 모양을 출력하는 컴포넌트 작성하기 - App.js 파일에 일정한 크기의 Lamp를 포함한 TrafficLight 컴포넌트를 포함 - TrafficLight 컴포넌트는 빨강, 초록, 노랑 속성을 가지는 같은 크기의 Lamp 컴포

kalswn.tistory.com

함수형 컴포넌트로 생생했던 신호등을 클래스형 컴포넌트로 변경해보기!

TraffiLight.js

import {Component} from 'react';
import Lamp from './Lamp'

class TrafficLight extends Component {

    render(){
        const {size, colors} = this.props;
        return(
            <>
            {
                colors.map(color => <Lamp size = {size} color = {color}/>)
            }
            </>
        )
    }

}

// function TrafficLight({size,colors}){
//     console.log(size,colors);
//     return(
//         <>
//             {
//                 colors.map(color => <Lamp size = {size} color = {color}/>)
//             }
        
//         </>
//     );
// }

export default TrafficLight;

Lamp.js

import { Component } from "react";

class Lamp extends Component{
    render(){
        const {size, color} = this.props;
        return(
            <>
                <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : color}} />
            </>
        );
    }
}

// function Lamp({size,color}){
//     return(
//         <>
//             <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : color}} />
//         </>
//     );
// };

export default Lamp;

	함수형 Component	클래스형 Component
변수 선언	function TrafficLight({size,colors}){ ... }	class TrafficLight extends Component{ render(){ const {size,colors} = this.props; ....}

React Practice - 함수형 Component 사용하여 _ 신호등 만들기

_민주 — Mon, 23 Oct 2023 10:02:56 +0900

신호등 모양을 출력하는 컴포넌트 작성하기

- App.js 파일에 일정한 크기의 Lamp를 포함한 TrafficLight 컴포넌트를 포함

- TrafficLight 컴포넌트는 빨강, 초록, 노랑 속성을 가지는 같은 크기의 Lamp 컴포넌트 3개를 포함

- Lamp 컴포넌트는 색상과 크기를 부모 컴포넌트로부터 전달받아서 해당 색상과 크기의 원을 출력

- 100px의 붉은색 동그라미를 출력 => <div style ={{width:100, height : 100, borderRadius : 50, bacgroundColor : 'red'}} />

1) App.js 에 신호등 만들기

function App() {
  return (
    <>
      <div style ={{width:100, height : 100, borderRadius : 50, backgroundColor : 'red'}} />
      <div style ={{width:100, height : 100, borderRadius : 50, backgroundColor : 'yellow'}} />
      <div style ={{width:100, height : 100, borderRadius : 50, backgroundColor : 'green'}} />
    </>
  );
}

export default App;

2) TrafficLight.js 생성하여 App.js 에서 사이즈 전달하기

App.js

import TrafficLight from './trafficLight/TrafficLight';

function App() {
  return (
    <>
      <TrafficLight size={100}/>
    </>
  );
}

export default App;

TrafficLight.js

function TrafficLight({size}){

    return(
        <>
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : 'red'}} />
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : 'yellow'}} />
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : 'green'}} />        
        
        </>
    );
}

export default TrafficLight;

3) Lamp.js 생성하여 부모 컴포넌트에서 사이즈 와 색상 전달받기

TrafficLight.js

import Lamp from './Lamp'

function TrafficLight({size}){

    return(
        <>
            <Lamp size={size} color='red'/>
            <Lamp size={size} color='yellow'/>
            <Lamp size={size} color='green'/>
        
        </>
    );
}

export default TrafficLight;

Lamp.js

function Lamp({size,color}){

    return(
        <>
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : color}} />
        </>
    );
};

export default Lamp;

4) App.js 파일에서 색상을 배열로 넘겨주고 TrafficLight.js 에서 map함수 사용하여 변경

App.js

import TrafficLight from './trafficLight/TrafficLight';

function App() {
  const tlSize = 100;
  const tlColors = ['red', 'yellow', 'green'];

  return (
    <>
      <TrafficLight size={tlSize} colors = {tlColors}/>
    </>
  );
}

export default App;

TrafficLight.js

import Lamp from './Lamp'

function TrafficLight({size,colors}){

    return(
        <>
            {
                colors.map(color => <Lamp size = {size} color = {color}/>)
            }

            {/* <Lamp size={size} color='red'/>
            <Lamp size={size} color='yellow'/>
            <Lamp size={size} color='green'/> */}
        
        </>
    );
}

export default TrafficLight;

Lamp.js

function Lamp({size,color}){

    return(
        <>
            <div style ={{width:size, height : size, borderRadius : size/2, backgroundColor : color}} />
        </>
    );
};

export default Lamp;

React - 클래스형 컴포넌트 / 함수형 컴포넌트 / Props

_민주 — Sat, 21 Oct 2023 22:24:09 +0900

클래스형 컴포넌트

MyComponentClass.js

import { Component } from "react";

class MyComponentClass extends Component {
    render() {
        return (
            <>
                <h1>이름은 홍길동입니다.</h1>
                <h2>나이는 23살입니다.</h2>
            </>
        );
    }
}

export default MyComponentClass;

App.js

import MyComponentClass from './MyComponentClass';

function App() {
  return (
    <>
      <MyComponentClass />
    </>  
  );
}

export default App;

함수형 컴포넌트

MyComponentFunction.js

function MyComponentFunction(){
	return(
    	<>
        	<h1>이름은 홍길동입니다.</h1>
            <h2>나이는 26살입니다.</h2>
        </>
    );
}

export default MyComponentFunction;

App.js

import MyComponentFunction from './MyComponentFunction';

function App() {
  return (
    <>
      <MyComponentFunction />
    </>  
  );
}

export default App;

Props

: properties 줄임말

컴포넌틔의 속성을 설정할 때 사용

props 변수의 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정

컴포넌트 자신은 해당 props 값을 읽기 전용으로 사용만 가능

<Parent>
		<Child 변수이름=변수값 변수이름=변수값></Child>
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
                     props
</Parent>

App.js

import MyComponentClass from './MyComponentClass';
import MyComponentFunction from './MyComponentFunction';

function App() {
  return (
    <>
      <MyComponentClass name="신길동" />
      <hr/>
      <MyComponentFunction name="고길동" />
    </>  
  );
}

export default App;

클래스형 컴포넌트	함수형 컴포넌트
import { Component } from "react"; class MyComponentClass extends Component { render() { console.log(this); console.log(this.props);⇐ 부모 클래스(Componet)에 정의된 속성 return ( <> <h1>이름은 {this.props.name}입니다.</h1> <h2>나이는 23살입니다.</h2> </> ); } } export default MyComponentClass;	function MyComponentFunction(props) { console.log(props); return ( <> <h1>이름은 {props.name}입니다.</h1> <h2>나이는 23살입니다.</h2> </> ); } export default MyComponentFunction;
this.props	변수로 받아옴
import { Component } from "react"; class MyComponentClass extends Component { render() { const { name, age, nickname } = this.props; // {name: '신길동', age: 23, nickname: '길동'} return ( <> <h1>이름은 {name}입니다.</h1> <h2>나이는 {age}살입니다.</h2> <h2>별명은 {nickname}입니다.</h2> </> ); } } export default MyComponentClass;	function MyComponentFunction(props) { const { name, age, nickname } = props; return ( <> <h1>이름은 {name}입니다.</h1> <h2>나이는 {age}살입니다.</h2> <h2>별명은 {nickname}입니다.</h2> </> ); } export default MyComponentFunction;
defaultProps 설정 import { Component } from "react"; class MyComponentClass extends Component { render() { const { name, age, nickname } = this.props; // {name: '신길동', age: 23, nickname: '길동'} return ( <> <h1>이름은 {name}입니다.</h1> <h2>나이는 {age}살입니다.</h2> <h2>별명은 {nickname}입니다.</h2> </> ); } } MyComponentClass.defaultProps = { name: '아무개', age: 0, nickname: '없음' }; export default MyComponentClass;	defaultProps 설정 function MyComponentFunction({ name, age, nickname }) { return ( <> <h1>이름은 {name}입니다.</h1> <h2>나이는 {age}살입니다.</h2> <h2>별명은 {nickname}입니다.</h2> </> ); } MyComponentFunction.defaultProps = { name: '아무개', age: 0, nickname: '없음' }; export default MyComponentFunction;
props.children import './App.css'; import MyComponentClass from './MyComponentClass'; import MyComponentFunction from './MyComponentFunction'; function App() { return ( <> <MyComponentClass> <i>어떤 내용</i> </MyComponentClass> <hr/> <MyComponentFunction> <i>또 어떤 내용</i> </MyComponentFunction> </> ); } export default App; => <i> 어떤내용</i> 는 화면에 나오지 않음
import { Component } from "react"; class MyComponentClass extends Component { render() { console.log(this.props); const { name, age, nickname } = this.props; // {name: '신길동', age: 23, nickname: '길동'} return ( <> <h1>이름은 {name}입니다.</h1> <h2>나이는 {age}살입니다.</h2> <h2>별명은 {nickname}입니다.</h2> <div>{this.props.children}</div> </> ); } } MyComponentClass.defaultProps = { name: '아무개', age: 0, nickname: '없음' }; export default MyComponentClass;	function MyComponentFunction({ name, age, nickname, children }) { return ( <> <h1>이름은 {name}입니다.</h1> <h2>나이는 {age}살입니다.</h2> <h2>별명은 {nickname}입니다.</h2> <div>{children}</div> </> ); } MyComponentFunction.defaultProps = { name: '아무개', age: 0, nickname: '없음' }; export default MyComponentFunction;

JSX - 역할 / 장점 / 사용법

_민주 — Sat, 21 Oct 2023 18:26:55 +0900

JSX

: JavaScript + Xml

: A Syntax eXtension to JavaScript 자바스크립트 확장 문법

태그에 특화된 속성 스타일과 관련된 속성 이벤트 핸들러

~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~

| 속성 ( attribute) => 태그를 처리하는 데 필요한 부가적인 정보

+ㅡ 태그(tag) => 시작 태그와 종료 태그로 구성 => 종료 태그가 생략되거나 자기 종료되는 경우가 있음

~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~

내용(context)

요소(element) = 태그 + 속성 + 컨텍스트

HTML => XML

~~~~~~~~~~~~~~~~~~

const element = <h1> Hello, World (/h1>; => JavaScript + XML = JSX

~~~~~~~~~~~~ ~

| |

+ㅡㅡㅡㅡㅡJavaScriptㅡㅡㅡㅡㅡ+

역할

JSX는 내부적으로 XML/HTML 코드를 JavaScript로 변환하는 과정을 거침

~~~~~~~~~~~~~

createElement() 함수가 담당

React.createLement(

type, // 엘리먼트의 유형, HTML 태그 또는 다른 리액트 엘리먼트

[props], // 부모 엘리먼트에서 자식 엘리먼트에게 전달하는 값

[...children] // 현재 엘리먼트가 포함하고 있는 자식 엘리먼트

)

순수 자바스크립트로 작성한 코드

funtion MyButton(){
	const [isClicked, setIsClicked ] = React.useState(false);
    
    return React.createElement(
    	'button'
        { onClick: () => setIsClicked(!isClicked) },
        isClicked ? "클릭되었습니다." : "클릭해주세요."
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(MyButton));

JSX 로 작성한 코드

function App(){
	const [isClicked, setIsClicked] = useState(false);
    
    return (
    	<button onClick={()=> setIsClicked(!isClicked)}>
        {isClicked ? "클릭되었습니다." : "클릭해주세요."
        </button>
    );
}

const root = ReactDOM.createRoot(Document.getElemnetById('roor'));
root.render(<App />);

장점

코드가 간결해진다.

가독성이 향상되고 유지보수성이 좋아진다.

보안성이 향상된다. => xss 공격을 방어할 수 있음

사용법

1) 반드시 부모 요소 하나로 감싸야 한다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
    <h1>리액트 앱</h1>	⇐ Adjacent JSX elements must be wrapped in an enclosing tag. 
  );				   Did you want a JSX fragment <>...</>?	=> 오류 발생
}

export default App;

1. <div> 태그로 감싸는 방법

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>					⇐ 루트 엘리먼트를 추가
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <h1>리액트 앱</h1> 
    </div>
  );
}

export default App;

2. Fragment 컴포넌트를 이용

import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';

function App() {
  return (
    <Fragment>						⇐ 불필요하게 태그가 추가되는 것을 방지
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <h1>리액트 앱</h1> 
    </Fragment>
  );
}

export default App;

3. Fragment 를 축약 방식으로 사용

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <>		// Fragement를 축약 방식으로 사용
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <h1>리액트 앱</h1> 
    </>
  );
}

export default App;

2) JSX 안에서는 자바스크립트의 표현식을 {}로 감싸서 작성

function App() {
  const name = '홍길동';
  const age = 23;

  return (
    <>
      <h1>안녕, {name}</h1>      
      <h2>내년에 나이는 {age+1}입니다.</h2>
    </>
  );
}

export default App;

3) JSX 내부에서는 자바스크립트의 if문을 사용할 수 없으므로 , 삼항연산자를 사용해야함

삼항연산자?

조건식 ? 참인경우 : 거짓인경우

function App() {
  const name = '홍길동';
  return (
    <>
      <h1>{name}님, </h1>      
      <h2>{ name === '홍길동' ? '환영합니다.' : '환영하지 않습니다.' }</h2>
    </>
  );
}

export default App;

4) 조건을 만족할 때만 내용을 보여줄 경우 => 조건부 렌더링

1. 삼항연산자를 사용

function App() {
  const name = '홍길동';
  return (
    <>
      <h1>{name}님, </h1>      
      <h2>{ name === '홍길동' ? '환영합니다.' : null }</h2>	⇐ 조건을 만족하지 않는 경우 null 반환
    </>									                     → 화면에 내용이 출력되지 않음
  );
}

export default App;

2. && 연산자를 사용

function App() {
  const name = '홍길동';
  return (
    <>
      <h1>{name}님, </h1>      
      { name === '홍길동' && <h2>환영합니다.</h2> }
    </>
  );
}

export default App;

5) 함수에서 undefined를 반환하지 않도록 해야 함

function App() {
  const name = undefined;
  return name || 'undefined 입니다.';	⇐ || 연산자를 이용해서 undefined이 경우 사용할 기본값을 지정할 수 있음
}

export default App;

6) 인라인 스타일링

: DOM 요소에 스타일을 적용할 때는 객체 형태로 적용해야 하며, 스타일 이름은 카멜 표현식을 사용

function App() {
  const name = '리액트';
  const nameStyle = {
    backgroundColor: 'black', 
    color: 'yellow', 
    fontSize: 48,       // 단위를 생략하면 'px'이 기본
    padding: '16px'
  };
  return (
    <div style={nameStyle}>
      {name}
    </div>
  );
}

export default App;

7) CSS 클래스를 사용할 때 class가 아닌 className으로 설정

App.css

.react {
  background-color: black;
  color: yellow;
  font-size: 48px;
  padding: 16px;
}

import './App.css';

function App() {
  const name = '리액트';
  return (
    <div className="react">
      {name}
    </div>
  );
}

export default App;

8) 모든 태그는 반드시 닫는 태그를 사용해야 함

내용이 없는 태그는 self-closing 태그를 사용

import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>

      <input type="text"></input>
      <input type="text" />
      <input type="text">   ⇐ Unterminated JSX contents. (닫는 태그를 사용하지 않으면 오류가 발생)
    </>
  );
}

export default App;

9) 주석(comment)

import './App.css';

function App() {
  // 인라인 주석
  const name = '리액트';    // 인라인 주석 
  /*
      블럭 단위 주석
  */

  return (
    <>
      { /*
          요렇게 해약 주석 처리가 가능 
        */ }
      { // 요렇게 하는 것도 가능
      }
      {
        // 물론 요렇게 하는 것도 가능        
      }
      { // 이렇게 하면 닫는 중괄호가 해석도지 않을 을 수 있음... }
      }
      <div className="react">{name}</div>
    </>
  );
}

export default App;

React - 의미 / 장점 / 단점 / 실행

_민주 — Sat, 21 Oct 2023 15:51:18 +0900

React?

: A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 모음집

** 프레임워크 vs 라이브러리

	프레임워크(Framework)	라이브러리(Library)
사용	앵귤러JS 뷰JS	React
프로그램 흐름 제어 권한	흐름 제어 권한을 개발자가 아닌 프레임워크 갖음	흐름을 제어하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태

** SPA

: Single Page Application 하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션

장점

빠른 업데이트와 렌더링 속도

: 업데이트란 웹사이틀 탐색할 때 화면에 나타나는 내용이 바뀌는것으로, 리액트에서는 빠른 업데이트를 위해 내부적으로 virtaul DOM(Documnet object Model 을 사용

컴포넌트 기반 구조

재사용성

: 다른 곳에서도 쉽게 곧바로 쓸수 있음

의존성을 낮추고 호환성 문제가 발생하지 않도록 개발

하나의 컴포넌트를 계속해서 재사용할 수 있음

=> 재사용성이 높아질 때 장점 : 개발 기간이 단축

유지 보수가 용이

메타(페이스북)의 지원

: 메타(페이스북)의 든든한 지원군을 가짐

활발한 커뮤니티

모바일 앱 개발 가능

: 리액트 네이티브 모바일 환경 UI 프레임워크를 사용하여 모바일 앱 개발 가능

단점

높은 상태 관리 복잡도

외부 상태 관리 라이브러리

create-react-app (CRA) :

웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어있는 상태의 프로젝트를 생성해주는 도구

작업할 디렉토리에서 npx create-react-app 프로젝트이름

C:\react> npx create-react-app my-app

프로젝트로 들어가 서버 실행

C:\react> cd my-app
C:\react\my-app> npm start

JavaScript - Axios 이용한 외부 데이터 연동

_민주 — Sat, 21 Oct 2023 13:50:09 +0900

Axios

: node.js와 브라우저를 위한 Promiss 기반 HTTP 클라이언트

서버사이드에서는 네이티브 node.js의 http 모듈을 사용하고,

클라이언트(브라우저)에서는 XMLHttpReauests를 사용

설치

node.js 설치 : https://nodejs.org/ko/download

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

node.js 설치 확인

C:\>node -v
v18.18.2

C:\>npm -v
9.8.1

작업 디렉터리를 생성 후 , 웹서버를 실행

C:\>mkdir react
C:\>cd react

C:\react> npm install -g http-server // => http-server : 웹 페이지에서 사용할 웹 서버

C:\react> npx http-server		// 현재 디렉터리를 웹 루트 디렉터리로 하는 웹 서버를 실행
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://172.28.0.1:8081
  http://172.18.128.1:8081
  http://192.168.10.1:8081
  http://10.0.0.1:8081
  http://192.168.153.1:8081
  http://192.168.111.1:8081
  http://192.168.0.12:8081
  http://127.0.0.1:8081
Hit CTRL-C to stop the server

브라우저에서 http://localhost:80080 으로 접속

index.html 파일 생성

C:\react> code .

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello React</h1>
</body>
</html>

** html:5 - HTML5 boilerplate(반복적으로 사용되는 구문) 입력하는 방법 중 하나

실행에 필요한 자바스크립트 라이브러리 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <!-- 실행에 필요한 자바스크립트 라이브러리를 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

</head>
<body>
    <script>
    </script>
</body>
</html>

axios를 이용하여 국가 및 국기 데이터를 가져옴

https://restcountries.com/v3.1/all?fields=name,flags

사용하는 데이터

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <!-- 실행에 필요한 자바스크립트 라이브러리를 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        // axios를 이용해서 국가 및 국기 데이터를 가져옮
        axios
        .get('https://restcountries.com/v3.1/all?fields=name,flags')
        .then(res => {
            console.log(res);
        })
        .catch(err => console.log(err));
    </script>
</body>
</html>

데이터를 가공하고 뿌려지는 코드 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <!-- 실행에 필요한 자바스크립트 라이브러리를 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
    <ul>
    </ul>


    <script>
        // axios를 이용해서 국가 및 국기 데이터를 가져옮
        axios
        .get('https://restcountries.com/v3.1/all?fields=name,flags')
        .then(res => {

            res.data.forEach(nf => {		// 가져온 데어터는 res.data 에 들어있음
                const li = `				// forEach를 사용하여 필요한 데이터를 가져옴
                    <li>
                        <img src="${nf.flags.png}" alt="${nf.flags.alt}">
                        <p>${nf.name.common} (${nf.name.official})</p>
                    </li>
                `;
                $('ul').append(li);
            });
        })
        .catch(err => console.log(err));
    </script>
</body>
</html>

JavaScript - 함수( 화살표 , map(), reduce(),filter())

_민주 — Fri, 20 Oct 2023 18:24:14 +0900

1. 화살표 함수 (arrow function)

: function 키워드 대신 화살표(=>)를 사용하여 간략한 방법으로 함수를 선언

// 익명 함수  표현식을 이용한 함수 정의
let add = function(a, b) { return a+b };

//화살표 함수
let add2 = (a, b) => { return a+b };

// 한줄일 경우 중괄호를 생략하면 화살표 오른쪽의 결과를 반환
let add3 = (a, b) => a+b;

// 파라미터가 하나일 경우 파라미터를 감싸고 있는 소괄호도 생략 가능
let add4 = a => a+4;

// 객체를 반환하는 경우에는 소괄호로 감싸야 함
let add5 = (a, b) => {return {result:a+b}};
let add6 = (a, b) => ({result:a+b});

2. map 함수

: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

const numbers = [1, 4, 9, 16] ;

const twoTimes = numbers.map(number => number * 2);
console.log(twoTimes); 		// [2, 8, 18, 32]

const f = value => value *2;
const twoTimes = numbers.map(f)

const g = value => value *10 ;

const gop = numbers.map(f).map(g);
console.log(gop)		// [20, 80, 180, 320]

3. filter 함수

: 입력한 조건을 바탕으로 데이터를 필터링하는 함수

const words = [ 'srpay', 'limit', 'elite', 'destruction', 'present', 'exuberant' ];

// 길이가 여섯 글자 이상인 단어만 추출

const newWords = words.filter(word => word.length >= 6);
console.log(newWords);		// ['destruction', 'present', 'exuberant']

+) map함수 + filter 함수

// 짝수만 추출해서 10배수한 결과를 출력

const numbers = [ 1, 3, 4, 6, 11, 14 ];

const newNum = numbers.filter(number => number % 2 === 0).map(number => number *10);
console.log(newNum);		// [40, 60, 140]

4. reduce 함수

: 배열의 요소를 하나로 줄이는 작업을 수행

const numbers = [ 1, 2, 3, 4, 5 ];

let sum = numbers.reduce((previous, current) => previous + current);
console.log(sum);

// 각 과목의 총합 구하기
let scores = [];
scores[0] = {name: '홍길동', korean: 80, math: 90, english: 90};
scores.push({name: '고길동', korean: 90, math: 80, english: 80});
scores.push({name: '신길동', korean: 70, math: 80, english: 70});
console.log(scores);

const fk = scores.map(s => s.korean).reduce((p, c) => p+c);
const fe = scores.map(s => s.english).reduce((p, c) => p+c);
const fm = scores.map(s => s.math).reduce((p, c) => p+c);

console.log('국어 점수 총합', fk);		// 국어 점수 총합 240
console.log('영어 점수 총합', fe);		// 영어 점수 총합 240
console.log('수학 점수 총합', fm);		// 수학 점수 총합 250

ES6(ECMAScript 6) - 단축 속성명 / 계산된 속성명 / 전개 연산자 / 비구조화

_민주 — Fri, 20 Oct 2023 17:32:05 +0900

1. 단축 속성명(shorthand property names)

: 객체의 속성값이 이미 변수로 존재한다면 변수이름만 사용하여 객체 생성 가능

let name = "John";
const obj = {
    age: 21,
    name: name,
    getName: function getName() {
        return this.name;
    }
};


const obj = {
    age: 21,
    name,		// 속성이름과 속성값을 가지고 있는 변수 이름이 동일한 경우
    getName(){		// 속성이름과 함수(메소드) 이름이 동일한 경우 => function 키워드와 함께 생략
        return this.name;
    }
};

2. 계산된 속성명(computed property names)

: 변수를 이용해서 객체 속성의 키를 생성

 // 속성 이름(key)과 속성 값(value)을 전달받아 객체를 반환하는 함수를 정의 
 function returnObject(key, value) {
    /*
    const obj = {};
    obj[key] = value;
    return obj;
    */
    return { [key]: value };
}

 function returnObject(key, value) {
        /*
        const obj = {};
        obj[key] = value;
        return obj;
        */
        return { [key]: value };
    }

 // 속성 이름이 일련번호 형태를 가지는 객체를 반환하는 함수
 function returnObject2(key, value, no) {
    /*
    const obj = {};
    obj[key+no] = value;
    return obj;
    */
    return { [key+no]: value };
}

3. 전개 연산자(spread operator) ...

:배열 또는 객체를 하나하나 넘기는 용도로 사용

const numbers = [10, 20, 1, 30, 3, 2];

console.log(numbers);               // 배열
console.log(...numbers);            // 순열 (숫자의 나열) => 배열 요소의 나열

// 객체를 복사하는 과정에서 새로운 속성을 추가하거나 속성의 값을 변경하는 경우
let obj1 = { age: 26, name: 'hong' };

 /*
let obj2 = { ...obj1 };
obj2.name = 'gildong';
*/
let obj2 = { ...obj1, name: 'gildong' };
console.log(obj2);  // {age: 40, name: 'gildong', color: Array(2)}

// 객체를 결합하는 경우
const obj1 = { age: 21, name: 'hong' };
const obj2 = { hobby: 'soccer', age: 40 };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);      // {age: 40, name: 'hong', hobby: 'soccer'}

const obj4 = { ...obj2, ...obj1 };
console.log(obj4);      // {hobby: 'soccer', age: 21, name: 'hong'}

** 배열 관련 유의사항

let arr1 = [ 1, 2, 3 ];
let arr2 = arr1;
console.log(arr1);		// [1, 2, 3]
console.log(arr2);		// [1, 2, 3]

// 배열 값을 변경
 arr1[1] = 20;
console.log(arr1);		// [1, 20, 3]
console.log(arr2);		// [1, 20, 3]

// => arr2는 arr1 배열의 주소를 복사한 것

// 배열의 주소가 아닌 배열의 값을 복사하는 것이 필요
// 전개 연산자를 이용해서 배열의 값을 복사
let arr5 = [ 1, 2, 3 ];
let arr6 = [ ...arr5 ];
 console.log(arr5);		// [1, 2, 3]
console.log(arr56;		// [1, 2, 3]

arr5[1] = 20;
console.log(arr5);		// [1, 20, 3]
console.log(arr6);		// [1, 2, 3]

4. 비구조화(destructuring)

: 배열 또는 객체의 데이터(요소)를 변수에 나눠서 할당

1) 배열

const arr = [ 1, 2, 3, 4, 5 ];

let [ c, d, e, f ] = arr;
console.log(c, d, e, f);		// 1 2 3 4 
								// =>c, d, e, f 변수에 arr 배열에 첫번째 인덱스부터 차례로 할당

 // 두 변수의 값을 교환
let x = 10;
let y = 20;

비구조화   배열
~~~~~~~~   ~~~~~~~~
[ x, y ] = [ y, x ];
console.log(x, y);		// 10 20

 // 배열의 크기 보다 변수의 개수가 많은 경우, 기본값 설정이 가능
const arr = [ 1, 2 ];
let [ a, b, c=30 , d ] = arr; 
console.log(a, b, c, d);		// 1 2 30 undefined

 // 배열의 일부값을 변수에 할당할 경우, 할당하지 않을 자리는 비워둠
  let arr= [1, 2, 3];
  let a=10, b=20, c=30;
  [ a, , c ] = arr;
  console.log(a, b, c);		//1 20 3
  
// 배열의 값을 할당하고 남은 나머지를 새로운 배열로 만드는 경우 
const arr = [ 1, 2, 3, 4, 5 ];
const [first, ...rest] = arr;

console.log(first);		// 1
console.log(rest);		// [2, 3, 4, 5]

2) 객체

// 객체 비구조화를 할 때는 객체의 속성명(key)이 중요
const obj1 = { age: 21, name: 'mike' };
const obj2 = { age: 40, name: 'john' };

const { age, name } = obj1;
console.log(age, name);		// 21 'mike'

const { ageNew, nameNew } = obj1;
console.log(ageNew, nameNew);		// undefined undefined

// 객체 비구조화를 통해 가져온 값을 새로운 변수 이름으로 사용할 경우 => 별칭을 부여
const { age: ageNew, name: nameNew } = obj1;
console.log(ageNew, nameNew);		//21 'mike'

// 객체에 존재하지 않는 요소를 변수에 할당할 때 적용할 기본값 설정도 가능
const { age, name: nameNew, email='default' } = obj1;
console.log(age, nameNew, email);   // 21 'mike' 'default'

// 객체 비구조화 시 객체의 일부 속성을 변수에 할당하고, 나머지를 새로운 객체로 저장
const obj3 = { age: 32, name: "John", grade: "c" };

// obj3의 age 속성의 값을 johnAge 변수에 할당하고, 나머지를 rest 이름의 객체에 할당
const { age: johnAge, ...rest } = obj3;
console.log(johnAge, rest);     // 32 {name:'John', grade:'c'}

JavaScript - 객체와 배열

_민주 — Thu, 19 Oct 2023 18:43:38 +0900

객체

: 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

// 객체 선언
let person = {
    "name": 'alswn', 
    'age': 26, 
    isMarried: false,
    'favorite color': ['빨강', '노랑'],
    hello: function() {
        return '안녕, 나는 ' + this.name + "이야";
    }
};

// 객체 참조

console.log(person.name);		// 홍길동
console.log(person["name"]);		// 홍길동
console.log(person.favorite color);  // Uncaught SyntaxError: => key 에 공백이 있는 경우
console.log(person["favorite color"]);		// ['빨강', '노랑'] => key
console.log(person.hello());		// 안녕, 나는 홍길동이야

// 순차적으로 참조
for (let key in person) {
    console.log(key, ' 속성의 값은 ', person[key]);
}

배열

: 이름과 인덱스로 참조되는 정렬된 값의 집합

// 배열 선언

let values = ["빨강", "노랑", "파랑", true , 123];		// 배열 리터럴을 이용
let values = Array("빨강", "노랑", "파랑", true , 123);		 //Array 객체의 생성자를 이용
let values = new Array("빨강", "노랑", "파랑", true , 123);		//new 연산자를 이용

// 배열 참조
// 배열이름[인덱스]

console.log('첫번째', values[0]);		// 첫번째 빨강
console.log('마지막', values[values.length-1]);		마지막 123

// 순차적을 접근하는 방법
// for문
for (let i = 0; i < values.length; i ++) {
    console.log(values[i]);
}

// for in 
 for (let index in values) {
    console.log(values[index]);
}

// for of
 for (let value of values) {
    console.log(value);
}

// forEach
 values.forEach(color => console.log(color));

JavaScript - 함수 선언 방식

_민주 — Thu, 19 Oct 2023 13:48:43 +0900

1. 함수 선언식 (Function Declarations)

: 일반적인 프로그래밍 언어에서의 함수 선언과 비슷

function 함수이름(){
	.....
}

function add(x , y){         // add => 함수 이름 정의
    return x + y;
}

console.log(add(10,20));     //함수 이름으로 호출

2. 함수 표현식(Function Expressions )

: 자바스크립트 언어의 특징을 활용한 선언

// 익명 함수 표현식

let add = function(x,y){ return x + y; };		
let sum = add;

console.log(add(10,20));        // 30   
console.log(sum(10,20));        // 30

// 기명 함수 표현식

let sum1 = function add(x, y) { return x + y; };		
let sum2 = sum1;

console.log(sum1(10, 20));  // 30
console.log(sum2(10, 30));  // 40
console.log(add(10, 40));   // 함수 외부에서 호출 시 => Uncaught ReferenceError: add is not defined

//기명 함수 표현식 : 함수 외부에서는 함수 이름으로 사용할 수 없으나,
//					함수 내부에서 자기 호출할 때(=재귀 호출)는 사용 가능.


let myfactorial = function factorial(n) { 
    if (n <= 1) return 1;
    return n * factorial(n-1);		// 함수 내부에서 재귀 호출
}

console.log(myfactorial(10));  //3628800

함수 선언식과 표현식의 차이점

: 함수 선언식은 호이스팅에 영향을 받지만

한수 표현식은 호이스팅에 영향을 받지 않음

**함수 호이스팅

1) 함수 표현식으로 함수를 선언하는 경우 : 함수 선언 이전에는 함수를 호출 할 수 없음

console.log("20 + 30 = ", add(20, 30));		// Uncaught ReferenceError: Cannot access 'add' before initialization


let add = function(x, y) { return x + y; };

2) 함수 선언문으로 함수를 선언하는 경우 : 함수 선언하기 전에 호출할 수 있음

console.log("20 + 30 = ", add(20, 30));     // 20 + 30 = 50
                                  
function add(x, y) { return x + y; }

console.log("30 + 40 = ", add(30, 40));     // 30 + 40 = 70

**+) 변수 호이스팅

1) var <= 변수의 선언이 호이스팅되어 위치와 관계 없이 사용이 가능

console.log(i);     // undefined

var i;              
console.log(i);     // undefined

i = 10;
console.log(i);     // 10

2) let <= 호이스팅이 되지 않아 변수 선언 후 사용해야 함

console.log("j = ", j);		// <==Uncaught ReferenceError: Cannot access 'j' before initialization
							//선언전에 참조하는 경우 오류가 발생
let j;
console.log("j = ", j);     // j = undefined

j = 10;
console.log("j = ", j);     // j = 10

3. Function() 생성자 함수를 이용

: 새로운 Function 객체를 생성

new Function ([arg1[, arg2[, ...argN]],] functionBody)

let add = new Function('x', 'y', 'return x + y');

console.log(add(10,20));		//30

함수 표현식과 함수 선언문 vs Function 생성자

Function 생성자로 생성한 Function 객체는 함수를 생성할 때 구문 분석을 수행

반면 함수 표현식이나 함수 선언문으로 함수를 정의하고 코드 내에서 호출한 경우 나머지 코드와 함께 구문 분석

=> Function 생성자가 더 비효율적

쿠버네티스 실습

_민주 — Thu, 12 Oct 2023 14:00:41 +0900

아래 조건을 만족하는 플라스크 애플리케이션을 개발하고 쿠버네티스 클러스터에 배포해 보세요.

플라스크 애플리케이션은 /whoareyou 요청에 대해 작성자 이름, 호스트 이름, IP 주소를 반환

예) 홍길동, hostname-deployment-7d4f978855-2kkw6, 10.0.0.4

플라스크 애플리케이션을 구동하는 컨테이너 이미지의 이름은 whoami-flask:v1 으로 설정해 본인의 도커 허브에 등록

디플로이먼트의 레플리카는 5개로 설정해서 배포하고, LoadBalancer 타입의 서비스를 이용해서 디플로이먼트를 연동

1) 플라스크 애플리케이션은 /whoareyou 요청에 대해 작성자 이름, 호스트 이름, IP 주소를 반환

가상환경을 만들어 flask 서버를 설치

(whoami-flask) C:\kubernetes\whoami-flask>

작성자이름 / 호스트 이름/ IP 주소를 반환하는 파일 생성

2) 플라스크 애플리케이션을 구동하는 컨테이너 이미지의 이름은 whoami-flask:v1 으로 설정해 본인의 도커 허브에 등록

현재 가상환경에 설치된 python 패키지를 버전과 함께 작성하여 requirements.txt 파일에 저장

Dockerfile 작성

Docker 이미지 생성

컨테이너 실행

도커 허프에 이미지 등록

디플로이먼트의 레플리카는 5개로 설정해서 배포하고, LoadBalancer 타입의 서비스를 이용해서 디플로이먼트를 연동

MetalLB 설치

strict ARP mode 활성화

MetalLB 설치

라우팅 정의

디플로이먼트와 서비스 생성

EXTERNAL - IP 10.0.0.30 임을 확인

=> pod의 ip 확인

LoadBalancer IP 10.0.0.30 으로 접속했을때 5개의 파드로 요청이 분배되는 것을 확인 할수 있다.

_민주

[Badminton Without Nets] 개인 정보 처리 방침

[Badminton without nets] 개인 정보 처리 방침

[Shoulders] 개인 정보 처리 방침

1년 미만 근로자의 중소기업청년전세대출 (순서 꿀팁)

중소기업 청년전세대출 (중기청)

순서

1. 집 구하기

2. 기금e든든 사전심사

3. 은행 방문

순서 꿀팁

필요한 자료

Next14 App Router react-quill 사용 (build 시 prerendered error 해결)

react-quill 이란?

react-quill 사용방법

Next14 App Router 에러 해결

Next 로그인 (google provider 백엔드 구현 및 session에 사용자 정보 저장) (feat. next14 app-router)

Next-Auth Login(Google/ jwt) 구현 (feat. next 14 app-router)

api 파일 분리 시 axios의 응답이 console에 안나오는 경우

문제상황

방법 (해결)

React - Recoil 사용 중 놓쳤던 특징

문제상황

과정 1.

과정1 - 오류

과정 2.

과정 3

git file 하나만 되돌리기

문제상황

해결

Axios - http -> https 변경 시 오류

문제상황

오류

https 통신이 되고 정상 작동되는 것을 확인

2023 김나영 연말 콘서트 "Na" On The Voice [Songnando] 후기 - 2층 좌석

AWS - Terraform

AWS - Lambda 함수 사용 _ boardList / login

#3 API Gateway

AWS - GitHub Actions_ react

AWS - CodeDeploy / GitHub Actions _ Flask

CodeDeploy

Github Actions

AWS - Flask / MySQL / react 배포

AWS - EKS

EKS (Amazon Elastic Kubernetes Service)

Terraform - 선언 블록

HCL(Hashicorp Comfiguration Language)

선언 블록

# provider

# resource

# 생명주기 메타인자(The lifecycle Meta-Argument)

# 입력 변수

# 데이터 소스

# local

# terraform

# 백엔드 블록

#반복문

AWS - Terraform (ASG , LB)

웹 서버 클러스터 배포

# ASG 구성

# 로드밸런서 배포

AWS - 웹 서비스 환경 구성 실습

AWS - Terraform

Terraform

terraform 코드

단일 서버 배포

단일 웹 서버 배포 - HTTP 요청에 응답할 수 있는 웹 서버를 EC2 배포

구성 가능한 웹 서버 배포

리소스 정리

AWS - EC2

EC2 ( Elastic Compute Cloud)

AWS - VPC

VPC(Virtual Private Cloud)

기본 VPC (default VPC)

VPC 구성 옵션

AWS - IAM

AWS IAM (Identity and Access Management)

ID(IAM 자격 증명)

AWS 계정 루트 사용자

사용자(user)

`https` 통신이 되고 정상 작동되는 것을 확인