Slow and Steady

next.js에서 tailwind를 입히려는데 적용이 안돼서 한참 고민하다 npm run dev로 돌려보니 적용이 되었다 🥲 

이 참에 next.js를 설치할 때 package.json 파일에 자동으로 추가되는 scripts 명령어를 살펴보자 ~ 

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

1. dev

개발 모드에서 next.js를 시작한다.

source map과 hot code reloading이 제공되어 디버깅 시 유용하다.

2. build

프로덕션 용도로 애플리케이션을 빌드한다.

- 빌드 과정에서 모든 페이지와 컴포넌트가 번들링되고, 최적화되어 해당 결과물이 .next 디렉토리에 저장된다.

3. start

프로덕션 모드에서 프로젝트를 실행한다

- 빌드된 애플리케이션 사용: next build 명령어로 미리 빌드된 애플리케이션을 사용한다.

- node.js 서버를 시작한다.

4. lint

기본 설정된 eslint 설정을 사용해 eslint 실행한다.

---

적용이 안되었던 이유는 start 명령어를 실행해서, 이전에 빌드된 내용이 실행되었기 때문이다.

dev와 start의 차이, 즉 production 모드와 development mode를 잘 이해하면 webpack 설정 시 최적화 적용에도 도움이 될 것 같다.

5-"1" // 결과값: 4

자바스크립트의 "type coercion (강제적 변환)"

• 연산에 필요한 경우 값을 한 타입에서 다른 타입으로 변환한다.
• '-'는 숫자로만 작동할 수 있으므로, 연산자는 문자열 "1"을 숫자로 바꾸는 숫자 변환을 트리거한다.

5+"1" // 결과값 "51"

• 자바스크립트에서 "+"가 항상 숫자 변환을 트리거하는 것은 아니다. ("Hello, " + "World!" => "Hello, World!")
• 연산자를 숫자와 문자열과 함께 사용하면 숫자를 문자열로 변환한 뒤 연결한다.

[] + {} // 결과값 '[object Object]'

• "+" 연산자가 배열과 객체를 모두 문자열 표현으로 변환한다.
• 빈 배열은 ""로 변환되고, 빈 객체 {}는 "[object Object]"로 변환된다

{} + [] // 결과값 0

빈 객체가 표현하는 것:
{
// nothing here
} + []

• 이 경우, 빈 객체는 빈 객체로 간주되지 않고 "빈 코드 블록" { </> } 으로 간주된다.
• "+" 연산자는 빈 배열을 숫자로 변환하고, 빈 배열이 숫자로 변환되면 0이 된다. 

true + true + true // 결과값 3
true - true // 결과값 1

• "+" 연산자를 boolean 타입과 함께 사용할 때, 자바스크립트가 이를 숫자로 변환한다.
• 결국 true는 1인 이진 참으로 변환되고, 1+1+1의 연산을 수행한다.

function f() {
	try {
    	return 1;
    } catch {
    	return 2;
    } finally {
    	return 3;
    }
}

// 결과값 3

• 함수 내부에서 try 블록은 1을 반환하려고 시도하지만,
  • finally 블록은 예외 발생 여부와 관계 없이 항상 실행되며,
  • try 블록의 반환을 재정의할 수 있는 권한도 가지고 있다. 

1.000000000001.toString(); // 결과값 "1.000000000001" (String)
1.00000000000000001.toString(); // 결과값 "1"
0.1 + 0.2 // 결과값 0.30000000000000004

• 자바스크립트가 16자리가 넘는 숫자를 정확하게 처리할 수 없기 때문에, 이러한 값을 "1"로 반올림한다.

0.1 + 0.2 === 0.3 // 결과값 false

• 0.1 또는 0.2와 같은 일부 소수 분수는 2진수로 정확하게 변환할 수 없다.
• 자바스크립트에 0.1 또는 0.2를 사용하라고 지시하면, 이를 2진수로 표현하려 하고, 이 과정에서 0.1이나 0.2는 그보다 조금 더 큰 숫자가 된다.
• 그래서 0.1과 0.2를 더하면, 총합이 0.3과 달라진다.

true == 1 // 결과값 true
true === 1 // 결과값 false​

• 자바스크립트는 true를 1로 취급하기 때문에 "1 == 1"의 연산이 되어 true를 반환한다.
• 자바스크립트는 두 개의 등호('==')를 사용할 때 서로 다른 유형의 데이터를 서로 일치하도록 변환하여 계산한다.
• 그러나 세 개의 등호('===')를 사용할 때 type을 포함하여 양쪽의 데이터가 정확히 동일한지 확인한다. 

"b" + "a" + +"a" + "a" // 결과값 "baNaNa"

+"1" // 1
+"2" // 2

• 문자열 옆에 있는 "+"는 해당 문자열을 숫자로 변환하려 하나, 문자 "a"를 숫자로 변환할 수 없기 때문에 "NaN"을 반환한다.
• 결과적으로 b + a + NaN + a의 결과를 반환한다.

출처 노마드코더 https://www.youtube.com/watch?v=qW1V-o2RwKw 

리드미 프로젝트 코드를 다시 보다가 날짜 연산에 왜 '+'를 넣었지? 싶어서 찾아봤다.


Date 타입의 연산 과정에서 발생하는 오류로, js에서는 동작하지만 ts에서는 오류로 처리된다.

new Date(new Date() * 1))

위 코드는 오류, Date()로 생성한 값을 연산에 사용하기 때문이다. 

이를 해결하는 방법은 단항 연산자 (Unary operator)인 '+'를 지정하면 된다.

new Date(+new Date() * 1)

위와 같이 지정하면 new Date()의 결과를 숫자(Number)로 취급하기 때문에 연산에 사용할 수 있다.

# 1. navigate에 tokenId 넘기기
const moveToDetail = (tokenId: string) => {
	navigate('/detail/'+ tokenId);
}

# 2. path에 params 경로 추가하기
<Route path="/detail/:tokenId" element={<Detail />} />

# 3. useParams()로 tokenId 받기.
const { tokenId } = useParams();

merged %>% relocate(key) -> merged

merged 데이터프레임에 있는 key 열을 맨 앞으로 옮기기