순수나라

인터페이스리스트가 두 종류인 이유왜 자바는 List 인터페이스에 두 가지 구현을 제공?둘 중에 어느 것을 선택?어느 것이 더 좋을지는 수행하는 동작에 달려 있음자바 interface자바 interface는 메서드 집합을 의미ex) Comparable interfacepublic interface Comparable {public int compareTo(T o);}interface는 타입 파라미터인 T를 사용하여 Comparable이라는 제네릭 타입을 정의이 interface를 구현하려면 클래스는 다음과 같아야 함T 타입을 명시해야 함T 타입의 객체를 인자로 받고 int를 반환하는 compareTo() 메서드를 제공해야 함expublic int compareTo(Integer anotherInteger)..

c# 공부 중인데 확장 메서드라는 부분은 자바에서 보지 못한 부분이라 정리해봅니다.확장 메서드란?클래스의 외부에서 클래스의 메서드처럼 사용할 수 있는 새로운 메서드를 만들 수 있는 기능즉 상속할 수 없는 클래스의 기능을 확장할 수 있음특징기존 코드 수정 없이 기능 확장정적 클래스에서 정의내부적으로 정적 메서드내부적으로는 정적 메서드이지만, 사용하는 방식은 인스턴스 메서드처럼 사용할 수 있음사용법class Person{ public string name; public Person(string name) { this.name = name; }}class Print{ public static string printPerson(this Person p) { r..

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

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는 컴포넌트의 상태가 변경될 때만 렌더링을 다시 수행상태 데이터를 사용하여 불필요한 렌더링을 방..