전체 글 148

[React] Redux 개념 좀 더 알기

저번 시간에 Redux에 대해서 간단히 사용하는 방법을 공부해보았다. (궁금하면 여기 클릭!) Redux를 저번에 간단하게만 알아본 것 같아서 이번 시간에는 개념에 대해서 알아볼 것이다. 내가 정리하는 내용은 전부 공식 사이트에 있는 것이다. 이것을 필자는 해석하고 설명한 것 밖에 없다! 사실 이러한 행위가 내 학습을 위한 것이기도 하다. 궁금한 분은 출처 사이트에서 모든 내용을 더 자세히 확인할 수 있다. 출처 : https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts 1. 리덕스 용어와 개념 1.1상태 관리(State management) Redux의 용어와 개념에 대해 알기 전에 공식 사이트에서는 다음 Component를 보여주는..

[React] Redux 소개 및 간단 사용하기

이전 시간에는 CSR과 SSR에 대해서 간단히 알아보았다. (궁금하면 클릭!) 금일은 Redux에 대해서 알아보고 이를 적용하는 법을 공부하려고 한다. 다음은 참고한 내용이다. 출처 : https://react-redux.js.org/ https://redux.js.org/understanding/thinking-in-redux/motivation https://react-redux.js.org/tutorials/quick-start 1. Redux란 무엇인가? Redux에 대한 설명을 Redux 공식 사이트에서 확인할 수 있었다. React Redux는 Redux를 위한 공식적인 React UI binding layer다. 당신의 React component들이 Redux store로 부터 데이터를 읽..

[React] CSR vs SSR / Gatsby, Next.js

지난 시간에는 React Router의 기능에 대해 좀 더 알아보았다. (궁금하면 여기 클릭!) 먼저 Redux에 대해 알아보려고 했는데, 먼저 알고 넘어가야할 듯한 중요한 개념을 찾았다. 그래서 이번시간에 CSR 과 SSR에 대해 알아보고 SSR은 그러면 어떻게 React에서 구현하는지 알아보도록 하겠다. 참고한 사이트는 다음과 같다. 출처: Dream Coding Ellie : 서버사이다 렌더링(https://www.youtube.com/watch?v=iZ9csAfU5Os) https://velog.io/@leejyart/React-%EB%A1%9C-SSR-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 https://korinkorin.tistory.com/78 https://ww..

[React] React Router 파해치기

저번 시간에는 useReducer와 React Router 에 대해 간단히 알아보았다. (궁금하면 클릭!) 이번 시간에는 React Router에 어떤 기능이 있는지 알아보도록 하겠다. 많은 기능이 있지만 최대한 내가 써먹을 수 있을 만큼 알아보도록 하겠다. 그럼 후비고~ 다음 내용은 모두 React Router 홈페이지에 있으니 자세한 내용은 이곳을 참고하길 바란다. 출처: https://reactrouter.com/docs/en/v6/getting-started/tutorial https://mygumi.tistory.com/414 https://abangpa1ace.tistory.com/209 https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%A..

[React] useReducer / React Router 사용하기

저번 시간에는 React.memo와 useCallback을 사용해봤다. (궁금하면 여기 클릭!) 이번 시간에는 useReducer를 사용해볼 것이다. 참고한 사이트는 다음과 같다. 출처 : https://ko.reactjs.org/docs/hooks-reference.html#usereducer https://www.daleseo.com/react-hooks-use-reducer/ https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85 https://reactrouter.com/ https://reactrouter.com/docs/en/v6/getting-started/tutorial https://reactrouter.com/docs/en/v6/route..

[React] React.memo, useCallback사용하기

지난 시간에는 React Hook 중에서 useContext, useRef, useMemo를 알아보았다. (궁금하면 클릭!) 이번 시간에는 useMemo와 유사한 Reac.memo에 대해 알아보고 비교하는 시간을 가질 것이다. 그리고 useCallback을 통해서 또 한번 최적화를 배워 볼 것이다. 참고 사이트는 다음과 같다. 출처 : https://ko.reactjs.org/docs/react-api.html https://react.vlpt.us/basic/19-React.memo.html https://ko.reactjs.org/docs/hooks-reference.html#usecallback https://www.daleseo.com/react-hooks-use-callback/ https://..

[React] React Hook - useContext, useRef, useMemo 적용하기

저번 시간에는 React의 Props와 State에 대해 알아보았고, React Hook의 기능 중 useState, useEffect를 알아보았다. (궁금하면 클릭!) 이번 시간에는 React Hook에 어떤 기능이 있는지 좀 더 알아볼 것이다. 이 내용은 다음 사이트를 참고했다. 참고 https://ko.reactjs.org/docs/hooks-intro.html https://ko.reactjs.org/docs/hooks-reference.html https://www.w3schools.com/react/react_usecontext.asp https://www.daleseo.com/react-hooks-use-ref/ https://ko.reactjs.org/docs/hooks-reference...

[React] Props와 State 이해하기 / Hook(useState, useEffect) 적용

저번 시간에 React란 무엇인지, 그리고 장점이 무엇인지 알아봤고 마지막에는 boilder plate를 활용해 쉽게 React 프로젝트를 생성하는 법을 배웠다. (지난 정리가 궁금하다면? 클릭!) 이번 시간에는 React에서 꼭 알아야 하는 State와 Props에 대해 알아보겠다. 코드는 지난 시간에 이어서 기존에 추가하는 방식으로 진행할 것이다. 해당 내용은 다음 사이트에서 참고했다. 참고 https://ko.reactjs.org/docs/components-and-props.html https://ko.reactjs.org/docs/hooks-rules.html https://ko.reactjs.org/docs/hooks-state.html https://xiubindev.tistory.com/1..

[React] 리액트(React)란 무엇인가? / create-react-app 사용하기

사실 React는 잠깐 속성으로 빠르게 공부하고 화면 뿌리는건데 뭐 대충 하면 되지~ 하면서 대충 배웠었다. 하지만 최근에 문득 든 생각이 전에 배운 것인데 정말로 이것을 내것으로 만들고 싶다는 욕심이 생겼다. 또한, 진정으로 내가 이해하고 사용했다고 하기도 애매하기도 했다. 왜그러냐면 그냥 배낀거니까 말이다. 무엇이 그렇게 급했는지, 길게 보고 제대로 배워야 하는 지식들을 내몸에 사는 나쁜 벌레인 대충으로 무너지고 말았다. 그러므로 React에 대해서 다시 한번 차근차근 공부해서 마스터하는 시간을 가지도록 하겠다. 아니 하던 자바나 하지 뭐하냐고? 결국 다 알아야 하는 겁니다... 출처 사이트는 다음과 같다. https://ko.reactjs.org/tutorial/tutorial.html#setup-..

[javascript] 유용한 js 기능 - 2 / generator 함수 / 날짜 변환

이번에는 저번에 글에 이어서 (저번 글 보고 싶다면 클릭!) 1. 유용한 js기능을 조금 더 소개하고 2. es6에서 도입된 generator 함수에 대해 알아보고 3. 또 날짜 변환을 공부할 것이다. 이 글을 정리하기 위해 참고한 사이트는 다음과 같다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://blog.bitsrc.io/2-3-javascript-tricks-that-you-should-know-bfb9827fd835 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destruc..