'Web' 카테고리의 글 목록

728x90

properties 파일을 yaml 파일로 바꾸고 싶을 때

https://mageddo.com/tools/yaml-converter

'Web' 카테고리의 다른 글

SPA(single page application) Handlebars 활용하기 (1)	2023.09.21
HTML5 Basic (0)	2023.09.19
Mybatis Mapper (0)	2023.09.19
MyBatis Config (0)	2023.09.19
AJAX Asynchronous Javascript And XML (0)	2023.09.18

728x90

EC2 (Elastic Computer Cloud) : 애플리케이션을 실행할 수 있는 서버 컴퓨터라고 생각하면 된다.

우리는 EC2로 서버를 실행시키고 클라이언트가 애플리케이션을 실행하려면 EC2의 IP나 EC2에서 제공하는 퍼블릭 도메인으로 애플리케이션에 접근할 수 있다.

DNS (Domain Name System) : IP 주소는 사람들이 기억하고 사용하기 어렵기 때문에 IP를 대신할 수 있는 이름인 Domain(도메인)을 IP 주소와 맵핑시켜놓아 Domain을 입력하면 해당하는 IP 주소를 찾아 그 주소의

애플리케이 션에 접근하게 해주는 시스템

Route 53 : 우리 컴퓨터는 IP 말고도 DNS서버 IP도 가지고 있다.

DNS 서버 IP는 IP 제공자인 ISP(Internet Service Provider, SKT, KT, ..텔레콤 ) 인터넷 서비스 제공 회사에서

제공한다. ISP의 DNS 서버에 우리가 원하는 IP 주소가 없으면 다른 DNS 서버에서 우리가 원하는

IP 주소를 찾아준다. 그러한 DNS 서버 중 하나가 Route 53

Application Load Balancer : 트레픽이 증가하여 새로운 EC2 인스턴스를 만들어 서버를 증설한 경우, IP가 다르기 때문에 새로 만든 EC2 인스턴스는 여전히 접근할 수 없다. 애플리케이션 로드 밸런서는 EC2 인스턴스들을 연결하여

트레픽을 적절히 분배해준다. EC2 인스턴스들이 공유하는 가상의 IP를 만들어 Route 53에 등록하고

Route 53은 도메인을 검색할 때 이 가상의 IP를 반환해준다.

Target Group : 애플리케이션 로드 밸런서에 연결된 EC2 인스턴스들을 말한다.

AutoScaliing Group (ASG,오토 스케일링 그룹) : ASG는 인스턴스가 다운되었을 때 EC2를 실행하고 타깃 그룹에 올리고 서비스 상태를 확인하는 작업을 자동으로 해주고 트래픽에 따라 스케일인(ScaleIn), 스케일아웃(ScaleOut)

하여 서버를 증설하거나 수축하는 등 타켓 그룹의 인스턴스를 관리하는 역할을 한다.

최소, 최대, 적정 인스턴스 수를 정하여 관리할 수 있다.

VPC (Virtual Private Cloud, 가상 사설 클라우드) : 사용자의 AWS 계정 전용 가상 네트워크, 특별한 설정 없이는 네트워크 안에 생성되는 EC2 외부(인터넷, 다른 AWS 계정)에서 접근할 수 없는 독립된 가상의 네트워크로 계정의

주인만이 네트워크에 접근 하는하다.

Subnet (서브-네트워크) : VPC 내에 존재하는 여러 개로 쪼개진 네트워크로 서브넷 내에 EC2 서버를 생성한다.

Elastic Bean Stalk (일래스틱 빈스톡) : 배포를 위한 인프라 구축을 대신 해주는 서비스로,

사용자가 필요한 리소스를 알려주면 일래스틱 빈스톡이 로드 밸런서, 오토 스케일링 그룹,

RDS(데이터베이스), EC2 환경을 구축하고 EC2에 우리 애플리케이션을 실행시켜준다.

내부적으로 JSON, YML 파일을 인풋으로 받아 설정파일의 리소스와 리소스 관계를 읽어 인프라를 구축해주는 AWS 클라우드포메이션(CloudFormation) 서비스를 이용한다.(Infrastructure as Code,코드를 읽어 인프라구축)

728x90

Handlebars 다운로드

https://handlebarsjs.com/installation/#downloading-handlebars

Installation | Handlebars

