React

React란? 페이스북에서 만든 사용자 인터페이스를 만들기 위한 Javascript Library 입니다. React 홈페이지에는 라고 작성되어 있습니다. 이 의미는 어디서든 유연하게 사용할 수 있는 기술이라고 느낄 수 있습니다. 리액트는 프레임워크가 아닌 라이브러리이기 때문에 다른 라이브러리나 프레임워크를 함께 사용할 수 있습니다. 참고 -

리액트는 SPA(Single Page Application)로 구성되어 있습니다. 그래서 페이지 전환이 파일로 이동하는 것이 아닌 한 페이지내에서 컴포넌트를 변경하는 방식입니다. React-Router란 리액트의 페이징 처리를 도와주는 라이브러리입니다. React-

Redux란 자바스크립트를 위한 상태 관리 라이브러리 입니다. react-redux redux 패턴 리액트에서 hooks를 이용하여 리덕스 사용법을 만들어보았습니다. Link - 이미지 참고 - https://github.com/dooboolab/react-native-training/blob/master/react-native-global-sta...

i18next? 라고 i18next 홈페이지에 설명이 되어있습니다. 웹 프로젝트에서 react-i18next로 다국어 적용을 해본 경험으로 react-i18next의 사용법을 설명하려합니다. react-i18next 라이브러리 사용법 프로젝트에 yarn 이나 npm으로 react-i18next 패키지를 설치합니다. 설치 전 필요한 패키지를 미리 설치...

웹 프로젝트를 할 때 브라우저 호환성을 맞춰야할 때가 있다. 특히 클라이언트가 IE 브라우저에도 맞춰달라고 요청할 시... React로 웹 프로젝트를 진행한다면 IE 브라우저에서도 웹 페이지가 나타나게 해주도록 설정을 해야한다. -- 저는 패키지 매니저를 yarn으로 사용합니다. 개발중인 리액트 프로젝트에 react-app-polyfill 을 설치...

immer란? ? copy-on-write : https://en.wikipedia.org/wiki/Copy-on-write 라고 immer 홈페이지에 나와있다. 스크린샷 2019-12-13 오후 4.01.48.png 불변성을 위한 immer 사용해보기 immer 홈페이지에 나와있는 간단한 사용법은 아래와 같다. 위에서 produc...

react는 SPA(Single Page Application)로 css파일을 적용하면 모든 화면에서 적용이 되어 class 나 id 명을 세밀하게 구분해주어야한다. 그래서 styled-components 라이브러리를 사용하면 내가 만들 컴포넌트에 임의의 class 를 생성해주어 스타일을 적용시켜준다. styled-components 사용해보기 로 R...

Hooks는 class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 리액트 홈페이지에서는 hook을 아래와 같이 설명하고 있습니다. 1. State Hook 위의 코드에서 useState가 hook입니다. 위와 같이 hook은 함

리액트 context API를 사용해본 참고 - https://ko.reactjs.org/docs/context.html#gatsby-focus-wrapper