HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생
/
🍏
동영1팀
/
☕
2월 11일 (토)
☕

2월 11일 (토)

Type
☕️ 커피챗
생성자
Date
Feb 11, 2023
프로젝트란?API 이전에 무엇을 해야할까?yarn 클래식 vs npm커밋을 세분화 하는것라이브러리 채택상태관리에 대해서단독으로 기술 사용도메인인스턴스화(이런식으로도 가능하다)마무리…

프로젝트란?

  • 시간, 인력, 돈 같이 제한된 상황에서 진행된다.
    • → 마감 기간동안 무엇이 중요한지에 대한 판단이 중요함.
      → 조금 더 남과 다른점을 보여줄수 있어야한다.
      → 내가 들은 것은 내 지식이 아님 ⇒ 내가 직접 써봐야 내 지식임 (누군가가 물어봤을때 설명을 해줄수 있어야 함)
      react: 반응형 라이브러리, push pull(polling?) 기반 라이브러리이다 ⇒ 완전한 리액티브라고 할수 없다.
      (구독하고 있는 부분이 상태가 업데이트 되어있으니 교체해라: push) - 완벽한 반응형
      (계속해서 상태가 업데이트 되었는지 확인하고 바뀌면 교체: pull)
      지금은 바뀌었을 수 있으니 조사해보자!
Reactive programming
In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change. With this paradigm, it's possible to express static (e.g., arrays) or dynamic (e.g., event emitters) data streams with ease, and also communicate that an inferred dependency within the associated execution model exists, which facilitates the automatic propagation of the changed data flow.[citation needed]
Reactive programming
https://en.wikipedia.org/wiki/Reactive_programming
Reactive programming

API 이전에 무엇을 해야할까?

  • 인증(회원가입, 로그인)
    • 모든 프로젝트에 들어가기때문에 특징이 없음.
    • 여기에 들어가는 노력은 다른 기능에 들어가는 기능과 비례한다.
    • 미리 만들어 놓을 수 있는것들 미리 만들어두기
  • 공통적인 api 모듈 → api 서비스 구체화

yarn 클래식 vs npm

  • 요즘에는 yarn 클래식과 npm의 차이가 사실상 없다.
    • 캐싱, cli가 다름
  • pnpm: 공통의 모듈 폴더를 가지고 있다. (심볼릭 링크)

커밋을 세분화 하는것

  • 커밋을 하는것은 의미있는 변경이다.
  • 미래의 나를 위해 또는 미래 내코드를 보는 개발자를 위해
  • 따라서 커밋 컨벤션을 잘 활용하자!!

라이브러리 채택

  • 팀원들과 상의해서 해당 프로젝트의 생산성을 해치더라도 그것 이상의 퀄리티를 향상시킬수 있는지를 생각해보자
💡
commit lint 같은 경우 퀄리티를 향상시킬 수는 있지만 생산성은 낮아질 수 있음.

상태관리에 대해서

  • 대기업 같은 대규모 프로젝트에서는 사용했을때의 득이 더 많기때문에 사용하는 것임
  • context는 항상 전역으로 사용하는것만은 아니다.
    • ⇒ 지역적으로 관리할 수 있게해줌
  • 다크모드/라이트모드, 언어, 인증같은 것들이 전역으로 주로 사용됨.
  • 사용하는 목적이 있으면 써도 상관없음

단독으로 기술 사용

  • 팀원들과 합의되면 상관없음

도메인

  • 관심사 분리
Clean-Architecture
GitHub - falsy/react-with-clean-architecture: Clean architecture based react project sample code.
This project is a sample code of one small idea to introduce a clean architecture to web services in a large sense, and a clean architecture to a project using React in a small sense. With minimal library and service functions, we are concentrating on overall project composition.
GitHub - falsy/react-with-clean-architecture: Clean architecture based react project sample code.
https://github.com/falsy/react-with-clean-architecture
GitHub - falsy/react-with-clean-architecture: Clean architecture based react project sample code.
Domain Driven Design
GitHub - kgrzybek/modular-monolith-with-ddd-fe-react: FrontEnd React application for Modular Monolith With DDD repository and system
FrontEnd React application for Modular Monolith With DDD repository and system - GitHub - kgrzybek/modular-monolith-with-ddd-fe-react: FrontEnd React application for Modular Monolith With DDD repos...
GitHub - kgrzybek/modular-monolith-with-ddd-fe-react: FrontEnd React application for Modular Monolith With DDD repository and system
https://github.com/kgrzybek/modular-monolith-with-ddd-fe-react
GitHub - kgrzybek/modular-monolith-with-ddd-fe-react: FrontEnd React application for Modular Monolith With DDD repository and system

인스턴스화(이런식으로도 가능하다)

notion image
notion image
  • 하나의 axios instance를 유지시킬 수 있다.
  • 노드 백엔드와 통신을 잘 할수있다. (노드 서버와 프론트에서 서로 import 할 수 있음?)

마무리…

💡
해당 기술을 사용했는지에 대해서는 항상 생각하도록 하자!