본문 바로가기

Front-end Framework18

[최신 웹 프론트엔드 개발환경 세팅] 5. 예제 구현 5) 예제 구현 예제 소스 를 다운로드하여 사용하시면 됩니다. 이 파일은 babel과 webpack 설정이 모두 완료된 상태로, 압축을 풀고 npm install을 하신 뒤 바로 사용이 가능합니다. 소스로 사용된 예제는 mdn의 module example을 활용하였습니다. 프로젝트 구조는 아래와 같습니다. 이제 실제로 트랜스파일링과 번들링을 위해 필요한 작업을 수행하고, 브라우저상에서 정상적으로 동작하는지 확인해 보도록 하겠습니다. (1) Babel로 Transpiling 먼저, plugin-proposal-class-properties을 설치해주어야 합니다. preset-env는 현제 제안 단계에 있는 사양의 플러그인의 경우 트랜스파일링이 되지 않기 때문에, 이를 보완해주는 플러그인이 필요하기 때문입니.. 2020. 11. 15.
[최신 웹 프론트엔드 개발환경 세팅] 4. 개발환경 세팅 4) 개발환경 세팅 대표적으로 ES6+ 문법이 실행되지 않는 브라우저인 인터넷 익스플로러(IE)에서 ES6+로 작성된 코드가 정상적으로 실행되도록 만들기 위해, 개발환경을 세팅해보도록 하겠습니다. 이 글은 윈도우를 기준으로 작성되었으며, 따라서 사용된 명령어들은 cmd 명령어임을 미리 말씀드립니다. (1) Babel 설치 //프로젝트 폴더 생성 mkdir es6-demo //package.json 생성 npm init -y //babel 설치 npm install --save-dev @babel/core @babel/cli 바벨을 설치하기 앞서 npm 프로젝트를 먼저 생성합니다. 프로젝트마다 환경이 상이하기 때문에, 로컬로 설치하기 위하여 프로젝트 폴더를 생성해줍니다. 기본 필수 패키지인 바벨 코어와 커.. 2020. 11. 15.
[최신 웹 프론트엔드 개발환경 세팅] 3. Babel? Webpack? 3) Babel? Webpack? 최신 프론트엔드 개발 환경에서 Babel과 Webpack은 거의 필수적이라고 말할 수 있습니다. 프론트엔드 프레임워크, React나 Angular, Vue 등을 사용하는 경우는 물론, 코드 작성 시 ES6+를 이용한다면 역시 마찬가지로 Webpack과 Babel을 필요로 하게 됩니다. 예를 들어, ES6의 대표적인 기능인 Template Literal을 사용했다고 가정해 봅시다. 보이는 바와 같이 IE에서는 템플릿 리터럴을 지원하지 않는 것을 알 수 있습니다(최신 브라우저 버전 기준이며, 다른 브라우저에서도 버전에 따라 지원하지 않을 수 있습니다) 크롬이야 실행만 해도 최신버전으로 관리되지만, IE나 사파리는 사용자가 별도로 업데이트하지 않는 한 처음 OS에 설치한 버전.. 2020. 11. 15.
[최신 웹 프론트엔드 개발환경 세팅] 2. NPM이란? 2) NPM이란? NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자입니다. Node.js에서 사용 가능한 모듈들을 패키지화시켜 설치, 삭제, 업그레이드, 의존성 관리 등을 해주는 관리자인 것입니다. 정확히는 command-line client인 npm과 온라인 데이터베이스인 npm registry로 이루어져 있으며, 일반적으로 command-line client를 npm이라고 생각하는데, 실제로는 npm registry까지 포함하여 npm이라고 말합니다. npm이 없었을 때에는 필요로 하는 기능을 추가하기 위해서 직접 작성하거나 github를 통해 다운로드하여 사용해야 했습니다. 이러한 불편을 해소하기 위해 나타난 것이 npm이.. 2020. 11. 15.
[최신 웹 프론트엔드 개발환경 세팅] 1. Node.js란? 지난 몇 주간 자바스크립트와 관련된 내용을 다루면서, ES6(ECMAScript 2015) 문법이 여러 번 등장했습니다. ECMAScript가 표준화된 스크립트 언어이자, 자바스크립트가 이 표준을 따르고 있음에도 ECMAScript는 아직 많은 개발자에게 낯설게 느껴집니다. ECMAScript가 현재 ES10(ECMAScript 2019)까지 버전이 올라간 상태임에도, ES6+(ES6 이상의 버전)가 상용화되어 있지 않은 이유는 크게 아래와 같은 이유 때문입니다. 구형 브라우저에서 지원하지 않음(현재 모던 브라우저의 최신 버전의 경우 대부분 지원. 오래된 버전을 그대로 사용하는 사용자가 많음) 트랜스파일링이나 번들링 필요 아직 ES6+를 지원하지 않는 라이브러리들 구버전의 브라우저에서 지원하지 않는 문법.. 2020. 11. 15.
[실전 어플리케이션 만들기] 7. RouterGuard 설정 및 Referrer URL 설정 이 글에서는 권한이 없는 사용자가 url을 통해 페이지에 접근하려고 할 때, 접근을 제한하고 그에 따른 처리를 하도록 도와주는 RouteGuard를 설정해볼 것입니다. 또한 권한이 없어 로그인 페이지로 리다이렉트 되었을 때, 로그인 후에 처음 요청했던 페이지로 이동될 수 있도록 이전 페이지를 관리하는 코드를 함께 작성해 볼 것입니다. 1. RouterGuard 설정하기 권한이 없는 사용자가 권한이 필요한 특정 페이지로 접근했을 때, 라우팅되지 않도록 막아주는 역할을 하는 것이 RouterGuard입니다. 이 글에서는 로그인하지 않은 사용자가 마이페이지로 접근하려고 시도했을 때 로그인 페이지로 리다이렉트 되도록 구현해 볼 것입니다. 먼저 core/service 아래에 auth-guard.ts 파일을 생성하.. 2020. 10. 20.
[실전 어플리케이션 만들기] 6. Directive 일반적인 웹 애플리케이션에서 로그인 전과 후에 Header에 노출되는 UI가 달라집니다. [로그인 전] [로그인 후] if/else 문법으로도 분기처리가 가능하지만, Angular에서 제공하는 Directive를 이용하면 코드의 가독성도 높아지기 때문에 Directive를 이용하기로 결정했습니다. 로그인 여부에 따라 AuthDirective를 구현합니다. 1) 로그인 여부에 따라 특정 템플릿에 대해 노출/비노출을 결정하는 AuthDirective를 구현합니다. [auth.directive.ts] import {User} from '../../core/model/user.model'; import { AppState } from '../../store/app.states'; import {Directive.. 2020. 10. 20.
[실전 어플리케이션 만들기] 5. 사용자 인증(2) - ngrx/store, ngrx/effect [실전 애플리케이션 만들기] 4. 사용자 인증(1) - In-memroy service, Authentication service에서 LoginForm에 입력한 계정을 검증하기 위한 서비스를 만들었습니다. 그런데 화면이 전환된다면, 컴포넌트가 교체되면서 검증된 계정 정보가 메모리에서 사라질 것입니다. Angular docs에서는 이렇게 전역적으로 필요한 상태값들은 싱글턴 객체인 서비스에 저장하는 방법을 권고합니다. Service에서 상태값을 관리한다고 해도 애플리케이션을 개발할 수는 있지만 애플리케이션의 규모가 커지고 구조가 조금이라도 복잡해지면 컴포넌트의 상태를 관리하는 일은 귀찮은 일이 됩니다. 그래서 많은 프로젝트에서 Vue는 Veux로, React는 Redux로, Angular는 ngrx/stor.. 2020. 10. 20.
[실전 어플리케이션 만들기] 4. 사용자 인증(1) - In-memroy service, Authentication service 일반적인 애플리케이션이라면, 로그인 폼에 입력한 계정이 유효한지 체크하기 위해 회원을 담당하는 api서버로 http요청을 할 것입니다. 그러나 이 어플리케이션은 Angular에만 집중하기 위해 api서버를 따로 두지 않고, Angular에서 기본적으로 제공하는 In-memory DB Service를 이용했습니다. (mockable.io를 사용할 수도 있으나 무료 버전은 유효 기간이 정해져 있으므로 In-memory DB로 결정했습니다.) 이 장에서는 In-memory DB Service를 만들고, 이전 장에서 입력한 Form에서 로그인 버튼을 클릭했을 때 In-memory DB로부터 해당 계정이 유효한지 체크하는 구현부를 살펴보겠습니다. Prerequisite HttpClientModule, rxjs 1.. 2020. 10. 20.
[실전 어플리케이션 만들기] 3. 로그인 Form 작성 앞장에서 생성한 LoginFormComponent에 Angular의 @angular/forms 패키지의 FormBuilder, FormGroup, Validators 들을 이용하여 Form 관련 기능을 구현해보겠습니다. Prerequisite Reactive Forms - https://angular.io/guide/reactive-forms 참고. 이 예제에서는 Angular 공식 UI Component 모음인 Angular Material을 사용하여 작성되었습니다. Angular material이 필수는 아니기 때문에 bootstrap을 사용하여 UI는 자유롭게 작성할 수 있습니다. 1. HTML 작성 1) Form 작성 [login-form.component.html] LOGIN {{hide ? '.. 2020. 10. 20.