웹 프론트엔드의 구조를 결정하는 아키텍쳐는 여러가지 입니다. 현대의 다양한 프레임워크들은 서로 다른것 같지만 복잡한 프론트엔드의 동일한 문제를 비슷하게 해결하고 있습니다. 전통적인 MVC 패턴과 비교하면서 이해해봅니다. #MVC #디자인패턴 #리액트 #뷰 #MVVM #프론트엔드 #자바스크립트 #웹프론트엔드
진짜 열심히 필기하면서 영상 천천히 다 봤어요!!! 직접 패턴들을 구현해보는 게 가장 와닿고 좋겠지만, 이 영상 하나만으로도 정말 대략적인 패턴들의 기본적인 원리 그리고 프론트엔드에서 MVC 이후에 MVVM, FLUX 등의 다양한 아키텍쳐가 등장하게 되었는지 알 수 있었습니다!!! 감사합니다!!!
내용, 설명, 속도 모두 정말 좋았습니다. 지금까지 들은 강의 중에 손에 꼽을 정도 입니다 👍 좋은 영상 감사드려요. 덧붙여 질문드리고 싶은 것이... React 예제 코드들을 보면 API 호출을 View에서 직접 호출, 또는 hook을 통해 호출하는 경우가 많은데요. Clean Architecture 등과 같이 레이어를 나누고 결합도를 낮추는 형태의 구조는 왜 잘 쓰이지 않는지 궁금합니다.
우선 패턴이 모든 상황에 동일하게 적용되는건 아니라고 생각해요. 리액트 뷰에서 통신과정은 응집도 차원에서 뷰의 역할로 볼 수도 있고요(그에게 필요한 일이니까) 그런데 한 편으론 커스텀훅을 사용한다면 레이어를 나누는 것과 비슷한 것이라 결합도를 낮출수도 있고요. 정답은 없습니다. 같은 구현결과도 관점에 따라 다르게 해석할 수 있는것이죠.
요즘 아키텍처에 대해서 깊게 공부하다 우연히 이 영상을 보게 되었는데, Flux 아키텍처는 사실상 초기 MVC와 이름만 바뀌었지 같은 아키텍처 아닌가요? Dispatcher가 Controller 역할을, Store가 Model 역할을 하는 것 같아서요. 아키텍처에 대한 역사를 공부하다 보면, 요즘의 아키텍처들은 다 MVC의 문제점을 해결한 진화적인 형태로 소개되고 있는데, 사실상 MVC의 변형 중 하나일 뿐이지, MVC와 크게 다르지 않다는 것을 느낄 수 있는데, 어떻게 생각하시나요?
hooks와 전역상태관리를 혼합하게 해결하는게 답인 줄 만 알았는데.. 생각보다 이거 공수가 많이 들더라구요. 요즘은 또 리액트 쿼리니 이런게 들어가서 단순하게 빨리 찍어내는거라면.. 부모에 공통 hooks로 만들고 드릴링 시켜서 view만 분리하는게 좋을때도 있는 경우도 있는거같습니다.(프레젠테이셔널 컴포넌트) 요즘은 진짜 뭐가 정답인지 모르겠네요 ㅋㅋ 그냥 프론트 요즘 그냥 예전처럼 단순하게 개발하고 싶네요 그냥 무지성 axios랑 상태관리 적절히…
요즘은 웹 개발을 REST하게 개발하기 때문에 프론트 백 서로 독립적으로 분리합니다. 기존에 ssr방식으로 템플릿엔진을 쓰던 시대는 지나갔죠 요즘 백엔드는 요청에대한 응답 처리를 json형태 데이터로 리턴하죠 그러면 프론트는 그 데이터 받아서 화면에 띄워주는 역할을하는거죠. 그로인해 백엔드는 아키텍처나 데이터설계에 더 몰두할 수있게되어 백엔드 퀄리티가 더 올라갓죠 요즘은 백에서 굳이 뷰를 안띄우고 프론트에 아주 좋은 라이브러리들이 잇기 때문에 굳이 템플릿엔진을 쓸 이유가 없어졌습니다
![[제로초뉴스]2024년 리액트 개발자라면 이 영상만 보시면 됩니다(트렌드 라이브러리 정리)](/img/n.gif)
진짜 열심히 필기하면서 영상 천천히 다 봤어요!!! 직접 패턴들을 구현해보는 게 가장 와닿고 좋겠지만, 이 영상 하나만으로도 정말 대략적인 패턴들의 기본적인 원리 그리고 프론트엔드에서 MVC 이후에 MVVM, FLUX 등의 다양한 아키텍쳐가 등장하게 되었는지 알 수 있었습니다!!! 감사합니다!!!
와... 진짜 감탄하면서 봤습니다. 어느 영상들보다도 깔끔하게 정리해주신것 같습니다. 정말 감사합니다!
감사합니다 ^^
프롱트님 영상은 모든 내용 너무 알차서 구독을 안 할 수가 없어요! 덕분에 저만 아는 치트키가 생긴 느낌이지만... 많은 분들이 보셨으면 좋겠어요!
감사해요 소면님
강의 잘 들었습니다. 강의가 잘 전달되어서 18분 가량 알차게 들었습니다. 감사합니다
저도 감사요 ㅎ
매우 좋은 내용이었습니다.
기본 아키텍처 구조뿐만 아닌 그 아키텍처가 나온 이유를 설명해주신 부분이 좋았습니다
영상 잘봤습니다. react 를 공부하면서 상태 업데이트를하면 화면이 리렌더링되는 구조를 자세히 설명해놓은게 없어 난해했는데 아키텍쳐를 보여주면서 설명해주시니 이해가 되네요
설명이 굉장히 좋고
프론트앤드 프레임워크 발전과 흐름에 대해 간략하게 알 수 있어서 좋았습니다 ㅎㅎ
좋은 내용 감사합니다. MVVM 및 FLUX 를 쓰는건 알았는데 이런 구조를 갖게된 원인에 대해서 좀더 명확하게 알려주셔서 감사합니다.
댓글 감사해요
설명해주시는 내용이 자료가 많지 않다고 느끼고 제가 어렴풋이 생각하는 것들을 너무 잘 정리해주셔서 너무 감사합니다! ㅎ앞으로 좋은 영상 기대하겠습니다! ㅎ 😍
감사합니다 ^^
프론트 기술에 대한 영상이 많지 않은데 너무 유용하네요 감사합니다~!
막힌 곳을 뻥뚫어주는 영상이에요!
항상 도움을 맏이 얻습니다. 감사합니다 :)
영상 잘 봤습니다! 프론트엔드에 요새 관심이 생겨서 천천히 찾아보고 공부중인데 쉽게 설명해주셔서 이해하기 좋네요! 유익한 영상이였습니다~
요리하거나 설거지 할때 자주 봅니다. 고마워여❤
영상 감사합니다! 덕분에 이해하는데 도움이 많이 되었어요
정말 잘보고 있습니다 ! 좋은일 가득하세요!
개발에 여러 이론과 패러다임이 넘쳐나는 시대라 왜? 를 자주 따져보아야 한다고 생각했는데 도움이 되었네요. 좋은 설명 감사합니다
감사함다~
깔끔하게 잘 정리해주셔서 감사합니다. 늘 개발하다 MVC하다가 괴리감과 내가 못하는건가 자괴감을 가지곤했죠 ㅎㅎ
감사합니다
너무 감사히 잘 봤습니다.
저도 열씨미 해서 프롱트님처럼 다른 사람들에게 지식을 전해주는 개발자가 되고 싶습니다.
감사합니다!
궁금했던 내용인데 잘 이해가 됐습니다. 감사합니다😀
저도 감사합니다
잘봤어요 감사합니다
데이터 바인딩 관련해서
13:15 쯤에 있는
DefineProperty, proxy api, observer패턴에 대한 설명도 해주실 수 있나요? 추가로 그걸로 어떻게 데이터바인딩이나 mvvm을 구현할 수 있는지도 궁금합니다!
영상 너무 유용해서 구독하고갑니다!
구독감사해요. 나중에 그런 내용도 한번 다뤄보면 좋겠네요.
최고 최고~!!!
좋은 자료네요
감사함다 🙂
너무 재밌게 봤습니다! 감사합니다 :)
감사합니다 ㅎㅎ
감사합니다~^^
이해하기가 너무 편해요 짱!!
감사합니다^^
mvvm 없이는 살아갈 수 없는 몸이 되어버렸어요
좋은 영상 감사합니다
감사합니다!
보통 View 가 control과 model 을 먹어버리죠. 특별한 케이스 아니면 죄다 api 단에서 받는순간 처리해버리니
부트캠프 졸업하고 취준하는데 모르는 개념이 너무 많네요ㅋㅋㅋ 부끄럽지만 mvc 개념도 처음 들어봐서 많이 배웠습니다ㅎㅎㅎ 영상 잘보고 있어요! 감사합니다
네 학습꺼리는 정말 끝도 없더라고요. 도움이 되셨다니 다행이네요.
좋은 영상 감사합니다!!!
제가 더 감사합니다
@@frongt 대박 답글 감사합니당 ㅎㅎ 이제 프론트 주니어로 시작하는데, 영상 보면서 면접 준비 했어요…!!! 처음엔 영상에서 말하시는거 다 이해하지 못했는데 점점 하나씩 더 이해할 수 있어서 너무 기쁩니다!! 좋은 영상 계속 부탁드려요~~!!!
@@dayoung7031 좋은결과 있으시면 좋겠네요 🙂
내용, 설명, 속도 모두 정말 좋았습니다. 지금까지 들은 강의 중에 손에 꼽을 정도 입니다 👍 좋은 영상 감사드려요.
덧붙여 질문드리고 싶은 것이...
React 예제 코드들을 보면 API 호출을 View에서 직접 호출, 또는 hook을 통해 호출하는 경우가 많은데요.
Clean Architecture 등과 같이 레이어를 나누고 결합도를 낮추는 형태의 구조는 왜 잘 쓰이지 않는지 궁금합니다.
우선 패턴이 모든 상황에 동일하게 적용되는건 아니라고 생각해요.
리액트 뷰에서 통신과정은 응집도 차원에서 뷰의 역할로 볼 수도 있고요(그에게 필요한 일이니까)
그런데 한 편으론 커스텀훅을 사용한다면 레이어를 나누는 것과 비슷한 것이라 결합도를 낮출수도 있고요.
정답은 없습니다.
같은 구현결과도 관점에 따라 다르게 해석할 수 있는것이죠.
요즘 아키텍처에 대해서 깊게 공부하다 우연히 이 영상을 보게 되었는데, Flux 아키텍처는 사실상 초기 MVC와 이름만 바뀌었지 같은 아키텍처 아닌가요? Dispatcher가 Controller 역할을, Store가 Model 역할을 하는 것 같아서요. 아키텍처에 대한 역사를 공부하다 보면, 요즘의 아키텍처들은 다 MVC의 문제점을 해결한 진화적인 형태로 소개되고 있는데, 사실상 MVC의 변형 중 하나일 뿐이지, MVC와 크게 다르지 않다는 것을 느낄 수 있는데, 어떻게 생각하시나요?
네 어떤 관점에서 보면 대부분의 애플리케이션이 모델과 뷰를 다르기 때문에
MV* 의 구조를 갖는 것 같아요.
hooks와 전역상태관리를 혼합하게 해결하는게 답인 줄 만 알았는데..
생각보다 이거 공수가 많이 들더라구요.
요즘은 또 리액트 쿼리니 이런게 들어가서 단순하게 빨리 찍어내는거라면..
부모에 공통 hooks로 만들고 드릴링 시켜서 view만 분리하는게 좋을때도 있는 경우도 있는거같습니다.(프레젠테이셔널 컴포넌트)
요즘은 진짜 뭐가 정답인지 모르겠네요 ㅋㅋ
그냥 프론트 요즘 그냥 예전처럼 단순하게 개발하고 싶네요 그냥 무지성 axios랑 상태관리 적절히…
요즘은 REST api가 대세라 백엔드는 JSON 형태 데이터만 응답 해주는 역할에 충실한 영역이 되었죠 ㅎㅎ view는 프론트 개발자들이 열심히 만들어 주시길 바랍니다 ㅎㅎㅎ
JSON 잘 부탁드려요
선생님 그렇다면 백엔드의 mvc의 view는 프론트엔드의 HTML 부분인가요? 아니면 프론트엔드로 넘어오는 응답(데이터)인가요?
네 백엔드에서 html을 만드는 템플레이팅(templating) 과정이 있는데요. 그걸 주로 말합니다. JSON을 만드는 과정은 뷰영역이라고 보진 않는것 같아요.
@@frongt 그럼 최신 백엔드에서는 리액트같은 라이브러리가 있어서 뷰에는 신경 써주지 않는 편인가요??
@@user-sh2iy1uc4l 네 과거에 비해서 그런경향이 있죠.
요즘은 웹 개발을 REST하게 개발하기 때문에 프론트 백 서로 독립적으로 분리합니다. 기존에 ssr방식으로 템플릿엔진을 쓰던 시대는 지나갔죠 요즘 백엔드는 요청에대한 응답 처리를 json형태 데이터로 리턴하죠 그러면 프론트는 그 데이터 받아서 화면에 띄워주는 역할을하는거죠. 그로인해 백엔드는 아키텍처나 데이터설계에 더 몰두할 수있게되어 백엔드 퀄리티가 더 올라갓죠 요즘은 백에서 굳이 뷰를 안띄우고 프론트에 아주 좋은 라이브러리들이 잇기 때문에 굳이 템플릿엔진을 쓸 이유가 없어졌습니다
존잼
이런 공부할 자료는 어디서 찾아보면 좋을까요 ?
프론트를 만드는데 필요한 패턴 이런건 자료가 많지 않은것 같아요;; 디자인 패턴의 개념자체는 웹에도 많이 있긴하고요.
자막 퀄이 너무 안 좋아서 설명을 안 듣고 그냥 읽기에는 불편한 부분이 많아서 아쉽네요. 내용은 정말 유익했습니다
맞습니다;; 맞아요. ㅠ.ㅠ
@@frongt 저는 자막 좋았어요. 저와는 다른 분야지만 이해하기 쉽게 설명해주셔서 좋았습니다. 감사합니다.
나 혼자 하면 의존성이 몬 상관인가요? ㅋㅋㅋ
졸공하나요? ㅋㅋㅋ
프롱프롱❤
(음 누구시지~~)
어디서 들어본 목소리인데...
음음음 어딜까요~? ^^
월요일에 각자 확인해보는 시간을 가지겠네요 ㅋㅋ