프로젝트를 하면서 항상 쫓기면서 하는게 일상이라 최소한 일을 최대한 효율적이게 할 수 있도록 최대한 템플릿화 시켜서 하는게 좋을거라 판단되고 지금까지 사용했던 기술도 쭉 정리할 수 있는 기회라고 생각되어 템플릿 프로젝트를 진행

project-template

• 필요한 기술에 대한 템플릿을 정의해 놓은 레퍼지토리

개요

• 프로젝트 시작시에 기본적으로 세팅 및 작업해 놓는 부분을 자동화 시키기 위한 템플릿
• react, next, express, nest 에 대한 기본 세팅이 전체적으로 정의되어 있고 브런치로 나눠서 관리

프론트세팅 필요 사항

react

nocra + 웹팩 + swc + typescript + tailwindcss

• cra를 쓰지 않고 직접 package.json 의존성 구현
• typescript 적용
  https://velog.io/@do_dadu/Webpack%EC%9C%BC%EB%A1%9C-%EB%A7%8C%EB%93%A0-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-Typescript-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0CRA
• webpack 설정
  https://velog.io/@_uchanlee/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0without-CRA
• swcrc 설정
  https://swc.rs/docs/getting-started
• tailwind 설정
  https://blacklobster.tistory.com/6

빌드 및 이미지 정적 파일로 뽑아서 적용

• 개발 확인 용도로 포트로 뽑아서 확인 배포
  https://velog.io/@oneook/Docker%EB%A1%9C-React-%EA%B0%9C%EB%B0%9C-%EB%B0%8F-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
• 실서버 빌드시 정적 파일로 뽑아서 배포 하는 예시
  https://devhooney.tistory.com/113

nextjs

• next 14
• next-auth를 사용 인증까지 구현
  https://youtu.be/1SjqRn_Ira4?si=-ynF-u2mMFPRPz_w

빌드 및 이미지 정적 파일로 뽑아서 적용

vercel 사용 다이렉트로 배포

위와 같이 세팅해 두고 기본적인 header, main, footer / login 폼까지만 구현해 놓은 틀 구성

컴포넌트에 대한 작업 프로세스

• shadcn/ui 사용
  https://ui.shadcn.com/docs/installation
• figma 위젯 사용 코드 자동화 적용(openai를 활용해서 )
  https://youtu.be/nwVFhxCbDyY?si=d8B4GwzfgwaHXSGR
• storybook, chomatic, figma 등을 사용한 템플릿 컴포넌트 미리 생성... 음... 이건 최후 방법으로 하고 위에게 되는지 확인

백엔드 세팅 필요 사항

express && nestjs

• 참고 repo
  https://github.com/bbaktaeho/ts-node-express-server-starter
  https://github.com/dextto/book-nestjs-backend

https://hudi.blog/layered-architecture/
https://velog.io/@kisuk623/Layered-Architecture-Pattern-%EB%AA%A8%EB%93%88%ED%99%94

layered 아키텍처 구조적인 설계

Layered Pattern은 백엔드 API에 가장 널리 적용되는 패턴 중 하나다.
논리적 부분, 역할에 따라 독립된 모듈이 층층히 쌓듯이 연결 되어 레이어를 쌓아놓은 것 같은 구조가 된다고 하여 레이어 패턴이라고 한다.

• Presentation Layer

  시스템을 사용하는 사용자, 클라이언트 시스템과 연결되는 레이어다.
  백엔드 API의 엔드포인트에 해당하며, HTTP 요청을 읽는 로직을 구현한다. 그 이상의 역할, 로직은 다음 레이어로 전달 한다.

• Business Layer

  시스템이 구현해야 하는 로직, 역할을 구현하는 레이어다.
  회원가입시 비밀번호에 조건을 거는등 운영에 필요한 로직이 들어 있는 레이어다.

• Persistence Layer

  DB와 관련된 로직을 구현하는 레이어다.
  DB의 데이터 생성, 수정, 읽기를 처리하는 역할을 한다.

단방향 의존성, 관심사 분리

Layered Pattern의 핵심 요소는 단방향 의존성과 관심사 분리이다.
단방향 의존성은 레이어는 자기보다 하위에 있는 레이어에만 의존하고 있음을 의미한다.
관심사 분리는 레이어는 역할이 명확히 구분되어 있어 역할의 중첩이 없음을 의미한다.

https://velog.io/@kisuk623/Layered-Architecture-Pattern-%EB%AA%A8%EB%93%88%ED%99%94

