정도영 Tech-Blog 정도영 Tech-Blog

기존에 막연했던 Next.js의 hydration 개념을 짧지만 명확히 정리해보려 합니다. 일단 hydration은 '수분을 공급하다'라는 뜻의 영어 동사인 hydrate의 명사형입니다. 저는 hydration이 단순히 사용자가 Next.js로 제작한 사이트에 진입하면 pre-rendering된 html을 받은 후에 다른 페이지로 이동할 때 서버에서 필요한 React 실행 코드를 받아 React의 csr방식으로 부드러운 화면 전환을 가능하게 하는 것이 어플리케이션에 수분을 공급하는 행위에 비유한 것이라고 생각하여 이것을 hydration이라고 생각했습니다. 하지만 Next.js에서 hydration는 조금 더 깊은 의미를 가집니다. 이것을 이해하려면 먼저 일반적인 html와 Next.js의 자바스크립트 ..

Next.JS를 사용하신 분들은 아시겠지만, Next.JS에서는 일반 React처럼 하나의 html파일과 부수적인 js파일을 주고, 그 안에서 모든것을 해결하지 않습니다. 일반적인 React 사용에서는 사용자 브라우저가 클라이언트 서버에 접속하여 해당 서버에서 브라우저단에서 필요한 html과 js, public 파일 등을 받아오게됩니다. 그리고 해당 js파일이 동작하면서 개발자가 지정해놓은 시점 즉, 정보가 필요할 때, api 정보를 제공하는 서버 주소로 요청을 보내 필요한 JSON, 이미지 등의 파일을 요청해 가져오게됩니다. 하지만 Next.JS는 좀 다릅니다. Next.JS에서는 리액트처럼 클라이언트 서버에서 한 번 html, js 파일받고 '땡~'이 아니라 지속적으로 사용자 브라우저와 인터랙션을 합..

리액트와 라이브러리의 버전끼리 충돌이 난 경우 아래의 명령어로 강제 설치가 가능합니다. 다만 런타임이나 컴파일 에러가 날 가능성이 있으니 꼭 필요한 경우에만 설치하도록합시다. npm i 라이브러리 명 --legacy-peer-deps 또는, npm i 라이브러리 명 --force

1) redux는 react와 별개이다. 다른 라이브러리에서도 사용이 가능하다. 2) reducer는 함수여만하고 reducer 함수의 return값으로 내 state를 변경한다. 그것이 state를 바꾸는 유일한 방법이다. 3) reducer에서 두 번째 인자로 받는 action은 객체이다 4) createStore로 만든 store 변수는 getState 함수와 subscribe 함수를 쓸 수 있는데, subscribe 함수는 store의 state 함수가 변화됐을 때, 인자값으로 넣은 함수를 작동하게 할 수 있다. 5) reducer에 로직은 if else 보다 switch case가 더 효율적이다. 6) redux의 dispatch 함수는 같은 파일 내에서는 저렇게 호출해줄 수 있다. store ..

박사님 강의 빠르게 시청하면서 React 기본 복습겸 간단한 영화 소개 사이트를 만들어봤다. 단순히 React cdn을 통해 React가 어떻게 구현되는지 살펴봤는데, 기본 html element들에서부터 JSX문법으로 생성한 React element들로 어떻게 변화했는지 과정을 알려줘서 좋았다. 느낀점 1) 이렇게 cdn으로 불러온 React 라이브러리에 createElement 함수를 사용해 우리가 기본 JS를 쓰는것보다 훨신 더 편리하게 html 요소를 만들고 화면에 첨부할 수 있었다. 사진상의 작업을 그냥 하려면 const btn = document.createElement('button'); btn.className = 'sexy-btn'; const body = document.getEleme..

reducer를 불러오려면 컴포넌트나 js 파일 맨 밑에 이런 작업이 필요하였다. 그리고 결과적으로 reducer를 props화 한것이기에, 이렇게 사용시 props를 앞에 붙여주어야만했다. 하지만 이렇게 useSelector, useDispatch 라는 함수를 import 해오면 state를 props로 변환하는 함수를 만들지않고도 컴포넌트 내에서 쉽게 reducer를 사용가능하다. useSelector 함수는 단순히 reducer를 state로 모두 가져와 사용자가 원하는대로 return할 수 있게 해준다. 위 사진은 state를 통째로 하나의 객체로서 return하지만 역시 이렇게 reducer를 부분적으로 가져오는것도 가능하다. 이 작업을 거치면 state로 가져온 reducer 앞에 꼭 prop..

redux에서 state를 만들 때 관리하는 변수가 하나가 아닌 여러개를 만들것이다. 그러면 reducer 또한 여러개 만들어야한다. 이게 vuex와 다르게 좀 불편한점이다. vuex는 state, actions, mutations 에 각 state 변수별로 변화 로직을 종류대로 넣어줄 수 있었지만, redux는 하나의 state에 하나의 reducer가 존재해야하므로 좀 불편하다. 또 이 state와 reducer를 index.js에서 하나로 모아 createStore에 넣어야하니, 양이 많아지면 state와 reducer를 작성한 각 js파일의 import와 export가 더욱 중요할것이다. 어쨋든 다른 redux state 변수 / 함수를 만든다면 그냥 똑같이 reducer와 그 안의 로직을 만들어..

위 포스트에서 redux로 state를 만드는 법에대해 알아보았다. 그러면 이 포스트에서는 redux state에 변화를 주는 법을 알아본다. 해당 state에 변화를 주는 로직을 reducer라고하는데, 일종의 함수이다. 위와 아래 사진을 비교하자. 결론은 reducer가 있고 없고의 차이인데, 위 사진은 createStore가 단순히 어떤 변수를 그대로 return해 props로 전송할 store 변수를 만들어낸다. 즉, 로직이 없다는 이야기이다. 반면 아래 사진은 무언가 reducer라는 로직을 거친다. reducer는 인자를 두 개 받는데, 첫 인자는 default parameter 문법을 사용해서, 관리할 데이터하고 가공할 데이터가 defaultStock 변수임을 확실히한다. 그리고 두 번째 데..