본문 바로가기

분류 전체보기

 (170)
[매일메일] React의 메모이제이션? (FE.241223/250206) 2025. 2. 6. 14:56 React의 메모이제이션으로 성능 최적화복잡한 계산이 필요한 경우, 컴포넌트가 자주 리렌더링 되는 경우 등 성능 최적화가 필요한 경우 도움이 됨, React.memo컴포넌트의 props가 변경되지 않았을 때 리렌더링 방지해 성능 최적화const Child = React.memo(({ value }) => { console.log("Child rendered"); return {value};});function Parent() { const [count, setCount] = React.useState(0); return ( setCount(count + 1)}>Increment Count );}Child는 React.memo로 감싸져있어 value가 변경되지 ..
[매일메일] 동시성 제어(BE.250114/250115/250205/250106 통합) 2025. 2. 6. 08:56 시작하기 전에...동시성(Concurrency)이란 무엇인가? 논리적으로 동시에 실행되는 것처럼 보이게 만드는 개념 (동시 실행처럼 보이지만, 실제로는 아님!)단일 코어 위에서 시간 분할을 통해 여러 스레드를 번갈아 가며 작업 수행 사용자의 입력을 기다리거나, 네트워크 요청, 파일 입출력 등 I/O 작업이라고 함I/O 작업 시에는 CPU가 유휴 상태로 대기함. 입력/출력이 끝날 때까지 손 놓고 기다린다는 뜻! 이때 CPU의 효율성을 위해! 아무것도 안하는 대신에 컨텍스트 스위칭으로 다른 스레드 작업을 처리함이 방법을 쓰면 여러 클라이언트 요청을 동시에 처리할 수 있음 여러 스레드를 사용하면서 Deadlock, Race Condition, Starvation 등의 문제가 발생할 수 있음(해당 문제는 아래 ..
[매일메일] Error Boundary란? (FE.250205) 2025. 2. 6. 08:11 Error BoundaryReact 컴포넌트에서 발생하는 오류를 잡아내고, 전체 어플리케이션이 먹통 것을 방지하기 위한 컴포넌트 Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있음 (함수 컴포넌트로 작성할 수 없음)componentDidCatch, getDerivedStateFromError 두 가지 라이프 사이클 메서드 사용 Error Boundary의 필요성React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않음.오류가 발생할 경우 흰 화면만 뜨거나, 사용자는 이해할 수 없는 화면이 뜰 수 있음.어플리케이션의 신뢰도와 사용자 경험에 직결되는 굉장히 큰 문제임. 에러가 발생한 영역에서 대체 UI(Fallback UI)를 표시하고, 어플리케이션의 나머지 부분은 정상적..
[매일메일] CORS란? (BE.250116) + (FE.250205) 2025. 2. 5. 09:40 CORS(Cross Origin Resource Sharing) 개념- 출처 교차(Cross Origin): 리소스를 주고받는 곳의 출처가 다른 경우에 발생함 (*출처: 도메인, 프로토콜, 포트 등)- 출처 교차인 경우 접근 권한을 부여하는 메커니즘이 필요함- CORS는 서로 다른 출처에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책 CORS의 필요성?- 위조 요청 문제를 해결하기 위함(CSRF, Cross-Site Request Forgery, 크로스사이트 요청 위조)- 피해자가 공격자의 웹 사이트에 접속했을 때, 해당 사용자의 요청인 것처럼 타 사이트에 GET 요청을 보냄- 위와 같이 의도치 않은 요청을 서버에 보내서, 사용자의 개인정보 등을 탈취할 수 있음. SOP란?- Same-origin ..
[매일메일] 로드 밸런싱이란? (BE.250203) 2025. 2. 3. 23:57 로드 밸런싱서버에 들어오는 클라이언트 요청을 균등하게 분산시킴어플리케이션 가용성, 확장성, 보안 및 성능을 확보함 로드 밸런싱 알고리즘1. 라운드 로빈(Round Robin)모든 요청이 순서대로 처리되는 방식모든 서버 처리 능력이 동등하고, 요청의 고른 분산이 중요한 경우 고려해볼 수 있음 📌 장점: 구현이 쉽고, 고른 분산을 보장함📌 단점: 서버 부하나 응답 시간을 고려하지 않아, 서버의 처리 능력이 다르면 비효율적임 2. 가중치 라운드 로빈(Weighted Round Robin)서버 처리 능력과 가용 자원에 따라 가중치를 할당 받음요청을 순서대로 처리하되, 가중치가 높은 서버는 상대적으로 많은 요청을 가져감 📌 장점: 서버 처리 능력이 다른 경우를 고려함📌 단점: 상대적으로 구현이 복잡하고, ..
🌟[매일메일] 자바스크립트의 Promise란? (FE.250129/250203) 2025. 2. 3. 23:42 자바스크립트의 PromisePromise 정의비동기 작업을 관리하고, 작업의 성공/실패 결과를 나중에 사용할 수 있도록 하는 객체비동기 작업의 완료 여부를 약속해주는 개념 Promise 역할자바스크립트는 비동기 처리를 위한 콜백함수를 많이 사용함코드가 복잡해져 콜백이 중첩되는 '콜백 지옥' 문제가 발생할 수 있음 Promise는 비동기 처리의 가독성을 높이고, 코드의 흐름을 명확하게 관리할 수 있도록 도와줌 Promise의 3가지 상태1. Pending(대기): 비동기 작업이 아직 완료되지 않은 초기 상태2. Fulfilled(이행됨): 비동기 작업이 성공적으로 완료되어 값을 반환한 상태3. Rejected(거부됨): 비동기 작업이 실패해 오류를 반환한 상태한 번 Fulfilled 또는 Rejected ..
[매일메일] 클로저란? (FE.241212) 2025. 2. 1. 22:00 클로저외부 함수의 변수를 내부 함수가 계속해서 참조할 수 있도록 하는 매커니즘함수가 생성될 때 렉시컬 스코프(lexical scope)를 기억하며, 함수가 실행될 때도 그 스코프에 계속 접근할 수 있음 자바스크립트의 함수가 일급 객체라는 특성 + 렉시컬 스코프의 조합으로 만들어짐 function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log('Outer Variable: ' + outerVariable); console.log('Inner Variable: ' + innerVariable); };}const newFunction = outerFunction('outside');..
[매일메일] 자바스크립트 함수의 특징 (FE.250101) 2025. 1. 31. 23:32 일급 객체자바스크립트에서 함수는 값(value)처럼 취급될 수 있음변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 return값으로 사용할 수 있음const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction(sayHello)); // 'Hello' 익명 함수와 함수 표현식자바스크립트에서 익명 함수(이름 없는 함수)를 정의할 수 있음함수 표현식에서 주로 사용되며, 필요에 따라 함수에 이름을 지정하지 않아도 됨const add = function(a, b) { re..
728x90

티스토리툴바