메로그

Svelte 뭔가.. Svelte 가 뜰 것 같다.. 미리 공부를 좀 해보자.... 다른 프레임워크, 라이브러리와 달리 프론트 엔드 컴파일러입니다. 다른 프레임워크들과 달리 빌드된 시점에 스벨트 코드를 순수 자바스크립트로 변환하여 프레임워크의 문제점인 용량(다른 라이브러리들이 번들에 포함되지 않아 용량이 적음), 속도(예를 들어 첫 로드되는 화면이 다른 SPA 프레임워크보다 빠름)의 문제가 해결되는 장점이 있다. Svelte 를 사용하면 이런게 좋아요. 적은 코드로 작성할 수 있다 (다른 프레임워크들에 비해.) 높은 가독성 (html, css, js) 작은 번들 (라이브러리 빠지고 순수 자바스크립트 용량만 있음.) 낮은 러닝 커브 (다른 React, Vue, Angular 에 비해 쉬움.) 가성돔 사용하..

*ngFor 여러개의 div 를 만들어야 하는데, 일일히 div 를 수작업으로 계속 만드는 것은 리소스가 떨어지는 상황이다. 이러한 경우, *ngFor 을 이용하면 여러개의 요소를 쉽게 만들 수 가 있다. 예제 아래와 같이 mat-select 라는 material 컴포넌트를 하나 만드는데 그 안에 option 값을 그 때 그 때 다르게 넣고 싶은 경우가 있다. interface itemInfo { value: number; valueString: string; } export class ItemComponent { items: itemInfo[] = [ {value: 0, valueString: 'item: 0'}, {value: 1, valueString: 'item: 1'..

Angular-Material 앵귤러에서 가장 많이 사용하는 UI 라이브러리로써, Angular-Material 공식 홈페이지가 있어 쉽고 빠르게 사용할 수 있다. 많은 도큐먼트가 있어, 퍼블리싱을 보다 쉽게 할 수 가 있다. 어느정도 퍼블리싱은 이제 프론트에게는.. 필수적이 된 것이다.. 아래 사이트를 누르면 material 공식 홈페이지로 이동한다. https://material.angular.io/ 사용법 우선 아래의 명령어를 이용하여 설치를 해줍니다. ng add @angular/material 설치가 완료되면, app.module.ts 에 코어와 사용하고자하는 컴포넌트를 등록해줍니다. import { MatNativeDateModule } from '@angular/material/cor..

async, await 해당 문법은 Promise 를 보다 간결하게 사용하기 위한 문법으로 ES8 기준 언어 입니다. async async 는 함수 앞에 붙고 async function 의 함수들은 Promise 를 반환합니다. (Promise 가 붙지 않아도 자동으로 Promise 로 감싸져 반환됩니다.) await async 가 붙은 함수 안에서 사용하고, 비동기로 처리되는 함수 앞에 await 함수를 붙여 사용합니다. await 가 끝나면 해당 값만을 받아 사용할 수 있음으로, Prmoise 의 지옥콜백을 어느정도 벗어날 수 있다. 예시 아래는 Promise 형식으로 된 예제입니다. function promise (v) { return new Promise((resolve, reject) => { ..

XSS(Cross Site Scripting) XSS 는 사용자가 웹페이지에 임의의 스크립트를 삽입하여 HTML 을 조작하는 방법을 말합니다. 예를 들어, innerHTML 을 사용하는 기능에서 사용자가 이라는 스크립트를 입력하면, script 가 실행되면서 alert 가 동작하는 것을 볼 수 있을 것이다. 이런 식으로 스크립트 코드를 입력했는데 스크립트 코드가 실행됨으로 쉽게 공격을 받을 수 있는 일이 생긴다. XSS 방지 스크립트 태그가 입력되지 않도록 입력값을 막아버리는 방법이 있지만, 입력에 대한 제한의 경우에는 불편함이나 경우의 수가 더 생길 수도 있다. 그렇기 때문에 XSS 를 치환해주는 필터링을 만들어 사용하거나 라이브러리를 참고하여 사용하는게 효과적인 방법이라고 생각한다. 라이브러리를 사용..

Angular 과거에는 AngularJS, AngularJS2 라는 이름으로 발표되었지만, 현재는 Angular 라는 이름으로 변경되어 구글에서 개발한 타입스크립트 기반의 프레임워크 입니다. js, dart 같은 언어도 지원하고 기본적으로 타입스크립트를 바탕으로 빌드, 테스트, 배포, 라이브러리 등 모든 기능을 지원하는 프레임워크로 설계되어 있습니다. 설치 앵귤러는 자체적인 cli 를 이용하여 간단하고 쉽게 프로젝트를 만들 수 있도록 지원합니다. 그렇지 않으면 프레임워크 단위이기 때문에 설치하기가 매우 복잡하다고함.. (가능한가??) 우선 기본적으로 타입스크립트 기반이기 때문에 타입스크립트를 설치해주셔야 합니다. yarn global add typescript설치가 완료되면 angular 를 설치해줍시다..