No video

프론트엔드에서 MVC보다 더 많이 쓰이는 패턴은 ?

  Рет қаралды 24,620

프롱트

프롱트

2 жыл бұрын

웹 프론트엔드의 구조를 결정하는 아키텍쳐는 여러가지 입니다.
현대의 다양한 프레임워크들은 서로 다른것 같지만
복잡한 프론트엔드의 동일한 문제를 비슷하게 해결하고 있습니다.
전통적인 MVC 패턴과 비교하면서 이해해봅니다.
#MVC #디자인패턴 #리액트 #뷰 #MVVM #프론트엔드 #자바스크립트 #웹프론트엔드

Пікірлер: 73
@user-db8dp1bk6f
@user-db8dp1bk6f 24 күн бұрын
감사합니다
@user-pf4tm8ds5i
@user-pf4tm8ds5i 10 ай бұрын
강의 잘 들었습니다. 강의가 잘 전달되어서 18분 가량 알차게 들었습니다. 감사합니다
@frongt
@frongt 10 ай бұрын
저도 감사요 ㅎ
@user-yp9wt1dd3f
@user-yp9wt1dd3f Жыл бұрын
와... 진짜 감탄하면서 봤습니다. 어느 영상들보다도 깔끔하게 정리해주신것 같습니다. 정말 감사합니다!
@frongt
@frongt Жыл бұрын
감사합니다 ^^
@itsleesul
@itsleesul 6 ай бұрын
영상 감사합니다! 덕분에 이해하는데 도움이 많이 되었어요
@Jayden-ff4dw
@Jayden-ff4dw Жыл бұрын
진짜 열심히 필기하면서 영상 천천히 다 봤어요!!! 직접 패턴들을 구현해보는 게 가장 와닿고 좋겠지만, 이 영상 하나만으로도 정말 대략적인 패턴들의 기본적인 원리 그리고 프론트엔드에서 MVC 이후에 MVVM, FLUX 등의 다양한 아키텍쳐가 등장하게 되었는지 알 수 있었습니다!!! 감사합니다!!!
@user-eg9dc8kz2d
@user-eg9dc8kz2d 7 ай бұрын
정말 잘보고 있습니다 ! 좋은일 가득하세요!
@user-vp9tc3cd5p
@user-vp9tc3cd5p Жыл бұрын
요리하거나 설거지 할때 자주 봅니다. 고마워여❤
@somyeon1881
@somyeon1881 Жыл бұрын
프롱트님 영상은 모든 내용 너무 알차서 구독을 안 할 수가 없어요! 덕분에 저만 아는 치트키가 생긴 느낌이지만... 많은 분들이 보셨으면 좋겠어요!
@frongt
@frongt Жыл бұрын
감사해요 소면님
@yujinlee3375
@yujinlee3375 Жыл бұрын
프론트 기술에 대한 영상이 많지 않은데 너무 유용하네요 감사합니다~!
@user-wc2ps8ij5c
@user-wc2ps8ij5c 8 ай бұрын
매우 좋은 내용이었습니다. 기본 아키텍처 구조뿐만 아닌 그 아키텍처가 나온 이유를 설명해주신 부분이 좋았습니다
@songbird345
@songbird345 11 ай бұрын
영상 잘봤습니다. react 를 공부하면서 상태 업데이트를하면 화면이 리렌더링되는 구조를 자세히 설명해놓은게 없어 난해했는데 아키텍쳐를 보여주면서 설명해주시니 이해가 되네요
@happyjy_dev2580
@happyjy_dev2580 Жыл бұрын
설명해주시는 내용이 자료가 많지 않다고 느끼고 제가 어렴풋이 생각하는 것들을 너무 잘 정리해주셔서 너무 감사합니다! ㅎ앞으로 좋은 영상 기대하겠습니다! ㅎ 😍
@frongt
@frongt Жыл бұрын
감사합니다 ^^
@Dudurami
@Dudurami Жыл бұрын
항상 도움을 맏이 얻습니다. 감사합니다 :)
@user-ld1xc6bh4v
@user-ld1xc6bh4v Жыл бұрын
막힌 곳을 뻥뚫어주는 영상이에요!
@zwielichterable
@zwielichterable Жыл бұрын
영상 잘 봤습니다! 프론트엔드에 요새 관심이 생겨서 천천히 찾아보고 공부중인데 쉽게 설명해주셔서 이해하기 좋네요! 유익한 영상이였습니다~
@user-wh8zx4wv9m
@user-wh8zx4wv9m Жыл бұрын
좋은 내용 감사합니다. MVVM 및 FLUX 를 쓰는건 알았는데 이런 구조를 갖게된 원인에 대해서 좀더 명확하게 알려주셔서 감사합니다.
@frongt
@frongt Жыл бұрын
댓글 감사해요
@falconsea7378
@falconsea7378 Жыл бұрын
설명이 굉장히 좋고 프론트앤드 프레임워크 발전과 흐름에 대해 간략하게 알 수 있어서 좋았습니다 ㅎㅎ
@user-ne9tl8rv7s
@user-ne9tl8rv7s Жыл бұрын
궁금했던 내용인데 잘 이해가 됐습니다. 감사합니다😀
@frongt
@frongt Жыл бұрын
저도 감사합니다
@myrtlewood416
@myrtlewood416 2 жыл бұрын
잘봤어요 감사합니다
@eunsoopark7588
@eunsoopark7588 Жыл бұрын
깔끔하게 잘 정리해주셔서 감사합니다. 늘 개발하다 MVC하다가 괴리감과 내가 못하는건가 자괴감을 가지곤했죠 ㅎㅎ
@elecricecooker
@elecricecooker Жыл бұрын
개발에 여러 이론과 패러다임이 넘쳐나는 시대라 왜? 를 자주 따져보아야 한다고 생각했는데 도움이 되었네요. 좋은 설명 감사합니다
@frongt
@frongt Жыл бұрын
감사함다~
@sunyi233
@sunyi233 Жыл бұрын
좋은 자료네요
@frongt
@frongt Жыл бұрын
감사함다 🙂
@jsjsnnjssk9923
@jsjsnnjssk9923 Жыл бұрын
좋은 영상 감사합니다
@2dc401
@2dc401 Жыл бұрын
너무 감사히 잘 봤습니다. 저도 열씨미 해서 프롱트님처럼 다른 사람들에게 지식을 전해주는 개발자가 되고 싶습니다. 감사합니다!
@HwanjuLee
@HwanjuLee Жыл бұрын
이해하기가 너무 편해요 짱!!
@frongt
@frongt Жыл бұрын
감사합니다^^
@user-nc7ev6zw5d
@user-nc7ev6zw5d 2 жыл бұрын
감사합니다 ㅎㅎ
@frongt
@frongt 2 жыл бұрын
감사합니다~^^
@Sia819_
@Sia819_ Жыл бұрын
mvvm 없이는 살아갈 수 없는 몸이 되어버렸어요
@user-zy4ux7db1q
@user-zy4ux7db1q Жыл бұрын
감사합니다!
@SH-vs6ge
@SH-vs6ge Жыл бұрын
너무 재밌게 봤습니다! 감사합니다 :)
@user-nr5bt4ft7r
@user-nr5bt4ft7r Жыл бұрын
최고 최고~!!!
@user-oe1ll1ef4r
@user-oe1ll1ef4r 7 ай бұрын
요즘 아키텍처에 대해서 깊게 공부하다 우연히 이 영상을 보게 되었는데, Flux 아키텍처는 사실상 초기 MVC와 이름만 바뀌었지 같은 아키텍처 아닌가요? Dispatcher가 Controller 역할을, Store가 Model 역할을 하는 것 같아서요. 아키텍처에 대한 역사를 공부하다 보면, 요즘의 아키텍처들은 다 MVC의 문제점을 해결한 진화적인 형태로 소개되고 있는데, 사실상 MVC의 변형 중 하나일 뿐이지, MVC와 크게 다르지 않다는 것을 느낄 수 있는데, 어떻게 생각하시나요?
@frongt
@frongt 7 ай бұрын
네 어떤 관점에서 보면 대부분의 애플리케이션이 모델과 뷰를 다르기 때문에 MV* 의 구조를 갖는 것 같아요.
@sol3228
@sol3228 Жыл бұрын
내용, 설명, 속도 모두 정말 좋았습니다. 지금까지 들은 강의 중에 손에 꼽을 정도 입니다 👍 좋은 영상 감사드려요. 덧붙여 질문드리고 싶은 것이... React 예제 코드들을 보면 API 호출을 View에서 직접 호출, 또는 hook을 통해 호출하는 경우가 많은데요. Clean Architecture 등과 같이 레이어를 나누고 결합도를 낮추는 형태의 구조는 왜 잘 쓰이지 않는지 궁금합니다.
@frongt
@frongt Жыл бұрын
우선 패턴이 모든 상황에 동일하게 적용되는건 아니라고 생각해요. 리액트 뷰에서 통신과정은 응집도 차원에서 뷰의 역할로 볼 수도 있고요(그에게 필요한 일이니까) 그런데 한 편으론 커스텀훅을 사용한다면 레이어를 나누는 것과 비슷한 것이라 결합도를 낮출수도 있고요. 정답은 없습니다. 같은 구현결과도 관점에 따라 다르게 해석할 수 있는것이죠.
@falconsea7378
@falconsea7378 Жыл бұрын
데이터 바인딩 관련해서 13:15 쯤에 있는 DefineProperty, proxy api, observer패턴에 대한 설명도 해주실 수 있나요? 추가로 그걸로 어떻게 데이터바인딩이나 mvvm을 구현할 수 있는지도 궁금합니다! 영상 너무 유용해서 구독하고갑니다!
@frongt
@frongt Жыл бұрын
구독감사해요. 나중에 그런 내용도 한번 다뤄보면 좋겠네요.
@dayoung7031
@dayoung7031 Жыл бұрын
좋은 영상 감사합니다!!!
@frongt
@frongt Жыл бұрын
제가 더 감사합니다
@dayoung7031
@dayoung7031 Жыл бұрын
@@frongt 대박 답글 감사합니당 ㅎㅎ 이제 프론트 주니어로 시작하는데, 영상 보면서 면접 준비 했어요…!!! 처음엔 영상에서 말하시는거 다 이해하지 못했는데 점점 하나씩 더 이해할 수 있어서 너무 기쁩니다!! 좋은 영상 계속 부탁드려요~~!!!
@frongt
@frongt Жыл бұрын
@@dayoung7031 좋은결과 있으시면 좋겠네요 🙂
@user-oi9rk8pk5m
@user-oi9rk8pk5m Жыл бұрын
보통 View 가 control과 model 을 먹어버리죠. 특별한 케이스 아니면 죄다 api 단에서 받는순간 처리해버리니
@user-oe8hj9bc6c
@user-oe8hj9bc6c Жыл бұрын
부트캠프 졸업하고 취준하는데 모르는 개념이 너무 많네요ㅋㅋㅋ 부끄럽지만 mvc 개념도 처음 들어봐서 많이 배웠습니다ㅎㅎㅎ 영상 잘보고 있어요! 감사합니다
@frongt
@frongt Жыл бұрын
네 학습꺼리는 정말 끝도 없더라고요. 도움이 되셨다니 다행이네요.
@user-sh2iy1uc4l
@user-sh2iy1uc4l Жыл бұрын
선생님 그렇다면 백엔드의 mvc의 view는 프론트엔드의 HTML 부분인가요? 아니면 프론트엔드로 넘어오는 응답(데이터)인가요?
@frongt
@frongt Жыл бұрын
네 백엔드에서 html을 만드는 템플레이팅(templating) 과정이 있는데요. 그걸 주로 말합니다. JSON을 만드는 과정은 뷰영역이라고 보진 않는것 같아요.
@user-sh2iy1uc4l
@user-sh2iy1uc4l Жыл бұрын
@@frongt 그럼 최신 백엔드에서는 리액트같은 라이브러리가 있어서 뷰에는 신경 써주지 않는 편인가요??
@user-qs6lb3dz5o
@user-qs6lb3dz5o Жыл бұрын
@@user-sh2iy1uc4l 네 과거에 비해서 그런경향이 있죠.
@user-cw3sz2cw6t
@user-cw3sz2cw6t 6 ай бұрын
요즘은 웹 개발을 REST하게 개발하기 때문에 프론트 백 서로 독립적으로 분리합니다. 기존에 ssr방식으로 템플릿엔진을 쓰던 시대는 지나갔죠 요즘 백엔드는 요청에대한 응답 처리를 json형태 데이터로 리턴하죠 그러면 프론트는 그 데이터 받아서 화면에 띄워주는 역할을하는거죠. 그로인해 백엔드는 아키텍처나 데이터설계에 더 몰두할 수있게되어 백엔드 퀄리티가 더 올라갓죠 요즘은 백에서 굳이 뷰를 안띄우고 프론트에 아주 좋은 라이브러리들이 잇기 때문에 굳이 템플릿엔진을 쓸 이유가 없어졌습니다
@user-tn6ei6ke2o
@user-tn6ei6ke2o 6 ай бұрын
hooks와 전역상태관리를 혼합하게 해결하는게 답인 줄 만 알았는데.. 생각보다 이거 공수가 많이 들더라구요. 요즘은 또 리액트 쿼리니 이런게 들어가서 단순하게 빨리 찍어내는거라면.. 부모에 공통 hooks로 만들고 드릴링 시켜서 view만 분리하는게 좋을때도 있는 경우도 있는거같습니다.(프레젠테이셔널 컴포넌트) 요즘은 진짜 뭐가 정답인지 모르겠네요 ㅋㅋ 그냥 프론트 요즘 그냥 예전처럼 단순하게 개발하고 싶네요 그냥 무지성 axios랑 상태관리 적절히…
@user-cw3sz2cw6t
@user-cw3sz2cw6t 6 ай бұрын
요즘은 REST api가 대세라 백엔드는 JSON 형태 데이터만 응답 해주는 역할에 충실한 영역이 되었죠 ㅎㅎ view는 프론트 개발자들이 열심히 만들어 주시길 바랍니다 ㅎㅎㅎ
@frongt
@frongt 6 ай бұрын
JSON 잘 부탁드려요
@user-kl2pi3nw3z
@user-kl2pi3nw3z Жыл бұрын
이런 공부할 자료는 어디서 찾아보면 좋을까요 ?
@frongt
@frongt Жыл бұрын
프론트를 만드는데 필요한 패턴 이런건 자료가 많지 않은것 같아요;; 디자인 패턴의 개념자체는 웹에도 많이 있긴하고요.
@lazyreport
@lazyreport 9 ай бұрын
존잼
@eww1212
@eww1212 Жыл бұрын
나 혼자 하면 의존성이 몬 상관인가요? ㅋㅋㅋ 졸공하나요? ㅋㅋㅋ
@user-jd5tm9vu8x
@user-jd5tm9vu8x Жыл бұрын
프롱프롱❤
@frongt
@frongt Жыл бұрын
(음 누구시지~~)
@1007rnrgus
@1007rnrgus Жыл бұрын
자막 퀄이 너무 안 좋아서 설명을 안 듣고 그냥 읽기에는 불편한 부분이 많아서 아쉽네요. 내용은 정말 유익했습니다
@frongt
@frongt Жыл бұрын
맞습니다;; 맞아요. ㅠ.ㅠ
@game-viewer4069
@game-viewer4069 Жыл бұрын
@@frongt 저는 자막 좋았어요. 저와는 다른 분야지만 이해하기 쉽게 설명해주셔서 좋았습니다. 감사합니다.
@user-sv9ep3xs2r
@user-sv9ep3xs2r Жыл бұрын
어디서 들어본 목소리인데...
@frongt
@frongt Жыл бұрын
음음음 어딜까요~? ^^
@tabbytaxi
@tabbytaxi Жыл бұрын
월요일에 각자 확인해보는 시간을 가지겠네요 ㅋㅋ
리액트 잘하기 위한 8가지 방법
18:13
프롱트
Рет қаралды 15 М.
[10분 테코톡] 우디의 Flux Architecture
14:36
우아한테크
Рет қаралды 7 М.
Meet the one boy from the Ronaldo edit in India
00:30
Younes Zarou
Рет қаралды 13 МЛН
ISSEI & yellow girl 💛
00:33
ISSEI / いっせい
Рет қаралды 19 МЛН
Дай лучше сестре 🤗 #aminkavitaminka #aminokka #сестра
00:15
Аминка Витаминка
Рет қаралды 434 М.
MVVM 쉽고 확실하게 이해하기
5:06
RealGrid
Рет қаралды 5 М.
백엔드 개발 이 영상만 보셔도 거의
11:59
기술노트with 알렉
Рет қаралды 69 М.
Brutally honest advice for new .NET Web Developers
7:19
Ed Andersen
Рет қаралды 140 М.
[10분 테코톡] 푸만능의 리액트 컴포넌트 설계와 SOLID
9:13
[10분 테코톡] 호프의 프론트엔드에서 컴포넌트
13:24
우아한테크
Рет қаралды 10 М.
한시간 만에 끝내는 React.js 입문
1:16:34
개발자의품격
Рет қаралды 84 М.
Meet the one boy from the Ronaldo edit in India
00:30
Younes Zarou
Рет қаралды 13 МЛН