JavaScript 11

JavaScript - 원시값 (Primitive Values) 과 객체 (Feat. CloneDeep)

* 원시값이란? 불변한값 원시값의 종류 1. 문자열(string) 2. 숫자(number) 3. 불리언(Boolean) 4. null과 undefined *객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조 let person = { name: "John", age: 30, city: "New York" }; *깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) 1. 깊은 복사(Deep Copy) 원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법 // 깊은 복사 예제 let originalObject = { name: "John", address: { city: "New York" } }; let deepCopyObject = JSON..

JavaScript 2023.12.07

Angular - 타입스크립트의 장점

TypeScript 이란? - 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 특징 - 컴파일 언어, 정적 타입 언어 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점도 존재. - 자바스크립트 슈퍼셋(Superset) : 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어, 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다. - 객체 지향 프로그래밍 지원 : 타입스크립트는 ES6(ECMAScript ..

Angular 2023.03.20

JavaScript(JS) - 호이스팅과 var, let, const

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의해야 한다. 재할당이 필요없는 경우, const를 사용해 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋다. 1) function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); 일반적으로 선언 2) catName("클로이"); 먼저 선언했지만 가능 function catName(nam..

JavaScript 2023.03.20

Angular - ngrx in State (1) Store

* why use Store? 사용하는 이유? - 상태관리를 제공 언제 사용해야될까? 사용자 상호작용이 많고 여러 데이터 소스를 공유할때 외부 저장소에서 유지될때 다른소스의 작업에 영향을 받을때 단점? - 코드가 짧거나 빠른 방법은 아니다. 또한 많은 파일을 사용하게 된다. Type Safety - 아키텍처 전제에 타입스크립트를 사용해서 엄격한 형식으로 안전성이 높고 패턴 사용으로 더 높은 품질의 코드가 생성된다. Immutability and Performance - 변경할수 없는 단일 데이터 구조를 기반으로 구축되어 비교적 간단한 작업 가능 Encapsulation - 외부 리소스 사용으로 인한 부작용에서 격리시킬수 있다. Serializability - 직렬화 가능성을 제공하고 이..

Angular 2023.03.07

[JavaScript] 프로그래머스 코딩테스트 ChatGPT 로 풀기 - 2

두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks" 또한 위 규칙대로 바..

코딩테스트 2023.02.27

[JavaScript] 프로그래머스 코딩테스트 ChatGPT 로 풀기 - 1

*개요 - 하도 ChatGPT가 난리 법석이여서 코테를 얼마나 잘푸는지 확인해보고 싶었다. - 코테가 어려워서 다양한 풀이 방법을 보고 싶었다. - 코테 싫어!!!! 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가..

코딩테스트 2023.02.27

ECMAScript 2022 특징

1. 클래스 필드 - 속성/메소드 앞에 '#'을 붙이면 private filed가 된다. - static 메소드를 가질 수 있다. 2. in 을 사용한 프라이빗 필드 체크 3. 정규식 플래그 d 4. await 호출하기 - async함수가 없어도 await를 사용할 수 있게 됨 5. .at() 매서드 추가 - at()안의 숫자로도 접근할 수 있게 됨 - 마이너스로 뒤에서부터 요소를 조회할 수 있음 6. Object.hasOwn() 추가 - 기존 오브젝트뿐만 아니라 다른 프로퍼티에서도 사용가능 7. Error.prototype.cause - 에러의 더 상세한 원인을 기술할 수 있음 자세한 특징 설명은 아래 참조 https://yozm.wishket.com/magazine/detail/1570/

JavaScript 2023.02.24

JavaScript(JS) - 프로그래머스 문제풀기 (feat.배열,김선생)

​ 문제1 : arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return => 중복을 찾지만 순서를 유지해야된다. (기존 중복제거 함수들 사용불가, 사용하면 [1,3,0] return) ​ 해결: 포문으로 돌려서 계속해서 데이터를 저장하고 비교하는 방식으로 풀어봄 => ​ let result = []; let check = ""; for (let i=0; i 인덱스값을 추출 ​ 해결: findIndex 배열 함수를 사..

JavaScript 2023.02.20

JavaScript(JS) - window.open(); url 짤림 현상

페이지이동시에 보통 window.location.href 를 마니 사용한다 윈도우를 사용해서 기존의 창을 냅두고 새창을 띄울때는 window.open(관련 url);을 사용한다. 하지만 이번에 작업하면서 뒤에 파라메터가 끊기면서 제대로 작동이 안되었다. 찾아보니깐 단순이 url 복사 말고 이런식으로 해주니 제대로 들어갔다. window.open(path, '_blank', 'noreferrer'); ​ 다음부터는 헤메지고 말고 이런식으로 작성해보자.

JavaScript 2023.02.15

JavaScript(JS) - Math

Math - 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN 위에 사이트에서 다양한 형태를 볼수있지만 최근에 내가 썻던거 위주로 정리해보았다. 1) Math.abs( X ) - X 값을 절대값 (양수)으로 반환한다. => 2) Math.celi( ) - 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환한다. => 3) Math.round( ) - 함수는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환한다. => 4) Math.trunc( ) - 주어진 값의 소수부분을 제거..

JavaScript 2023.02.15
반응형