저는 100일 간의 코드를 작성하고 있습니다(여러분도 해야 합니다!).

100일의 코드(100 Days of Code)는 프로그래머가 100(연속)일 동안 코딩에 매일 1시간을 할애하도록 도전합니다. 오랜 시간 미뤄온 끝에 드디어 도전을 해보기로 했습니다.

저는 다음과 같은 서약을 했습니다. 100일 이내에 소셜 미디어 플랫폼을 만들고(어쩌면?) 배포하겠습니다. 이 시리즈에서는 100일 만에 앱을 만드는 과정에 여러분을 안내하고 싶습니다.

1일차

오늘은 #100daysofcode의 첫날입니다. 저는 백엔드 개발을 위해 제가 선호하는 플랫폼인 node.js를 사용하여 백엔드를 설정하는 것으로 시작했습니다.

기술적 세부 사항

데이터베이스로 SQLite를 선택한 이유는 백엔드 설정 시 별도의 SQL 서버를 설치할 필요가 없기 때문이다.

나는 TypeScript에서 챌린지에 대한 모든 코드를 작성하고 있습니다. 이전에 사용해 본 적이 있지만 다른 프로젝트를 빌드하는 것이 조금 더 익숙해지는 좋은 방법이라고 생각합니다.

프론트엔드 코드에 프레임워크를 사용하지 않기로 결정했습니다. 모든 HTML은 ejs를 사용하여 서버에서 렌더링되므로 특정 데이터에 대한 내 웹사이트 액세스만 허용할 수 있습니다.

일하기

소셜 미디어 플랫폼을 만들기 전에 이름이 필요합니다. 그것은 내가 좋은 것을 생각해낼 만큼 충분히 창의적이지 못하기 때문에 문제가 되는 경향이 있는 것 중 하나입니다. 자, 지금은 그것을 상상이라고 부릅시다. 소셜 미디어 네트워크에 그다지 창의적이지 않다는 것을 알고 있지만 지금은 작업을 완료할 것입니다.

먼저 저 자신을 위해 작은 로고를 만들었습니다.



다시 말하지만, 좋지는 않지만 작동합니다.

그럼 코딩을 해봅시다!

먼저 일반npm init을 실행하여 프로젝트 디렉토리를 설정했습니다. 그런 다음 typescript용 컴파일러tsc를 제공하는 typescript를 설치했습니다.

그런 다음 tsc를 실행하기 위해 package.json에 스크립트를 만들었습니다.

{
  "name": "100daysofcode",
  "version": "1.0.0",
  "description": "100 Days of code challenge",
  "main": "dist/server.js",
  "scripts": {
    "start": "node .",
    "build": "tsc"
  },
  "keywords": [
    "100daysofcode"
  ],
  "author": "Jake Sarjeant <[email protected]>",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "typescript": "^4.0.3"
  }
}

다음으로 필요한 모든 종속성과 해당 유형을 설치했습니다.

npm install debug chalk ora cookie death sqlite3 ejs eonjs serve-static @types/cookie @types/ejs @types/node @types/serve-static @types/sqlite3

그런 다음 npm run build -- --init를 실행하여 새 "tsconfig.json"파일을 만들었습니다. 그런 다음 src , views 및 dist 의 세 폴더를 만들었습니다. 내 tsconfig는 다음과 같습니다.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "outDir": "./dist",                       /* Redirect output structure to the directory. */
    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

src 디렉토리에서 서버 코드를 저장할 새 파일 server.ts 과 tsc가 eon 을 이해할 수 있도록 eonjs.d.ts 단어만 포함하는 declare module 'eonjs'; 파일을 만들었습니다. 이 작업을 직접 수행하는 방법을 알아낼 수 있도록 일부러 코드를 표시하지 않습니다.

EJS와 일부 서버 측 로직을 사용하여 다음과 같은 홈페이지를 만들었습니다.



그리고 사용자가 로그인하면 애플리케이션의 기본 페이지가 변경됩니다.



이는 '토큰' 쿠키에 유효한 JWT가 포함되어 있는지 여부를 확인하여 수행됩니다.

요약

그게 오늘 제가 한 전부입니다. 내일 더 많은 소식을 기대해 주세요.

어쨌든 #100daysofcode는 모든 개발자가 참여해야 하는 멋진 챌린지라고 생각합니다. 코딩을 습관화하는 데 도움이 되고 프로젝트를 완료할 수 있는 고정된 시간 프레임을 제공합니다. 또한 이 챌린지에 참여한다면 블로그에 글을 올리는 것을 추천합니다. 블로깅은 작업을 공유하고 동시에 글을 더 잘 쓸 수 있는 좋은 방법일 뿐만 아니라 프로젝트에 계속 집중할 수 있도록 도와줍니다. 챌린지 참여를 블로그에 게시하면 청중은 프로젝트를 완료하기를 기대하며 이는 많은 개발자에게 좋은 습관입니다.

이런 것이 마음에 든다면 좋아요 버튼을 누르고 댓글을 작성하는 것을 잊지 마십시오. 이 게시물에서 일부 코드를 공유해야 한다고 생각하는 경우 댓글을 달아 알려주세요!