Web Front-end
[React/State/Props] MVC 모델과 Flux모델 , React의 선택
React의 핵심은 "상태(state)"를 어떻게 잘 관리하냐는 것입니다. TodoList를 짜면서도 느낀거지만, 기본적으로 state는 setState로 비동기로 관리하게 되고, 불변성을 만족하는 등의 일종의 제약조건이 있게 됩니다. React는 화면과 데이터를 일치시키기 위해서, 다른 말로 하면 실시간 렌더링을 위해서 , Flux패턴을 채용했습니다. 상태 끌어올리기를 이해하기 위해서는, React의 기본적인 데이터의 흐름에 대해서 이해해봅시다! React의 데이터 흐름을 이해하기 전에, 간단하게 90's부터 이어져온 ,전통적인 Web Model에서의 Data 흐름을 봅시다. 그래야 React가 왜 FLux를 썻는지 더 잘 와닿습니다. 전통적인 Web Model (MVC) React 또한 MVC 모델을..
[React/style/Basic] React Component에 스타일 적용하기
Style 적용 웹 문서에서 스타일을 적용하기 위한 방법은 1가지 밖에 없다. "CSS"를 적용해줘야한다. 하지만, 이 CSS를 "작성하는 방법"자체가 엄청 많아서, 우리에게 웹 스타일을 하기위한 방법이 아주 많아보일 뿐이다. 크게 3가지 방법이 있다. HTML에 직접적으로 적용하는 Inline-style , 태그를 이용하는 방법,link 태그를 이용해서 css파일을 따로 작성하는 방법이 있다. JS에서 CSS를 적용하는 방법도 이 HTML에 CSS를 적용하는 방법 3가지를 "JS로 DOM객체 컨트롤"할 뿐, 똑같다. 예를들어, DOM 객체 안에 Style ={}식으로 주는 방법은 태그에 직접적용한다는 관점에서 inline-style이라는 점에는 변함이 없다. 보통은 class,id를 통해서 CSS Fi..
[SSR/CSR/Rendering] SSR과 CSR에 대해서
SSR(Server Side Rendering) SSR은 서버가 "모든 데이터"가 들어가있는 완벽한 (CSS,IMG 등) 서비스 페이지를 구성하여, 사용자에게 바로 보여줄 수 있습니다. 서버를 이용해서 페이지를 구성하기 때문에, CSR보다 페이지를 구성하는 속도는 늦어지지만(JS파일을 뒤늦게 받아오기 때문) , 사용자에게 보여주는 콘텐츠의 구성이 완료되는 시점은 빨라집니다.(즉, 최초 로딩이 빠르다는 장점이 있습니다). 무엇보다, 완성된 HTML을 이용하기 때문에, SEO 최적화 측면에서 유리합니다. 또, 네트워크 환경이 원할하지 않다면 일반적으로 Server는 고성능일 확률이 높고 , 각각의 페이지를 나눠서 주기 때문에 SSR이 유리합니다. 하지만, 매번 다른 페이지를 이동하거나, Interaction..
[React/flow/JS/Basic/hook] React의 Component의 흐름(Flow)
Component의 흐름?? 프론트엔드에서는 "비동기"함수가 일상적입니다. 예를들어, addEventListener도 비동기함수이고, setInterval과 같은 이벤트 루프도 다 비동기 함수입니다. 즉, 나의 코드의 순서와 실행순서가 다르다는 이야기이고, 논리는 맞지만 실행순서가 의도와 다르게 될 수 있습니다.(생각보다 빈번하다) 따라서, React에서는 Component 간의 "흐름"을 잘 파악하는게 에러를 발생시키지 않을 수 있습니다. React LifeCycle이라는 용어가 따로 있을정도로 , React에서는 이러한 흐름을 잘 제어하는게 ,프로그래머의 중요한 역량 중 하나입니다. Like버튼 예제로 알아보자 Like 예제를 조금 변형해서 , Like 버튼을 누르면 , "좋아요를 눌렀어요!"라는 문..
[React/Basic/Component/State] React의 State
React는 Component로 이루어져 있다. React는 JSX 문법을 이용해서 ,다양한 HTML 태그들을 가지게 되었습니다. 그리고 , 그 Element(HTML태그)들의 모아 놓은걸 하나의 컴포넌트라고 합니다. React에서는 이 Component가 1개의 최소 단위이며, 기능적인 단위입니다. 쉽게 생각하면, return문이 있는 JS 모듈 한 개라고 생각하면 됩니다. React Component의 데이터 관리 React의 장점 중 하나인, 실시간 렌더링은 이벤트 루프와 같은 비동기 함수들과 함께 썼을 때 문제가 발생합니다. 이벤트는 "비동기"이므로, 이벤트가 실행이 되었을 때, 다시 딱 렌더링을 해줘야 했습니다. 즉 , 이벤트 발생시 마다 또 Render함수를 일일이 적어넣어줘야 했고, 그 반복..
[React/JS/SPA/Render] React의 Rendering
우선, React와 JS의 Render에서 차이점을 명확하게 봅시다. JSX로 뭐 HTML Element 찍어내는거 , 재사용성 좋아진거 맞습니다. 하지만 JS는 결국 Interaction이 중요합니다. 바닐라 JS는 변경이 일어나면 , Element들을 다 다시 그리게 됩니다. 이 코드를 우선 보시죠. const rootEl=document.getElementById("root"); const randomBtn = () =>{ const random = Math.floor(Math.random() * 10 + 1); const btnEl = ` ${random} ` rootEl.innerHTML = btnEl; } setInterval(randomBtn,2000); 2초마다 특정 이벤트가 발생했을 때,..
[React/JSX/Basic/반복문/조건문] JSX의 편리함
전 React를 다룬지 몇개월 안된 "아기"이지만, React를 다루어 보면서 느꼈던게 JSX를 이용하면서 HTML에 "변수"의 개념을 도입할 수 있었다는게 정말 편리했던것 같습니다. 이거 덕분에, 사실 생산성도 잘 챙길 수 있었던것 같습니다. 오늘은, 그 편리함에 대해서 더 와닿게 기록을 해보겠습니다. React에서는 JS를 쓸 수 있다 저는 React를 React Hook으로 먼저 배웠지만, Stack overflow 같은곳만 가도, class 기반의 컴포넌트들을 많이 볼 수 있습니다. 사실 , 사용하다보면 React는 완전 다른 생태계를 구축해서 다른 언어같지만, JS의 라이브러리일 뿐이죠! 즉 ,React에서도 JS를 사용할 수 있고 , JS와 JSX를 적절하게 섞어서 쓸 수 있습니다. 저번에 작..
[React/jsx/DOM/Basic] React의 DOM 조작과 JSX
SandBox환경에서 React를 살짝 맛보고, 후에 Visual Code를 이용해서 npm을 이용해보겠습니다. DOM 조작 JS로 DOM을 조작하는건 당연한 일이다. JS는 "동적"으로 웹페이지를 만들기 위해서, 작성하는 스크립트니까. * DOM 이란? 더보기 Document Object Model로, 브라우저에서 HTML 태그를 처리하기 위해서, 만든 "개념"이라고 보면 된다. 예를들어, 버튼 1개가 있으면 우리는 버튼이라고 인식하지만 , 브라우저에서는 버튼 태그를 지정하기 위해서 일종의 관리 체계가 필요하게 된다. 즉, 태그들과 같은 HTML 객체들을 관리하기 위한 체계가 DOM이다. DOM은 트리형태를 띄고 있다. const rootEl = document.getElementById("#root"..