TIL

동적언어는 런타임에 타입이 결정되는 언어이다. 즉, 변수 타입을 미리 선언할 필요가 없고, 자료형이 빌드될 때가 아닌 실행 시에 결정된다. 매번 타입을 써줄 필요가 없어 코드를 빠르게 작성 가능하다.자바스크립트를 비롯해 루비, 파이썬 등이 대표적인 동적 언어이다.장점만

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데 이런 과정을 "형 변환"이라고 한다.전달받은 값을 의도적으로 변환(명시적 변환)하는 경우도 형 변환이라고 할 수 있다.문자형으로 형 변환은 문자형의 값이 필요할때 일어난다.String(value)

동등 연산자 동등 연산자, ==, Equality operator 동등 연산자는 두 개의 피연산자가 동일한지 확인하고, 불린값을 반환합니다. 일치 연산자와는 달리 다른 타입의 피연산자들끼리의 비교도 시도합니다.

JWT(JSON Web Token)는 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안정성 있게 전달해준다.기본적은 인증을 진행하는 구조는 Cookie때와 크게 다르지는 않지만, 가장 큰 차이점은 JWT는 서명된 토큰 이라는 점이다. 공인/개

API 란? API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. - 위키백과 쉽게

null값은 오로지 null값만 포함하는 별도의 자료형을 만든다.자바스크립트에선 null을 '존재하지 않는(nothing)'값, '비어 있는(empty)'값, '알 수 없는(unknown)'값을 나타내는 데 사용한다. 위의 코드는 나이(age)를 알 수 없거나 그 값이

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말한다. 데이터 타입은 한정된 메모리 공간을 효율적으로 사용하기 위해서, 그리고 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보를 컴퓨터와 개발자에게 제공한다.데이터 타입은 한정된

의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 "레퍼런스를 참조한 다른 객체에서 객체를 변경"하기 때문이다.이 문제의 해결 방법은 객체를 불변 객체로 만들어 프로퍼티의 변경을 방지하며, 객체의 변경이 필요한 경우에는 참조가 아닌 객체의 방어적 복사를 통해 새로운

자바스크립트에서 복사는 깊은 복사와 얕은 복사가 존재한다. 원시 타입의 데이터가 복사 될때는 새로운 메모리 공간을 생성하여 메모리에 독립적인 값을 저장한다.object와 같은 참조 타입 데이터는 애초에 저장 시 데이터에 대한 주소가 저장되기 때문에 복사 시 값 자체가

이름이 같은 변수 x가 중복 선언되었다. 전역에서 변수 x를 참조할 때와 함수 foo()내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조해야 할까?스코프는 참조 대상 식별자를 찾아내기 위한 규칙이다. 식별자는 자신이 어디에서 선언됐는지에 의

함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다. 자바스크립트에는 함수를 정의하는 방법이 4가지가 있다함수 선언문함수 표현식Function 생성자 함수화살표 함수이 중 함수 선언문과 함수 표현식에 대

변수 중복 선언 허용위의 예제 처럼 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 설정하고 값까지 할당했다면 먼저 선언된 변수의 값이 의도치 않게 변경된다.함수 레벨 스코프이처럼 var는 함수의 코드 블록만 지역 스코프로 인정하기 때문에, 함수의 코

ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다.전역 코드전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. 그리고 var 키워

스코프 체인 함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서도 할 수 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩', 중첩 함수를 포함하는 함수를 '외부 함수'라고 한다. 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있는데, 이는

배열은 여러 개의 값을 순차적으로 나열한 자료구조이다.배열이 가지고 있는 값을 요소라고 한다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 순서대로 갖는다.유사 배열 객체는 마치 배열처럼 인덱스로

이벤트 리스너는 DOM객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 이벤트 리스너를 이용하면 특정 DOM에 위에서 말한 Javascript 이벤트가 발생할 때 특정 함수를 호출한다.이벤트 리스너의 경우 웹 애플리케이션 메모리 누

JSX란? 리액트의 생김새를 정의할 때, 사용하는 문법이다. 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 JavaScript로 변환을 해준다. > babel은 자바스크립트의 문법을 확장해주는 도구이다. JSX에서 지켜야하는 규칙 꼭

props란? 자식 컴포넌트에게 값을 전달해줘야 할 때, props를 사용한다. props 기본 사용법 부모 컴포넌트에서 자식 컴포넌트로 값을 전달해주고 싶을 때, 자식 컴포넌트 태그에 전달할 값의 이름과 값을 전달해준다. 문자열, 함수, 변수 등을 모두 자식 컴포

input 의 개수가 여러개가 됐을때 단순히 useState를 여러번 사용하고 onChange 도 여러개 만들어서 구현 할 수 있다. 하지만 가장 좋은 방법은 아니다. 더 좋은 방법은 input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다.

배열 렌더링 동적인 배열을 렌더링할 때 map() 함수를 사용한다. map() 함수는 배열 안에 있는 각 원소를 변환하여 새로운 배열을 만들어준다. 간단하게 배열의 모든 원소를 렌더링할 수 있다. 하지만 우린 이러한 콘솔창에서 이러한 오류창을 만나게 된다. 이러한

스타일 컴포넌트를 안썼을때 스타일 컴포넌트를 썼을때 스타일 컴포넌트의 장점 여러가지 효용성이 많지만 그 중 가장 큰 장점은 우리가 알던 css를 그대로 사용할 수 있다는 것이다. 이미 만들어져있는 컴포넌트를 랩핑해서 스타일을 가진 컴포넌트로 쉽게 만들 수 있다.

리액트의 컴포넌트 리액트의 컴포넌트는 두가지로 나뉜다. 클래스 컴포넌트(class component) 함수형 컴포넌트(functional component) 각 컴포넌트의 장단점 함수형 컴포넌트는 render()함수가 필요 없다. 그래서 컴포넌트 마운트 속도가

중첩된 라우트는 Route 안에 Route를 쓰는 형태로 이루어져 있다. 이렇게 하면 두 개의 컴포넌트를 동시에 렌더링 할 새로운 컴포넌트를 만들 필요 없이 한 번에 렌더링 할 수 있다.그럼 Articles 안에서 Article 컴포넌트가 보여지기 위해서는 어떻게 해야

ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어준다.Array, String, Map, Set 등과 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다.요소들의 집합인 배열을 펼쳐서 개별

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.this는 자바스크립트 엔진에 의해 암묵적으로 새성되며, 코드 어디서든 참조할 수 있다.

화살표 함수는 function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식을 간략화 한다. 표현뿐 아니라 내부 동작도 간략화된다. 특히 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.화살표 함수는 함수

LifeCycle은 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 되는 과정이다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 끝이 난다.생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있는데, 함수형 컴

Hook은 리액트 버전 16.8부터 리액트 요소로 새로 추가됐다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 됐다.기존에는 컴포넌트 간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않았다.

axios는 node.js와 브라우저를 위한 프로미스 기반 http 클라이언트이다. 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다.브라우저에서는 XMLHttpRequest를 사용한다.XMLHttpRequest(XHR)란?XHR 객체는 서버와 상호작용할