수달씨의 개발공간

[JavaScript/TypeScript] -0과 0의 차이와 처리 방법

📌 -0과 0의 차이점

JavaScript와 TypeScript에서는 -0과 0이 다르게 인식될 수 있습니다.

🚀 -0이 발생하는 경우

console.log(1 / Infinity);  // 0
console.log(1 / -Infinity); // -0
console.log(-0 === 0); // true

✅ -0과 0은 === 비교에서는 동일하지만, 내부적으로 다르게 저장됩니다.

📌 Object.is()를 사용하면 구분 가능

console.log(Object.is(-0, 0));  // false (-0과 0은 다름)
console.log(Object.is(-0, -0)); // true

✅ Object.is()를 사용하면 -0과 0을 구별할 수 있습니다.

📌 -0을 0으로 변환하는 방법

1️⃣ 삼항 연산자 사용 (val === 0 ? 0 : val)

const normalizeZero = (val: number) => (val === 0 ? 0 : val);
console.log(normalizeZero(-0)); // 0

✅ -0을 0으로 변환하는 가장 간단한 방법입니다.

2️⃣ Math.abs() 활용

console.log(Math.abs(-0)); // 0
console.log(Math.abs(0));  // 0

✅ Math.abs()를 사용하면 자동으로 -0이 0으로 변환됩니다.

3️⃣ Object.is()를 활용한 정확한 변환

const fixNegativeZero = (val: number) => (Object.is(val, -0) ? 0 : val);
console.log(fixNegativeZero(-0)); // 0
console.log(fixNegativeZero(5));  // 5

✅ Object.is()를 사용하면 -0만 정확히 감지하여 변환할 수 있습니다.

📌 -0을 고려해야 하는 경우

• 배열에서 -0 제거

const arr = [0, -0, 1, 2];
const normalizedArr = arr.map(fixNegativeZero);
console.log(normalizedArr); // [0, 0, 1, 2]

✅ map()을 사용하여 -0을 0으로 변환할 수 있습니다.

• JSON 변환 시 -0 유지 문제

console.log(JSON.stringify([-0, 0])); // "[0,0]" (-0이 자동으로 0으로 변환됨)

✅ JSON.stringify()는 -0을 0으로 자동 변환합니다.

📌 결론

• -0과 0은 === 비교에서는 같지만, Object.is()로 구별할 수 있음.
• Math.abs(), Object.is(), 삼항 연산자를 사용하여 -0을 0으로 변환 가능.
• JSON.stringify()는 -0을 자동으로 0으로 변환함.

✅ 이제 -0을 다루는 법을 확실히 이해했나요? 🚀

[TypeScript] Map 사용법 정리 - 키-값 기반 데이터 관리

📌 TypeScript Map이란?

Map은 키(Key)와 값(Value) 쌍을 저장할 수 있는 데이터 구조입니다. TypeScript에서 Map은 ES6 Map을 기반으로 하며, 빠른 검색, 추가, 삭제가 가능합니다.

📌 1. Map 생성 및 기본 사용법

const myMap = new Map<string, number>();
myMap.set("apple", 10);
myMap.set("banana", 20);
myMap.set("orange", 30);

console.log(myMap);
// Map { 'apple' => 10, 'banana' => 20, 'orange' => 30 }
console.log(myMap.size); // 3

✅ 키-값 쌍을 저장 가능
✅ size 속성으로 요소 개수 확인 가능

📌 2. 요소 추가 (set()) & 조회 (get())

const map = new Map<string, number>();
map.set("apple", 5);
map.set("banana", 10);
console.log(map.get("apple")); // 5
console.log(map.get("banana")); // 10
console.log(map.get("grape")); // undefined (없는 키)

✅ set()을 사용하여 키-값 쌍을 저장
✅ get(key)를 사용하여 값 조회 가능

📌 3. 요소 존재 여부 (has())

console.log(map.has("apple")); // true
console.log(map.has("grape")); // false

✅ has()를 사용해 특정 키가 존재하는지 확인 가능

📌 4. 요소 삭제 (delete()) & 전체 삭제 (clear())

map.delete("banana");
console.log(map); // Map { 'apple' => 5 }
map.clear();
console.log(map); // Map {}

✅ delete(key)를 사용해 특정 키 삭제
✅ clear()를 사용하면 모든 요소 삭제

📌 5. Map 순회 (forEach(), for...of)

const map = new Map([
  ["apple", 5],
  ["banana", 10],
  ["orange", 15]
]);

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// apple: 5
// banana: 10
// orange: 15

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

✅ forEach()와 for...of를 이용해 Map을 순회 가능

📌 6. Map → Array 변환

const entries = Array.from(map.entries());
console.log(entries);
// [ [ 'apple', 5 ], [ 'banana', 10 ], [ 'orange', 15 ] ]

const keys = Array.from(map.keys());
console.log(keys); // [ 'apple', 'banana', 'orange' ]

const values = Array.from(map.values());
console.log(values); // [ 5, 10, 15 ]

✅ 키 또는 값을 배열로 변환 가능

📌 7. Object → Map 변환

