전체보기 (55) 썸네일형 리스트형 React - 로컬에서 build 후 서버띄우기 개발 후 프로덕션 버젼으로 확인이 필요한 경우가 있다. 원래대로라면 웹팩 컴파일된 빌드 파일을 웹 서버의 DocRoot에 배포해서 테스트해야하지만 vscode에서 간단히 프로덕션버젼으로 확인 가능한 방법이 있다. serve 라는 패키지를 사용해야하는데 $yarn global add serve $npx serve 로 실행하면 잘된다. VSCode - Prettier, ESLint 사용하기 VSCode에서 제공해주는 기능이 많이 있어서 간혹 VSCode 자체에서 처리하는건지 설치한 익스텐션에서 처리하는건지 햇갈리는 경우가 있는데 특히나 fomatter 같은 경우 햇갈린다. 왜냐하면 VSCode, Prettier, ESLint 모두 포매팅 기능이 있기 때문이다. 따라서, 셋 중에 어떤 기능을 이용해서 포매팅해야할지 선택해야하는데 보통, 소스 스타일링은 - Prettier, 문법체크, 코딩 컨벤션 룰은 - ESLint 를 사용하고 VSCode는 에디터로써, 포맷을 어느 시점에 정리할지 등을 정의해두는 듯하다. 그니까.. 각 Tool이 지니고 있는 고유한 장점을 이용하는거다. 1. 설정하기 전에 필요한 패키지 설치 1.eslint-plugin-react: 리액트와 관련된 eslint 룰셋 2.e.. React 미들웨어 1. 미들웨어 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 지정된 작업을 실행한다. 즉, 액션과 리듀서 사이의 중간 단계 역할을 한다. 기본 구조 const loggerMiddleware = (store) => (next) => (action) => { // 미들웨어 기본구조 }; export default loggerMiddleware; 2. 미들웨어 관련 라이브러리 2.1 redux-logger redux middleware 사용 시 브라우저 콘솔에 깔끔하게 출력된다. 3. 비동기 작업을 위한 미들웨어 redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어이고 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해줌 thunk: 특정작업을 나중에 할 수.. Javascript export 구문 1. export 여러개의 변수를 export 할 수 있다. import 하는 경우 import { , ...... } from '' 2. export default 오직 하나의 변수를 export 할 수 있다. import 하는 경우 import from '' React 리덕스 리덕스는 리액트에서 가장 많이 사용하는 상태관리 라이브러리이다. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 따라서, 전역 상태를 관리할때 굉장히 유용하다곤... 하지만 전역상태기 때문에 남발하면 혼란을 가중 시킬 수도 있다고 생각한다.!! 여튼 단순 전역 상태 관리면 Context API만으로도 충분하고 프로젝트 규모가 커지면 리덕스를 사용하는게 좋다고한다. 또한 개발자 도구도 지원하며 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수있게 해준다고 한다. ## 설치방법 $ yarn create react-app $ cd $ yarn add redux react-redux 리덕스를 주로 사용하는 패턴으로는 프리젠테이셔널 컴포넌트, 컨테.. React Function as a child or Render Props 아래 코드의 Cumsumer 사이에 중괄호를 넣어 함수를 넣어준 것 처럼 컴포넌트의 자식에 있어야할 자리에 JSX나 문자열이 아닌 함수를 전달하는 패턴을 "Function as a child" 또는 "Render Props" 라고 불린다. const ColorBox = () => { return ( {(value) => ( )} ); }; React Context API 1. Context API Context API는 리액트 프로젝트에서 전역으로 사용할 데이터가 있을 때 유용한 기능 Vue에 Vuex가 존재하는 것처럼 리액트에서는 Redux, MobX 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 처리한다. v16.3 업데이트 이후 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 사용하지 않아도 전역 상태를 손쉽게 관리할 수 있다. 음.. Vue의 EventBus 같은 기능인가?? 새로운 Context를 만드려면 react의 createContext 함수를 사용해야하고 파라미터로는 해당 Context의 기본 상태를 지정한다. 2. Customer Customer를 통해 props 같은 상태 값을 가져온다. const ColorBox = .. 일반 함수와 화살표 함수 1. 화살표 함수는 ES6 문법에서 새로 등장한 방식이다. 2. 화살표 함수는 주로 함수를 파라미터로 보낼때 사용한다. 3. 일반 함수는 자신이 종속된 객체를 this를 가리킨다. 4. 반면 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 5. 화살표 함수에 {} 를 열어 주지 않으면 연산한 값 그대로 리턴한다. 이전 1 2 3 4 5 6 7 다음
