[2월 14일]
1. node.ts 환경 세팅
(1) .gitignore 파일 만들기
- 터미널에 입력
git init
touch .gitignore
- .gitignore에 작성
(2) npm 환경 세팅
npm init -y //package.json 파일 생성
npm i //package-lock.json 파일 생성
npm i -D typescript ts-node @types/node //node_modules 폴더 생성
(3) 실행할 파일을 대충 만들어주기 : root에 src폴더 생성 & src폴더에 main.ts 생성, 콘솔로그로 숫자 암거나 찍어주기 ㅋ
(4) tsconfig.json 파일 만들기
- 터미널에 입력
npx tsc --init //tsconfig.json 생성
- tsconfig.ts 접은글과 같이 수정
(declaration, sourceMap, sourceRoot 주석 해제하고 "outDir":"./dist" 이렇게 수정했음)
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
"declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
"sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
"outDir": "./dist", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
"sourceRoot": "src", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
(5) dist 폴더 만들기
npm i -D concurrently
- package.json 안에 scripts에서 test내용 지우고 아래 입력
"dev" : "concurrently 'tsc --watch --project tsconfig.json' 'node --watch dist/main.js'"
- npm run dev 실행시 dist폴더 생김
2. 서버 만들기
(1) express
- Node.js를 사용해 쉽게 서버를 구성할 수 있게 만든 라이브러리
- 사용을 위해 express를 설치해줌
npm install express
npm install express @types/express
- express를 임포트, 서버는 5555로 설정
import express from 'express';
const app = express();
const port = 5555;
(2) bodyParser
- 클라이언트인 html파일에서 서버로 보낼데이터를 파싱 (즉 서버에서 클라이언트의 요청을 알아들을 수 있게 해주는 역할)
- bodyparser 설치
npm install body-parser
- bodyParser를 사용할 수 있도록 app.use 활용
app.use(bodyParser.json());
- 사용 예시
//전체코드
import express from 'express';
import bodyParser from 'body-parser';
const app = express();
const port = 5555;
app.use(bodyParser.json());
app.get("/", (req, res) => {
res.send("HelloWorld")
});
app.listen(port);
- npm run dev 결과
3. Json불러오기
(1) posts.json 파일 만들기
- https://jsonplaceholder.typicode.com/posts 에서 전체 복사
- src/data 폴더에 posts.json 파일 생성 후 붙여넣기
- import posts from './data/post.json'
(import가 안된다면 tsconfig에서 아래 두 가지 주석 해제)
"resolveJsonModule": true,
"esModuleInterop":true
(2) 서버로 불러오기
- 기본 구조 : express명.요청("경로", (요청, 응답) => {내용})
- 전체 포스트 불러오기
app.get("/posts", (req, res) => {
const postId = req.query.postId;
if (postId) {
const post = posts.find((post) => post.id === Number(postId));
res.json(post);
} else {
res.json(posts);
}
res.json(posts)
});
- npm run dev 결과
- 개별 포스트 id 로 불러오기
app.get("/posts/:postId", (req, res) => {
const postId = req.params.postId;
const post = posts.find((post) => post.id === Number(postId));
})
- 결과
4. cdd crud
(1) src/app.ts
import bodyParser from 'body-parser';
import express from 'express'
const app = express();
const port = 5555;
const jsonParser = bodyParser.json();
app.use(jsonParser);
app.listen(port, () => {
console.log(`Server is running on ${port}`);
})
(2) src/types/ballang.type.ts
- 서버와의 통신이 성공할 경우와 실패할 경우의 상황을 정의
export type BallangResponse<D = null> =
|{
success: true;
result: D;
error: null;
}|{
success: false;
result: null;
error: { message: string };
}
(3) src/contexts/brands/brands.type.ts
- Brand의 타입을 선언 후 export
export interface Brand {
id: number;
nameKr: string;
nameEn: string;
}
(4) src/contexts/brands/brands.model.ts
- crud 생성해야됨
- 기본 URL을 axios를 사용해 가져온다
- axios 설치
npm i axios
import axios from 'axios';
const client = axios.create({
baseURL: "베이스 url",
});
- 브랜드 전체를 가져오는 함수는 findAll, 개별 브랜드를 가져오는 함수는 findOne
class BrandModel {
findAll() {}
findOne() {}
}
- findAll
- 전체를 불러오므로 인자를 받지 않는다
- 미리 만들어둔 BallangResponse과 Brand를 사용해 경로 /brands의 응답을 요청하고, 그 결과를 data에 저장한다
- data.success가 false라면, 에러를 던진다
- 그렇지 않다면 brands에 저장해 리턴한다
- findOne
- 백틱을 사용해서 브랜드 아이디를 경로에 넣어준다
import axios from 'axios';
import { BallangResponse } from '../../types/ballang.type';
import { Brand } from './brand.type';
const client = axios.create({
baseURL: "",
});
class BrandsModel {
async findAll() {
const response = await client.get<BallangResponse<Brand[]>>("/brands");
const data = response.data;
if (!data.success) throw new Error(data.error.message);
const brands = data.result;
return brands;
}
async findOne(brandId: number) {
const response = await client.get<BallangResponse<Brand[]>>(`/brands/${brandId}`);
const data = response.data;
if(!data.success) throw new Error(data.error.message)
const brand = data.result;
return brand;
}
}
[2월 15일]
1. EXPRESS 심화
(1) 기본 경로 설정
app.METHOD(PATH, HANDLER)
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.post('/', (req, res) => {
res.send('Hello World!')
})
app.put('/user', (req, res) => {
res.send('Hello World!')
})
app.delete('/user', (req, res) => {
res.send('Hello World!')
})
- 미들웨어와 연결
app.all('/secret', (req, res, next) => {
console.log('Accessing the secret session');
next();
});
[2월 16일]
'부트캠프' 카테고리의 다른 글
[TIL] 유데미X사람인 취업 부트캠프 1기 34일차 / netflex만들기 (0) | 2024.02.11 |
---|---|
[TIL] 유데미X사람인 취업 부트캠프 1기 32일차 / react 기초 (0) | 2024.02.01 |
[TIL] 유데미 X 사람인 취업 부트캠프 28일차 / spring boot (1) | 2024.01.23 |
[TIL] 유데미 X 사람인 취업 부트캠프 27일차 / java, spring (0) | 2024.01.22 |
[TIL] 유데미 X 사람인 취업 부트캠프 26일차 / java, spring (0) | 2024.01.19 |