Architecture 101

Architecture, Structure

• Architecture, Structure, System Desgin 그 차이가 무엇일까? 우리 단어 사전부터 만들어요
• React 기초 점검

수업 커리큘럼

8시~10시 수업 | 10시 ~ 11시 4명의 시니어 개발자와 라이브톡

1. Week 1-1
   Architecture 101
   Architecture, Structure
   - Architecture, Structure, System Desgin 그 차이가 무엇일까? 우리 단어 사전부터 만들어요
   - React 기초 점검

2. Week 1-2
   좋은 애플리케이션을 위한 플래닝
   비 기능적 요구사항 접근 방식
   - 왜 자꾸 코끼리를 냉장고에 넣으려고 할까?
   - 모든 것을 미리 예측하기는 어렵다.
   - 모든 애플리케이션은 요구 사항 변경이 잦다.

3. Week 2-1
   프론트엔드 애플리케이션을 위한 플래닝
   기능적 요구사항 접근 방식
   - 진화된 상태 관리와 컴포넌트
   - 체크리스트로 기준 만들기

4. Week 2-2
   Real World React Architecture
   React Architecture, 진화된 프론트엔드 생태계
   - 프로젝트 구조의 장단점
   - Front-end Architecture의 미래

---

강의 자료
https://poco-jang.notion.site/FE-React-Architecture-dab8b670c6384107b33b7e69f16c5967

---

Architecture

• 프로그래밍에 정답이 없는 경우가 많지만 그 중에서도 소프트웨어 아키텍처는 정말
  정답이 없는 분야

사전 질문

내가 생각하는 React Architecture의 범위에 포함되는 것은?

• 내가 관여하고 생각할 수 있는 범위의 architecture가 무엇일까?
• 설문조사 상 컴포넌트, 상태관리, 폴더구조 대답이 많았음
• 모노레포

내가 생각하는 Structure란?

• 구조
• 코드 구조
• 파일 구조
• 디렉터리 구조
• 아키텍처 중 파일 구조 부분
• 프로젝트 물리적 구조

내가 생각하는 Architecture란?

• 애플리케이션 설계 방법론
• structure 보다 작은 개념의 의미로 어플리케이션 레벨에서의 "구조”
• Structure 보다는 더 큰 개념으로 생각합니다.

내가 생각하는 설계란?

• 미래에 일어날 문제를 예측하여 대비하는 것이라고 생각한다
• 유지보수성을 고려하여 유연하고 효율적으로 구조화하는 것을 목표로 한다.
• 설계란, 이런 structure와 architecture를 모두 포함한, 모두 고려한 개념이라 생각합니다.
• 한 프로젝트를 진행할 때 기획부터 진행, 유지보수 등까지 회의하고 문서화하는 것
• 좋은 설계를 가진 프로그램은 로버트 마틴의 5가지 원칙을 준수하는 프로그램이라고 생각합니다.
  • SRP: 단일 책임 원칙 (single responsibility principle)
  • OCP: 개방-폐쇄 원칙 (open/closed principle)
  • LSP: 리스코프 치환 원칙 (Liskov substitution principle)
  • ISP: 인터페이스 분리 원칙 (Interface segregation principle)
  • DIP: 의존 관계 역전 원칙 (Dependency inversion principle)

---

단어장 만들기

• 추상화로 인해 생긴 문제
• 예시) windowing , 가상 스크롤 -> 스크롤 처리 !
• b2b , b2c 에서 쓰는 용어의 차이도 개발언어의 차이도 있음
• 소프트웨어에서의 번역투와 추상적인 의미론을 단번에 이해하지 못하면 학습에 어려움이 있다.
  - 예시) p tag = paragraph 단어를 모르면 이해를 못하는 것들
• 추가적으로 이해하는 바가 모두 다를때는 비극이 나타난다.
  예) 얼라인
  • 현석: 우리 생각을 정렬하자 +::• 용찬: 우리 결정 사항을 정렬하자
  • 준일: 우리 내용을 정리해서 정렬하자
  • 인성: 우리 평균을 정의하자
• 추상화의 더 큰 문제는 고유명사가 되기 때문
  예) netflexing, 당근하자, 호치케스, ...etc
• https://engineering.linecorp.com/ko/blog/glossary-project-line-words-open

🚨 어려운 것을 공부할 때

• 해부를 해야한다.
  - under the hood
• 코드 레벨에서 해부하기보다는 직접 비슷하게 만들어보라

단어장 만들기를 하는 이유는 단어에 대한 의미를 명확히 해야 혼돈이 없기 때문!

---

Architecture

💡 일반적으로는 건축을 뜻하기도 한다.

• 시스템의 구조를 정의한다.
• IT에서의 아키텍처는 넓은 범위의 시스템 주요 구성 요소를 연결하고 구성한다

여기서 구성 요소란 컴포넌트가 될 수도, A라는 내 작품일 수도,

팀 버너스리가 만든 웹은 91년 1월에 태어남 -> 역사가 엄청 짧다. -> 팀 버너스리도 최대 35년차 개발자

