kimjiji_0.log

리액트

Tue, 06 Jan 2026 19:02:19 GMT

리액트 공부하면서 노션이 더 편해서 먼저 정리ㅠ 다시 복습하면서 벨로그로 정리하자ㅠ.ㅠ

https://www.notion.so/2dcdf8931d14809984c2d7a3849db278?source=copy_link

Node.js

Tue, 06 Jan 2026 18:58:57 GMT

리액트 들어가기전 간단한 node정리! 강의는 한 입 크기로 잘라 먹는 리액트

`node`는 “자바스크립트 파일 실행기”

node는 파일을 직접 실행하는 명령어.

자바스크립트를 구동하는 구동기 역활, 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경이다. ctrl+` ⇒ 터미널

->현재 경로

새로운 node.js 패키지를 생성하기 위해 새로운 패키지를 초기화 or 새로 만들어 달라 ⇒ npm init

패키지 이름이 뭐냐(자동값) ⇒바꾸고싶으면 바꾸기

일단 엔터만 클릭해서 정보 입력해주고 패키지 생성하기

그럼 기본적으로 넣어준게 파일 만들어줌

js파일 만들어서 node랑연결시켜주는방법

node index.js(파일이름,경로) “Node로 src/index.js 파일 실행해줘”라는 뜻.

잘 실행된걸 확인

인덱스파일이 src파일 안에 있었다면 node src/index.js 경로를 반드시 명시해줘야함 ‘src폴더 안에 인덱스 파일 실행하라~ 하는것’

🔸파일이 여러개일때 `scripts`

🔹`npm`은 “명령어를 저장해두고 실행하는 관리자”

스크립트 안에 있는 매크로들!

🔹npm run `start`

"scripts": {
  "start": "node src/index.js"
}


그럼
>
```bash
npm run start



= npm이 `start`라는 이름을 찾아서

= 그 안에 적힌 `"node src/index.js"`를 대신 실행해줘요.

일종의 매크로 역활을 하는것 경로를 지정!

