0. Redux란?js 애플리케이션의 상태 관리를 위한 라이브러리이며, 단방향 데이터 흐름을 통해 애플리케이션의 상태 변화를 예측 가능하게 만드는 패턴을 제공한다. React만으로 작은 애플리케이션을 구축할 때는 useState나 useReducer와 같은 내장 훅으로 충분할 수 있다.다만 애플리케이션 규모가 커지고 다양한 컴포넌트가 동일한 상태를 공유해야 할 때 복잡성이 증가한다.→ Redux는 상태 관리의 복잡성을 해결하는 효과적인 방법을 제공한다고 함! 1. 핵심 원리Single Source of Truth애플리케이션의 모든 상태는 하나의 스토어(store)에 있는 객체 트리에 저장된다.// 스토어는 다음과 같은 하나의 큰 상태 객체를 관리한다.{ theme: { color: 'black',..

이전글: 프론트엔드 아키텍쳐를 알아보자 (1) MVC, MVVM, Flu프론트엔드 아키텍쳐 1. Redux여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리.*Flux 패턴을 이용한 대표적인 구현체이다. *recap: flux패턴은 데이터의 흐름이 한 방향으로만 흘러가도록 하는 아키텍쳐이다.View를 각각의 MVC 컴포넌트 관점으로 보는 것이 아니라 하나의 큰 View로 본다. 1. 사용자가 View에서 이벤트 발생 -> Action 객체가 생성됨2. Dispatch 메소드를 통해 이 Action이 Store로 전달3. Middleware가 있는 경우, Action 처리4. Reducer는 현재 상태와 Action을 받아 새로운 상태를 반환5. Store는 이 새로운 상태를 저장6. 상태가 변경되면..

아키텍처가 뭔데요Software architecture is the structure of structures of an information system consisting of entities and their externally visible properties, and the relationships among themDr. Jean-Claude Franchitti from New York University여러 정의가 있지만,  더 효율적인 코드를 작성하기 위한 구조.라고 생각하면 될 것 같다. 1. MVC 아키텍처 (Model-View-Controller)클래식 오브 클래식.백엔드와 프론트엔드가 구분되지 않던 시절, 어플리케이션을 모델-뷰-컨트롤러로 분리하는 아키텍쳐이다. Model데이터를 주..

세 줄 요약1. Promise는 비동기 동작을 관리하기 위해 설계되었으며, 콜백 함수로 이루어져 있다.2. Promise의 상태는 pending, fulfilled, rejected로 나뉜다. (상태에 따른 콜백이 finally, then, catch)3. 비동기 함수의 처리를 쉽게 하기 위해 async/await 키워드를 사용한다. overall비동기 함수 (Producer = Executor)결과를 생성하는 함수로, Promise 내부에서 실행된다. 결과를 콜백의 Input에 넣는다.caller성공 콜백, 실패 콜백 (Consumer = Executee)Promise의 결과를 받아 처리하는 함수(then, catch).calleePromise의 역할비동기 작업의 결과(성공/실패)를 관리하며, Prod..

Top-level awaitjs ES2022(ES13)부터 도입된 기능으로, 모듈 스코프에서 직접 await 키워드를 사용할 수 있게 해준다.이전에는 async 키워드가 있는 스코프 내에서만 await를 통해 해당 스코프에서 비동기 동작이 완료되기까지 블로킹할 수 있었는데모듈단위에서 await를 통해 특정 비동기 함수의 동작이 완료되기까지 하위 모듈의 동작을 막을 수 있다. 1. 기존의 await 사용 제한과 Top-level await의 등장기존 await 키워드는 반드시 async 함수 내부에서만 사용할 수 있었다.따라서, await를 모듈의 최상위 레벨에서 사용하려면 async 함수를 감싸야 했다.// 기존 방식 (async 함수로 감싸야 함)async function main() { const ..

