프론트엔드 개발 94

자바스크립트) 스코프

0. 스코프 🔸뜻 : 식별자(변수명/함수명/클래스명 등)가 유효한 범위, 식별자(변수이름/함수이름/클래스이름)가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조 될 수 있을지 없을지 결정되는 것 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야할 것인지 결정한다. 따라서, 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 이름이 같은 변수 x가 중복 선언되었다. 전역에서 변수 x를 참조할 때, 그리고 함수 foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조(접근)해야 하는가? 자바스크립트는 어떻게 변수를 식별하는 것일까? 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코..

자바스크립트) 함수

0. 함수 0-0) 함수 리터럴 - 자바스크립트 함수는 객체 타입의 값이다. - 따라서 숫자값을 숫자리터럴로 생성하고 객체를 객체리터럴로 생성하는것처럼 함수도 함수리터럴로 생성가능하다. - 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. - 함수 이름은 함수 몸체 내에서만 참조가능한 식별자다. - 함수 이름이 있는 함수를 기명함수(named function)라 하고, 이름이 없는 함수를 무명/익명 함수(anonymous function)라고 한다. ex) 함수리터럴 생성 예제 // 변수에 함수리터럴 할당 var f = function add(x, y) { return x + y; }; - 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성..

자바스크립트) 객체

0. 자바스크립트에서 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 '모든 것'이 객체다. 원시 값(숫자,문자열,불리언 등)을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다. var person = { name: "Lee", age: 20, }; 객체는 프로퍼티(속성)와 메서드(동작)을 가지며,..

자바스크립트) 배열

0. JS 의 배열은 희소배열이기 때문에 일반적으로 자료구조에서 의미하는 밀집배열이 아니다. 자바스크립트와 다르게 일반적인 프로그래밍 언어에서는 배열을 선언할 때 배열의 크기를 알려준다. 아래와 같이 배열을 선언했다면, 운영체제는 메모리에 숫자 10개가 들어갈 수 있는 연속된 빈 공간을 찾아서 순서대로 1,2,3,4,5를 할당한다. 할당하지 않은 나머지 부분은 의미없는 쓰레기 값이 저장되어있다 int arr[10] ={1,2,3,4,5} 운영체제는 배열의 시작주소 숫자 1이 들어간 주소만 기억한다. 그래서 배열의 세번째 원소에 접근하고 싶을 때 arr[2] 인덱스로 한번에 접근가능하다. 운영체제는 배열의 시작주소를 알고있기 때문에, 배열의 시작주소인 1에서부터 두번째 떨어진 주소에서 데이터를 가져온다. ..

자바스크립트) 자주 쓰이는 메서드 총정리

맨날 외워버리면 잊어버리는 메서드...ㅠㅠㅠㅠ그냥 한번에 정리해버리자!!! ✅ 배열에 사용되는 메서드 1) 특정 조건에 맞는 요소 탐색 🔸 find - 배열에서 주어진 조건을 만족하는 첫번째 요소를 찾아 반환하는 메서드. - 조건을 만족하는 요소를 찾으면 해당 요소를 반환하고, 그렇지 않으면 undefined 를 반환 const numbers = [1, 2, 3, 4, 5]; const evenNumber = numbers.find(function(number) { return number % 2 === 0; }); console.log(evenNumber); // 출력: 2 (첫 번째 짝수인 요소) const numbers = [1, 3, 5, 7, 9]; const evenNumber = number..

리덕스 툴킷) createAsyncThunk 로 비동기 처리하기

0. 개요 🔸리덕스 툴킷을 사용하면 전역 상태관리를 쉽게 관리할 수 있다. 즉, 여러 컴포넌트에서 공유되는 걸 전역 상태로 관리하면 좋다. 🔸어떤 데이터를 전역상태로 관리하면 좋을까? 구체적인 예시는? - 서버로 부터 가져온 데이터 : 서버로부터 가져온 데이터를 전역 상태에 저장해서 여러 컴포넌트에서 공유하는 것이 좋다. 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러군데에서 사용해야할 상황이 생기기 때문 ✅ 왜 서버로부터 가져온 데이터를 전역에서 관리하는게 좋을까? 1) 데이터 공유: 전역 상태를 사용하면 여러 컴포넌트에서 동일한 데이터에 접근할 수 있다. 이는 데이터를 중복으로 가져오지 않고, 여러 컴포넌트 간에 일관된 데이터를 사용할 수 있도록 한다. 예를 들어, 여러 개의 ..