분류 전체보기340 [React.js] redux-thunk vs redux-saga redux-thunk와 redux-saga는 리덕스에서 비동기 작업을 돕는 미들웨어이다. redux-thunk 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어로 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치할 수 있다. 함수를 디스패치할 때는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와야하고, 이 함수를 만들어주는 함수를 thunk라고 부른다. 따라서 리덕스 스토어의 상태에 접근하거나 또 다른 액션을 디스패치하는 것이 가능하다. thunk 미들웨어의 문제점은 action에서 너무 많은 일을 한다는 점이다. 액션 생성자는 type과 payload가 담긴 객체를 생성해서 반환하는 역할을 수행하기로 했는데, thunk 미들웨어에서는 API 요청이나 비동기 처.. 2022. 3. 28. [React.js] 상태 관리 라이브러리 비교 1 - Redux 리액트 프로젝트의 규모가 커질수록 상태관리 라이브러리 도입이 필수적이라는 생각이 들었다. 정말 다양한 상태관리 라이브러리들이 존재하고, 의견도 다양해서 정리해보고자 한다. Redux 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 용이하게 만드는 상태관리용 라이브러리이다. 리액트뿐만 아니라 일반 JavaScript 환경에서 사용할 수도 있고, Angular와 같은 다른 프레임워크에서 사용되기도 한다. Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReduxer라는 Hook이 존재하기 전부터 만들어진 라이브러리이다. 개선되기 전의 Context API는 프로젝트에서 글로벌 상태관리를 하는 것이 굉장히 까다로웠기 .. 2022. 3. 20. [SW디자인패턴] MVC, MVP, MVVM 비교 소프트웨어의 비지니스 로직과 화면을 분리하여 작업한다면 유지보수와 개발의 효율성을 높힐 수 있다. 1. MVC MVC 패턴은 Model + View + Controller를 합친 용어이다. 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분이다. View : 사용자에게 보여지는 화면(UI) 부분이다. Controller : 사용자의 입력(Action)을 받고 처리하는 부분이다. 동작 MVC 패턴의 동작 순서는 아래와 같다. 1. Controller에서 사용자의 Action들을 받는다. 3. Controller는 Action을 확인하고, Model을 업데이트한다. 4. Controller는 Model을 표시할 View를 선택한다. 5. View는 Model을 이용해 화면을 나타.. 2022. 3. 4. [Github] Github Actions를 이용한 AWS S3 배포 자동화 AWS에서는 S3와 CloudFront를 사용해서 정적 콘텐츠를 대규모 저장하고, 보호 및 전송함으로써 쉽게 CSR 웹 페이지를 배포(S3) 및 CDN 역할(CloudFront)을 적용할 수 있다. 물론 프로젝트 빌드와 aws cli를 이용한 s3 배포를 수동으로 작업해줄 수 있다. 만약 테스트 완료된 코드를 Github에 업로드 시에 배포가 자동으로 이루어진다면 혹시나 발생할 수 있는 배포 과정의 실수나 번거로움을 줄일 수 있을 것이다. Github Actions으로는 이러한 작업이 가능하다. Github Actions이란? [Github] Github Actions를 이용한 CI/CD CI/CD란? CI란? 지속적인 통합으로, 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공.. 2022. 2. 23. [Github] Github Actions를 이용한 CI/CD CI/CD란? CI란? 지속적인 통합으로, 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 레포지토리에 통합되는 것을 의미한다. CI가 필요한 환경 다수의 개발자가 형상관리 툴(Git, SVN 등)을 공유하여 사용하는 환경 MSA(Micro Service Archietecture) 환경 CI의 핵심 목표 버그를 신속하게 찾아 해결 소프트웨어 품질 개선 새로운 업데이트의 검증 및 릴리즈 시간을 단축 CD(Continuous Delivery & Continuous Deployment)란? 공유 레포지토리로 자동으로 Release하고(Continuous Delivery), Production 레벨까지 자동으로 deploy하는 것(Continuous Deployment)을 의미한다... 2022. 2. 21. [React.js] SWR(stale-while-revalidate)에 대하여 SWR이란 무엇인가? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. 왜 사용하는 가? 최상위 레벨 컴포넌트에서 useEffect를 사용해 데이터를 가져오고, props를 이용해 자식 컴포넌트에 전달하는 방법으로 서버의 데이터를 로컬 상태변수로 사용이 가능하다. // 페이지 컴포넌트 function Page() { const [user, setUser] = useState(null) // 데이터 가져오기 useEffect(() => { fetch('/api.. 2022. 2. 16. 이전 1 ··· 4 5 6 7 8 9 10 ··· 57 다음 반응형
