달과 함께하는 IT

1. SPA에서 Redux의 개념 단일 페이지 응용 프로그램(Single Page Application, SPA)에서 Redux는 상태 관리 라이브러리로써 사용됩니다. SPA는 전통적인 웹사이트와 달리 페이지 이동 없이 동적으로 내용을 업데이트하며, 이로 인해 상태 관리가 복잡해질 수 있습니다. Redux는 중앙 집중화된 상태 저장소를 통해 SPA의 상태를 예측 가능하게 관리하고 변경을 추적하는데 도움을 줍니다. 2. React에서 Redux를 사용하는 방법 React에서 Redux를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다. Redux 설치하기: npm install redux react-redu 액션(Action) 정의하기: 액션은 상태 변경을 설명하는 객체로, 액션 타입과 필요한 데이터를 가..

JEST Jest는 JavaScript 애플리케이션을 위한 테스트 프레임워크입니다. 주로 React 프로젝트에서 컴포넌트 및 함수의 유닛 테스트와 통합 테스트를 작성하는 데 사용됩니다. Jest는 간편한 구문과 기능을 제공하여 테스트 작성을 쉽고 효율적으로 할 수 있도록 도와줍니다. Jest의 특징: 간결한 문법과 쉬운 설정으로 테스트 작성을 용이하게 함. 테스트 실행을 위한 별도의 설정 없이 기본적인 설정 제공. 테스트 코드에서 Mocking 및 Spy 기능을 내장하여 외부 의존성 테스트 가능. 병렬 실행과 자체적인 결과 리포팅 기능 제공. Jest 사용법 예시: 설치: 프로젝트 디렉토리에서 Jest를 설치합니다. bashCopy code npm install --save-dev jest 테스트 작성:..

React Query: React Query는 API 호출, 데이터 캐싱, 상태 관리, 리렌더링 최적화 등을 제공하는 라이브러리입니다. 쿼리와 뮤테이션을 사용하여 비동기 작업을 관리하며, 데이터를 효율적으로 가져오고 관리하는데 도움을 줍니다. Axios: Axios는 HTTP 클라이언트 라이브러리로, 서버와의 HTTP 요청을 보내고 응답을 받는데 사용됩니다. Promise 기반으로 작성되어 있어 간편하게 비동기 요청을 처리할 수 있습니다. Redux-Saga: Redux-Saga는 Redux와 함께 사용되는 미들웨어 라이브러리로, 사이드 이펙트 관리를 위해 사용됩니다. 주로 복잡한 비동기 흐름을 관리하고 제어하는 데 사용되며, 제너레이터 함수를 이용하여 비동기 로직을 작성합니다. Redux-Thunk: ..

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 그런데 "쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?"라는 의문이 들 수 있습니다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같습니다. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가..

Babel이란? 아래 예제는 ES6의 화살표 함수와 ES7의 지수 연산자를 사용하고 있다. // ES6 화살표 함수와 ES7 지수 연산자 [1, 2, 3].map(n => n ** n); IE와 다른 구형 브라우저에서는 이 두가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다. // ES5 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 이처럼 Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Webpack이란? Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파..

SEO(검색엔진 최적화) 이슈 SPA는 일반적으로 서버 사이드 렌더링(SSR) 방식이 아닌 자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링(CSR) 방식으로 동작한다. 클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다. 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다. SPA의 SEO 이슈는 언제나 단점으로 부각되어 왔다. SPA는 정보 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술이므로 SEO 이슈는 심각한 문제로 취급할 수 없다고 생각할 수도 있지만 블로그와 같이 애플리케이션의 경우 SEO는 무시할 수 없는 중요한 ..

Next.js React를 기반으로 만들어진 Next.js의 경우 기존 리액트가 SPA 친화와 더불어 CSR을 중점적으로 제공함에 비해 SSR 및 사용자와 서버 친화적 데이터 패칭을 위해 CSR과 SSR 그리고 SSG를 같이 지원하는 ISR등의 여러 방식을 지원하기 위해 도입된 프레임워크이다. React는 라이브러리로 팀 그리고 개인마다 가지각색의 형식과 양식이 존재한다. Next는 Vue와 같이 어느정도 틀이 잡힌 프레임워크 기반으로 React에서 필수적으로 사용하는 라우터 , 데이터 패칭이 들어있고 폴더 , 형식에 맞춰서 코드를 작성하면 구현을 해 준다. 클라이언트 사이드 렌더링(CSR, Client-Side Rendering) 자바스크립트를 사용하여 브라우저(클라이언트 사이드)에서 렌더링하는 것을 ..

이벤트 버블링, 캡처링, 그리고 위임은 웹 개발에서 이벤트 처리와 관련된 중요한 개념들입니다. 이벤트 버블링(Event Bubbling): 이벤트 버블링은 HTML 요소들이 중첩된 구조에서 발생한 이벤트가 가장 내부의 요소부터 시작하여 부모 요소 방향으로 전파되는 메커니즘입니다. 즉, 내부 요소에서 발생한 이벤트가 외부로 전파되며, 이벤트 핸들러는 부모 요소에서부터 순차적으로 실행됩니다. 이벤트 캡처링(Event Capturing): 이벤트 캡처링은 이벤트 버블링과 반대로 부모 요소에서 시작하여 내부 요소 방향으로 이벤트가 전파되는 메커니즘입니다. 캡처링 단계에서 이벤트 핸들러는 최상위 부모 요소부터 내부로 내려가며 실행됩니다. 이벤트 위임(Event Delegation): 이벤트 위임은 동적으로 생성되..

MFA(Micro Frontend Architecture)란 웹 프론트엔드를 작은 독립적인 단위로 나누어 개발하고 배포하는 아키텍처 패턴을 의미합니다. 이는 마이크로 서비스 아키텍처의 원칙을 웹 프론트엔드에 적용한 것으로, 애플리케이션을 작은 모듈 또는 마이크로 프론트엔드로 분리하여 개발하고 관리하는 방식입니다. MFA 개요 MFA는 하나의 대규모 단일 애플리케이션 대신, 작은 프론트엔드 모듈을 개발하고 각 모듈을 독립적으로 배포하고 실행함으로써 애플리케이션을 구성합니다. 이는 여러 개발 팀이 동시에 작업하고 독립적으로 배포하여 개발 생산성을 향상시킬 수 있게 해줍니다. MFA 적용시 장점 독립적인 개발 및 배포: 각 마이크로 프론트엔드는 독립적으로 개발되며, 필요한 경우 개별적으로 배포할 수 있습니다...

시작하기 ES란? ECMAScript 즉 Javascript를 표준화하기 위한 규약 사용하는 이유 기존 Javascript로 활용하기 힘들거나 에러를 양산할 수 있는 문제들을 해결하기 위하여 개발자들의 토론 하에 범용성 높은 규칙을 만듬 ES5와 ES6이란 ES5는 2009년 발표된 ECMAscript 규약 이며 ES6는 2015년 발표된 ECMA 규격이다. 이전에 비해 ES6는 여러 항목들이 추가되었다. ES6에 추가된 대표적인 기능 Let, const와 블록 레벨 스코프 var의 단점을 보완하기 위한 let과 const 변수 선언 도입 템플릿 리터럴 대표적 특징들 const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할..