참고자료  📌 window 객체웹 브라우저의 창이나 탭을 대표하는 객체웹 브라우저에서 window 객체는 전역 객체로 작용하며, 웹 페이지의 내용, 웹 브라우저 자체 메서드, 속성, 이벤트를 접근하고 조작할 수 있는 인터페이스를 제공자바스크립트에서 제공하는 객체가 아니라, 브라우저에서 제공하는 객체 📝 window 객체의 특성과 기능전역 변수와 함수: 전역 범위에서 선언된 함수와 변수를 기본적으로 window 객체의 속성 및 메서드로 접근 가능타이머 메서드: setTimeout(), setInterval(), clearTimeout(), clearInterval()브라우저 제어: 웹 페이지의 경고창, 확인창, 프롬프트 박스 표시 가능alert(), confirm(), prompt()브라우저 정보: 현..

💻 암호화 종류대칭 암호화동일한 키 사용예) 고급 암호화 표준(AES)비대칭 암호화 (RSA)암호화에는 공개 키, 복호화에는 개인 키📌 공개키 기법 (비대칭 암호) - RSA암호화RSA의 이니셜은 처음 알고리즘은 공개한 수학자 이름(Rivest Shamir Adleman)대칭키 암호화와 달리 공개키와 비밀키 서로 다른 두개를 사용하여 암호화 및 복호화공개키: 누구나 알아도 되는 키비밀키: 소유자만 아는 키공개키 암호화 → 비밀키 복호화비밀키 암호화 → 공개키 복호화대칭키 암호화 보다 리소스를 많이 사용하고 효율성이 떨어지기 때문에 메시지나 전체 파일을 암호화 하는 데에는 적합하지 않는다.SSH 같은 많은 프로토콜은 RSA 암호화 및 보안 시그니처 기능에 사용된다.📝 공개키 암호화 예시공개키는 누구나..

`concat()`매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열로 반환const str1 = 'hello'const str2 = 'world'str1.concat(' ', str2) `includes()`하나의 문자열이 다른 문자열에 포함되어 있는지 판별결과를 true false로 반환const sentence = 'The quick brown fox jumps over the lazy dog.';const word = 'fox';sentence.includes(word) ? 'is' : 'is not' `indexOf()``string` 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환값이 없으면 -1로 반환const paragraph = "I think Ruth's dog is ..

📝 function*generator 객체를 반환제너레이터는 중간에 원하는 부분에서 멈추거나, 그 부분부터 다시 실행하는 능력을 가진 함수즉시 실행되지 않고, 함수를 위한 iterator 객체가 반환iterator의 next() 메서드를 호출하면 genrator 함수가 실행되어 yield 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 iterator로부터의 반환값을 반환yield* 표현식을 마주칠 경우, 다른 generator 함수가 위임되어 진행된다.이후 next() 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행된다.next()가 반환하는 객체는 yield 문이 반환할 값을 나타내는 value 속성과 generator 함수 안의 모든 yield 문의 실행 여부를 표시하는 boolean 타입..

🔍 reducer💻 action과 reduceraction은 store로 운반할 데이터를 말한다. 상태 변화를 담은 객체이 액션이 reducer라는 함수로 전달 되고 이 함수가 넘겨 받은 action은 가지고 새로운 state를 만든다.action → reducer → storelet user = createSlice({ name: 'userName', initialState: 'brgndy', reducers: { changeName(state) { return state + 'jeon'; } }})reducer를 이용해서 changeName이라는 함수를 만들어 주었다.저 매개변수로 들어간 state는 기존에 있던 초기 state 값이다. 💻 reducer로 만든 함수 ..

참고자료1 CSS 선택자 - CSS: Cascading Style Sheets | MDNCSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.developer.mozilla.org ✨CSS 선택자 📕 기본 선택자💻 전체 선택자* { color: green;}  💻 유형 선택자💻 클래스 선택자💻 ID 선택자 💻 특성 선택자 ⭐️- `[attr]` : 이름의 특성을 가진 요소를 선택- `[attr=value]`: attr이라는 이름의 특성값이 정확히 value인 요소를 선택함- `[attr~=value]` : 이름의 특성값이 정확히 value인 요소를 선택. 공백으로 구분한 여러 개의 값을 가지고 있을 수 있음- `[attr|=value]` : attr이라는 특성값을 가지고 있으며 정확히 va..

