~☆~ 우하하!!~ 개발블로그

https://iwoohaha.tistory.com/313 에서 React 프로젝트 구성 파일을 대략적으로 살펴봤는데, 이번 포스트에서는 과감하게 App.js 의 내용을 수정해 봄으로써 React 프로젝트 개발의 첫 발을 내딛어보려고 한다. React 프로젝트 분석https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝iwoohaha.tistory.com 참고 : https://ko.react.dev/learn 빠르게 시작하기 – ReactThe library for web an..

https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝트 디렉토리 하위에 .idea 이름의 디렉토리가 생성되는데(프로젝트를 오픈하고 나서 생기므로 위 스크린샷에는 잡히지 않았다) 오직 IntelliJ IDEA 를 위한 디렉토리이므로 신경쓰지 않아도 된다. public 디렉토리와 src 디렉토리를 펼쳐서 하위에 어떤 파일들이 구성되어 있는지를 볼 수 있게 해봤다.우선 public 디렉토리를 구성하고 있는 파일들을 살펴보자. public 디렉토리에는 정적 파일들이 포함되어 있는데,..

React 프로젝트 개발 환경React 프로젝트는 Node.js 환경을 갖추어야 개발할 수 있다. Node.js 는 JavaScript 를 브라우저가 아닌 환경에서도 동작하게 하는 런타임 환경이다.웹브라우저는 JavaScript 해석 기능을 갖는다. 즉 FrontEnd 개발에 사용되어왔다.그런데 Node.js 환경을 갖추면 브라우저 밖에서도 JavaScript 코드를 실행할 수 있게 된다. Node.js 를 이용하면 웹브라우저로부터 독립된 서버 구현이 가능하게 되어 BackEnd 개발이 가능하게 된다. React 프로젝트를 개발하기 위해서는 Node.js 환경 구성이 필수적인데, React 를 이용한 FrontEnd 개발 결과물이 동작하게 하기 위한 서버를 Node.js 가 구성해줄 수 있기 때문이다.이..

pfSense 를 방화벽으로 설치하고, 내부 subnet 에 gitlab 등 다양한 서버를 구성하여 운영중이다.gitlab 은 80 또는 443 포트가 아닌 특별 번호의 포트를 사용하여 구성하였다. 아래에서 설명의 편의를 위하여 특별 번호의 포트를 7788 로 가정한다. gitlab 은 https 통신이 아니면 보안상 위험이 있으므로 SSL 통신되도록 구성하였고, SSL 통신 포트를 7788 로 잡았다.pfSense 방화벽에서도 7788 이 아닌 포트로는 gitlab 을 설치한 VM 에 접근되지 못하도록 설정했다. 이 경우 gitlab 에서 사용할 SSL 인증서인 let's encrypt 인증서를 발급받고 갱신하기 위해서는 임시로 80과 443 포트 통신을 허용하도록 수동작업해주는 수 밖에 없었는데, c..

Firebase 를 이용하여 앱에 푸시메시지를 발송하는 기능의 웹 프로젝트이다.전제조건Firebase 에 회원가입된 상태여야 한다.Firebase 에 프로젝트를 생성하고, 해당 프로젝트의 모바일 앱(iOS 또는 Android) 이 개발된 상태여야 한다.모바일 앱은 FCM 푸시 메시지 수신 기능이 구현되어 있어야 한다. 프로젝트 설정으로 이동한다. 서비스 계정 탭으로 이동한다. Firebase Admin SDK 항목을 선택한다. "새 비공개 키 생성" 버튼을 클릭하여 비공개 키를 생성한다. "키 생성" 버튼을 클릭하면 파일이 다운로드된다. 다운로드된 파일은 learnfirebase-9fed8-firebase-adminsdk-6x1xl-c8415d6104.json 이다. SpringBoot 프로젝트의 res..

https://iwoohaha.tistory.com/308 에서 이어진다. build.gradle 파일에 AWS SDK 종속성을 추가한다.implementation 'com.amazonaws:aws-java-sdk-ses:1.12.3' build.gradle 파일을 수정하면 코끼리 모양의 아이콘이 생성되는데, gradle sync 기능이다. 이 버튼을 눌러주면 추가한 종속성에 관련된 파일을 자동으로 다운로드한다.  application.properties 에 AWS SES 접속용 자격 증명을 구성한다.# AWS SES 자격증명aws.ses.access-key=YOUR_ACCESS_KEY_IDaws.ses.secret-key=YOUR_SECRET_ACCESS_KEYaws.ses.region=YOUR_AWS..