순수나라

[운영체제] 캐시

캐시 메모리(Cache Memory)속도가 빠른 장치와 느린 장치에서 속도 차이에 따른 병목 현상을 줄이기 위한 메모리더보기ex1) CPU 코어와 메모리 사이의 병목 현상 완화ex2) 웹 브라우저 캐시 파일은 하드디스크와 웹페이지 사이의 병목 현상을 완화CPU가 주기억장치에서 저장된 데이터를 읽어올 때, 자주 사용하는 데이터를 캐시 메모리에 저장한 뒤, 다음에 이용할 때 주기억장치가 아닌 캐시 메모리에서 먼저 가져오면서 속도를 향상시킴속도라는 장점은 얻지만, 용량은 적기도 하고 비용이 비쌈CPU에는 이러한 캐시 메모리가 2 ~ 3개 정도 사용L1, L2, L3 캐시 메모리라고 부름속도와 크기에 따라 분류한 것으로, 일반적으로 L1 캐시부터 먼저 사용CPU에서 가장 빠르게 접근하고, 여기서 데이터를 찾지 ..

[모던 리액트 Deep Dive] 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트

1.7 선택이 아닌 필수, 타입스크립트더보기동적 언어인 자바스크립트에서 런타임에만 타입을 체크할 수 있는 한계를 극복해 더욱 안전하게 작성하면서도 잠재적인 버그도 크게 줄일 수 있는 기회를 얻을 수 있음1.7.1 타입스크립트란?TypeScript is JavaScript with syntax for types기존 자바스크립트 문법에 타입을 가미한 것자바스크립트는 기본적으로 동적 타입의 언어이기 때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점동적 타입 언어라는 점은 개발자에게 자유를 주기도 하지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 많음타입스크립트는 타입 체크를 정적으로 런타임이 아닌 빌드 타입에 수행할 수 있게 해줌모든 함수와 변수에 이러한 타입 확인 연산자인 type..

1.6 리액트에서 자주 사용하는 자바스크립트 문법더보기웹 페이지에 접근하는 사용자의 브라우저와 버전은 개발자와 다르게 항상 최신 버전이 아니고, 크롬, 사파리, 파이어폭스 등 다양하기 때문에 이러한 다양한 브라우저에서 문법 지원 또한 염두에 두어야 함1.6.1 구조 분해 할당배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용배열 구조 분해 할당const array = {1, 2, 3, 4, 5}const [first, second, third, ...arrayRest] = array// first 1// second 2// third 3// arrayRest [4, 5]🔖 useState 함수..

1.5 이벤트 루프와 비동기 통신의 이해더보기자바스크립트는 한 번에 하나의 작업만 동기 방식으로 처리 동기란?◾ 직렬 방식으로 작업을 처리하는 것◾ 이 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리◾ 그 동안 다른 모든 작업 대기 비동기란?◾ 직렬 방식이 아니라 병렬 방식으로 작업을 처리하는 것◾ 요청을 시작한 후 이 응답이 오건 말건 상관없이 다음 작업이 이루어지며, 한 번에 여러 작업이 실행될 수 있음 자바스크립트는 싱글 스레드에서 동기 방식으로 작동, 싱글 스레드 기반의 자바스크립트에서도 비동기 작업이 이루어짐예) 사용자가 검색어를 입력해 검색을 위한 네트워크 요청이 발생하는 순간에도 사용자는 다른 작업 처리 가능1.5.1 싱글 스레드 자바스크립트프로세스프로그램을 구동..

