![]()
진행 순서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, () => { ..
![]()
emit를 사용해 자식컴포넌트에서 부모컴포넌트로 데이터를 보내도록 설정하면, 브라우저 콘솔에서 이렇게 경고를 보내주는 것을 볼 수 있다. vue.js 3부터 추가된 내용인데, props 등록한 것처럼 emits에 등록해주어야 한다. context 대신 emit을 바로 사용하는 방법도 있다.
(main) App.vue To-Do List 추가된 Todo가 없습니다. (sub) TodoList.vue {{ td.subject }} Delete
자식 -> 부모로 데이터 보낼 때에는 context의 emit 함수를 사용했고,반대로 부모 -> 자식으로 데이터 보낼 때에는 props를 사용한다. (main) App.vue To-Do List 추가된 Todo가 없습니다. (sub) TodoList.vue {{ td.subject }} Delete 주의할 점props -> One-Way Data Flow (vue.js 공식 홈페이지)모든 props는 부모에서 자식 컴포넌트로 one-way..