각 디비별로 연결 하는 부분 다르게 모듈 연결 설정

• mysql
  https://www.mysql.com/
  https://www.mysqltutorial.org/
  https://wecandev.tistory.com/107
  https://velog.io/@cdw8431/docker-compose-%EB%A1%9C%EC%BB%AC-DB-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95
• mongo
  https://www.sktenterprise.com/bizInsight/blogDetail/dev/2652
  https://restheart.org/docs/mongodb-rest/sample-data
  https://stackoverflow.com/questions/66067320/running-mongorestore-on-docker-once-the-container-starts
  https://www.mongodb.com/cloud/atlas/register?utm_content=rlsapostreg&utm_source=google&utm_campaign=search_gs_pl_evergreen_atlas_general_retarget-brand-postreg_gic-null_apac-all_ps-all_desktop_eng_lead&utm_term=&utm_medium=cpc_paid_search&utm_ad=&utm_ad_campaign_id=14412646494&adgroup=131761134692&cq_cmp=14412646494&gad_source=1&gclid=CjwKCAiAjrarBhAWEiwA2qWdCGzmXbDuNw1745VTcxzPKAy-5lHSUKnWXI0X43D6lJqW8G0R7962gRoCJfwQAvD_BwE
• postgresql
  https://www.postgresql.org/docs/
  https://www.postgresqltutorial.com/
  https://tychejin.tistory.com/366
  https://copyprogramming.com/howto/docker-compose-postgresql-import-dump
  https://www.postgresqltutorial.com/postgresql-getting-started/load-postgresql-sample-database/
• redis
  https://bskyvision.com/entry/docker-docker-compose%EB%A1%9C-Redis-%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%84%88-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0
  https://basketdeveloper.tistory.com/85
  https://redis.io/docs/about/

TDD jest 코드 적용

• http://cloudrain21.com/test-driven-development
• https://techblog.woowahan.com/2613/

로깅

• winston-cloudwatch 를 이용해 로그를 클라우드 워치로

• https://mahfuzcse12.medium.com/sending-spring-boot-application-logs-to-aws-cloudwatch-49f5a018b983

• https://dev.to/agusrdz/creating-a-cloudwatch-log-custom-integration-for-slack-using-aws-lambda-aa0

장애대응

• 장애가 발생할 수 있는 포인트
• 애플리케이션 에러 발생 통계 / 모니터링을 구축

1. 장애 탐지 (시스템 알람, 고객센터, QA팀, 사내제보)
2. 장애 공지 (Slack, KakaoTalk 등 실시간 알람을 받을 수 있는 SNS 활용)
3. 장애 전파 (사내 내부 조직, 팀원, 고객 등)
4. 장애 복구
5. 장애 후속 조치
6. 장애 회고

• 예상 병목지점에 대한 부하테스트 시나리오를 작성

ci/cd 로 깃허브 액션

react

• https://synuns.tistory.com/75

nextjs(vercel, aws)

• https://projectlog.tistory.com/15
• https://cocobi.tistory.com/105
• https://all-dev-kang.tistory.com/entry/Docker-Next-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%8F%84%EC%BB%A4-%EB%B0%B0%ED%8F%AC-%EC%82%BD%EC%A7%88%EA%B8%B0
• https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

express

• https://vanillacreamdonut.tistory.com/323

nestjs

• https://velog.io/@dev_leewoooo/Node-Project-CI-%ED%95%98%EA%B8%B0-with-Github-Action

기본적인 깃 세팅

• 리드미 기본 템플릿 작성
  -https://www.freecodecamp.org/korean/news/gisheobeu-peurojegteue-rideumi-paileul-jal-jagseonghaneun-bangbeob/
  • https://www.makeareadme.com/
    - mermaid (https://mermaid.js.org/intro/getting-started.html)
• pr-template
  - https://2jinishappy.tistory.com/337
  • https://green-bin.tistory.com/16
• issue-template
  - https://velog.io/@yulhee741/Github-Issue-Templates%EC%9C%BC%EB%A1%9C-Issue-%EC%89%BD%EA%B3%A0-%EC%B2%B4%EA%B3%84%EC%A0%81%EC%9D%B4%EA%B2%8C-%EC%9E%91%EC%84%B1%ED%95%B4%EB%B3%B4%EA%B8%B0
  • https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository
• Template repository
  - https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository
• github projects
  - https://docs.github.com/en/issues/planning-and-tracking-with-projects/creating-projects/creating-a-project
  - https://zeddios.tistory.com/1194