const obj = { apple: 5, banana: 10, orange: 15 };
const map = new Map(Object.entries(obj));
console.log(map);
// Map { 'apple' => 5, 'banana' => 10, 'orange' => 15 }

✅ 객체를 Map으로 변환 가능

📌 8. Map → Object 변환

const map = new Map([
  ["apple", 5],
  ["banana", 10],
  ["orange", 15]
]);

const obj = Object.fromEntries(map);
console.log(obj);
// { apple: 5, banana: 10, orange: 15 }

✅ Map을 객체로 변환 가능

📌 9. Map과 Object 비교

기능 Map Object

✅ 대량 데이터를 저장하고 빠르게 검색하려면 Map이 유리
✅ 일반적인 객체 데이터 저장은 Object 사용이 적합

📌 정리

• Map은 키-값 쌍을 저장하는 효율적인 데이터 구조
• 모든 데이터 타입을 키로 사용할 수 있음
• 객체보다 빠른 검색 및 데이터 관리가 가능
• 배열과 쉽게 변환 가능하며 순회 및 조작이 유연함

✅ 이제 Map을 자유롭게 활용할 수 있겠지? 🚀
추가 질문이 있으면 알려줘! 😊

[TypeScript] Set 사용법 정리 - 중복 없는 데이터 관리

📌 TypeScript Set이란?

Set은 중복을 허용하지 않는 고유한 값들의 집합을 저장하는 자료구조입니다.
TypeScript에서 Set은 ES6 Set과 동일하게 동작하며, 유일한 값 저장, 빠른 검색 및 삭제에 적합합니다.

📌 1. Set 생성 및 기본 사용법

const mySet = new Set<number>(); // 숫자형 Set 생성
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(2); // 중복 추가 → 무시됨

console.log(mySet); // Set { 1, 2, 3 }
console.log(mySet.size); // 3

✅ 중복된 값은 자동으로 제거됨
✅ size 속성을 사용해 요소 개수 확인 가능

📌 2. 요소 추가 (add())

const set = new Set<string>();
set.add("apple");
set.add("banana");
set.add("apple"); // 중복 → 추가되지 않음

console.log(set); // Set { 'apple', 'banana' }

📌 3. 요소 삭제 (delete())

const set = new Set([1, 2, 3]);
console.log(set.delete(2)); // true (성공적으로 삭제됨)
console.log(set.delete(5)); // false (존재하지 않는 값)
console.log(set); // Set { 1, 3 }

✅ delete()는 삭제 여부를 true / false로 반환

📌 4. 요소 확인 (has())

const set = new Set([10, 20, 30]);
console.log(set.has(20)); // true
console.log(set.has(40)); // false

✅ has()를 사용하면 특정 요소가 존재하는지 빠르게 확인 가능

📌 5. 모든 요소 삭제 (clear())

const set = new Set(["A", "B", "C"]);
set.clear();
console.log(set.size); // 0

✅ clear()를 호출하면 Set의 모든 요소가 삭제됨

📌 6. Set 순회 (forEach(), for...of)

const set = new Set(["A", "B", "C"]);

set.forEach((value) => {
  console.log(value);
});
// 출력: A B C

for (const value of set) {
  console.log(value);
}
// 출력: A B C

✅ forEach()와 for...of를 이용해 Set을 순회 가능

📌 7. Set → Array 변환 (Array.from(), 스프레드 연산자)

const set = new Set([1, 2, 3, 4]);
const arr1 = Array.from(set);
const arr2 = [...set];

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

✅ 배열로 변환하면 인덱스를 활용한 접근이 가능함

📌 8. Array → Set 변환 (new Set())

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueSet = new Set(arr);

console.log(uniqueSet); // Set { 1, 2, 3, 4, 5 }

✅ 배열에서 중복 요소를 제거할 때 유용함

📌 9. Set을 활용한 유니크 배열 생성

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

✅ Set을 사용하면 간단하게 중복 제거 가능

📌 10. Set과 Map 비교

기능 Set Map

📌 Set 사용 시 주의점

1. 인덱스가 없기 때문에 특정 위치 요소를 직접 접근할 수 없음.

   const set = new Set([10, 20, 30]);
   console.log(set[1]); // undefined
   

2. 객체를 Set에 추가할 경우 참조(Reference) 비교가 적용됨.

   const obj1 = { id: 1 };
   const obj2 = { id: 1 };
   const set = new Set();
   
   set.add(obj1);
   set.add(obj2);
   
   console.log(set.size); // 2 (객체가 다르다고 인식됨)
   

📌 정리

• Set은 중복을 허용하지 않는 고유한 값의 집합을 저장하는 자료구조.
• 빠른 삽입/삭제 (O(1)) 가능하지만, 인덱스 접근은 불가능.
• Array.from(set) 또는 [...set]을 활용하여 배열로 변환 가능.
• 배열의 중복을 제거하는 용도로 유용.
• 특정 요소가 존재하는지 확인하려면 has() 사용.

✅ 이제 Set을 자유롭게 사용할 수 있겠지? 🚀 추가 질문이 있으면 알려줘! 😊

