728x90 react21 도커 실습 - docker, nginx, react, express, mysql 실습 전체 파일:https://github.com/skullkim/docker-practice GitHub - skullkim/docker-practice Contribute to skullkim/docker-practice development by creating an account on GitHub. github.com 도커 실습위한 것이니 express, react 코드에 대한 설명을 스킵하자. Dockerfile 설명: client/Dockerfile 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 FROM node:alpine # working 디렉토리를 /app으로 설정 # 이미지가 생성되면 해당 디렉터리 역시 생성된다. # working 디렉.. 2021. 9. 19. 리덕스 미들웨어를 통한 비동기 작업 처리 리액트에서 API서버를 연동할 때는 API요청에 대한 상태를 잘 관리 해야 한다. 요청 시작 후 로딩 중, 요청 성공 또는 실패했을 때는 로딩이 끝났다는 것을 명시해야 한다. 이런 작업은 리덕스 미들웨어를 사용해서 효율적으로 처리할 수 있다. 리덕스 미들웨어는 액션을 디스패치 한 후 리듀서가 이를 처리하기 전에 지정된 작업을 실행한다. 이때 미들웨어 에서는 전달 받은 액션을 단순히 콘솔에 기록하거나, 전달 받은 액션 정보를 기반으로 액션을 취소하거나, 다른 종류의 액션을 디스패치 하는 등의 일을 할 수 있다. 사실 이미 수 많은 미들웨어가 존재 하기 때문에 미들웨어를 직접 만들 일은 거의 없다. 하지만 배우는 단계 이므로 간단한 미들웨어를 만들어 보자. 1 2 3 4 5 6 7 8 9 10 11 12 1.. 2021. 7. 29. React에서 Redux사용하기 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 대한 로직을 모듈로 따로 분리 해서 컴포넌트 파일과 별개로 관리할 수 있기 떄문에 코드 유지보수에 도움이 된다. 여러 컴포넌트에서 동일한 상태를 공유 할 때 유용하고, 실제 업데이트가 필요한 컴포넌트만 리렌더링 되게 쉽게 최적화 할 수 있다. 바닐라에서 리덕스를 사용할 거면, dispatch, subscribe를 사용해야 했지만, 리액트에서 리덕스를 사용할 때에는 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용해 리덕스 관련 작업을 한다. 리액트에서 리덕스를 사용할 때에는 통상적으로 presentational component와 container component를 분리하여 사용한다... 2021. 7. 25. 컴포넌트의 합성(composition)과 상속(inheritance) 상속은 extends 키워드를 사용해 부모의 모든 속성과 메서드를 물려받는 방식이다. 상속은 부모와 자식간의 의존성이 강하게 결합되기 때문에 유연성이 부족하다. Facebook에서는 수천 개의 리액트 컴포넌트를 사용하지만 컴포넌트를 상속 계층 구조로 작성을 권장할 만한 사례가 등장하지 않았다. 합성 컴포넌트에서 다른 컴포넌트를 담기 하나의 컴포넌트에 어떤 자식 컴포넌트가 들어올지 알 수 없을때 children prop를 사용해 자식 엘리먼트를 출력에 그대로 전달해야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //FacncyBorder내부의 것들이 props.children으로 전달 된다. function WelcomeDialog() { ret.. 2021. 7. 20. 이전 1 2 3 4 ··· 6 다음 728x90
