BE 단위 테스트라이브러리 설치npm install cookie-parser jsonwebtokennpm install -D jest ts-jest supertest @types/cookie-parse @types/jest 테스트 설정jest.config.jsmodule.exports = { preset: "ts-jest", testEnvironment: "node",}; tsconfig.json{ "compilerOptions": { // ... }, "include": ["src"], "exclude": ["src/**/*.test.ts", "src/**/__mocks__/*.ts"]} users/test.ts 파일에 테스트 케이스를 구현한다.describe의 expect..
배포되는 파일들App.cssIndex.template.tsxmussg.svg 라이브러리 설치react-router-dom@tanstack/react-querystyled-componentsopen-color index 페이지 구현App.tsximport React from 'react';import { RouterProvider } from "react-router-dom";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";import { router } from "./router";import "./App.css";const queryClient = new QueryClient({ // ...});export const..
BE 구조 설계서파일 구조index.ts, app.ts: 앱 진입점 파일settings.ts: 환경변수 및 설정 변수routes/: 라우트 함수 모음models/: 모델 클래스 모음utils/: 유틸리티 함수 및 객체 모음middlewares/: 미들웨어 함수 모음 Routeusers.tsPOST/login주어진 email, password로 로그인, JWT 쿠키 발급POST/logout로그아웃(쿠키 삭제)GET/users/me사용자 자신의 정보 조회POST/users주어진 email, password로 회원가입notes.tsGET/notes사용자가 작성한 노트 목록GET/notes/{id}노트 상세 조회POST/notes주어진 title과 content로 노트 생성PUT/notes/{id}주어진 tit..
전체 구성FrontendReact 사용백엔드로 향하는 API 호출은 브라우저의 js 실행에 의해서 이루어진다.BackendExpress 사용JWT를 이용하여 사용자 인증CORS 정책을 통해 접근 제어DB'prgms_notes'라는 이름의 DB에 두 개의 테이블 포함 모델 아키텍처Frontend URL: https://notes.prgms-fullcycle.comBackend URL: https://notes.prmgs-fullcycle.com/apiDB host/port: notes.prgms-fullcycle.com:3306 테스트아래로 갈수록 테스트 자동화가 중요해지며, 직접 손으로 해야 할 일은 줄어들지만 시간은 더 소요된다.Dev코드 개발단위; 테스트FE/BE 개별 테스트수동 사용자 테스트Dev..
오픈소스 프로젝트 주제 선정오픈소스 주제는 개발 과정에 필요성을 해소하는 주제로 선정하는 것이 좋다.정한 주제가 없다면 다음과 같은 기능을 주제로 선정한다.복잡한 구동 과정 없이 결과를 확인할 수 있는 기능확장성이 있는 기능예시로 lodash.js, underscore.js, immer.js가 있다. 오픈소스 저장소 생성 및 설정1. 깃허브에서 사용자 아이콘을 클릭하여 Your organizations를 클릭한다. 2. New organization을 클릭한다. 3. 조직 이름과 내 이메일을 작성한다. My personal account를 선택하면 하고 넘어가면 된다. 4. 조직 멤버를 추가하는 화면이 나타난다. 일단 skip 한다. 5. organization 생성이 완료되었다. 6. 상단의 레포지토..
first-contributions 프로젝트 기여 해보기기능이나 라이브러리 프로젝트가 아니라 오픈소스 기여를 해보는 beginner를 위한 연습 프로젝트이다.아래 링크에 접속하여 설명되어 있는 대로 따라 하면 된다.https://github.com/firstcontributions/first-contributions/blob/main/translations/README.ko.md first-contributions/translations/README.ko.md at main · firstcontributions/first-contributions🚀✨ Help beginners to contribute to open source projects - firstcontributions/first-contri..
npm을 통한 오픈소스 배포1. 먼저 npm에서 회원가입을 한다. 2. 작성한 오픈소스의 터미널을 연다. 3. 다음 명령어를 실행하여 패키지 이름, 버전, 설명, 진입점을 입력하고, 다른 것들은 작성하지 않고 엔터를 누른다.라이센스에는 MIT를 입력한다.npm init 4. 그러면 package.json 파일이 생긴다. 5. import 문법을 쓰기 위해서 type을 추가한다. 6. 키워드를 추가한다.여기서 설정한 키워드는 해시태그의 역할을 한. 나중에 추가해줄 수도 있다. 7. .npmignore 파일을 작성한다. 여기에는 올라갈 필요가 없는 파일이나 폴더를 작성한다. 8. gitignore 파일을 작성한다. 9. 터미널에서 npm login을 진행한다.npm login 10. 다음 명령어를 실행하여 ..
npm을 통한 오픈소스 배포1. 먼저 npm에서 회원가입을 한다. 2. 작성한 오픈소스의 터미널을 연다. 3. 다음 명령어를 실행하여 패키지 이름, 버전, 설명, 진입점을 입력하고, 다른 것들은 작성하지 않고 엔터를 누른다.라이센스에는 MIT를 입력한다.npm init 4. 그러면 package.json 파일이 생긴다. 5. import 문법을 쓰기 위해서 type을 추가한다. 6. 키워드를 추가한다.여기서 설정한 키워드는 해시태그의 역할을 한. 나중에 추가해줄 수도 있다. 7. .npmignore 파일을 작성한다. 여기에는 올라갈 필요가 없는 파일이나 폴더를 작성한다. 8. gitignore 파일을 작성한다. 9. 터미널에서 npm login을 진행한다.npm login 10. 다음 명령어를 실행하여 ..
이슈 게시판깃허브에서 레포지토리에 들어가서 issues 탭을 클릭하면 다음과 같은 화면이 나타난다.New issue를 클릭하여 이슈를 만들 수 있다. 다음과 같이 제목과 설명을 작성한다.이미 정해져 있는 컨벤션이 있다면 맞춰서 작성해야 한다.이슈를 발행하면 다음과 같은 화면을 볼 수 있다.댓글을 추가할 수 있고, 이슈를 Close 할 수도 있다. 화면의 오른쪽에는 다음과 같은 탭이 있는데, 여기서 라벨을 설정할 수 있다. 깃허브 문서 템플릿이슈 템플릿.github 폴더 아래에 issue_template.md 파일을 만들어 다음과 같이 작성한다. 커밋한 후에 Issues 탭에서 New issue를 하면 다음과 같이 자동으로 description 부분이 작성되어 있다. PR 템플릿.github 폴더 안에..
Fork & Clone아래의 두 저장소를 Fork 한다.content는 원문이고, translated-content는 번역본이다.https://github.com/mdn/content GitHub - mdn/content: The content behind MDN Web DocsThe content behind MDN Web Docs. Contribute to mdn/content development by creating an account on GitHub.github.comhttps://github.com/mdn/translated-content GitHub - mdn/translated-content: The source repository of all translated content for M..
