HACKDUN

컴포넌트 생성하기 > ng g component 컴포넌트명 컴포넌트란? -> 페이지 등과 같이 UI를 가지는 구성요소

app.module.ts : 메인 앱 모듈 (각종 모듈, 컴포넌트, 서비스들을 결합하는 장소) ex ) declarations : 컴포넌트를 추가 imports : 모듈 추가 providers : 서비스를 추가 bootstrap : 시작 컴포넌트를 지정 app.component.html : 브라우저의 메인 화면 모습을 지정하는 템플릿 파일

새로운 App 생성 1. 현재 프로젝트 폴더로 이동 > cd node2019 2. >ng new angular-src (새로운 앱 생성 명령) ? Angular routing? Yes (라우팅 기능 사용 여부) ? Stylesheet format? SCSS (스타일시트 사용 방식 지정) -> angular-src라는 이름으로 새로운 앱 생성 성공! -> 각종 패키지/파일들이 자동 설치가 됨 angular-src/node_modules 폴더에 패키지 설치 src/app 폴더에 주요 소스파일이 존재함 App 실행 1. App 폴더로 이동 > cd angular-src 2. App 실행 (node.js 실행되어 있어야 함) > ng serve -o 3. 브라우저로 확인 주소 : http://localhost:..

Angular란 ? 구글이 제공하는 프론트엔드 프레임워크 프론트엔드 웹 페이지를 쉽게 작성/운영하게 도와줌 홈페이지 https://angular.io Angular CLI 웹 서비스를 쉽게 제작할 수 있는 Command Line Interface 도구 (https://cli/angular.io/) Angular CLI 사용 방법 Angular/cli 글로벌 설치 새로운 APP 생성 생성된 APP 폴더로 이동 APP 서비스 시작 (잘 만들어진 기본 웹페이지 포맷을 제공함 -> 이후 필요에 따라 컴포넌트를 추라, 수정) Angular cli 설치 방법 > npm install -g @angular/cli (컴퓨터 내 어디서든 사용가능하게 -g 옵션으로 설치) > npm install --save-dev @a..

routes/users.js const express = require('express'); const router = express.Router(); const passport = require('passport'); const jwt = require('jsonwebtoken'); const User = require('../models/user'); // 여기부터 router.post('/register', (req, res, next) => { let newUser = new User({ name: req.body.name, email: req.body.email, username: req.body.username, password: req.body.password }); User.addUser(..

MongoDB의 데이터를 저장할 폴더 선정 후 폴더 생성 ex) C:\node2019\data 폴더 생성 MongoDB 서버 실행 > mongodb --dbpath c:\node2019\data MongoDB 연결정보 저장 위한 config 파일 작성 1. config 폴더 생성 (별도의 config 폴더에 작성 후 관리) 2. database.js 파일에 세부 내용 작성 (config 상세 내용) config/database.js mondule.exports = { database: 'mongodb://localhost:27017/meanauth', //localhost:db가 동작하는 서버의 호스트 이름, 27017:mongoDB 기본 운영 포트번호 secret : 'secret' // secret:..

메인 루트 : http://localhost:3000 새로운 users 루트 : http://localhost:3000/users/ (별도의 폴더 routes를 만들고 이곳에 users.js 파일 생성 예정) app.js const app = express(); const users = require('./routes/users'); //이 부분 추가 const port = 3000; app.use(cors()); app.use(bodyParser.json()); app.use('/users',users); //이 부분 추가 다음, routes 폴더 만들고 users.js 파일 생성 users.js const express=require('express'); const router=express.Rout..

Body parser란 ? -> 사용자 입력값을 전달하기 위해 POST 방식의 요청을 처리하기 위한 미들웨어 (로그인시 username/password는 POST 방식으로 전달) 설치 방법 ? > npm install body-parser const app = express(); // Port number const port = 3000; // CORS Middleware app.use(cors()); // Body Parser Middleware app.use(bodyParser.json()); // Index Route app.get('/', (req,res)=>{ res.send('서비스 준비중입니다... Hello world '); }); // Start Server app.listen(port,..