1. Git과 GithubGit: Local Repository로컬에서 다양한 버전 작업 및 히스토리 추적Github: Remote Repository협업 관리, 로컬 작업 내용들의 원격 저장 Git 설정이 정상적으로 된 경우 .git 디렉토리를 확인할 수 있다 → .git을 어디서부터 생성하여 시작할까?Local에서 시작 → Remote에 Push (git push)Github Repository(Remote)에서 가져오기 → Local로 Clone (git clone) 2. Git 주소 관리 (Remote)git fetch -p원격에 있는 변경사항(브랜치, 커밋 등) 가져오기-p: remote repo에서 삭제된 브랜치를 로컬에서도 삭제하여 가져옴git pull origin main원격 main 브랜..

SOP(Same Origin Policy)동일 출처 정책으로, 웹 보안의 기본 원칙동일한 origin에서만 리소스를 공유할 수 있다.e.g. https://blog.example.com과 https://api.example.com은 다른 origin이므로, 리소스를 공유할 수 없다.cf. origin의 개념URL 세부 구성Site https://blog.example.com:0000/1Domain(Hostname)domainhttps://blog.example.com:0000/1Hostdomain + porthttps://blog.example.com:0000/1Originscheme + domain + porthttps://blog.example.com:0000/1 SOP 예외 및 Cross-Origi..

쿠키 자체는 stateless이나, 쿠키가 무엇을 담고 활용하느냐에 동작이 달라질 수 있다. stateful, statelessstate를 서버에 있는 데이터라고 했을 때statefulstateless서버측에 state 有서버측에 state 無client-server 간 상호작용에서 이전 상태를 유지모든 요청이 독립적이고, 요청 자체에 필요한 정보가 모두 포함서버에 저장된 데이터(state)를 기반으로 사용자 요청 처리서버 확장성에 유리 쿠키는 단순한 데이터 저장소이기 때문에 stateless이다. HTTP는 기본적으로 stateless라고 말할 수 있다.클라이언트의 이전 요청 상태를 기억하지 않기 때문에 독립적인 요청으로 처리한다이 특성 덕분에, 서버는 클라이언트 상태를 관리할 필요가 없으므로 확장성(..

과거에는 서드파티 도메인을 통해 쿠키를 설정하고 유저를 트래킹했다.다만 프라이버시에 대한 우려로 브라우저 정책이 강화되면서, GA4는 퍼스트파티 쿠키 기반으로 유저를 트래킹하며 사이트의 도메인에서 직접 쿠키를 설정한다.  기존 GA (Universal Analytics)GA4추적모델Session 중심- 사용자의 행동 데이터를 세션 단위로 구분- 페이지뷰마다 새로운 데이터 수집- 30분 동안 사용자의 활동이 없다면 세션 종료Event 중심- 페이지뷰, 클릭, 스크롤, 동영상 재생, 구매 등 모든 행동이 이벤트로 집됨쿠키 활용서드파티 쿠키에 의존퍼스트파티 쿠키 + 서버사이드 전송cross-device 분석제한적 (기기 간 데이터 통합 어려움)O (사용자 ID, Google Signals 사용)쿠키 차단 시데..

1. js 런타임 환경 (JRE)js 런타임 환경(JRE) = js 엔진(JVM) + API 웹브라우저는 js 엔진이 있다. → js 엔진 기반으로 web api 제공웹 서버도 js 엔진이 있다. → js 엔진 기반 node api(서버 자원 활용) 제공 + LIBUVjs 엔진은 싱글스레드이므로, 멀티스레드는 api에서 제공한다. (=비동기처리)즉, 웹브라우저에서는 web api가 비동기 처리 / 서버는 LIBUV에서 비동기 처리JRE 구성 1: js 엔진1. 싱글스레드: 모든 js 코드 실행은 단 하나의 스레드가 실행한다.2. 스택 + 힙stack: 함수 순서대로 적재 및 수행 (함수 호출을 위해 존재한다)heap: 객체 저장소. 변수 및 함수 저장.JRE 구성 2: APIjs 엔진 그 자체는 js 문..