순수나라

인터페이스리스트가 두 종류인 이유왜 자바는 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)..

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..

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