react24 [WEB] React, Flux Architecture 아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 이번에 강의 들으면서 Redux 배웠는데, 굉장히 깔끔한것 같더라구요. 일단 그에 앞서서 Flux 에 대해서 알아보겠습니다. Facebook을 만들때 여기도 디자인패턴이 있었겠죠? MVC, MVVM 등등.. 있겠지만, 페이스북은 MVC의 단점에 대해서 알게 되었습니다. 중앙화되어있지 않은 변경과, race condition, cascading update등등.. 여러 문제가 발생했습니다. MVC에서 V는 model,controller랑 둘다 연락합니다. 이런거대신에 Unidirectional Flow를 생각해냈습니다. 폭포수가 양방향으로 흐르진 않잖아요? 한국어로하면 유량 아키텍처 이런느낌인데;; 쩝 이걸 어케 알아먹습니까? 단방향으로.. 2021. 7. 25. [WEB] React, Uncontrolled Form, useRef() , react hook multiple useRefs 지난번엔 Controlled Form을 봤습니다. 이건 React에 의해서 관리되고, state와 form의 value가 항상 일치하는 장점이 있지만, 구현하기가 좀 더 복잡하고, re-render를 1글자마다 하므로 퍼포먼스에 좋지 않았습니다. 물론! 좀 더 정교한 작업을 할 수 있다는 장점이 있긴 합니다. 리액트에서는 Controlled form을 장려합니다. 이번 시간에는 그래도 state에 종속되지않고 DOM에 직접 접근해서 값을 가져오고싶다! ex)file API 등등.. 이때 사용하는 Uncontrolled Form에 대해서 알아보겠습니다. UnControlled Form 1. 간단하게 만들 수 있다. (대신에 정교한 기능들은 사용하기 어렵다.) state를 바꾸지 않는다. 2. React에 .. 2021. 7. 23. [WEB] React, Controlled Form, form 속성들, react hook multiple states. 강의도 슬슬 3주차입니다. 기초적인 것들은 앞에서 많이 다뤘고, 이제는 모두 다 포스팅하기에는 너무 길어서 제가 기억하고 싶은것만 쓰겠습니다. 강의를 듣고 복습하면서, 한번에 하지 못했던 것들입니다. Controlled Form -> React의 state와 Form의 input value를 일치시키는 것을 말합니다. 공식적 설명으로는, React에 의해서 Input form의 value가 제어되는 것을 말합니다. onChange event를 이용해서 일치시킬 수 있습니다. 이렇게 생긴것을 만드는 과정에서 알게된 것 들을 적겠습니다. Form을 만들기 위해 기본 react 엘리먼트인 input 이런것 대신에 'reactstrap'의 Form을 썼습니다. reactstrap의 { Form.. 2021. 7. 22. [WEB] React, SSR(Server Side Rendering),CSR 차이, 백신 서버는 왜 터졌을까... 어제 썼던 SEO에 SSR이 유리하다. 라고 하면서 CSR,SSR에 대해서 포스팅 한다고 했었습니다. 두개를 알아보겠습니다. 1. SSR (Server Side Rendering) 위의 사진처럼 SSR의 장점은 CSR 보다 먼저 사용자에게 페이지를 보여줄 수 있다는 점입니다. 처음에 페이지를 켰을때, react를 실행시키고 js를 dom으로 변환해서 보여주기까지 시간이 걸린다고 했습니다. 그러면 그동안 사용자는 빈 페이지만을 보거나, 로딩페이지를 보고 있어야 합니다. 그런것보다는 페이지의 일부를 보는것이 UX가 좀 더 좋다고 느낄 수 있습니다. 1. 서버는 미리 넣어둔 HTML 파일을 렌더링 할 준비가 됐다고 response 합니다 2. 브라우저가 OK라고 하고 HTML페이.. 2021. 7. 20. [WEB] React, SPA Website장단점 ,SEO(Search Engine Optimization) 반갑습니다. 지난번에 SPA에 대해서 글을 쓴 적이 있었는데요. 그 부분에 대해서 좀 더 이어쓰고자 합니다. SPA Website는 MPA에 비해서 부분 렌더링을 통해, 동적 페이지를 구성할때 유리하다고 했습니다. 아! 그리고 Papago 또한 react로 되어있었습니다. 집에 가면서 왜 다른거 말고, 파파고는 React일까 생각해봤습니다. 이곳은 한글 -> 영어 번역을 해줍니다. 이 과정을 할때마다 페이지를 다시 새로고침하면 어떻겠나요? 으악!! 보기도싫어.. 하지만 수정이 일어나는 부분만 렌더링을 해준다면? 굉장히 깔끔하겠죠? 이것이야 말로 동적인 페이지라서 SPA컨셉이 잘 어울리는 것 같습니다. 또한 인공지능 처리도 서버에서 할텐데, 서버가 바빠 죽겠는데 client에서 대부분을 처리.. 2021. 7. 20. [WEB] reactstrap, Breadcrumb 다르게 나오는 이유(version 차이) bootstrap version 극대노의 상황이지만.. 현자의 마음으로 화를 가라앉히고 포스팅 합니다. 하.. 강의 복습을 하는데 몇시간동안 아무리 코드를 고쳐도, UI가 다르길래 원인을 못찾았는데.. bootstrap의 버전이 문제였습니다. reactstrap의 버전이 같더라도 bootstrap의 버전이 다르면 생긴게 다르게 나옵니다.. v 4.0.0 이상 이렇게 나와야 정상인데 V.5.0.0이상 자꾸 이렇게 어디 하자가 있는애처럼 나왔습니다. 원인은 package.json에 있는 bootstrap 버전 차이였습니다. 설마설마 했는데, 이 차이때문에 다르게 나왔습니다. 5.0 이상부터 이런 모양 4.0이상은 이런모양.. 결론 : 패키지의 버전에따른 css 모양도 확인해보자. 몇시간이면 싸게 먹힌걸지도.. .. 2021. 7. 19. [Web] React, React Router, navigation, react-router-dom 오늘은 React Router에 대해서 알아보겠습니다. 이건 강의를 들은지 한참 지났는데, 자꾸 뭘 찾고 하다보니까 포스팅이 너무 늦었습니다. 빨리 진도를 나가야 하는데요. 산더미 같은데 할게.. Navbar에서 메뉴를 눌렀을때 다른 페이지로 이동을 해야하는데요. 이 navigate 기능을 react-router-dom package를 통해서 할 수 있답니다. npm install react-router-dom 을 이용하셔야 합니다. React Router 1. navigational Component의 집합입니다. -> view들간의 navigation을 가능하게 해줍니다. 2. Router Component, route matching Component, navigation Component로.. 2021. 7. 18. [Web] React, Virtual DOM, Diffing algorithm, react fiber, 반복 element에 key가 필요한 이유 지난번에 React는 Virtual DOM을 이용해서 실제 DOM을 사용하는것보다 좀 효율적으로 렌더링 할 수 있다고 했습니다. Browser DOM은 browser의 object 입니다. Virtual DOM은 뭘까요? Virtual DOM 특징 : 1. RVM은 Real DOM의 가벼운 표현이라고 보시면 됩니다(lightweight) 2. js object로 메모리 내에 트리구조의 자료구조로 저장되어 있습니다. react app 메모리 내에서 계속 유지되고 있으므로, 필요할 때 언제든 쉽게 수정이 가능합니다. Browser DOM은 새로고침을 해야해서 속도 차이가 굉장히 심하게 납니다. 모~든 React의 수정사항은 가상 DOM에 먼저 반영 됩니다. 그 이후에 Virtual DOM은.. 2021. 7. 17. [Web] Class Component vs Functional Component, 구조분해할당(Destructuring Assignment) 드디어 쓰네요... 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해서 쓰겠습니다. 결론부터 말씀드리겠습니다. 함수형 컴포넌트가 더 좋습니다. (간결성, 속도,Class component의 lifecylce methods를 거의 전부 다 사용 가능) 저 class 열심히 해보려고 했는데, 오늘부터 손절 합니다. 제길슨... 혼자 차이점들을 조사하면서, 아 지금까지 클래스형 배웠는데 .. 제발 클래스형의 독특한 장점 있어라!! 했지만.. 쩝... 여기까지 1. Class Component 특징 : 1.Constructor가 있다. 여기서 state를 선언할 수 있다. 2. render() 함수가 필요하다. extends 3. Component를 해야한다. 장점 : lifecycle method를 통해서 좀.. 2021. 7. 16. [WEB] React,Presentational Component vs Container Component (stateless,stateful), shallow ,deep copy 관심사 분리(separating concerns)를 위해서 React Component Pattern이란것이 존재합니다. 물론 공식적인 react의 용어는 아니지만, 개발자들이 만든 단어입니다. https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82 React Component Patterns Stateful x Stateless, Container x Presentational, HOCs, Render Callbacks and more levelup.gitconnected.com Presentational Component Stateless component ( 항상 그런것은 아니다) 특징 : 1. 주로 view를 Renderi.. 2021. 7. 15. 이전 1 2 3 다음 728x90