Installation There are a variety of ways to install Handlebars, depending on the programming language and environment you are using. npm or yarn (recommended) The reference implementation of Handlebars is written in JavaScript. It is most commonly installe

handlebarsjs.com

cdnjs click

최신버전 또는 원하는 특정 버전의 scritp tag를 copy해온다.

src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>

SPA(Single Page Application)

서버로부터 완전히 새로운 페이지를 받아로딩하지 않고

하나의 페이지에서 갱신이 필요한 부분만 동적으로 다시 작성하여 사용자와 상호작용하는 방식

1. 하나의 페이지에 여러 페이지에 들어갈 컨텐츠를 모두 만들고

그 컨텐츠들을 숨겨놓았다가

요청과 응답에 따라 보여줄 템플릿을 보여준다.

2. Handlebars에서 지원하는 <script> 태그를 이용

Handlebars expressions

반복문

컬렉션.guest_no를 출력하려면{{guest_no}}

<td width="50" align="center" bgcolor="ffffff" height="20" >{{guest_no}}</td>

<a href="#{{guest_no}}" class="guest_item_a" guest_no="124">{{guest_title}}

</a>

href 속성에 #를 붙이면 페이지기반요청을 하지 않는다.

여기서 #guest_no를 붙여준 이유는

a 클릭이벤트 발생시 href 속성의 값에서 guest_no를 문자열 처리를 하여 얻어내고

페이지 기반 요청 없이 /guests/{guest_no} URI 맵핑하는데 이용하기 위해서 사용했다.

#with는 프로퍼티에 접근할 객체를 지정하여

프로퍼티를 기술할 때 객체를 생략할 수 있게 해준다.

<table border="0" cellpadding="0" cellspacing="1" width="590"

bgcolor="BBBBBB">

<tbody>

<tr>

<td width="490" bgcolor="ffffff" align="left"

style="padding-left: 10px">{{guest_no}}</td>

</tr>

<tr>

<td width="490" bgcolor="ffffff" align="left"

style="padding-left: 10px">{{guest_name}}</td>

</tr>

</tbody>

</table>

여기선 data 배열에 있는 원소들 중 0번 인덱스에 접근하여 guest_no, guest_name에 접근한다.

array[index]가 아니라 array.[index] 으로 기술한다.

++<태그 내에 정의된 속성 이외에 커스텀으로 속성을 추가할 수 있다. >

<input type="button" value="수정"

id="btn_guest_modify_form" guest_no="{{data.[0].guest_no}}">

modify action을 위한 guest_no

handlebars에 함수 등록하기

function addCustomFunctionHandlebars(){

//Handlebars 함수 등록

Handlebars.registerHelper('substring',function(str,start,end){

return str.substring(start,end);

});

Handlebars.registerHelper('toUpperCase',function(str){

return str.toUpperCase();

});

}

Handlebars.registerHelper('funcName',funcArg);

<td width="120" align="center" bgcolor="ffffff">{{toUpperCase guest_name}}</td>

<td width="120" align="center" bgcolor="ffffff">{{substring guest_date 0 10}}</td>

{{...}} 표현식에서 함수와 인자를 사용할 땐

funcName param1 param2 param2

공백으로 구분해준다.

페이지 내 컨텐츠 영역을 갱신해주는 메소드

function render(templateId="#guest-main-template",jsonResult={},contentId="#content")

{//templateId="", contentId="" >>default값 설정

addCustomFunctionHandlebars();

let templateHtml = document.querySelector(templateId).innerHTML;

let bindTemplate =Handlebars.compile(templateHtml);

let resultTemplate =bindTemplate(jsonResult);

document.querySelector(contentId).innerHTML = resultTemplate;

}

Handlebars.compile(템플릿HTML) 을 사용하면

Handlebars 엔진이 expressions에 맞춰 데이터를 바꿔 출력할 수 있도록 함수로 만들어 반환해주면

json 데이터를 그 함수에 넣어주면 HTML을 완성해준다.

완성된 HTML을 content 영역에 innerHTML 해준다.

++함수를 정의할 때 파라메터에 값을 지정해주면 default 값으로 지정해준다.

버튼 또는 돔 객체에 addEventListener('click', funcArg) 으로 템플릿을 바꿔주는 render 메소드를 실행하는 익명함수를 작성해준다.

menuGuestWriteForm.addEventListener('click', function(e) {

View.render('#guest-write-form-template');

e.preventDefault();

});

