Redux

리덕스는 애플리케이션의 상태가 하나의 중앙 스토어에서 관리되므로, 상태의 일관성을 유지하고 예측 가능함을 보장합니다. 이는 애플리케이션의 모듈화와 독립성을 강화하여 코드의 유지보수성을 높이고, 결합도를 낮추는 데 도움을 줍니다.

decoupling

Decoupling은 애플리케이션의 다양한 부분들 간의 결합도를 낮추는 개념입니다. 결합도란 하나의 모듈이 다른 모듈에 의존하는 정도를 나타냅니다. Redux에서는 상태 관리를 중앙에서 처리하기 때문에 컴포넌트 간에 상태를 공유하고 통신하기 위해 직접적인 의존성을 갖지 않아도 됩니다. 이로 인해 컴포넌트들은 더 독립적이며, 결합도가 낮아져 컴포넌트의 재사용성과 유지보수성이 높아집니다.

stand alone

Redux의 스토어와 리듀서는 모듈화되어 독립적으로 작성할 수 있습니다. 각각의 리듀서는 특정 상태 조각을 관리하며, 이들은 서로 영향을 미치지 않고 독립적으로 작동합니다. 이렇게 모듈화된 스토어와 리듀서는 애플리케이션 전체에서 공유되며, 각각의 부분이 독립적으로 업데이트될 수 있습니다. 이러한 독립성은 애플리케이션의 각 모듈을 개별적으로 테스트하고 유지보수하기 쉽게 만듭니다.

dispatch 메소드가 필요한 이유

리덕스의 핵심 개념은 복잡한 상태를 에측 가능하게 관리한다는 것입니다. 우선 dispatch 메소드는 store에 액션을 보내는 역할을 합니다. 액션은 '어떤 변화가 일어나야 한다'에 대한 정보가 담긴 객체입니다. dispatch가 보낸 액션을 store 내부에 있는 reducer가 받아서 state를 업데이트해줍니다.

어디에서든지 dispatch를 통해 중앙에 있는 store로 상태 변경 정보를 보낼 수 있기 때문에, 중앙 관리에 유리합니다. 또는 dispatch를 이용해서 비동기 작업을 처리하거나 미들웨어를 통해 액션을 가로채고 추가 작업을 해줄 수도 있습니다.

오늘의 CS지식

html script 태그 위치

1. head 태그 내부
   페이지 컨텐츠 렌더링 전에 스크립트 파일 로드됩니다.

   단 defer 속성을 추가하면, 컨텐츠가 로드된 후에 스크립트 파일이 실행되게 하여 페이지 로딩과 스크립트 실행을 병렬로 처리할 수 있습니다.

2. body 태그 내부 끝 부분
   페이지 컨텐츠가 먼저 로드된 후에 스크립트 파일이 로드됩니다.
   

canvas

<canvas>는 웹 게임, 데이터 시각화, 차트 생성 등 다양한 그래픽 관련 작업에 활용되며, 자바스크립트와 함께 사용하여 동적이고 상호작용적인 그래픽 화면을 구현하는 데 유용합니다.

캔버스 태그는 그래픽을 그리기 위한 빈 영역을 제공하며, 이 영역에 그림 또는 그래픽을 그리고 수정할 수 있습니다. 이러한 동작은 자바스크립트로 작성됩니다.

svg

SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 나타내기 위한 XML 기반의 파일 형식입니다. SVG 파일은 그래픽을 벡터 형식으로 표현하며, 다양한 크기에서 화질을 유지하며 확대 또는 축소할 수 있습니다. 이러한 특징으로 SVG는 웹, 애플리케이션, 데이터 시각화 등 다양한 분야에서 사용됩니다.

SVG 파일의 특징과 사용법:

벡터 그래픽: SVG 파일은 선, 원, 사각형, 다각형 등의 기하학적 도형과 텍스트, 경로 등을 사용하여 그래픽을 표현합니다. 이러한 그래픽 요소들은 확대 또는 축소해도 화질을 유지하며 깔끔하게 표현됩니다.

XML 기반: SVG 파일은 XML 문법을 사용하여 작성됩니다. 이는 텍스트 파일로서 읽기와 수정이 용이하며, 소스 코드와 분석에도 도움이 됩니다.

상호작용성: SVG는 자바스크립트와 결합하여 상호작용적인 그래픽을 구현할 수 있습니다. 클릭, 호버, 애니메이션 등을 추가하여 동적인 그래픽 화면을 만들 수 있습니다.

웹에서 사용: 웹 페이지에서 SVG를 사용하면 크기와 화질을 유지한 채로 다양한 디스플레이 크기에 맞게 표시할 수 있습니다. 또한, 검색 엔진 최적화(SEO) 측면에서도 유리한 요소입니다.

애플리케이션에서 사용: SVG는 웹 브라우저뿐만 아니라 애플리케이션 인터페이스(UI)나 데이터 시각화 등에서도 활용됩니다. 벡터 형식이므로 화면 크기나 DPI에 따른 문제가 없어 화면이나 인쇄물 등 다양한 출력에 사용될 수 있습니다.

편집 및 생성 도구: 다양한 그래픽 편집 도구와 프로그래밍 언어로 SVG 파일을 생성, 수정할 수 있습니다. Adobe Illustrator, Inkscape 등은 SVG 파일 편집에 유용한 도구 중 하나입니다.

SVG는 높은 품질의 그래픽을 제공하면서도 파일 크기가 작고 다양한 용도로 활용할 수 있는 형식으로, 웹 및 그래픽 관련 작업에 유용하게 사용되는 포맷입니다.

벡터 형식 vs. 비트맵 형식

벡터 형식과 비트맵 형식은 사용 목적에 따라 선택되어야 합니다. 화질 유지와 크기 조절이 중요한 경우에는 벡터 형식이 유용하며, 사진이나 자연스러운 그래픽을 다루는 경우에는 비트맵 형식이 적합합니다.

1. 벡터 형식
   벡터 형식은 기하학적 도형과 선, 곡선, 텍스트 등을 수학적 수식으로 표현합니다.
   확대 및 축소 시 해상도 손실이 없습니다. 즉, 그림이 얼마나 크든 작든 화질은 유지됩니다.
   대표적으로 SVG(Scaleable Vector Graphics)가 벡터 형식의 예입니다.
   그래픽 요소 간 상대적인 위치와 크기가 중요한 경우에 유용합니다. 로고, 아이콘, 도표 등에 적합합니다.

2. 비트맵 형식
   비트맵 형식은 픽셀로 이루어진 이미지로, 각 픽셀의 색상 정보를 저장합니다.
   확대 시 픽셀 정보가 보이거나 계단 현상이 발생할 수 있습니다. 확대하면 화질이 떨어집니다.
   JPEG, PNG, GIF, BMP 등이 비트맵 형식의 대표적인 예시입니다.
   사진, 그림, 사진과 같이 세밀한 색상과 질감이 중요한 이미지에 적합합니다.

참조링크

애플 웹사이트 iPhone X 비주얼 똑같이 만들기 #1
생활코딩 Redux