It is impossible to add the field 'created_at' with 'auto_now_add=True' to description without providing a default. This is because the database needs something to populate existing rows.

------------

수정

선택 옵션창이 나오면 1, 1 을 선택

-------------

create_at 필드를 추가하고 makemigrations를 하자 나온 에러이다.

추가한 내용

class Description(models.Model):
    LOCALE_CHOICES = [
        ('KO_KR', 'KOREAN'),
        ('EN_US', 'ENGLISH/US'),
    ]
    locale = models.CharField(
        max_length=5,
        choices=LOCALE_CHOICES
    )

    detail = models.TextField()
    rough = models.TextField()

    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

에러 내용으로는 auto_now_add 를 True로 한 경우 default 값이 필요하다는 것..

해결 방법은 매우 간단하다.

default를 설정해 주면 된다.

from django.utils import timezone

class Description(models.Model):
    LOCALE_CHOICES = [
        ('KO_KR', 'KOREAN'),
        ('EN_US', 'ENGLISH/US'),
    ]
    locale = models.CharField(
        max_length=5,
        choices=LOCALE_CHOICES
    )

    detail = models.TextField()
    rough = models.TextField()

    created_at = models.DateTimeField(auto_now_add=True, default=timezone.now())
    updated_at = models.DateTimeField(auto_now=True)

vscode에서 javascript 디버깅 방법 정리

javascript 파일이 열려 있는 상태에서 [F5] 를 누르거나 Run > Start Debugging 을 선택

Select environment 에서 원하는 브라우저 선택

launch.json 수정

기본생성

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

- url을 남겨두면 계속 url로 접속시도를 하므로 삭제

- webroot을 file로 수정

수정 후

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

debugging 방법

javascript 파일을 열고, 원하는 디버깅 위치에 [F9]를 눌러서 브레이크 포인트 생성

[F5] 또는 Run > Start debugging을 선택하여 디버깅 시작

빨간 네모의 디버그 컨트롤 창이 생성 되고 해당 브라우저의 창이 뜹니다.

브레이크 포인트에 걸리면 위와 같이 표시가 됩니다.

F5, F10, F11 등 키보드를 통해 조작하거나 디버그 컨트롤 창을 직접 클릭해서 사용하면 됩니다.

ofstream 사용하려고 하는데 

이항 '<<': 오른쪽 피연산자로 'std::string' 형식을 사용하는 연산자가 없거나 허용되는 변환이 없습니다.

위와 같은 에러가 나왔다........

예제 코드같은걸 찾아봐도 원인을 못찾다가.......

구글링을 통해서 찾았다.

문제의 코드

sub.cpp

sub.h

해결방법은 #include<string>  요것이었다.

iostream만 include하면 되는줄 알았는데

string 도 포함해주어야 한다....

python으로 GUI 프로그램을 만들고 있다.

기본틀은 pyqt로 하였다.

파일 저장 경로를 설정해야 하는 상황인데...

문제는 pyqt로 SaveFileDialog를 만들 수 없다는 것이다...(만들 수는 있겟지만..)

찾아보니 방법은 있엇다.

우선......

필요한 모듈을 임포트 해주자.

구글링을 하다보면 'import tkFileDialog '를 하라고 하는데... 나는 설치가 안된 것으로 나와서 tkinter.filedialog 를 사용한다..

사용법은 매우 간단..

끝이다. asksaveasfilename() 메소드가 선택한 파일 경로를 리턴해 준다.

python에서 파일 압축을 해야 한다.

제일 일반적인 zip 형식으로 해보자.

zipfile 모듈을 import 시켜주고 아래 코드처럼 작성해보자.

우선 ZipFile 인스턴스를 만들자. 압축하고자 하는 경로와 'w'(쓰기)를 넣어 만들고

write메소드를 써서 압축하고자 하는 파일을 압축한다.

마지막으로 인스턴스를 close메소드로 닫아주면 된다.

매우 심플하다.

그동안 플래시 플레이어 때문에 계속 안되었었는데.. 해결해서 드디어 올린다.. ㅠㅠ

해결 방법도 써놔야겟...

내가 작성한 코드가 어느정도 시간이 걸리는지 측정을 해야 하는 상황이 생겼다.

c++에서는 clock() 함수를 사용하면 되는데 매우 간단하다.

코드

time.h 헤더를 추가한 후 clock() 함수를 사용하면 된다.

ui파일 사용하는 방법은 2가지가 있다.

1. .py파일로 변환해서 사용

2. python코드에서 ui파일 로드해서 사용

1번은 이미 정리 했고.

2번을 알아보자.

예전에 만든 untitled.ui파일을 로드해서 사용해 보겠다.

우선 untitled.ui가 있는 경로에 파이썬 파일을 생성한다.

나는 uiTest.py로 만들었다.

이제 로드하는 코드를 작성해보자.

실행을 시켜보면.

1번 방법보다는 2번 방법을 사용하는 것을 추천한다. 내가 아니라 다른 사람들의 의견이다.

난 사용한지 얼마 안되서.. 

2번 사용의 이점은 Designer로 수정하고 바로바로 코드에 적용할 수 있다는 것.