What is Trade off ?

• 어느 한쪽을 챙기면 어느 한쪽은 무너지는 상관관계가 있는 관계라고 보시면 될거 같네용
  EX) 이번달 식비를 너무 많이 써서 돈을 못모았어
• 내가 어떠한 행위를 하면 부작용이 따라온다
• 등가교환
• Test가 약하면 싸고 빠르지만, test가 빡세면 비싸고 느리다

세션 참가자들이 생각하는 최고의 설계란?

• 저비용 고성능
• 회귀물 재벌집 막내아들마냥 최고의 선택만 척척 골라서 빌딩하는 것

최고의 설계는 Trade off다.

• 내가 다니는 회사가 어떤 단계인지
• 시리즈에 맞는 개발을 하고 있는 게 맞는지 체크해보길

내가 이 단계의 회사를 다닌다면?
빠르게 개발할 수 있는 것, 내가 가진 능력으로 개발 진척을 빨리 나가기
확장성 고려는 거의 못 함
프리토타입 개발마냥 not 프로토타입

~~우리는 지금 프리토타입인 것 같다... ㅎㅎ~~ 리멤버 속기사 예시 등장 보통 시리즈 B에서 C사이에 유명한 개발자가 와서 레거시 뒤집어 엎는 경우가 많음 php -> java 이동 시리즈 C,D가면 배포도 직접 못하고 인프라팀이 하게 될 수도 있음. MSA도입은 보통 C,D 단계 시리즈 C 이후 단계의 회사에 다니고 싶으면 시드머니 투자 단계에 회사를 들어가면 됨. ㅋㅋ 돈을 짱 많이 벌 수 있다 !!

• ROI (Return on Investment)
  • 즉 우리의 모든 시간은 리소스이다.
  • 투자 대비 반환되는 효과가 어떤 것일까?
  • 기회 비용, 투자 대비 산출값

따라서 설계에서 은총알은 없다 = 무적의 약속은 없다.

---

software Architecture vs Structure

• Architecture가 조금 더 큰 개념이라는 의견이 좀 더 우세함.
• 따라서 structure는 소프트웨어를 이루는 모듈이나 집합체의 관계나 그 형태
• 예시) mark up = 데이터의 구조를 표현하는 언어 (ul, li | table, th, tb)
• hierachy : 수직적인 구조의 형태
• flat하게 : 수평적인 구조의 형태

설계 (Design)

소프트웨어 아키텍처와 그 구조는 위한 행동으로 생각해 볼 수 있다 (by 강사님)

Design Pattern

재사용 가능한 솔루션 혹은 설계
소프트웨어 설계에서 자주 발생하는 문제를 해겷하기 위한 재사용 가능한 패턴
예시 ) redux -> flux 패턴 (단반향 데이터 통신)
https://www.patterns.dev/
참고 링크 ! 개발 디자인 패턴을 많이 알 수 있음

모범 사례

github만 있다면 대부분의 코드를 볼 수 있다는 것
Github의 aweSome 시리즈 ( Readme 참고 자료로 가장 많이 봐 옴)

참고할 수 있는 커뮤니티

• Reddit
• Github Issue, Discussion
• Linkedin
• Twitter
• Medium
• Hacker News
• 구독
  • JavaScript Weekly (https://javascriptweekly.com/)
  • React Weekly (https://thisweekinreact.com/)
  • Naver FE (https://github.com/naver/fe-news)
  • GeekNews (https://news.hada.io/)
  • 헤임달 (https://hn.cho.sh/ko/subscribe/)

나만의 단어장 만들기

강사님은 옵시디언
장점은 단어 연결해서 만들 수 있고 호버했을 때 설명 달아놓을 수 있어서~
Github 연동도 가능 ~
workflowy는 불릿 토글이 주력이라 좋아한다고 하심

---

시니어와 라이브 토크

내가 생각하는 아키텍쳐와 스트럭쳐란?

• 아키텍쳐란 제품에 프러그인 구조를 추가했는데, 우리 팀이 제품이, 필요한 요구사항응 잘 해결할 수 있는 구조 , 설계.

• 우리가 어떤 기능을 수정, 추가 해결할 때 구조를 통해 쉽게 해결할 수 있기 때문에 , 따라서 이러한 도움을 주는 도구를 구조라고 생각함

• 스트럭쳐란? 내가 프로젝트 만드는데 가장 합리적인 구조

• 면접을 볼 때 왜 그런 구조가 되었는지 설명할 수 있으먼 내가 믿는 구조라고 볼 수 있음

• 프로젝트를 만드는데 합리적인 틀.

• 설계란? 합리적으로 가는 과정. 제한된 시간과 인력으로 해내기

• 아키텍쳐 : mfa ci/cd 프레임워크,라이브러리 내에서 아키텍쳐란 얘네들이 만든 목적에 잘 따라가는 것 ??

• 리액트 아키택쳐와 스트럭쳐에 근접해있지 않나?

——
나중에

모든 저작권은 원티드와 강사님께 있습니다.