참고자료1 [JS] 📚 자바스크립트 Math 메소드 💯 총정리자바스크립트 Math 메소드 Math 객체는 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math 객체는 생성자 함수가 아니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메inpa.tistory.com  ✨ math method 💻 math.abs(number)- 인수의 절댓값 반환math.abs(-1); //1math.abs('-1'); //1math.abs(''); //0math.abs([]); //0math.abs(null); //0math.abs(undefined) //0   💻math.round(number): number- 인수의 소수점 이하를 반올림하는 정수를 반환math.round(1..

참고자료  ✨ rebase- 브랜치의 base를 재설정한다는 의미- branch의 base란 branch가 뻗어나오는 시작점을 base이다.   💻 예시를 살펴보자!- dev 브랜치에서 branch1에는 commit 1, 4가 있고, branch2에는 commit 2, 3이 있다.    - 브랜치 두개를 머지시켜보자git merge dev branch1git merge dev branch2- commit graph가 꼬여있다.- 동시에 작업한 브랜치가 여러개 존재하고, 한번에 변경사항을 파악하기 어렵다.   - rebase는 어떨까?- 일단, `merge --no-ff` 시켜보자📌 `merge --no-ff`- 새로운 병합 커밋 생성 = fast-forward(새로운 병합 커밋 생성하지 않고 브랜치 ..

📕 enumenum COLOR { red, blue, green}  📕as constconst COLOR = { red: 0, blue: 1, green: 2} as const;- 목적: 리터럴 타입으로 변환하여 상수값처럼 취급되서 만든다.- 사용대상: 주로 배열, 객체 등의 최소한의 변경 가능성으로 제한하고, 그 값을 리터럴 타입으로 사용하고 싶을 때 사용된다.- 타입스크립트가 값의 타입을 더 좁게 추론하게 도와준다.- `as const`를 사용하면 값 자체를 리터럴 타입으로 취급하여, 상수로서 값이 변경되지 않음을 보장한다.- 배열, 객체에 적용할 때 읽기 전용(readonly) 속성을 부여하고, 그 값을 구체적인 리터럴 타입을 변환한다.  - 두 경우 모두 IDE 자동완성 기능을 활..

🟡 declare module- declare는 선언하다라는 의미- 실제 전역변수 선언 이외에 선언 키워드를 사용해 전역 함수, 전역 클래스 등을 선언할 수도 있다.- 이는 d.ts파일을 찾는다던지 해당 라이브러리의 d.ts 파일을 받아오는 것이다.d.ts란 declare typescript의 약자로 차입 선언 파일 뒤에 붙이는 확장자명     ✅ vite프로젝트를 사용한다면 clident.s.ts 모듈을 선언하는 코드들을 볼 수 있다.   - 왜 선언하는 걸까?- 선언하지 않으면 타입스크립트 컴파일러가 이러한 모듈을 인식하지 못하고 에러 메세지를 표시하기 때문이다.   개발자처럼 사용해보기1. svg 파일을 컴포넌트로 만들어 사용하기declare module '*.svg' { import React..

📕 boolean- true/false 값 📕Number- 숫자 값 📕 String- 문자 값 📕Array- 배열 타입- 방법1 ) 배열 요소들을 나타내는 타입 뒤에 [] 불이기 (string[])- 방법2 ) Array 배열 타입 쓰기(Array)  📕 Tuple- 배열의 서브타입- 크기와 타입이 고정된 배열- 예를 들어, RGB 색상을 표현하기 위해 사용할 수도let rgbColor: [number, number, number] = [255, 255, 0]; - 단 push(), splice() 등의 값을 넣는 행동 가능 (컴파일러의 멍청함이라고 치부하면 됨)   📕 Enum- 특정 값을 고정하는 또다른 독립된 자료형 enum Avengers { SpiderMan, IronMan, Thor..

✨ typeof 연산자- 타입 컨텍스트에서 변수나 프로퍼티의 타입을 나타내기 위해 타입 컨텍스트에서 사용할 수 있는 typeof 연산자를 추가한다.- 피연산자의 평가 전 자료형을 나타내는 문자열을 반환console.log(typeof 42);// Expected output: "number"console.log(typeof 'blubber');// Expected output: "string"console.log(typeof true);// Expected output: "boolean"let s = 'hello'; //s의 타입은 string//string이라고 표기하지 않고 typeof s로도 표현 가능let n: typeof s = "world";  - 이를 객체타입으로도 활용가능const frui..