이때 버튼이 페이지기반 요청을 Default로 한다면 event.preventDefault() 함수로 페이지 기반 요청을 막아줘야 한다.

document.addEventListener('click', function(e) {

if (e.target.id == 'btn_guest_write_action') {

}

if (e.target.classList.contains('guest_item_a')) {

}

만약 click 이벤트를 등록해야할 객체가 <script> 태그에 속한다면

그 템플릿이 HTML로 올라오기 전엔 접근할 수 없다.

event가 발생할 땐 window에서부터 타겟까지 타고 내려와 window로 bubble되며 이벤트가 발생하는 점을 이용하면

document.에 이벤트 등록을 하면 document 내의 모든 객체에서 들어오는 click 이벤트를 받아 처리할 수 있다.

document에서 이벤트를 받아 이벤트의 타겟에 접근해서 <script> 태그 내의 객체의 이벤트가 발생하는 경우도

이벤트 등록을 할 수 있다.

if (e.target.classList.contains('guest_item_a')) {

if(e.target.href.indexOf('#')>=0){

let guest_no = e.target.href.substring(e.target.href.indexOf("#")+1);

//e.preventDefault(); #요청은 페이지기반 요청 아니라 필요없다.

let sendJsonObject = {};

/**********ajax 요청 **********/

Request.ajaxRequest(RequestURL.GUEST_DETAIL.method,

RequestURL.GUEST_DETAIL.url.replace('@guest_no',guest_no),

function(responseJsonObject) {

if (responseJsonObject.status == 1) {

//쓰기 성공시 리스트 클릭 이벤트 발생

View.render('#guest-view-template',responseJsonObject);

} else {

alert(responseJsonObject.msg);

}

},

sendJsonObject);

}

이전에 href="#{{guest_no}}"에서 받은 #1 에서 #를 제외한 나머지 {{guest_no}}를 구하여 URL에 붙여준다.

const GUEST_DETAIL = { method: 'GET', url: 'guests/@guest_no' };

export function ajaxRequest(method,url,callbackFunction,sendJsonObject={}) {

let xhr = new XMLHttpRequest();

xhr.open(method, url);

xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8');

xhr.onload = function() {

callbackFunction(JSON.parse(xhr.responseText));

}

xhr.send(JSON.stringify(sendJsonObject));//js에서는 키값에 ""필요없고 ''도 허용하지만 server측에선 ""필수기 때문에

}

ajaxRequest는 ajax 요청하는 과정을 함수로 추출하였다.

이 과정은 추후 라이브러리를 사용하여 처리 가능하다.

html 파일에서 module 사용하기

type="javascript"대신 "module" 사용

module을 사용하면 돔트리가 다 생성되고 난 후에 실행된다.

++type= "module"과 "javascript"

module 은 import, export 사용 가능

module 은 독립적인 scope을 가져 프로퍼티는 module의 scope에 등록된다.

모듈은 모듈만 import 할 수 있다.

import * as View from "./view.js";

모듈에서 다른 모듈 import 하기

as View : "./view.js"로부터 import 모든 프로퍼티를 View라는 이름으로 사용하겠다

import {render} from "./view.js"; 하면 render만 임포트

다른 모듈의 특정 메소드나 변수만 import 하고 싶은 경우 {..} 로 지정해줄 수 있다.

export 하는 파일에서는 export 프로퍼티를 지정해줄 수 있다.

프로퍼티 앞에 export를 붙이거나

export{property1, property2...} 으로 지정한다.

'Web' 카테고리의 다른 글

YAML Converter (0)	2023.10.11
HTML5 Basic (0)	2023.09.19
Mybatis Mapper (0)	2023.09.19
MyBatis Config (0)	2023.09.19
AJAX Asynchronous Javascript And XML (0)	2023.09.18

728x90

기본 HTML 구조

<html>

<head>

<title>html문서구조</title>

<style>

/*스타일 정의*/

</style>

</script>

</head>

<body>

</body>

</html>

<html> 태그로 시작

</html> 태그로 문서 끝

Block Element VS Inline Element

블록태그는 위에서 아래로 배치되는 태그이다.

블록 태그의 다음 태그는 블록태그의 아래 위치한다.

ex) div, p, h1~6, ul, li, table, form

인라인태그는 옆으로 배치되는 태그이다.

인라인태그는 같은 줄의 옆으로 배치된다.

ex) img, span, a

<div> 태그

영역을 표시하는 마크업

float:left >>블록 태그라 옆으로 배치되지 않지만 스타일에서 float 속성을 left로 주어 좌측 영역 차지

<p> 태그

문단을 표시하는 마크업

<ul>, <ol>, <li> 태그

<ul> : 순서가 없는 태그, 리스트의 머리말에 모양을 정할 수 있다.

<ol> : 순서가 있는 태그, 순서의 표시 형식을 정할 수 있다.

<li> : 리스트의 요소 태그

</ol>

</ul>

style="display: inline"으로 인라인으로 출력할 수 있다.

<table>태그

<tr> 태그 : 행

<td> 태그 : 열

colspan = " column (열) 을 합친다."

rowspan = " row () 을 합친다."

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<span>태그

컨텐츠를 표시하는 액자 역할, 컨텐츠이 표시 방법 제어하는 인라인 태그

테스트 문자열

</span>

을 <span style="font-style: italic;border: 1px solid;">span태그</span>를 이용해서 표시합니다.

<iframe>태그

윈도우 안에 frame을 생성하는 태그

width="800px" height="200px"></iframe>

<form> 태그

form 에서 데이터를 입력받아 url로 데이터를 보낼 수 있다.

action = "url"

method= "requestMethod"

<input> 태그

<input type="radio" name="gender" />남

<input type="radio" name="gender" checked="checked" />여

<input type="checkbox" />IT

<input type="checkbox" />경제

<input type="checkbox" />정치

<input type="checkbox" />문화

<input type="checkbox" />연예

</form>

type : text, password, radio, checkbox, button, reset, image, submit

radio = > name 이 같은 radio 끼리는 1개만 선택할 수 있다.

checkbox = > 다중 선택

button = > 자바스크립트로 action 처리 가능한 버튼

reset = > input의 모든 데이터를 reset하는 버튼

submit = > input의 모든 데이터를 서버로 전송하는 버튼, 클릭시 submit 이벤트 발생

image = > 이미지를 입힌 submit 버튼

<textarea> 태그

여러줄의 텍스트 input

<select> 태그

select 태그 내 <option> 태그에 선택사항을 입

<option>도메인을 선택하세요</option>

<option>naver.com</option>

<option>gmail.com</option>

<option>dreamwiz.com</option>

</select>

<a> 태그

다른 페이지로 이동하는 태그

href = "url"

target = "페이지를 이동할 타겟 윈도우"

- _blank : 새창

- _self : 현재창

절대경로 http://*

상대경로

기준경로==> 현재 리소스 url 중 리소스 이름을 제외한 주

>> 다른 위치의 리소스

>> 동일한 위치의 리소스 ./생략가능

페이지 내 지정 위치

naver의 #top 위치

현재 페이지의 #top 위치

현재 페이지의 최상단으로 이동

<img> 태그

src = "url"

html 문서 내에서 여러개의 공백, 탭, 줄바꿈 실제론 하나의 공백으로 출력된다.

<br> 내려쓰기

내려쓰기로 출력하려면 <br> 태그를 사용해야한다.

문장<br>

  띄어쓰기

명시적으로 띄어쓰기 출력하려면   사용

<, > == < &rt;

<, &rt;

<pre>태그

공백, 탭, 줄바꿈 등 태그 내의 내용을 모두 그대로 출력한다.

<h1~6>태그

제목 마크업, h1이 가장 크다. h6이 가장 작고 그 이상 존재하지 않는다.

<hr> 태그

수평가로선

보통 제목 밑에 혹은 컨텐츠가 바뀌는 부분을 구분하기 위해 사용

'Web' 카테고리의 다른 글

YAML Converter (0)	2023.10.11
SPA(single page application) Handlebars 활용하기 (1)	2023.09.21
Mybatis Mapper (0)	2023.09.19
MyBatis Config (0)	2023.09.19
AJAX Asynchronous Javascript And XML (0)	2023.09.18

최고다최코딩

Web

YAML Converter

'Web' 카테고리의 다른 글

프로덕션 배포 - 서비스 아키텍처

SPA(single page application) Handlebars 활용하기

'Web' 카테고리의 다른 글

HTML5 Basic

'Web' 카테고리의 다른 글

+ Recent posts

티스토리툴바