SPAs 구현은 여전히 골치아픈 일입니다.
React,Angular,Vue(줄여서 RAV)만 있다면 간결하게 해결할 수 있습니다.
view에 데이터만 엮어서 선언하면, 알아서 렌더링이 다시 되기도하죠. 대견합니다.
사람들이 매직이라고 하더군요.
매직은 보고 쓸때는 좋은데, 내가 좀더 이해하려고 하면 답답합니다.
개인적으로 React가 가장 괜찮아 보이는 이유는 매직에서 가장 거리가 있어보이기 때문입니다.
Angular는 반대편 쯤이고, 그 사이에 Vue가 자리 잡고 있는 거 같습니다.
아 반대라고 나쁜건 아닙니다. 일장일단이 있죠.
RAV, 이 위대함을 느끼는 건 어렵지 않습니다.
바닐라로 SPAs를 구현하는 낯선 경험을 해보는 것이죠. (최근 교육과정중에 의도하지 않게 SPAs를 구현하는 친구들이 생겼는데…Routing코드를 보다가 미안한 마음이 들더군요)
React 밑바탕에 있는 기술을 알고 React를 만나면 생각보다 금방(?) 배울 수 있다고 생각합니다.
다른 프레임워크나 라이브러리도 마찬가지겠죠.
(최근에 React교육과정을 준비하면서 스치듯 생각해본 아이디어가, 바닐라로 React를 흉내내는 과정을 만들어보는 것 이였습니다. 아마 🐶망했겠죠?)
망할현실 🥴
하지만 현실을 생각해보면 바닐라 경험은 내버려두고 prototype chain과 같은 JS에서 가장 중요하다고 이해하는 것도 공부하기 쉽지 않습니다. 네 바쁘니까요. 심지어 prototpye을 코드에 직접 표현할일도 사실 없습니다.
현실은 바로 매직으로 들어가보는 거죠.
‘ 공식 레퍼런스를 보면 다 알거에요.’ 라는 커뮤니티의 댓글을 믿고 시작합니다. 자 게링스타티드~ 시작!
npx create-react-app endless-service안녕하세요! 마술쇼에 오신것을 환영합니다! ^^🕴🏼
그런대로 돌아가는거 같은데,, 궁금한 게 하나 둘 생깁니다. 새로나온 Hooks는 라이프 사이클이 있는 건지 없는 건지 알수가 없습니다. 매직이 슬슬 궁금합니다. 뭐가 사실 매직이고 표준문법인지도 좀 헷갈릴 수 있습니다.
언제가 되었건 우리는 매직을 풀어보고 싶어합니다. 내가 React를 계속 다뤄야 한다면 아무래도 풀어보는 게 좋겠습니다.
자 이제 어디서부터 얼마큼 해야 할까요?
JS두꺼운 책을 다 보기에는…(사실 그걸 본다고 매직을 알아낼 수 있는것도 아니지만..)너무 많죠.
이 타이밍에 약간의 도움이 될 부분을 짚어보려고 합니다.
첫번째. NPM
‘React가 어려운게 아니고,, 뭔 놈의 걸 설정하는게 더 어렵더라..’
자 Node Package Manager 부터 공부합니다.
RAV로 프로젝트를 한다면 NPM 을 통해서 개발환경을 만들고 추가적인 모듈을 다뤄야 하는데 이 환경을 이해하고 설정하는 것이 쉽지 않습니다. boilerplate 가 있다고 믿고 싶지만 밀봉된 마법의 상자를 언젠가는 풀어봐야 할 겁니다.
NPM은 그것이 도대체 무엇인지? 어떻게 동작하는지? node_modules가 무엇인지? 등을 짚고 넘어가면 좋습니다. 이부분을 잘 이해한다면 바벨과 웹팩등 표준처럼 사용 되고 있는 빌드환경을 올바르게 구성할 수 있습니다. 바벨과 웹팩 설정은 번거롭고 헷갈리는 부분이 많습니다. NPM과 개발환경을 이해하면 큰 도움이 될겁니다.
여러분들 손으로 development mode와 production mode를 쥐락펴락하며 만들어 갈 수 있어야 할 겁니다.
두번째. 렌더링
렌더링은 쉽게 이해하면 HTML을 화면에 변경하는 작업입니다. 클라이언트렌더링 서버사이드렌더링 모두 마찬가지 입니다. 정말 그게 다 입니다.
그런데 이 작업은 웹프론트엔드에서 가장 지저분하고 느린작업이며 로직을 더럽히는 일입니다. 이때문에 RAV는 각자의 방법으로 이부분을 개선하고 있습니다. 가상DOM을 두거나, template 문법을 조금이라도 쉽게 표현하기 위해서 고민합니다. 물론 성능을 보장하면서요. (대부분의 RAV비교 글은 엄청난 노드를 변경시키며 자신의 것들이 얼마나 빠른지를 자랑하죠)
그리고 RAV가 렌더링 최적화를 알아서 해주진 않는 점을 알고 있어야 합니다.물론 똑똑하게 동작하며 최적화를 하지만, 대부분의 렌더링 최적화는 개발자의 몫입니다. 개발자가 렌더링 최적화방법을 알려면 매직을 풀어야겠죠.
이 부분의 매직을 조금이라도 풀고 싶다면 먼저 DOM을 다루는 방법을 이해해야 좋겠네요. DOM APIs를 열어보고 기절할 수 있습니다. 그걸 다 볼 수는 없죠. Node를 추가하고, 변경하는 정도의 연습만 해봐도 좋습니다.
비교적 편리한 방식으로 알려진 방법은, 문자열형태로 노드를 제어하는 것입니다. template literal을 유용하게 사용하세요. 여유가 된다면 리렌더링을 하면서 불필요한 DOM node 변경을 최소한으로 하려고 시도해보세요. RAV의 렌더링최적화를 자연스럽게 이해할 수 있습니다.
세번째. CSS
‘그건 퍼블리셔가 해준다고!’
라고 하는 분들고 계십니다. (국내 퍼블리싱 분리방식의 개발방법은 점점 어려워지고 있는거 같습니다)
하지만 전문 퍼블리셔가 개발해주는 코드가 있어도 내가 수정해야 하는 경우가 많습니다. 예를들어 유지보수부터는 React개발자가 할 수도 있고요.
아무래도 리액트를 개발하면서 CSS를 나몰라라 하는 시대는 이제 끝나가는 거 같습니다.
리액트는 컴포넌트 방식으로 개발하죠.
React의 스타일링 작업방식도 컴포넌트화 시켜서 개발하는 방법도 인기를 얻어오고 있습니다.
이방식은 JS안에서 CSS를 구현하는 방식입니다. CSS가 JS와 별개가 아니라는 것이죠. 뭉쳐있습니다. 개발도 뭉쳐서 같이 해야 하는 시대인거 같죠?
const ModalStyled = styled.div`
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: ${({styles}) => styles.bgColor};
color: ${({color = "#fff"}) => color};
width: 200px;
height: 200px;
flex: 1;
justify-content: center;
align-items:center;
padding:1rem;
`CSS는 공부할 것이 많고 오랜 시간투자가 필요할 수 있죠.
가장 먼저 공부할 부분은 UI구성과 배치라고 생각합니다. 그래도 예전보다 많이 좋아졌죠. flexbox 속성을 한번 살펴보세요. layout 구성이 좀더 쉽게 느껴 질 수 있습니다. css-grid라는 것도 있고요.
개발자들이 좋아할만한 자원은 이미 많이 나왔죠.
프로그래밍 하듯이 SASS와 같은 것을 쓸 수도 있고 React를 사용한다면 styled-component와 같이 컴포넌트 개발방식을 따르면서 스타일작업도 하나의 자바스크립트 개발이라고 느낄 수 있습니다.
네번째. 중요한 JavaScript 문법
‘어쩌면 말이죠, React가 어려운 건 사실 JavaScript가 어려운 걸 수 있어요!’
scope, closure, currying, prototype 을 공부해보세요.
매직을 풀어주는 열쇠들 입니다.
const codesquadcurrying = (student) => (masters) => (masterscourse) => develop();아 빠진게 있네요 this가 있죠.
요즘의 리액트는 this를 몰라도 별문제가 없어보입니다.
하지만 this와 bind함수를 이해하지 못하면…이것이 언제 당신을 괴롭힐지 모릅니다 😱
ES6는 특히나 유용한 feature가 많습니다. 새로운 문법은 생산성을 올려주고 코드의 가독성도 좋게 해주는 것이 많죠. 또한 이걸 모르면 JS문법인지 React문법인지 모르는 황당한 일이 생길지도 모릅니다.
다섯번째. 모듈 나누기
이건 어떻게 연습하는게 좋을지 저도 잘 모르겠습니다.
모듈을 역할별로 나누고 의존성트리를 그리면서 모듈의 흐름을 컨트롤 할 수 있어야합니다.
역할을 정의하고 책임을 고민하면서 모듈을 작게 만들고, 모듈끼리의 관계를 자연스럽게 연결짓는 연습이 필요한 것이죠. 프로그래밍 설계에 대한 평소의 고민, 객체지향적인 연습등이 도움이 될 수도 있습니다.
https://cdn.redshift.autodesk.com/2014/10/benefits_of_modular_construction_lego.jpg
ES Module을 공부하세요. 모듈단위로 나눠서 개발하기 좋습니다. React에서도 이 방법을 쓰고 있는것이죠.
여섯번째. 함수형프로그래밍
‘함수형프로그래밍과 리액트는 상관이 없는가? 있는가?’
사실 이 질문이 중요한건 아니겠죠 .
함수단위로 코드를 나누고, 합성을 통해서 흐름을 표현하는 건 리액트 뿐 아니라 다른 부분에서도 중요할 겁니다.
리액트에서는 상태관리가 중요합니다. 그 상태 변경을 탐지하고 변경에 따라서 전체 컴포넌트가 렌더링 되는 구조입니다. 여기서 이리저리 데이터를 변경하는 상태관리가 필요하죠.
배열의 고차함수들로 구현된 코드는, 구체적인 알고리즘을 숨기고 추상화된 상태로 어떤 흐름의 변경이 일어나는지 잘 알 수 있게 해줍니다. 따라서 리액트에서도 이런 방식으로 표현하는 건 중요합니다. 고차함수 중에 reduce를 다양하게 활용할 수 있는 정도가 된다면 OK입니다.
함수형 프로그래밍의 여러가지 어려운 개념까지 공부하자는 건 아닙니다. 지연처리, Monad와 Functor (전 누가 물어보면 대답못함)는 나중에(?) 공부해도 좋습니다.
함수단위로 코드를 잘 나눈다는 것은, 순수함수를 만드는 것입니다. 이렇게 구현한 코드는 테스트 용이한 코드가 되는 이득도 있죠.
더불어서 Immutable한 방법을 사용해서 데이터를 조작하는 것은 React에서 중요한 부분입니다. 이 개념도 알아둬야 합니다. 직접 상태를 바꾸지 않고 Immutable 방법으로 데이터를 변경해주는 메서드들이 무엇이 있는 알아보고 이부분을 사용해서 상태를 변경하는 방법을 익히는 거죠.
(참고. 객체지향은?) 놀랍게도 React는 더이상 ES Classes는 몰라도 됩니다. 그러니 객체지향은 빠이빠이 ~~ 라고 생각할 수 있습니다. 하지만 모듈을 나누고 모든 의존성 관리를 하는 개념은 계속 필요합니다. 그러니 의존성관리나 S.O.L.I.D와 같은 괜찮은 객체지향 방법들은 여전히 중요합니다. 개인적으로는 프론트엔드 개발에서는 함수형을 익히는 것이 상대적으로 더 중요하다고 생각합니다.
일곱번째. 디버깅
리액트 역시 개발시간의 많은 부분은 디버깅을 하는 시간일 것 입니다.
개발모드에서 소스맵을 활용해서 개발하나요? 리액트가 렌더링 되는 정도를 프로파일러를 통해서 확인해보셨나요? 병목지점을 찾기 위해서 도구를 활용하시나요?
모든 문제는 원인을 찾아야 해결하겠죠. 훌륭한 도구를 익혀야 합니다.
요점은 프로파일러도 시각화된 정보를 통해서 비교적 빨리 문제를 요약해서 보여줍니다.
물론 평소에 개발자도구의 source 패널을 열어서 디버깅을 안해봤으면..그것부터 익혀야겠죠. calling stack이 무엇인지, watch를 어떻게 쓰는지, scope 에서 보여주는 내용이 어떤 의미인지? 이런 부분 모두 아주 친해져야 합니다.
정리
이쯤 되면 리액트는 언제 배우는가? 라는 의문이 들까요?
네 리액트는 라이브러리 입니다. 배경지식이 튼튼하면 매직을 풀어가며, 조금더 쉬운 걸음을 할 수 있을것이라 생각합니다.
React를 개발하면서도 잠깐씩 물러나서 7가지를 하나씩 깊이있게 공부하면 훨씬 즐거운 리액트 프로그래밍이 될 것이라 생각합니다.
[코드스쿼드에서는
지금 ⚛ ️리액트 웹 프로그래밍(중급수준)을 모집 하고 있습니다]
