5 부로 구성된 튜토리얼 중 하나 인 튜토리얼 1이지만 각 튜토리얼을 개별적으로 읽어서 Node + Express + TypeScript + Vue API / Vue 웹 앱 설정의 다양한 측면을 배울 수 있습니다.

https://dev.to/calvintwr/build-instagram-using-typescript-node-express-and-vue-part-1-57do 

이 5 부 자습서의 끝에서 다음과 같은 앱을 빌드하는 방법을 배웁니다.

모바일 / 데스크톱 앱을 찾고 있습니까? 이 기술과 개념은 모바일 앱 (NativeScript) 또는 데스크톱 앱 (Electron)에서 기본적이고 재사용 할 수 있습니다. 나는 그것들을 후속 조치로 다룰 수 있습니다.

다른 파트로 이동 (1 부) 

1. Setting up Node and Express API with TypeScript
2. Setting up VueJs with TypeScript
3. Setting up Postgres with Sequelize ORM
4. Basic Vue templating and interaction with API
5. Advanced Vue templating and image uploading to Express

소개 

모든 좋은 앱은 견고한 기반에서 시작해야 합니다.이 튜토리얼에서는 Todo (실제로는 많이 표시되지 않음) 대신 매우 간단한 사진 공유 앱을 구축하여 설명합니다. 이 튜토리얼을 통해 이 포스트 시점에 가능한 최신 버전 (실용 가능한 일부 시험판)을 사용하여 TypeScript, Node, Express 및 VueJS를 배우게 됩니다.

* 슬프게도, Deno는 고려되었지만 아직 너무 이르고 사용하기가 어렵습니다. 그러나 이 학습서가 따르는 API / 뷰 우수 사례로 인해 시간이 지나면 Deno로 전환하여 많은 API 코드베이스를 재사용 할 수 있습니다. API에 연결되지 않은 모든 뷰 코딩을 재사용 합니다 (또한 API를 사용하기 위해 IOS 또는 Android 앱을 개발할 수 있음).

솔직히 Instagram을 단일 튜토리얼로 만들 수는 없으므로 이 게시물의 제목은 과장이지만 이 프로젝트를 "Basicgram"이라고 부릅니다.

리포지토리 받기 

tutorial-part1 브랜치를 복제하고 체크 아웃하여 빌드를 시작할 수 있습니다 :

git clone https://github.com/calvintwr/basicgram.git
git checkout tutorial-part1

폴더 구조 

폴더는 Node + Express 설정을 실행하는 "api"와 Vue + Webpack 설정을 실행하는 "view"로 분할됩니다.

시작하기-Express 설치 (API 엔진) 

npx express-generator --view=hbs

Handlebars (hbs)를 HTML처럼 보이기 때문에 뷰 엔진으로 선택했습니다. 따라서 API 서비스에 Express 만 사용하기 때문에 거의 사용하지 않을 새로운 템플릿 구문을 배울 필요가 없습니다. 그러나 나를 잘못 생각하지 마십시오. 핸들 바는 필요할 때 많은 펀치를 포장합니다.

최신 Express 5.0 (시험판)을 사용하고 모든 모듈 버전을 업데이트하므로 package.json 파일을 편집하십시오.

{
  "name": "api",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.5",
    "debug": "~4.1.1",
    "express": "~5.0.0-alpha.8",
    "hbs": "~4.1.1",
    "http-errors": "~1.7.3",
    "morgan": "~1.10.0"
  }
}

그것을 발사하고 모든 것이 작동하는지 확인하십시오

npm install
npm start

localhost : 3000으로 가서 인사를 보내십시오.

Express Routings 

당신이 얻고 자하는 첫 번째 Express 중 하나는 express-routemagic입니다.이 경로는 파일별로 파일을 선언하는 대신 모든 경로를 자동으로 요구합니다 (거대한 Express 앱과 라우팅 코드 타워가 의미가 없습니다). 루트 매직을 통해 문제를 해결하십시오.

npm install express-routemagic --save

우리는 import indexRouter와 usersRouter를 대체 할 것입니다 :

var indexRouter = require('./routes/index')
var usersRouter = require('./routes/users')
app.use('/', indexRouter)
app.use('/users', usersRouter)

const Magic = require('express-routemagic')
Magic.use(app, { invokerPath: __dirname }) // need `invokerPath` because we shifting Express into a `src` folder.

이제 라우팅에 대해 걱정할 필요가 없습니다. 계속 갑시다.

------