[Angular2] 예제 프로그램 및 프로젝트 셋팅

참고: angular2에 대한 연재는 여기를 참조해 주세요. 틀린 부분이나 의견, 피드백은 언제든지 환영합니다.  

회원관리 프로그램

예제로 사용할 웹 어플리케이션은 CRUD 기능이 있는 간단한 회원관리 앱입니다.  간단하게 아래와 같이 기능을 나열해 볼 수 있습니다.

  • 로그인/로그아웃 기능: 등록한 사용자로 로그인
  • 회원 등록 기능: id, 비번, 이름, 사진, 소속, 성별, 나이 등의 정보 입력 가능
  • 회원정보 수정 기능: 로그인한 회원 본인의 정보만 수정 및 삭제
  • 관리자 기능: 전체 회원의 목록 조회, 회원 상세 정보조회 및 수정 가능

위의 기능을 포함해서 검색 등의 추가적인 기능들을 점진적으로 만들어 볼 예정입니다.

이제 프로젝트 셋팅을 하기로 합니다. 현재 프로젝트의 기본 템플릿은 quickstart 예제의 구조와 큰 차이는 없습니다. 이미 생성해 놓은 프로젝트 템플릿 압축 파일을 받아서 작업할 디렉토리에 풀면 됩니다.

압축을 풀고 에디터로 열어서 왼쪽에 다음과 같은 파일 목록이 나오면 정상입니다.

프로젝트 폴더가 위치한 곳에서 터미널창을 열고 다음과 같은 명령어를 칩니다.

[NPM]에서 설명한 것과 같이 package.json에 이미 lite-server  실행 스크립트를 두었기 때문에 위 명령어를 실행하면 바로 localhost:3000으로 웹서버가 실행됩니다. 웹서버 실행 후 브라우저 창에 “회원정보 관리”가 뜨면 정상적으로 프로젝트 초기 환경 셋팅이 끝난 것입니다.

Angular2 글 목록보기