HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL
/
🦚
[TIL] 데브코스 93일차
🦚

[TIL] 데브코스 93일차

Date
Jul 28, 2022
대주제
TIL
프로젝트
주제
기획회의
활동 기록
🔖
기획서
Figma

오늘 배운 것 🌱

  • 프론트엔드 개발 포인트 선정
    • ✅ React SOLID 원칙 포스팅 (링크)
      ✅ 단일책임원칙(SRP)만은 지키는 프로젝트!
 
  • RG 프로젝트 기획완성
    • ✅ 기획서 작성 (링크)
      ✅  와이어 프레임, FlowChart 완성 (링크)
      ✅ feature 산출
      • 인증/인가 및 프로필 파트 담당

느낀점 😎

  • 프론트엔드 개발 포인트
    • 팀원들 모두가 컴포넌트 설계에 대해 고민하고, 하나라도 제대로 개발하고 싶은 지향점을 가지고 있었다. 하지만 주어진 환경(짧은 시간, 프론트 팀원 이탈)로 급박한 개발일정을 가져갈 수 밖에 없어서 프론트 개발 포인트를 선정하기 참 어려웠다.
    • 그럼에도 불구하고 우리가 꼭 가져가야할 개발 지향점은 꼭 필요하다고 생각했다.
      • 단일 책임 원칙 (SRP)
        • SOLID 원칙 중 S에 해당하며, “모든 함수/모듈/컴포넌트는 정확히 한 가지 작업을 수행해야한다” 를 의미한다.
        • 이것을 선택한 이유는 간단하다. (why)
          • 의식에 따라 시도할 수 있는 여지가 많고, 그에 따른 코드 품질 향상 효과가 크다.
          • 연관된 로직을 분리함으로, 가독성의 증가 및 유지관리가 편해진다는 점
        • 어떻게 지켜나갈 수 있을까(how)
          • 여러 작업을 수행하는 큰 컴포넌트를 작은 컴포넌트들로 쪼개기
          • 주요 컴포넌트의 기능과 관련 없는 코드를 유틸리티 함수로 추출
          • 관련 있는 기능들은 커스텀 hook으로 캡슐화
        • 언제 적용할 수 있는가 (when)
          • 담당 기능 개발 설계 시
          • 기능 구현 시
          • 코드 리뷰 시
  • feature 산출
    • 프론트의 인원(3)에 맞게 크게 연관 feature를 묶어 3개의 담당 업무로 나누었다.
      • “인증/인가 및 프로필 페이지“, “공통 컴포넌트 및 디테일 페이지”, “라이딩 개설 폼 담당”
      • 그 중 1차 프로젝트 때 진행했던 폼(Form) 부분을 더 고민/개선할 수 있는 라이딩 개설 폼 담당이 가장 끌리기는 했지만, 1차 프로젝트와 거의 유사한 폼이기도 하였고, 다른 팀원분께서 form control 부분을 강하게 원하기도 하여, 두번째 우선순위 였던 인증/인가 관련을 담당하기로 하였다.
        • 인증/인가는 한 번도 직접 다루어 본 적이 없던 파트이기도 하였고, 백엔드와 소통할 수 있는 여지가 많은 파트라는 것도 나에게는 선택이유로 다가왔다. 실무에서 어떻게 백엔드 개발자들과 소통할 수 있을 지를 접해보고 싶은 마음이었다. 또 프로필 페이지에서, 이미지 처리 등 여유 시간에 따라 기술적인 강도를 높일 수 있는 여지가 있었기 때문도 선택의 이유였다.

참고

[번역] React에 SOLID 원칙 적용하기
원문 : https://medium.com/dailyjs/applying-solid-principles-in-react-14905d9c5377 소프트웨어 업계가 성장하고 실수를 저지르면서 모범 사례와 우수한 소프트웨어 설계 원칙이 떠오르며 차후에 같은 실수를 반복하지 않도록 개념화합니다. 특히 객체 지향 프로그래밍(OOP)의 세계는 이러한 모범 사례의 노다지이며 SOLID는 의심할 여지 없이 가장 영향력 있는 분야 중 하나입니다. SOLID는 각 문자가 다음과 같은 5가지 디자인 원칙 중 하나를 나타내는 약어입니다.
[번역] React에 SOLID 원칙 적용하기
https://velog.io/@dev_boku/%EB%B2%88%EC%97%AD-React%EC%97%90-SOLID-%EC%9B%90%EC%B9%99-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
[번역] React에 SOLID 원칙 적용하기