JH 기술 블로그

집에 돌아오는 길 버스에서 NomadCoders 니꼬쌤이 유튜브를 새로 올리신걸 보며 왔다! 유튜브의 제목은 '새로운 JS키워드가 뜬다!' 였고, 프론트엔드 개발자가 되고 싶은 나로서는 영상을 누르지 않을 수가 없었다. intro: var, let, const 그리고 using! 우리는 이제 기존의 변수선언 키워드 var, let, const 외에도 using 을 볼수 있다고 한다!! 현재 기준(2023.09) 타입스크립트 5.2 버전에서 사용해 볼 수 있으며, 이제 using은 어떨 때, 어떻게 쓰는지 한번 알아보도록하자! 1. 🤷‍♂️using이 왜 필요한데? 기존의 var, let, const와 동일하거나 비슷한 역할이면 아마 이 키워드를 만든 의미가 없을 것이다. 그렇다면 왜 필요한걸까? usin..

사이드 프로젝트를 진행하면서 기존에 Recoil로만 처리하는 것 대신, React Query를 사용해야겠다는 생각이 들었다. 프로젝트 특성상 API를 호출 할 일이 잦다는 것이 그 이유이다. 그럼 오늘은 React Query를 왜 사용하고, 어떻게 사용해야 하는지에 대해서 알아보자. 🤷‍♂️React Query React-query란 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다. 👏 React Query의 장점 기존의 Recoil과 같은 상태관리 라이브러리를 사용 할 때 BoilerPlate 형태의 코드가 많이 발생한다. 반면 React Query는 비교적 코드의 양이 적으며, 구조도 단순하여 유지 보수가 용이하다는 장점이 있다. 동일한 요청..

지난 학기 자스 스터디를 진행하면서 분명 많은 걸 얻었고 지금은 다 잃어버렸다. 코딩테스트를 준비하다가 보면 종종 Map을 이용해 복잡하게 구현하지 않는 것을 볼 수 있을 것이다. 간단한 요약과 함께 Map의 메서드들을 한번 살펴보자. 1. Map이 뭐였더라 Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size Map 객체의 중요한 특징으로는 중복 된 키를 가진 요소가 존재할 수 없다. 또한 Map 객체는 키 타입에 제한이 없다. 따라서 객체를 포함한 모든 값을 키..

1. var 키워드로 선언한 변수의 문제점 (1) 변수 중복 선언 허용 var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작한다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼, 초기화문이 없는 변수 선언문은 무시된다. (2) 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. (3) 변수 호이스팅 var 키워드로 변수를 선언하면 변수 호이스팅이 발생한다. 이것은 에러를 발생시키지는 않으나 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다. 2. let 키워드 var 키워드와 다르게 변수를 ..

1. 변수의 생명주기 변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행된다. 다시 말해, 변수 선언은 코드가 한 줄씩 순차적으로 실행되는 런타임에 실행되는 것이 아니라 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행 된다. 그러나 엄밀히 말하자면 위 설명은 전역 변수에 한정된 것이다. 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. function foo() { var x = 'local'; console.log(x); return x; } foo(); console.log(x); // ReferenceError 따라서 위 예제를 보면 foo함수를 호출하면 x변수가 선언되고 undefine..

1. 함수 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 함수정의를 통해 생성한다. 3. 함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 일반 객체와의 차이점으로는 호출 가능성의 유무이다. 함수는 호출 가능하지만, 일반 객체는 호출이 불가하다. 함수 리터럴은 funtion 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다. 4. 함수 정의 함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다. 함수를 정의하는 방법에는 4가지가 있다. 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 4. 화살표 함수 함수 선언문 함수 선언문은 함수 이름을 생략할 수..

원시 값과 객체의 비교 1. 원시 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값. 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. 상수는 재할당이 금지된 변수를 말한다. 상수도 변수라 할 수 있다. 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. 그 이유는 원시 값이 변경 불가능한 값이기 때문이다. 이러한 특성을 불변성이라고 한다. 2. 객체 객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제 할 수 있다. 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다는 점이 원시 값과 차별되는 점이다. 이 말은 ..

1. 객체 원시타입의 값은 변경 불가능, 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수이면 메서드라고 부른다. 2. 객체 리터럴에 의한 객체 생성 c++이나 자바 같은 클래스 기반 객체지향 언어는 new 연산자로 객체를 생성하지만 자바스크립트는 다양한 객체 생성 방법을 지원한다. 1. 객체 리터럴 2. Object 생성자 함수 3. 생성자 함수 4. Object.create 메서드 5. 클래스 3. 프로퍼티 프로퍼티를 나열할 때는 쉼표(,)로 구분한다. 마지막 프로퍼티 뒤에는 붙여도 되고 안붙여도 된다. 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다. 프로퍼티 키에 문자열이나 심벌 값 외의 값을..