이 공부를 한달만에 다시하는 바람에 기존에 진행했던 내용을 다시 살펴봐야 했다. 이 토이 프로젝트의 목표1. vue.js를 써보지 않았기 때문에 프론트엔드-백엔드가 서로 API로 통신하는 구조 경험해볼 것2. 소스를 git으로 관리하여 실무에서 사용해보지 않은 git에 익숙해질 것3. AWS 경험해보면서 클라우드 환경 경험해볼 것 진행 상황 (지금까지 해온 것)1. 로컬에서 vue-spring boot 토이프로젝트를 개발하고 테스트 완료2. 깃에 소스 push 완료3. 경로 설정 - 프론트엔드, 백엔드 소스에 하드코딩으로 박혀있던 localhost 부분 제거 - 프로퍼티 파일 local, prod 분리하여 생성하고 소스도 파일 읽어오도록 변경 - 인텔리제이 소스 Run > Environment va..
전체 글
공공/금융권 근무할 때에는 svn, ecams를 사용하여 형상 관리를 했다.기능 단위보다는 파일 개별 단위로 이력을 관리하는 기록용에 가까웠던 것 같다.새로운 회사로 이직해서 git에 적응하느라 토이 프로젝트 만들어서 이것 저것 해보고 있다! git에 repository를 신규 생성하니 기본 브랜치는 main으로 세팅되었다. spring boot 기본 세팅을 프로젝트 폴더로 옮긴 뒤 initial commit을 했는데, 나는 아무 생각 없이 그 main브랜치로 진행했다. 근데, 회사 repo들을 보니 master / develop / feature 단위로 브랜치를 관리하는 것 처럼 보여 동료분께 물어보니 맞다고 하셨다. 그래서 첫번째 관문은 main브랜치 이름 변경하기였다. 찾아보니 이름을 변경하는게아니..
진행 순서4. CI/CD 구축하기1. 서버 보안 인바운드규칙 수정80 : 웹 접속용 (+ nginx)8080 : spring boot (backend)3000 : vue (frontend)22 : 접속용 2. 누락된 자원 설치 (node.js)curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -sudo yum install -y nodejs#설치 확인node -vnpm -v 그냥 yum install nodejs 하게 되면 amazon linux 기본 저장소에 있는 오래된 버전이 설치될 수 있어서, 최신 안정화된 node.js 16버전을 다운받을 수 있도록 서버에 NodeSource 저장소를 등록하는 명령어를 먼저 실행한다. 3. 리버스 프록시란?프..
진행 순서3. front/back 소스 작성1. SSR 방식(jsp) vs. SPA 방식(vue)화면 렌더링 위치서버에서 HTML을 완성해서 보냄클라이언트(브라우저)에서 JS가 HTML을 렌더링데이터 전달 방식서버에서 Model에 담아 JSP로 전달REST API 통해 JSON을 Vue로 전달페이지 전환매번 전체 새로고침라우터(Vue Router)로 일부만 갱신 (빠름)개발 흐름서버에서 HTML + 데이터 동시 처리프론트는 화면, 백은 API만 처리개발 흐름 순서브라우저 → Spring Controller로 요청Controller가 데이터 → JSP로 전달서버에서 HTML 완성 → 브라우저로 응답전체 새로고침 발생Vue 앱이 먼저 브라우저에 로딩됨Vue가 필요할 때 REST API 호출API 응답(JSO..
개발 스펙frontend : vue.jsbackend : java (spring boot)형상관리 : git서버 : aws linux / nginx 진행 순서1. AWS EC2 인스턴스 생성1. aws 프리티어로 서버 발급2. shell에서 발급받은 keypair로 해당 서버 접근ssh -i test-keypair.pem ec2-user@xx.xxx.xxx.xx 2. 필요 자원 설치1. yum / dnf 이란?yum은 Amazon Linux 의 패키지 관리자이고, amazon에서 제공하는 공식 리포지토리에서 가져온다.명령어를 실행하면 실행파일 뿐만 아니라 구성 파일, 시스템 서비스도 함께 설치된다. Amazon Linux 2023에서도 yum 명령을 사용할 수 있지만, yum 내부적으로 dnf를 호출하기..
AWS에서 node.js 설치해보기1. aws 프리티어 서버 발급2. 서버에 npm, node.js 설치3. node.js에 express를 통해 (index.js) 간단한 서버를 생성하고 실행(node index.js) => 서버 실행 메시지는 잘 뜸 (App is listening 3000 port)4. key pair(pem)으로 접속하여 서버에 get 요청을 보내도 응답이 없음 (Hello World)//index.jsconst express = require('express')const app = express()app.get('/', async(req, res) => { res.send('Hello World\n')})app.listen(3000, () => { ..