1.4 클로저더보기더보기리액트의 클래스 컴포넌트에 대한 이해- 자바스크립트의 클래스, 프로토타입, this 함수 컴포넌트에 대한 이해- 클로저1.4.1 클로저의 정의클로저는 함수와 함수가 선언된 어휘적 환경의 조합어휘적 환경function add() { const a = 10 function innerAdd() { const b = 20 console.log(a + b) } innerAdd() // 30}add()🔖 add 함수 내부에 innerAdd가 있고, innerAdd 함수는 내부에서 b 변수를 선언한 뒤, 자신의 함수 외부에 있는 a와 b를 더해서 정상적으로 30을 출력🔖 a 변수의 유효 범위는 add 전체이고, b의 유효 범위는 innerAdd의 전체🔖..

1.3 클래스더보기더보기16.8 버전이 나오기 전까지는 리액트에서는 모든 컴포넌트가 클래스로 작성1.3.1 클래스란 무엇인가?자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 탬플릿과 같은 개념특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것자바스크립트에서 클래스로 하는 모든 것들을 함수로도 동일하게 표현할 수 있음class Car { constructor(name) { this.name = name } honk() { console.log('${this.name}이 경적을 울립니다!') } static hello() { console.log('저는 자동차입니다') } set age(value) { this.car..

1.2 함수1.2.1 함수란 무엇인가?자바스크립트에서 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것function sum(a, b) { return a + b}sum(10, 24)리액트에서 컴포넌트를 만드는 함수도 기초적인 형태를 따름함수를 선언하고 매개변수로는 일반적으로 props라고 부르는 단일 객체를 받으며 return 문으로 JSX를 반환Component(props) 형태로 호출하지만, 리액트에서의 함수 컴포넌트는 와 같이 JSX 문법으로 단일 props별로 받거나, 같은 형태로 모든 props를 전개 연산자로 받는다는 차이가 있음1.2.2 함수를 정의하는 4가지 방법함수 선언문함수 선언문은 표현식이 아닌 일반 문(stat..

React에서 state와 props는 둘 다 컴포넌트에서 데이터를 다루는 데 사용되지만, 목적과 사용 방법에서 차이가 있다.📖 State컴포넌트 내부에서 관리되는 값으로서 변경 가능이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고 컴포넌트의 렌더링 결과 결정 장점컴포넌트의 내부 상태를 유지동적인 UI를 구성예) 상태 데이터를 사용하여 사용자 입력에 대한 반응을 보여주거나, 외부 API에서 데이터를 가져와서 화면을 업데이트React의 렌더링 성능을 최적화React는 컴포넌트의 상태가 변경될 때만 렌더링을 다시 수행상태 데이터를 사용하여 불필요한 렌더링을 방..

1.1 자바스크립트의 동등 비교더보기더보기의존성 배열에 대한 고민 : 보통 리액트에서 제공하는 eslint-react-config에 선언돼 있는 react-hooks/exhaustive-deps의 도움을 받아 해당 배열을 채우는데, 실제로 이것이 어떤 식으로 작동하는지, 또한 왜 이러한 변수들을 넣어야 하는지 이해하지 못하는 경우가 많음렌더링 관점 : 리액트 컴포넌트의 렌더링이 일어나는 이유 중 하나가 바로 props의 동등 비교에 따른 결과 리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수나 함수의 메모이제이션 등 모든 작업은 자바스크립트의 동등 비교를 기반으로 함1.1.1 자바스크립트의 데이터 타입원시타입(primitive type)boolean참과 거짓..

​위의 코드처럼 required로 프론트에서 validation 하는 것과 백에서 validation 하는 것에 대해서 어떤 점이 다른지 자세히 알아보고 싶었다.사실 프론트 or 백에서 하는데 왜 백 or 프론트에서 검증을 또 해야할까? 라는 의문이 생겼다 💡 먼저, 프론트엔드와 백엔드에 대한 개념 정리를 해봅시다프론트엔드란?사용자가 웹 페이지를 열었을 때 볼 수 있는 화면을 만드는 작업입니다.즉, 프론트엔드는 사용자가 1차적으로 보는 인터페이스이기 때문에 사용하기 쉽고 보기 편해야하므로 사용자 경험을 핵심 가치로 삼아 직관적이고 사용하기 쉬운 UI(User Interface)를 구축해야 합니다. 백엔드는?사용자가 웹 페이지를 사용하면서 필요한 비즈니스 로직을 만드는 작업입니다.즉, 프론트에서 받은 사..