웹 공부/웹 개발 (MEAN) (17) 썸네일형 리스트형 Angular) 꿀팁1 제가 삽질을 많이 했던 부분 중 하나가 바로 링크를 거는 부분입니다. ㅠㅠ 그래서 팁을 하나 드리자면 로컬에서는 링크를 href로 걸어도 작동이 되지만, heroku 등에 업로드 하게 되면, 링크가 실행이 되지 않더라구요. angular에서는 href 대신 routerLink 속성을 이용해서 링크를 생성해주셔야 합니다! Angular) 라우터 생성 Angular는 라우터를 지정해줘야지만 해당 경로로 이동할 수 있음 ex) 127.0.0.1:4200/register 이런 경로 App-routing.module.ts 파일 수정 import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; //RouterModule 읽어오기 import { RegisterComponent } from "./components/register/register.component"; //필요한 컴포넌트 객체 생성 const routes: Routes = [ { path: "", component: HomeComponent }, { path: "register", .. Angular) 컴포넌트 생성 컴포넌트 생성하기 > ng g component 컴포넌트명 컴포넌트란? -> 페이지 등과 같이 UI를 가지는 구성요소 Angular) Angular App 설명 app.module.ts : 메인 앱 모듈 (각종 모듈, 컴포넌트, 서비스들을 결합하는 장소) ex ) declarations : 컴포넌트를 추가 imports : 모듈 추가 providers : 서비스를 추가 bootstrap : 시작 컴포넌트를 지정 app.component.html : 브라우저의 메인 화면 모습을 지정하는 템플릿 파일 Angular) Angular 기본 사용 방법 새로운 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) Angular란? & 설치 방법 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.. Node.js) 회원가입 구현 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(.. Node.js) MongoDB 연결 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:.. 이전 1 2 3 다음 목록 더보기
