본문 바로가기

전체 글

 (45)
[React] 리액트의 렌더링사이클 가상DOM (Virtual Document Object Model)가상 DOM은 실제 DOM의 가벼운 복사본으로, React가 UI 업데이트를 효율적으로 관리하기 위해 사용하는 구조입니다.가상 DOM은 메모리에 존재하며 브라우저에서 직접 렌더링되지 않습니다.가상 DOM의 장점성능 최적화: 직접적으로 DOM을 조작하는 것보다 훨씬 효율적입니다. 실제 DOM 조작은 비용이 많이 드는 작업이지만, 가상 DOM을 통해 불필요한 DOM 조작을 피할 수 있습니다.브라우저 호환성: 가상 DOM을 통해 브라우저 간의 차이점을 추상화할 수 있어, 다양한 브라우저 환경에서도 일관된 동작을 보장합니다.초기에는 애플리케이션이 어떻게 렌더링될까? 초기렌더링 과정가상 DOM 생성: 컴포넌트들이 React에서 정의되면, 그 컴포넌..
Observer Pattern 적용 Observer PatternObserver 패턴은 객체 간의 일대다 관계를 설정하는 디자인 패턴하나의 객체(이를 Subject라고 함)의 상태가 변경되면, 그 객체에 의존하는 다른 객체들(이를 Observer라고 함)이 자동으로 통지받고 업데이트됨이 패턴은 객체들 간의 느슨한 결합(loose coupling)을 촉진Subject관찰되는 객체Observer들의 목록을 관리하며 상태가 변할 때 이들에게 변화를 통지ObserverSubject의 변화를 감지하는 객체Subject가 상태를 변경하면, Observer는 특정 동작을 실행 Observer 패턴의 장점느슨한 결합Observer와 Subject는 서로에 대해 최소한의 정보만을 알고 있음Observer는 단지 Subject가 변경을 통지할 수 있다는 사..
passport-local PassportPassport는 Node.js 애플리케이션에서 인증을 쉽게 구현할 수 있도록 도와주는 미들웨어다양한 전략(strategy)을 통해 다양한 인증 방식(예: 로컬, OAuth, JWT 등)을 지원하는 것이 특징각 인증방식을 stragies라는 개별적인 모듈로 만듦stragies를 통해 local이나 google과 같은 인증방식을 구현할 수 있음여기서 passport-local은 가장 기본적인 인증 전략으로, 사용자 이름(username)과 비밀번호(password)를 사용한 인증을 처리 passport-localsession을 이용함 로컬 전략 (Local Strategy)passport-local 전략은 사용자 이름과 비밀번호를 사용해 로컬 인증을 수행데이터베이스에 저장된 사용자 정보를 비..
쿠키와 세션 쿠키 (Cookies) 쿠키는 클라이언트 측(브라우저)에 저장되는 작은 데이터 조각서버가 클라이언트에 대한 정보를 유지하거나 추적하기 위해 사용됨저장 위치: 브라우저(클라이언트)에 저장됨형식: 쿠키는 이름-값 쌍으로 이루어져 있으며, 추가로 도메인, 경로, 만료일, 보안 플래그 같은 메타데이터 포함 가능만료 시간: 쿠키는 만료 시간을 설정할 수 있고, 만료시간이 지나면 삭제됨전송: 브라우저는 해당 도메인으로의 모든 요청에 쿠키를 자동으로 포함하여 서버로 전송보안쿠키는 기본적으로 평문으로 저장되기 때문에, 민감한 정보(예: 비밀번호)를 저장하는 것은 위험HTTPS와 Secure, HttpOnly 플래그를 사용해 보안을 강화 가능 용도로그인 상태 유지사용자가 로그인하면 서버는 로그인 정보를 쿠키에 저장사용자..
fetch API와 axios 비교 Fetch APIFetch API는 자바스크립트에서 HTTP 요청을 보내고 응답을 처리하는 방식으로, 기존의 XMLHttpRequest를 대체함Promise를 기반으로 하여 비동기 작업을 더 간결하게 처리 기본 사용방법fetch(url, options) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('There has been a problem with your fetch op..
CSR vs SSR 클라이언트 렌더링 (Client-Side Rendering, CSR)정의클라이언트 렌더링은 HTML 페이지의 기본 구조를 서버로부터 받아온 후, 자바스크립트가 클라이언트(브라우저)에서 데이터를 받아서 HTML을 동적으로 생성하는 방식. 즉, 페이지의 렌더링 과정이 클라이언트 측에서 이루어짐작동 원리초기 로딩: 브라우저는 서버로부터 HTML 파일, CSS 파일, 자바스크립트 파일을 다운로드함. 이 초기 HTML은 종종 빈 와 같은 기본 구조를 포함하고 있음자바스크립트 실행: 자바스크립트 파일이 로드되고 실행되면, 클라이언트 측에서 렌더링 라이브러리나 프레임워크(예: React, Vue.js, Angular)가 동작함데이터 요청: 자바스크립트 코드가 서버에 API 요청을 보내어 데이터를 가져옴DOM 조작: ..
웹 애니메이션 FE 개발자가 웹 애니메이션을 공부한다면 어떤것 부터 알아야 할까?일단, 화면에 애니메이션이 어떻게 렌더링되는지 알아봐야 한다. VSync (Vertical Synchronization)VSync는 GPU에서 렌더링하는 프레임 속도와 모니터의 재생 빈도(refresh rate)를 동기화하는 기술이 기술은 화면 찢어짐(tearing)을 방지하기 위해 개발되었다.tearing : GPU가 다음 프레임을 렌더링할 때 모니터가 아직 이전 프레임을 표시하고 있을 경우 발생합니다. 이로 인해 화면이 수평으로 잘린 것처럼 보일 수 있습니다. GPU 가속GPU 가속은 그래픽 처리에 특화된 GPU를 활용하여 특정 작업을 빠르게 처리하는 방식 병렬 처리 능력GPU는 수천 개의 작은 코어를 사용하여 대규모 병렬 연산을 수행..
NoSQL NoSQL (Not only SQL)SQL만을 사용하지 않는 데이터베이스 관리 시스템(DBMS)관계형 데이터베이스(RDBMS)와는 다른 데이터 모델과 저장 구조를 제공하는 데이터베이스비정형 데이터 처리: 스키마가 유연하여 비정형 데이터 처리에 적합확장성: 수평 확장이 용이하여 대규모 데이터 처리에 적합빠른 성능: 특히 읽기와 쓰기 성능이 뛰어남 NoSQL의 특징RDBMS와 달리 데이터 간의 관계(Relation)를 정의하지 않음RDBMS는 데이터 간의 관계를 Foreign Key로 정의하고 Join 연산을 수행할 수 있지만 NoSQL은 Key-Value 형태로 저장되기 때문에 Join 연산이 불가능RDBMS에 비해 대용량의 데이터 저장 가능분산형 구조로 설계여러 곳의 서버에 데이터를 분산 저장하여 특정 ..

티스토리툴바