Redux DevTools와 연동 방법(브라우저 개발자 도구)
2021. 4. 12. 20:53
프로그래밍/React
Redux DevTools와 연동 방법(브라우저 개발자 도구) 1️⃣ 크롬 웹 스토어에서 Redux DevTools 추가 2️⃣ redux-devtools 설치 npm i redux-devtools-extension 3️⃣ store에 연동하는 코드 작성하기 import { applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; const configureStore = () => { const middlewares = []; const enhancer = process.env.NODE_ENV === 'production' ? compose(applyMiddleware(...middlewar..
[React/오류해결]'react-scripts' 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다.
2021. 4. 8. 21:27
프로그래밍/React
'react-scripts' 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다. 라는 에러가 뜨면 npm혹은 yarn을 update나 upgrade 해주기❗ npm update npm start yarn upgrade yarn start
ant-design과 styled-components 적용하기
2021. 4. 7. 21:12
프로그래밍/React
ant design과 styled-components 적용 ant-design, ant-design icons, styled-components 설치 👇 npm i antd styled-components @ant-desing/icons stylesheets import해주기 👇 pages안에 _app.js파일 안에 공통되는 부분 넣어주기 // _app.js import 'antd/dist/antd.css'; 이후 ant-design 홈페이지에서 사용하고 싶은 components 골라서 사용 ant.design/components/overview/ Components Overview - Ant Design antd provides plenty of UI components to enrich your we..
ESLint 설정
2021. 4. 6. 20:31
프로그래밍/React
ESLint ESLint는 ES + Lint ES는 EcmaScript, 즉 자바스크립트를 의미 Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미 ESLint는 사용자가 직접 정의한대로 코드를 점검하고, 에러가 있으면 표시해 줌 또 문법 에러뿐만 아니라 코딩 스타일도 정할 수 있어서 팀원끼리 협업을 할 때 좋음 👉 사람은 저마다의 코딩 스타일이 있기 때문에 여러 사람이 같이 코딩을 하면 차이가 발생함 이때 팀에서 하나의 코딩 스타일을 적용하고 ESLint에 설정해두면 한 사람이 코딩을 한 것 같은 결과를 얻을 수 있음 ESLint가 뜬 이유는 바로 확장성 때문임 다양한 플러..
Next의 pages
2021. 4. 5. 20:12
프로그래밍/React
pages pages를 기준으로 컴포넌트와 1:1로 mapping을 해줌 next는 페이지들을 알아서 라우팅 해줌 pages아래에 index의 경우 localhost:3000 profile 페이지는 localhost:3000/profile로 접속 가능 👉 next 9버전에서는 동적 라우팅 기능 추가됨
SSR과 CSR 비교
2021. 4. 2. 22:03
프로그래밍/React
SSR(server side rendering) SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 JSP/Servlet의 아키텍처에서 이 방식을 사용함 SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있음 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있음 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있음 CSR(client side rendering) CSR 방식은 최초 요청시에 HTML을 ..
React와 Redux
2021. 4. 1. 22:16
프로그래밍/React
React와 Redux 리덕스는 리액트에 종속되지 않음 리액트에서 사용하려고 만든거긴 하지만, 실제로 다른 UI 라이브러리나 프레임워크와 함께 사용 될 수도 있음 👉 리액트와 리덕스를 함께 사용할 수도 있고 리액트 없이 리덕스만 사용할 수도 있음
Redux 소개
2021. 3. 31. 22:08
프로그래밍/React
Redux 리덕스는 가장 사용률이 높은 상태관리 라이브러리 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있음 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있음 추가적으로 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 해줌 개념 정리 액션(Action) 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킴 이는, 하나의 객체로 표현됨 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있음 액션 생성함수(Action Creator) 액션을 만드는 함..