![](https://velog.velcdn.com/images/kimjiji_0/post/8568957f-c674-4b47-9b3c-b76af300c488/image.png)


그래서 **start**에 경로를 지정해 놓고 npm run `start` 라고 하면 연결된걸 확인할수있음

- **node** = “파일 실행기” → `node 파일경로`
- **npm run** = “단축명령 실행기” → `npm run 별칭`

## 🔸모듈 시스템

![](https://velog.velcdn.com/images/kimjiji_0/post/28c09b67-fd82-4878-895b-46fe11fed674/image.png)


하나의 스크립트에 모든 기능을 넣으면 코드 줄이 너무 길어지니까 나눠쓰는

![](https://velog.velcdn.com/images/kimjiji_0/post/b294f908-a6c8-43f9-bb6b-3c41129dea80/image.png)


일단 이 2개만 배울것임

### 🔹 CJS(Common JS 모듈 시스템)

- 두개를 연동시켜볼꺼얌

![](https://velog.velcdn.com/images/kimjiji_0/post/1aeb2d71-d617-46f2-b42d-2f949df934a6/image.png)


![](https://velog.velcdn.com/images/kimjiji_0/post/11a68343-f9de-49fe-a36d-9d1e6ebd6579/image.png)


**`모듈(module)`**은 “파일 하나”라고 생각

**`module.exports`**는 이 파일에서 밖으로 내보낼 것 목록

![](https://velog.velcdn.com/images/kimjiji_0/post/b35c3f8e-857d-4d84-a009-ff79bc02965a/image.png)


![](https://velog.velcdn.com/images/kimjiji_0/post/9ac026bf-ac97-4495-ae9f-906b436a8158/image.png)


벨류값으로 사용되는 변수의 이름과 키값이 똑같을 경우 변수나 함수의 이름만 사용해도 됨

모듈이라는 내장객체에 export(내보내기)라는 프로퍼티에 객체를 저장해주는

각각 내보내고 싶은 값을 넣어주면 댐

⇒

- **객체(object)** = `{}` 처럼 생긴 “값 묶음”
- **프로퍼티(property)** = 객체 안의 “칸/이름표(키)”
- 

const obj = { key: value };

키(key): 왼쪽 이름표(속성 이름)

벨류(value): 오른쪽에 실제로 들어가는 값(데이터)

예시:

>```jsx
const user = {name:"지지",age:20 };

키: name, age
벨류: "지지", 20

예를 들어:

const person = {name:"지지",age:20 };


여기서

- `person` = 객체
- `name`, `age` = person 객체의 **프로퍼티**
- `"지지"`, `20` = 그 프로퍼티에 들어있는 값

---

### 그럼 강의 문장으로 돌아가서

Node에서는 `module`이라는 “내장 객체”가 있고,

그 안에 `exports`라는 **프로퍼티(칸)**가 있음.

즉 이런 구조:

- `module` (객체)
- `exports` (프로퍼티)

그리고 이 코드:

>```jsx
module.exports = { add, sub };



이건 말 그대로

> module 객체의 exports라는 칸에
> 
> 
> `{ add, sub }` 라는 **객체를 넣어준다**
> 

라는 뜻.

---

### “넣어준다”를 눈으로 보이게 하면

>```jsx
module.exports// 처음엔 비어있거나 기본값
>
module.exports = { add, sub };// 이제 exports 칸에 이 객체가 저장됨



![](https://velog.velcdn.com/images/kimjiji_0/post/ffae34c9-7e0e-4633-b3cf-e938d0063e69/image.png)


처음에 require()함수로 불러오는것

require(”./math”);로 하면 불러와짐. 이걸 변수로 담기

`const moudleDate = require(”./math”);`

![](https://velog.velcdn.com/images/kimjiji_0/post/a4db20cb-0472-462f-8733-4fe09554ec70/image.png)


add,sub가 잘 출력된걸 확인할수있음

그럼 `moudleDate` 함수안에는 {add: [Function: add], sub: [Function: sub]}가 담겨있는것임.

![](https://velog.velcdn.com/images/kimjiji_0/post/3308fe18-47b1-456b-9afa-b1ed50866962/image.png)


3과-1이 잘 출력되었음

const moudleDate = require(”./math”);을 그대로 쓸필요는 없음 const `{ add, sub }`= require(”./math”);로 해도 동일함

## 🔸필요한 것만 바로 꺼내 받기 (구조분해 할당)

>```jsx
const { add, sub } =require("./math");
>
add(1,2);
sub(1,2);



👉 “상자에서 필요한 물건(add, sub)만 바로 꺼내서 손에 쥐는 방식”

---

### 🤔왜 둘이 동일해?

사실 방법 B는 내부적으로 이런 뜻:

>```jsx
const moduleData =require("./math");
const add = moduleData.add;
const sub = moduleData.sub;



이걸 한 줄로 줄인 게

>```jsx
const { add, sub } =require("./math");



## 🔸ESM (ES 모듈 시스템)

좀 더 최신식

이걸 쓰려면 `package.json` 에서 es모듈 시스템을 쓰겟다고 해줘야함

![](https://velog.velcdn.com/images/kimjiji_0/post/ac13a864-5730-4910-b395-98efe03f2d94/image.png)


그래서 es를 쓴다고 해놓고 common꺼를 쓰면 오류가 남

⇒ 기본적으로 함께 쓸 수 없음

![](https://velog.velcdn.com/images/kimjiji_0/post/6251320d-9cc5-4df1-9759-831d379669fb/image.png)


math.js부분을

>```jsx
module.exports = { add, sub };를
//

export { add, sub }; 로 바꿔줘야함


또한 index.js부분을

>```jsx
const moduleData =require("./math");를
//

import mul, { add, sub } from "./math.js"; 로 바꿔야함.


여기서 주의할점은 확장자를 반드시 적어줘야함. (ㅇㅇ**.js**말하는거)

>```jsx
// math 모듈
>
export function add(a, b) {
  return a + b;
}
>
export function sub(a, b) {
  return a - b;
}

//로 한번에 적어주면 더 간편하게 작성가능!


### 🔹default ⇒ 이름 내맘대로 정하기✨

⇒ 대표 1개만 내보낼때 이름 맘대로 가넝

>```jsx
// math 모듈
export default function multiply(a, b) {
  return a * b;
}

이 파일에서 multiply 함수 하나를 기본(default)으로 내보낼게 라는 뜻

//index.js
import multiply from "./math.js";
import mul from "./math.js";


mul이라고 적어도 알아먹음. 

#### ✅ 여러 개 내보낼 땐 `named export`를 쓰고, 이름이 기본적으로 고정

- `export const add = ...` 처럼 이름 붙여서 내보내면
- `import { add } from ...` 처럼 **그 이름으로** 가져와야 해.

>```jsx
//동일한 경로로 부터 import문이 여러개라면 합쳐서 사용도 가넝
import mul, { add, sub } from "./math.js";

🤔그럼 왜 default는 이름을 자유롭게 해놨을까?

“이 파일에서 대표로 하나만 내보내는 거니까”

가져오는 사람이 원하는 컨벤션에 맞게 이름을 맞출 수 있게 해준 거.

라이브러리 사용

🔸Day.js

https://www.npmjs.com/

install에 적힌 명령어를 내 터미널에 적어주면 댐

그럼 라이브러리가 잘 설치 되었다고 알람이 뜨면서

랜덤컬러라는 라이브러리의 버전이 표시댐

node_modules
- 라이브러리가 저장되는곳

package-lock.json
- 패키지가 사용하는 정확한 정보를 저장하고있음

package.js(기존) 과 package-lock.json(라이브러리생성후)의 차이는??

⇒package-lock.json는 정확한 버전이 올라감

//package.js
"dependencies": {
    "randomcolor": "^0.6.2"
  }

//package-lock.json "node_modules/randomcolor": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz", "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==" }

^ → Version Range(버전 범위) 대략적인 버전이라는 뜻

✅응용하기

라이브러리에서 가져올때는 from 뒤에 경로를 적는게 아니라 라이브러리 이름을 적어야함.

//randomcolor 라이브러리에 있는 기본값 불러오기
import randomcolor from "randomcolor";

const color = randomcolor(); console.log(color);

그러면 랜덤컬러가 잘 나옴

🔸`npm instal`라이브러리 지워졌을때

//package.js
"dependencies": {
    "randomcolor": "^0.6.2"
  }

package.js에 정보만 가지고 있다면 원래 다시 설치 가넝

터미널에 npm instal 혹은 npm i 입력하면

package.js에 설치된 버전을 기준으로 다시 등록해줌 → 파일 생성 완!

⇒ 다른사람과 공유하거나 업로드할때는 node_modules 파일을 공유하지 않음! 파일 크기도 크고 재설치가 가능하기때문에~

Javascript 기초2

Tue, 06 Jan 2026 18:36:02 GMT

🔸연산자

🔹대입 연산자

=는 오른쪽 값을 왼쪽 변수에 넣는 것.

let var1 = 1;
var1 = 20;       // var에 20으로 다시 넣음(값 바뀜)


### 🔹산술 연산자

***  , / , %**  는 +, -보다 우선순위!

>```jsx
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;
>
let num6 = 1 + 2 * 10; // 21출력
let num6 = (1 + 2) * 10; //소괄호 먼저 계산 30출력

🔹복합 대입 연산자(산술 + 대입)

x += 3 는 x = x + 3 이랑 똑같다

let x = 10;

x += 3; // x = x + 3 → 13 x -= 2; // x = x - 2 → 11 x *= 5; // x = x * 5 → 55 x /= 11; // x = x / 11 → 5 x %= 2; // x = x % 2 → 1


### 🔹증감 연산자

(`++`, `--`)는 **“1씩 더하기/빼기”**를 짧게 쓰는 거

1. 기본 뜻
- `x++` : x를 **1 증가**
- `x--` : x를 **1 감소**
- `++x` : x를 **1 증가**
- `-x` : x를 **1 감소**

>```jsx
let num8 = 10;
num++;
console.log(num8);
>
//만약 바로 증감하고 싶다면
console.log((num8 += 1));
console.log(++num8);

1. 전위 연산 ++x

먼저 1 증가하고, 증가된 값 쓰기

    let x = 5;
    console.log(++x); // 6 출력 (먼저 올리고)
    console.log(x);   // 6

    let a = 3;
    let b = ++a;
    console.log(a, b); // 4,4
    실행 순서
    a = a + 1; // a는 4가 됨
    그 다음 b = a; // b는 4
    ```

2. 후위 연산 `x++`

일단 지금 값 쓰고, 나중에 1 증가

    let x = 5;
    console.log(x++); // 5 출력 (일단 5를 쓰고)
    console.log(x);   // 6 (그 다음 증가됨)

let a = 3;
let b = a++;      
console.log(a, b); // 4,3
>
실행 순서
b = a 먼저 됨 → b는 3
그 다음 a가 1 증가 → a는 4
```

4. 후위 감소 x--

let x =5;
console.log(x--);// 5
console.log(x);// 4

5. 전위 감소 -x

let x =5;
console.log(--x);// 4
console.log(x);// 4


### 🔸논리 연산자

1. `||` (OR, 또는)

>```jsx
// 하나만 참이여도 true
let or = true || false;

&& (AND, 그리고)

// 두개 값이 true여야지 true
let and = true && false;


3. `!` (NOT, 반대)

>```jsx
//!true → false
//!false → true
let not = !true;

🔸비교 연산자

1) 크기 비교

> : 크다
< : 작다
>= : 크거나 같다 (이상)
<= : 작거나 같다 (이하)

10 >3 // true
10 <3 // false
10 >=10 // true
9 <=10 // true



#### 2) 같은지 비교

✅ 가장 추천: `===` (엄격 비교)

**값도 같고, 타입도 같아야 true**

>```jsx
10 ===10// true
10 ==="10"// false (숫자, 문자형이라 타입 다름)


⚠️ `==` (느슨 비교)

타입이 다르면 자바스크립트가 **자동으로 형변환**해서 비교. 그래서 헷갈릴 수 있음.

>```jsx
10 =="10"// true (자동 변환해서 같다고 봄)
0 ==false// true
"" ==0// true
null ==undefined// true



초반엔 **웬만하면 `===`만 쓰면 안전**.

---

#### ~~3) 같지 않다(다르다)~~

- `!==` : 엄격하게 다름(추천)
- `!=` : 느슨하게 다름(자동 변환 있음)

>```jsx
10 !=="10"// true
10 !="10"// false (자동변환 때문에 같다고 봄)

4) 문자열 비교도 가능(사전 순서 느낌)

"b" >"a"// true
"10" >"2"// false  (문자열이라 글자 순서로 비교됨!)


그래서 숫자 비교는 문자열 말고 **숫자로 바꿔서** 하는 게 좋음:

`"10" > "2"` 가 false인 이유 (여기서 헷갈림 포인트!)

이건 숫자 10과 2를 비교하는 게 아니라, 문자열 `"10"`과 `"2"`를 비교하는 거라서 **첫 글자부터 비교**하는것.

>한 글자씩 비교 과정
>
- `"10"`의 첫 글자: **"1"**
- `"2"`의 첫 글자: **"2"**
>
사전/문자 순서로 보면 `"1"`은 `"2"`보다 앞이니까,
>
- `"1" < "2"`
>
    그래서 전체도
>
- `"10" < "2"` 가 됨 → 즉 `"10" > "2"`는 **false**
>
여기서 `"0"`까지 볼 필요도 없음. **첫 글자에서 이미 끝**!

>```jsx
Number("10") >Number("2")// true

🔹null 병합 연산자 `??`

null, undefined가 아닌 값을 찾아내는 연산자

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2; //10 let var5 = var1 ?? var3; //20 let var6 = var3 ?? var2; //20

//만약 둘다 undefined가 아니면 첫번째 값이 나옴

let var6 = var2 ?? var3; //10



만약 둘다 undefined가 아니면 첫번째 값이 나옴

### 🔑꿀팁! 회원관리

유저네임이 있으면 유저네임이 나오는거고 없으면 닉네임이 나오는것

>```jsx
let userName;
let userNickName = "Winterlood";
>
let displayName = userName ?? userNickName; //Winterlood

🔹typeof 연산자

‘이 값의 타입이 뭐야?’하고 물어보는것 결과는 항상 문자열로 나옴

typeof 10        // "number"
typeof "hi"      // "string"
typeof true      // "boolean"

//예시 let x = "hello"; console.log(typeof x); // "string"

x = 10; console.log(typeof x); // "number"

x = true; console.log(typeof x); // "boolean"


### 🔹 삼항 연산자

항을 3개 사용하는 연산자

#### 기본 형태

>```jsx
조건 ? 참일때값 : 거짓일때값
>
let age = 20;
>
let msg = age >= 19 ? "성인" : "미성년";
console.log(msg); // "성인"
//age가 19이상이야?하고 물어보는것
>
//if/else로 적었다면?
let msg;
if (age >= 19) msg = "성인";
else msg = "미성년";

조건이 true면 → ? 뒤의 값
조건이 false면 → : 뒤의 값

예시

let var8 = 10;

// 요구사항 : 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀" let res = var8 % 2 === 0 ? "짝수" : "홀수"; console.log(res);

```

🤔여기서 헷갈린게 10 % 2면 5인데 왜 짝수 홀수이지? 하는 의문이 듬

-> 근데 여기서 % 는 나머지 연산자.

10 % 2 는 “10을 2로 나눴을 때 나머지

사탕 10개를 2명에게 똑같이 나눠주면:

한 명당 5개(몫) 받고
남는 사탕은 0개(나머지)

그래서 10 % 2는 0.

그래서 11 % 2는 1

Javascript 기초1

Tue, 06 Jan 2026 18:22:49 GMT

이해하기 쉽게 정리하기

🔸변수

let은 재할당 가능, 대신 재선언 불가

let age;
console.log(age); // undefined
age = 30;
console.log(age); // 30
age = 40;         // ✅ 재할당(값 변경)
console.log(age); // 40

let age는 선언한다 27은 초기화한다라는 뜻

그래서 27은 앞으로 age인것임

🤔Q. age = 30;이라고 선언한다면? console.log(age); -> 30!!

{
let age = 30;
console.log(age); // 30 (안쪽 방 age)
}

→ 이 경우는 { }안에 선언한다면 가능함

🔸상수

const은 재할당 불가능

let은 내용없이 선언이 됐지만 const는 반드시 초기화값을 정해줘야함

const age = 30;
age = 40; // ❌ 에러! (다른 값으로 갈아끼우기 불가)


- `let age = 30; age = 40;` ✅ (값 변경)
- `let age = 30; let age = 40;` ❌ (재선언)

- `const age = 30; age = 40;` ❌ (재할당)
- `const age = 30; const age = 40;` ❌ (재선언)

## 🔸명명규칙(이름 짓기)

### 1. $(달러),_(언더스코어)를 제외한 기호는 사용 할 수 없다.

>```jsx
어디를 위치해도 절때 사용이 안됨.
let #name
let na#me
let name#

2. 숫자로 시작 할 수 없다.

숫자로 사용하고 싶다면 이름의 중간이나 끝에만 사용가넝
let name1; <가능
let 1name; <불가능
정 숫자를 먼저 사용해야겠으면 `$,_`먼저쓰기
let _1name;
let $1name;

3. 예약어를 사용 할 수 없다.

let let = 3;       // ❌ let은 이미 '변수 선언' 의미
const if = 10;     // ❌ if는 조건문
let function = 1;  // ❌ function은 함수 선언
let class = "a";   // ❌ class는 클래스


# 자료형(Type)집합
## 🔸원시타입

프로그래밍에 있어서 가장 기본적인 값들의 타입

### 1. Number Type

사칙연산이 가능함! = 모듈러 연산

자바스크립트는 신기하게도 **정수(10)랑 소수(3.14)를 따로 구분하지 않고** 다 `Number`로 담음.

>```jsx
let a =10;// 정수
let b =3.14;// 소수
// 둘 다 Number 타입

2) 계산도 가능

let x =5;
let y =2;

x + y;// 7 x - y;// 3 x * y;// 10 x / y;// 2.5


### 3) 특이한 숫자 3총사도 Number에 포함돼요

자바스크립트엔 “이상한 숫자”가 있는데 이것들도 `Number`.

#### 🔹Infinity (무한대)

>```jsx
let inf = Infinity

🔹-Infinity (음의 무한대)

let mInf = -Infinity;


#### 🔹NaN (Not a Number인데 타입은 Number…)

“숫자가 나와야 하는데 숫자가 아닌 결과”가 나오면 `NaN`.

연산이 실패했을때 no 넘버라는 뜻

>```jsx
"abc" *3;// NaN

이름은 “숫자 아님”인데, 자바스크립트에서는 Number 타입으로 취급돼서 처음엔 많이 헷갈림.

4) 숫자인지 확인하는 방법(자주 씀)

지금 듣고있는 강의에서 넘기셔서 따로 공부해서 적기

Number.isNaN(NaN);// true
Number.isFinite(10);// true
Number.isFinite(Infinity);// false


### 🔹String Type

덧셈 연산도 지원함

>```jsx
let myName = "지지";

이름을 적을때는 반드시 “” 따옴표 안에 넣어야함! 안그러면 변수로 알아먹어버림

1) String 만들기: 따옴표로 감싸면 문자열!

문자열은 작은따옴표(' '), 큰따옴표(" "), 백틱( ``) 으로 만들 수 있음.

let a ="안녕";
let b ='지지';
let c =`반가워`;


### 2) 문자열 더하기(붙이기)

숫자처럼 더하는 게 아니라 **글자를 붙이는 것**.

>```jsx
"안녕" +"지지";// "안녕지지"
"안녕" +" " +"지지";// "안녕 지지"

3) 숫자랑 문자열을 더하면? → 문자열이 이김!

"10" +1;// "101"  (붙여버림)
10 +"1";// "101"

그래서 계산하려면 숫자로 바꾸기:

Number("10") +1;// 11


### 4) 백틱(``)은 문자열에 값을 넣기 편해요 (템플릿 리터럴 = 백틱)

>```jsx
🔹기존은 + 로 붙여야해서 번거러움
let name = "지지";
let age = 20;
>
"이름은 " + name + ", 나이는 " + age;
>
🔹백틱을 쓴다면 깔끔!
let name ="지지";
let age =20;
>
`이름은 ${name}, 나이는${age}`;
// "이름은 지지, 나이는 20"

5) 문자열 길이(글자 수)

"hello".length;// 5


### 🔸Boolean Type

상태표시

참/거짓만 담는 타입

>```jsx
let a = true;   <- //맞긴하지만 코드읽는사람이 바로 안읽힘
let b = false;  <- //
let isSwitchOn = true; // 읽자마자 “스위치 켜져있어?” 느낌
let hasMoney = false;  // “돈 있어?”
let isEmpty = true;    // “비어 있어?”

이 6개는 무조건 false 취급:

false
0
"" (빈 글자)
null
undefined
NaN

let pw = "";

if (pw) { console.log("통과"); }

출력이 안됨!

🔸Null Type (아무것도 없다)

null = 휴지심만 있는 상태 ✅ (일부러 “없다”는 표시를 해둔 상태)

let empty = null;


### 🔸Undefined Type 아직 안 정해짐(안 넣었음)

변수 상자를 만들어놨는데 **아직 아무것도 안 넣은 상태**

**undefined = 휴지조차 없는 상태** ✅ (아직 아무 설정/값이 없음)

>```jsx
let none;
>
let x;           // 상자만 만들고
console.log(x);  // undefined (비어있음)
>
let x;           // 상자만 만들고
console.log(x);  // undefined (비어있음)

형 변환(Type Casting)

🔸묵시적 형 변환

자바스크립트가 알아서 형변환하는거

+는 문자열이 한 명이라도 섞이면 “붙이기 모드”

let num = 10;
let str = "20";

const result = num + str;

=> 1020


2. `-`, `*`, `/`는 “붙이기”가 아니라 계산!

>```jsx
"10" - 1   // 9
"10" * 2   // 20
"10" / 2   // 5

==는 “대충 같으면 같다” 모드라서 자동 변환 (조심해야함!)

"1" == 1   // true  (문자 "1"을 숫자 1처럼 봄)
0 == false // true
"" == 0    // true
null == undefined // true

그래서 ===을 쓰는게 좋음 "1" === 1 // false (타입이 달라서)

🔸명시적 형 변환

개발자가 함수를 이용해서 변환함

문자열 -> 숫자(String → Number)

Number()

parseInt() 글자를 제외하고 숫자로 바꿀때

//문자열을 숫자로 바꿀때
let str1 = "10";
let strToNum1 = Number(str1);
console.log(strToNum1);     // 숫자 10이 출력돼요

//글자를 제외하고 숫자로 바꿀때 let str2 = "10개"; let strToNum2 = parseInt(str2); console.log(strToNum2); // 숫자 10이 출력돼요


숫자 -> 문자열

**String()**

>```jsx
let num1 = 20;
let numToStr1 = String(num1);
>
console.log(numToStr1 + "입니다");

내가 헷갈린거

띄어쓰기를 원하면, 띄어쓰기 문자도 직접 넣어야 해요

방법 1) 문자열에 공백 넣기

  console.log(numToStr1 +" 입니다");// "20 입니다"


  #### 방법 2) 중간에 공백 문자열을 더하기

  >```jsx
  console.log(numToStr1 +" " +"입니다");// "20 입니다"

방법 3) 백틱(템플릿 리터럴)로 쓰기(추천)

  console.log(`${numToStr1} 입니다`);// "20 입니다"

“숫자랑 문자 같이 나오면 자동으로 띄어쓰기?”는 언제냐?

-> 그건 `console.log`에 **쉼표로 여러 개를 넣을 때**!!!

이 경우는 콘솔이 보기 좋게 띄어쓰기처럼 보여줌.

>```jsx
console.log(numToStr1,"입니다");// 보통 "20 입니다"처럼 보임
```

나는 `+`로 **문자열을 합친 하나의 값**을 만든 거라서 자동 공백이 없었던것.

마우스 이벤트

Wed, 15 Oct 2025 14:01:15 GMT

hover이벤트 사용시 마우스가 영역을 벗어날 때 클래스가 빠르게 추가/제거되며 번쩍이는 현상이 발생

🤔button의 영역은 충분한데 왜? -> 팝업/내용이 숨겨지면 마우스는 다시 버튼 위에 있거나 버튼과 팝업 사이의 빈 공간 위에 있게 되고, 이 과정이 매우 빠르게 반복되며 번쩍이는 현상이 발생!!

처음에는 mouseover를 이용해서 작업했지만 반복되는 오류

📌 mouseenter, mouseleave

mouseenter() 이벤트 메서드 는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생시킴. mouseleave() 이벤트 메서드 는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킴.

event.relatedTarget

: 마우스가 떠난 직후 포커스 또는 호버 상태가 되는 요소를 나타냅니다.

$(event.relatedTarget).closest('...')

: 마우스가 떠난 곳이 버튼 또는 감싸는 요소(footer-pop-wrap) 안인지 확인

! ... .length

: 마우스가 떠난 곳이 지정된 영역(버튼 또는 팝업 영역)의 바깥인 경우에만 true가 됩니다.

	mouseover	mouseenter
자식 요소	자식 요소 진입 시에도 이벤트가 발생 (자식 요소에 포커스 이동 시)	자식 요소 진입 시에는 이벤트가 발생하지 않음
이벤트 전파	버블링(Bubbling) O (부모 요소로 전파됨)	버블링(Bubbling) X (부모 요소로 전파되지 않음)

mouseleave 해당영역의 부모영역을 기준으로 작업함

$('.footer-pop').mouseleave(function(e){
        if(!$(e.relatedTarget).closest('.footer-pop').length) {
        $('.footer-pop-cont').removeClass('on');
        }
    })

깃허브 커밋오류

Tue, 29 Jul 2025 12:27:14 GMT

랜딩페이지의 고화질 동영상때문에 인코딩이 너무 느려 오류처럼 보이는 현상을 수정하다보니 커밋오류ㅠ

'참조를 원격에 푸시할 수 없습니다. 먼저 '풀 을 실행하여 변경 내용을 통합하세요' 라는 오류 발생

🤔검색했을때 해결방법

동영상 파일 크기 50MB로 낮추기 ~~2. 새로 깃허브 파일 올리기~~

파일 크기를 낮춰도 똑같은 오류 발견! 로컬 저장소의 변경 내용이 원격 저장소의 내용과 충돌해서 발생한 문제!

✔ 해결방안

1. VS Code 터미널에서 명령어`git status`로컬 변경 사항 확인

'On branch main Your branch is ahead of 'origin/main' by 2 commits.(use "git push" to publish your local commits) nothing to commit, working tree clean'

) main 브랜치와 origin/main 브랜치가 분리된것! 로컬 main 브랜치에 아직 원격 저장소에 푸시되지 않은 커밋(동영상크기조절)이 존재한다는 뜻 -> 오류 때문에 푸시가 되지 않아 생긴 결과

2. 불필요한 파일 삭제 되었는지 확인

3. 명령어 `git push origin main`

[💻] 실습 - 엔터프라이즈블록체인

Wed, 09 Apr 2025 14:04:15 GMT

📖 Overview

사이트명: 엔터프라이즈블록체인 작업 기간: 5일 소요 라이브러리: swiper, jQuery, gsap 유형: PC적응형, 클론 코딩 참여도: 100%

👀 Check-point

GSAP + ScrollTrigger를 활용한 애니메이션 구현 ScrollTrigger의 pin 속성 유연한 가로세로 스크롤, 콜백이벤트

📌 width값 고정

PC만 지원하도록 만들었기 때문에, 최소너비를 1300픽셀로 잡아주었다. 이때, 컨텐츠의 수평 스크롤영역 때문에 가로스크롤이 생길 위험을 낮추기 위해 overflow-x:hidden을 사용했다.

.wrap {
    position: relative;
    min-width: 1440px;
    overflow-x: hidden;
}


### 📌 pin 속성
스크롤 도중 특정 요소를 화면에 **고정**시키는 기능
#### ✏ pin: true
>```java
gsap.to(".sc-box", {
  scrollTrigger: {
    trigger: ".box", // 고정할 타겟
    start: "top top", 
    end: "bottom top",
    pin: true, // 고정
    markers: true
  }
});

✅ pinSpacing

true → 기본값, 고정된 요소만큼 공간 확보 false → 고정이 될때 다른 요소들이 겹쳐 올라가거나 여백이 생길 수 있음, 없애고 싶을때 사용

// 가로스크롤 sc-possibility
    ScrollTrigger.create({
      animation:economyTl,
      // markers:true,
      trigger:'.sc-economy',
      start:'0 0',
      end:'+=1500',
      pin:true,
      scrub:0,
      invalidateOnRefresh:true,
      onEnter:function(){
        $('.sc-economy .card-item').addClass('blur')
        $('.sc-economy .arrow-area').addClass('on')
        },
        onEnterBack:function(){
        $('.sc-economy .arrow-area').addClass('on')
        },
        onLeave:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        },
        onLeaveBack:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        }
    })


영역에 들어갔을때 진행되도록 'onEnter'이벤트 사용


### 📌 이벤트 콜백 함수(Event Callback Functions)
특정 요소가 뷰포트(Viewport)에 진입하거나 벗어날 때 실행되는 이벤트이다.

>```java
ScrollTrigger.create({
  trigger: ".section",
  start: "top 80%",
  end: "bottom top",
  onEnter: () => console.log("들어옴"),
  onLeave: () => console.log("나감"),
  onEnterBack: () => console.log("뒤로 들어옴"),
  onLeaveBack: () => console.log("뒤로 나감"),
});

✅ onEnter: 요소가 처음 스크롤 다운하여 트리거 범위에 들어올 때 실행된다. ✅ onLeave: 요소가 스크롤 다운하여 트리거 범위에서 벗어날 때 실행된다. ✅ onEnterBack: 요소가 스크롤 업하여 다시 트리거 범위에 들어올 때 실행된다. ✅ onLeaveBack: 요소가 스크롤 업하여 트리거 범위를 벗어날 때 실행된다.

📌 공통요소

반복되는 카드형태의 UI에 공통 스타일을 적용

📌 border-image

###border-image 속성을 사용하여 요소의 테두리에 그라데이션 이미지를 적용하는 코드입니다. border-image-slice: 1;

border-image-slice는 border-image로 지정된 원본 이미지를 어떻게 자르고 테두리에 적용할지 제어하는 속성입니다.

📌 한 방향으로 계속 흘러가는 배너

한 방향으로 끝없이 흘러가는 배너는 keyframe을 활용해서 구현해주었다.

``` >```css .sc-banner02 .banner-rolling { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-animation: banner2 30s linear infinite; animation: banner2 30s linear infinite; } @-webkit-keyframes banner2 { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } ```

이번 프로젝트는 가로를 잡는 오류가 많이 나서 따로 벨로그에 정리해 두었다! ~~정말..잊지 못할 ScrollTrigger였다..~~ -> pin으로만 모든걸 해결하려고 해서 오류가 많이 났던것! 해결방안 다시 정리!!

사이즈를 축소해보니 오류 발견🤔 100%일땐 높이가 100vh로 잘 잡혔는데 줄이니 자동으로 잡아주지 않는다. -> 적응형으로 작업했기 때문에 ScrollTrigger에게 자동 높이 계산 코드를 넣어주지 않았기 때문!

3가지 해결방안

invalidateOnRefresh: true
pinSpacing: true
sticky사용하기

before을 이용해서 흰배경을 주었더니 확대시 오류발생 border-image를 이용하기!

border-left: 0; 왼쪽을 없애주면 해결!

적응형이지만 화면이 줄어들시 여백 발생🤔 문제1 가로스크롤이 width값 못잡음 -> width: max-content; or width: 100% 문제2 마지막 스크롤 뒤에 여백생김

기존코드

 .to('.sc-economy .split-area',{
        x: function() {
            return -economyWidth;
          },
          ease: "none",
          duration:4
    },'z')

.split-area를 (전체 카드 너비 - 뷰포트 너비) 만큼만 이동시켜야 하는데, -economyWidth는 한 화면 더 많이 이동해버리는 셈

수정코드

economyTl
    .to(".sc-economy .split-area",{
        xPercent:-100,
        x:"100vw",
        duration:4
    },'z')

xPercent: -100 => .split-area 전체 너비의 100%만큼 왼쪽으로 이동 하지만 상대이동이라 자기 너비만큼 움직이기 때문에 화면에 딱 맞지 않을수있다. x: "100vw" 여기에 추가로 화면 너비만큼 오른쪽으로 이동 즉, 위에서 너무 많이 밀린 걸 한 화면 만큼 다시 앞으로 당긴 효과 ex) -300vw + 100vw = -200vw

✍ gsap pin은 만능이 아니다! sticky를 사용했다면 더 빠르고 쉽게 사용할 수 있었다! gsap 사용전 더 쉬운 방법 생각해보고 들어가기

timeline관련

Wed, 26 Mar 2025 07:12:30 GMT

타임라인을 사용하는데 첫번째 코드는 안돼고 두번째 코드는 될까?

1. scrollTrigger를 timeline 내부에 설정했다.

    let economyTl = gsap.timeline({
        scrollTrigger:{
        trigger:".sc-economy",
        start:'0 0',
        end:'+=1500',
        pin:true,
        scrub:true,
        invalidateOnRefresh: true,
        // markers: true,
        },
        onEnter:function(){
            $('.sc-economy .card-item').addClass('blur')
            $('.sc-economy .arrow-area').addClass('on')
          },
          onEnterBack:function(){
            $('.sc-economy .arrow-area').addClass('on')
          },
          onLeave:function(){
            $('.sc-economy .arrow-area').removeClass('on')
          },
          onLeaveBack:function(){
            $('.sc-economy .arrow-area').removeClass('on')
          }

    })
    economyTl
    .to('.sc-economy .split-area',{
        x:()=>{
        return -economyWidth / 3;
        },
        ease: "none"
    })


`onEnter`, `onLeave` 같은 이벤트는 `ScrollTrigger` 객체에서 직접 설정해야만 동작한다.

하지만 이렇게 타임라인 내부에서 `scrollTrigger`를 선언하면 타임라인과 애니메이션만 연결되고, `ScrollTrigger` 인스턴스 자체를 분리해서 제어할 수 없음.

결과적으로 이벤트가 제대로 바인딩되지 않거나 **무시될 수 있음**.

>특히 `scrub: true`를 사용하는 경우 타임라인의 진행 방식이 바뀌는데, 여기에 **onEnter 같은 이벤트 트리거 방식과 충돌이 생기기 쉬움.**


### 2. ScrollTrigger.create()로 따로 생성
>```java
const economyTl = gsap.timeline()
    economyTl
    .to('.sc-economy .split-area',{
        x: function() {
            return -economyWidth / 3;
          },
          ease: "none",
          duration:4
    },'z')
    .to(".sc-economy .arrow-area .fade",{opacity:1,delay:1,duration:1},'z')
    >
    ScrollTrigger.create({
      animation:economyTl,
      // markers:true,
      trigger:'.sc-economy',
      start:'0 0',
      end:'+=1500',
      pin:true,
    //   scrub:1,
      invalidateOnRefresh:true,
      onEnter:function(){
        $('.sc-economy .card-item').addClass('blur')
        $('.sc-economy .arrow-area').addClass('on')
        },
        onEnterBack:function(){
        $('.sc-economy .arrow-area').addClass('on')
        },
        onLeave:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        },
        onLeaveBack:function(){
        $('.sc-economy .arrow-area').removeClass('on')
        }
    })

타임라인과 ScrollTrigger를 명확히 분리하고,

ScrollTrigger.create() 안에서 이벤트, 애니메이션, 스크롤 구간을 정밀하게 제어.

특히 이 구조는 scrub, pin, invalidateOnRefresh 같은 기능과 충돌 없이 안정적으로 작동함.

1번 코드는 구조는 맞지만 동작 보장이 약한 축약형, 2번 코드는 명시적이고 안전한 방식입니다.

✅ 정리: 언제 어떤 방식 쓰면 되나? 단순한 스크롤 애니메이션 -> gsap.timeline({ scrollTrigger: {...} })도 OK

이벤트 (onEnter, onLeave)를 쓰고 싶을 때 -> 무조건 ScrollTrigger.create()로 분리

scrub, pin, 애니메이션 동기화 필요 -> ScrollTrigger.create({ animation: ... }) 구조 권장

코드 형태	의미	언제 사용?
`x: -economyWidth`	처음에 계산된 값만 사용	값이 변하지 않을 때
`x: function() { return -economyWidth; }`	매번 새로 계산하도록 설정	창 크기 변경 등 반응형 처리 필요할 때

x: function() {
return -economyWidth;
}

x: () => -economyWidth; (함수사용시)

defer와 async의 차이

Wed, 15 Jan 2025 07:26:05 GMT

```


📌 동작 방식
HTML 파싱이 끝난 뒤 (DOMContentLoaded 직전) 스크립트를 실행
여러 개의 defer 스크립트는 순서대로 실행됨
✅ 장점
DOM이 준비된 상태에서 실행 → DOM 조작에 안전
스크립트 간 실행 순서 보장
페이지 렌더링 지연 없음
❌ 단점
반드시 external script만 가능 (inline script는 defer 못 씀)
🟢 사용 시점
DOM이 먼저 구성된 후에 실행되어야 하는 스크립트
여러 개의 스크립트를 순서대로 실행해야 할 때
✅ 2. async란?

📌 동작 방식
다운로드가 완료되는 즉시 실행
→ HTML 파싱 중단 가능
✅ 장점
가장 빠르게 실행됨 → 성능 최적화 가능
렌더링 블로킹 없이 실행됨
❌ 단점
DOM 준비 전에 실행될 수 있음 → DOM 조작 시 에러 가능
여러 async 스크립트는 실행 순서 보장 안 됨
💡 실무 팁
일반 웹 앱/사이트: defer 기본 사용
외부 SDK, 광고, 트래킹: async 사용