Front-end/JavaScript(20)
-
[JS] 값(value)에 의한 전달과 참조(reference)에 의한 전달
JavaScript의 자료형에는 기본(Primitive) 자료형과 기본이 아닌(Non-primitive) 자료형으로 두 가지 유형의 자료형이 있다. 기본 자료형 JavaScript 언어에서 제공하는 미리 정의된 데이터 유형을 기본 자료형이라고 한다. JavaScript는 Number, String, Boolean, Undefined, Symbol 및 BigInt를 포함하는 여섯 가지 유형의 기본 자료형을 제공한다. 기본 자료형의 크기는 고정되어 있으므로 JavaScript는 콜 스택(실행 컨텍스트)에 기본 자료형을 저장한다. 기본 자료형에 액세스하면 해당 변수에 저장된 실제 값을 조작한다. 따라서 기본 변수는 값에 의해 액세스됩니다. 기본 값을 저장하는 변수를 다른 변수에 할당하면 변수에 저장된 값이 생..
2023.01.03 -
[JS] 자바스크립트의 깊은 복사와 얕은 복사
컴퓨터 프로그래밍에서 깊은 복사는 새 메모리 주소로 새 객체를 만들고 원래 객체의 속성 값을 새 객체에 복사하는 객체의 복사본이다. 반면 얕은 복사는 새 메모리 주소로 새 객체를 생성하지만 해당 속성에 대해 원본 객체와 동일한 객체(주소)를 참조하는 객체의 복사본이다. 다음은 자바스크립트를 사용하여 깊은 복사와 얕은 복사를 구현한 예제다. const original = { a: 1, b: { c: 2 } }; // original 객체의 얕은 복사본 const shallowCopy = { ...original }; // original 객체의 깊은 복사본 const deepCopy = JSON.parse(JSON.stringify(original)); // original 객체의 속성 수정 origina..
2023.01.02 -
JavaScript 프로젝트에서 TypeScript를 사용해야 할까? - 장단점
TypeScript는 널리 사용되는 오픈 소스 프로그래밍 언어로 JavaScript를 기반으로 하며 정적 타이핑을 언어에 추가한다. 개발자가 보다 유지 관리 및 확장 가능한 코드를 작성할 수 있도록 설계되었으며 최근 몇 년 동안 많은 주목을 받았다. 이 글에서는 JavaScript 프로젝트에서 TypeScript를 사용하려는 이유와 그에 따른 장단점을 살펴보자. TypeScript 사용의 주요 이점 중 하나는 개발 프로세스 초기에 오류를 발견하는 데 도움이 된다는 것이다. 코드에 정적 타이핑을 추가하면 TypeScript는 코드를 실행하기 전에 타입 관련 오류를 포착할 수 있으므로 나중에 디버깅하는 데 드는 시간과 노력을 절약할 수 있다. 이는 문제가 되기 전에 문제를 식별하고 수정하는 데 도움이 되므로..
2022.09.14 -
FormData 값이 콘솔에서 안보이는 이유와 보는 방법
리액트 프로젝트 진행 중 회원가입 페이지에서 프로필 사진을 업로드하기 위해 FormData를 사용했다. const formData = new FormData(); const data = { email: email.current.value, nickname: nickname.current.value, password: password.current.value, }; formData.append("file", fileRef.current.files[0]); formData.append( "joinData", new Blob([JSON.stringify(data)], { type: "application/json" }) ); console.log(formData) // FormData {} 위 코드와 같이 f..
2022.09.07 -
자바스크립트의 ES(ECMAScript)란? - ES5/ES6
자바스크립트는 언어이고, ES(ECMAScript)는 자바스크립트의 표준 규격을 의미한다. 더보기 ECMAScript 자바스크립트는 넷스케이프에서 개발했다. 그리고 그에 대항하기 위해 MS에서는 J스크립트를 만들었다. 이처럼 브라우저마다 스크립트 언어가 다르게 때문에 서로 호환이 되지 않고 파편화가 생기기 시작했다. 파편화는 간단히 말해서 똑같은 코드인데 어떤 브라우저에서는 제대로 실행되고 어떤 브라우저에서는 에러가 나는 현상을 의미한다. 이런 파편화를 막으려면 표준을 만드는 것이 중요하다. 그래서 넷스케이프는 1996년 11월에 브라우저에서 돌아가는 스크립트 언어를 표준화하기 위해서 Ecma International이라는 국제 표준화 기구에 자바스크립트 기술 규격 제정을 요청했다. Ecma Intern..
2022.08.15 -
자바스크립트(JavaScript) 언어의 특성 몇 가지 정리
자바스크립트(JavaScript)의 자료형과 특성 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트는 느슨한 타입(loosely typed)의 동적(dynamic) 언어다. 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능하다. 형 변환 (type conversion) 자바스크립트는 타입이 매우 유연한 언어다. 너무 유연해서 탈이다 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이런 과정을 형 변환이라고 한다. Window.alert() 메서드가 전달받은 값의 자료형과 관계없이 문자열로 변환하여 보여주는 것이나, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예라고 볼 ..
2022.08.11 -
[JS] 자바스크립트로 덱(Deque) 구현하기
덱(Deque)이란? Double-ended queue의 약자로 삽입과 삭제가 양쪽 끝에서 모두 발생할 수 있는 선형 자료구조이다. 자바스크립트를 이용해서 양방향 큐(Deque)를 구현해보자. 구현할 메서드(method) 데이터 전체 반환 Deque.getBuffer() 데이터가 비어 있는지 확인 Deque.isEmpty() 앞쪽 데이터 추가 / 삭제 Deque.pushFront() / Deque.popFront() 뒤쪽 데이터 추가 / 삭제 Deque.pushBack() / Deque.popBack() 가장 앞쪽 데이터 반환 Deque.front() 가장 뒤쪽 데이터 반환 Deque.back() 데이터 개수 확인 Deque.size() 데이터 전체 삭제 Deque.clear() 양방향 큐 구현 - ge..
2022.04.13