• 로컬과 github 연결 중 아래와 같은 에러가 발생했다.

  git remote add origin "http"
  // error: origin 리모트가 이미 있습니다.
  

git pull origin main // fatal: protocol '“https' is not supported

<br>

### 원인
- http url을 적을 때 `""` 콜론과 함께 적어서 발생
<br>


### 해결 방법
1. 연결을 제거한다.
2. 다시 연결한다.
3. github 파일을 로컬 파일로 불러온다(pull) 
```js
// 재연결
git remote rm origin // 제거 
git remote add origin http // http 주소에 콜론 x
git pull origin main // 반응 굳! 

git add .
git commit -m "Add: 초기세팅 완료"
git push origin main -f

📌 git 삭제

• .git 폴더가 삭제되면서 git 로컬 저장소가 삭제된다.

  sudo rm -rf .git

• (참고) git log 확인해보면 git 저장소가 아니라고 나오면 성공

  git log

  
  

📌 새로운 git 저장소 생성(초기화)

• 이제 다시 git 초기화를 해줘서 github과 연결해주면 끝!

  git init

  git remote add origin "레포 https"

git add .

git commit -m “커밋 메세지”

// 기본 push가 안되면 -f를 추가해주자
git push origin main (-f)

참고

// 만약 git add . 시 아래 같은 에러가 나면
warning: CRLF will be replaced by LF in 파일명

// 아래 명령어를 입력해주고 다시 git add를 해주면 된다.
git config --global core.autocrlf true

1. charCodeAt()
   2. String.fromCharCode()

💡 문자열과 유니코드

• 특정 문자의 유니코드 찾기

  "Hi".charCodeAt(1) // 105 ("i"의 유니코드)

• 유니코드를 문자로 변환하기

  String.fromCharCode(105) // "i"

• 객체의 구조와 타입을 정의하는 것
  

💡 인터페이스의 구조

• 변수명은 클래스와 구분하기 위해 대문자로 시작할 것

• 프로퍼티별 구분은 ;

  interface Person {
  readonly name: string;
  age: number;
  
  greet(greeting: string): void;
  }
  

let user1: Person;

user1 = { name: 'Lily', age: 20, greet(greeting: string) { console.log(${gretting} ${this.name}); }, };

<br>

### 💡 인터페이스 특징
- `readonly` 제어자 사용 가능(public, private은 불가)
- 인터페이스에 readonly를 설정하면 class에도 자동으로 설정된다.
<br>

### 💡 사용자 정의타입과 인터페이스
- 기능과 그 모양은 비슷하나, 가장 큰 차이는 인터페이스는 객체의 타입을 정의하기 위해서만 사용
```ts
interface Person {
  name: string;
  age: number;

  greet(greeting: string): void;
}

type Person = {
  name: string;
  age: number;

  greet(greeting: string): void;
}

💡 인터페이스를 사용하는 이유

• 클래스 간에 기능을 쉽게 공유할 수 있기 때문에 사용한다.
• 즉, 특정 기능이 공유되어야 할 때 사용하면 유용하다. 왜냐하면 해당 인터페이스를 사용한다면 반드시 그 안에 정의되어있는 메서드를 사용해야 하기 때문에.
  

💡 인터페이스의 확장

• 두 개의 인터페이스를 결합하여 새로운 인터페이스를 만들어 클래스에 적용할 수 있다.

  interface Named {
  readonly name: string;
  }
  

interface Greeting extends Named { // Greeting + Named인 인터페이스가 생김 greet(phrase: string): void; }

class Person implements Greeting { name: string; age = 30;

constructor(n: string) { this.name = n; }

greet(phrase: string) { console.log(phrase + '' + this.name); } } ```

Before

class Department {
  private id: string; ✅
  public name: string; ✅
  private employees: string[] = [];

  constructor(id: string, n: string) {
    this.id = id; ✅
    this.name = n; ✅
  }

  describe(this: Department) {
    console.log('Department' + this.name);
  }

}

const accounting = new Department('Accounting');

After

class Department {
  //   private id: string; ✅
  //   private name: string; ✅
  private employees: string[] = [];

// public을 붙여야하는 이유는 정확히 동일한 이름으로 속성을 만들고 싶다고 타입스크립트에게 알려주는 명령이기 때문이기도 하다.
  constructor(private id: string, public name: string) {
    //   this.id = id; ✅
    //   this.name = n; ✅
  }

  describe(this: Department) {
    console.log(`Department (${this.id}): ${this.name}`);
  }

}

const accounting = new Department('d1', 'Accounting');

• 타입을 사용하면 오류를 미리 감지하고 일부 런타임 오류를 방지할 수 있다.
• 숫자, 문자열 등 정해진 타입의 input 값만을 입력해야 될 때 사용한다.
• 타입스크립트를 사용하면 타입을 확인하는 코드를 추가할 필요가 없어 효율적이다.

  // javascript의 경우
  if(typeof number) {
    throw new("Error!!")
  }

  
  

💡 타입스크립트와 자바스크립트의 차이

• 오류 확인을 언제할 수 있느냐에 차이가 있다.
• ts는 개발 도중 컴파일 시 터미널에서 확인되는 반면, js는 런타임 중에 확인된다.
• ts는 브라우저에서 확인할 수 없다.
• 즉, ts를 사용하면 런타임까지 가지 않고도 오류를 알 수 있어 더 효율적인 개발 환경을 제공해준다.
  

💡 참고) 타입 추론과 명시적 타입 할당

• 타입 추론

  let age = 29;

• 명시적 타입 할당

  const age: number = 29;

1. 나머지 매개변수
   2. 배열 구조 분해 할당에서 변수명 지정
   3. 객체 구조 분해 할당에서 나머지 요소

💡 나머지 매개변수

• 자바스크립트에 es6 변경 사항 중 하나인 나머지 매개변수!

• 언제 쓸까 : 매개변수가 몇 개인지 모를 때 뿐만 아니라 알더라도 나머지 매개변수를 사용하는 것이 효율적이다.

• 아래와 같이 매개변수의 타입을 하나씩 지정해줘도 된다.

  const add = (...numbers: [number, number, number]) => {
  return numbers.reduce((curResult, curValue) => {
        return curResult + curValue;
  }, 0);
  };
  

const addedNumbers = add(5, 10, 2);

<br>

- 하지만 따로 지정하지 않고 `[]`를 넣어주면 개수에 상관없이 사용할 수 있다.
- `...numbers`는 add()에 인수로 들어온 요소들을 배열에 담아준다. 
```js
const add = (...numbers: []) => {
  console.log(numbers) // [1, 2, 3, 4]

  return numbers.reduce((curResult, curValue) => {
        return curResult + curValue;
  }, 0);
};

const addedNumbers = add(1, 2, 3, 4);

💡 배열 구조 분해 할당에서 변수명 지정

• 나머지 배열 요소를 ...으로 묶어서 또 하나의 배열로 만들어 줄 수 있다.

  const hobbies = ["Hiking", "Cooking", "Dancing", "Sleeping"]
  

const [hobby1, hobby2, ...remainingHobbies] = hobbies; console.log(remainingHobbies) // ["Dancing", "Sleeping"]

<br>

### 💡 객체 구조 분해 할당에서 나머지 요소
- 객체 구조 분해 할당에서 기존 키값을 내가 원하는 변수명으로 바꿔 사용할 수 있다.
- `:`을 사용해서 지정해주면 된다.
```js
const person = {
      firstName: 'Lily',
      age: 20
};

const { firstName: userName, age } = person;

console.log(userName, age); // 'Lily', 20

1. replace()와 replaceAll()
   2. 객체의 value로 key 값 알아내기

💡 replaceAll()

• 이름에서 알 수 있듯이 첫 번째 인수에 해당하는 모든 요소를 대체해준다.
• 하지만 ES2021에서 등장하여 이전에는 replace()을 사용하여야 했다.

  replace()을 replaceAll()처럼 사용하는 방법

• 정규식을 사용하여 // 안에 검색하고자 하는 문자열을 넣는다.
• g : 전역 검색
• i : 대/소문자 구분 안함

  const phoneNum = "010-1234-5678";
  

const newNum = phoneNum.replace(/-/gi,'*');

console.log(newNum); // 01012345678

<br>

### 💡 객체의 value로 key값 알아내기
- key 값을 배열로 만들어 준다. `Object.keys()`
- `Object[key]`와 일치하는 값을 찾아서 리턴한다. `find()`
```js
function getKeyByValue(object, value) {
  return Object.keys(object).find(key => object[key] === value);
}

1. map()의 옵셔널 매개변수
   2. filter()의 옵셔널 매개변수

💡 map()의 옵셔널 매개변수

• currentValue : 처리할 현재 요소.
• index : 처리할 현재 요소의 인덱스. (optional)
• array : map()을 호출한 배열. (optional)

function solution(x, n) {
    return Array(n).fill(x).map((v, i) => (i + 1) * v)
}

💡 filter()의 옵셔널 매개변수

• element : 처리할 현재 요소.
• index : 처리할 현재 요소의 인덱스. (optional)
• array : filter를 호출한 배열 (optional)

  function solution(arr) {
     return arr.filter((val,index) => val != arr[index+1]);
  }

  
  

느낀점

• 메서드의 기본 변수로만 구현해왔는데 알고리즘 문제를 풀면서 종종 그 한계가 느껴졌다.
• 옵셔녈 매개변수를 활용해서 더 효율적이고 깔끔한 코드 작성이 가능한 경우가 있었다.
• 이제는 옵셔녈 매개변수까지 제대로 익히고, 활용하는 연습을 하자!!!

1. for 문 속도 최적화

💡 for 문 성능 향상 패턴

• 알고리즘 문제를 풀다가 지금까지 자주 사용했던 for 문의 속도를 향상시키는 방법이 있다는 것을 알게됐다.
• i의 범위를 설정할 때 배열의 길이를 사용하는 경우가 많았는데, 이때 매번 array.length에 접근하게 되어 속도 저하를 야기할 수 있다는 것이다.
• 이를 개선하기 위해서 for 문 내 변수를 하나 더 선언하여 사용할 수 있다.

  // before
  const array = [1,2,3,4,5];
  for(let i = 0; i < array.length; i++){
    console.log(array[i]);
  }

// after
const array = [1,2,3,4,5];
for(let i = 0, n = array.length; i < n; i++){
    console.log(array[i]);
}

출처: https://aljjabaegi.tistory.com/584

1. indexOf()와 findIndex()의 차이
   2. 구조분해 할당

💡 indexOf()와 findIndex()의 차이

indexOf()의 속도가 더 빠르다.

indexOf()

• 일반 배열일 때 사용

  배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

  findIndex()

• 객체의 배열일 때 사용

  주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

  
  

💡 구조분해 할당

• 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

  const { firstName = 'Code', lastName } = { lastName: 'Kim' };
  console.log( firstName, lastName); // Code Kim
  

const { firstName: fn = 'Code', lastName: ln } = { lastName: 'Kim' }; console.log( fn, ln); // Code Kim

- 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.
```js
const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false },
];

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // 2

1. 스프레드 문법
   2. 스프레드 프로퍼티

💡 스프레드 문법

• 장점 : ES5의 기존 방식보다 더 간결하고 가독성 좋게 표현할 수 있다.

✨ concat

• 두 개의 배열을 합칠 때

// ES5
let arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]

// ES6
let arr = [...[1, 2], ...[3 ,4]];
console.log(arr); // [1, 2, 3, 4]

✨ splice

• 배열의 중간에 다른 배열 요소를 추가하고 싶을 때

  // ES5
  let arr1 = [1, 4];
  let arr2 = [2, 3];
  

Array.prototype.splice.apply(arr1, [1, 0].concat(arr2)); console.log(arr1); // [1, 2, 3, 4]

```js
// ES6
let arr1 = [1, 4];
let arr2 = [2, 3];

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

✨ slice

• 배열을 복사할 때

  // ES5
  let origin = [1, 2];
  let copy = origin.slice();
  

console.log(copy); // [1, 2] console.log(copy === origin); // false

```js
// ES6
let origin = [1, 2];
let copy = [...origin];

console.log(copy); // [1, 2]
console.log(copy === origin); // false

💡 스프레드 프로퍼티

• 스프레드 프로퍼티는 Object.assign 메서드를 대체할 수 있는 간편한 문법이다.

✨ 기본 사용법

const merged = { x: 1, y: 2, ...{ a: 3, b: 4}};
console.log(merged); // {x: 1, y: 2, a: 3, b: 4}

✨ 객체 병합

• 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖는다.

  const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, x: 3 } };
  console.log(merged); // { x: 1, y: 10, z: 3 }

✨ 특정 프로퍼티 변경

const changed = { ... { x: 1, y: 2 }, y: 100 };
// changed = { ... { x: 1, y: 2 }, ... { y: 100 } }
console.log(changed); // { x: 1, y: 100 }

✨ 특정 프로퍼티 추가

const added = { ... { x: 1, y: 2 }, z: 0 };
// added = { ... { x: 1, y: 2 }, ...{ z: 0 } }
console.log(added)l // { x: 1, y: 2, z: 0 }

참고

• 스프레드 프로퍼티 이전에는 객체를 병합하거나 특정 프로퍼티를 변경, 추가할 때 Object.assign 메서드를 사용했다.

  const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });
  console.log(merged); // {x: 1, y: 10, x: 3}

1. 삼항 연산자 실행문이 두 개일 때

💡 삼항 연산자 실행문이 두 개일 때

• 조건 충족 시 실행되는 문이 두 개일 때는 어떻게 작성하지?
• ()와 ,로 묶어주면 된다.

  n % 2 ===0 ? (n = n / 2, answer++) : (n = n * 3 + 1, answer++)

1. repeat() 메서드
   2. CSS 선택자

💡 repeat() 메서드

repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다.

'문자열'.repeat(2) // '문자열문자열'

💡 CSS 선택자

• CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법이다.

  /* 어트리뷰트 선택자: Input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택 */
  input[tpye=text] { ... }
  

/* 후손 선택자: div 요소의 후손 요소 중 p 요소를 모두 선택 */ div p { ... }

/* 자식 선택자: div 요소의 자식 요소 중 p 요소를 모두 선택 */ div > p { ... }

/* 인접 형제 선택자: p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택 */ p + ul { ... }

/* 일반 형제 선택자: p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택 */ p ~ ul { ... }

/* 가상 요소 선택자: p 요소의 콘텐츠의 앞에 위치하는 공간응 선택. 일반적으로 content 프로퍼티와 함께 사용된다. */ p::before { ... } ```

1. recoil
2. 마인드

💡 recoil

• React 전용 전역 상태관리 라이브러리로 2020년 5월 Facebook에서 출시하였다.
• 애플리케이션이 특정 value에 접근할 때 사용한다.

  // index.tsx
  

import { atom } from "recoil";

export const isDarkAtom = atom({ key: 'isDark', defauult: false, });

#### value 값 수정
```tsx
function App() {
    const isDark = useRecoilValue(isDarkAtom);
    return(
    <>
    <ThemeProvider theme={isDark? : darkTheme : lightTheme}>
    </ThemeProvider>

function App() {
    const setDarkAtom = useSetRecoilState(isDarkAtom);
    const toggleDarkAtom = () => {
    setDarkAtom(prev=>!preV);

    const isDark = useRecoilValue(isDarkAtom);
    return(
    <>
    <Button onClick={toggleDarkAtom>
    </Button>

💡 마인드

• 기술은 문제를 해결하기 위해 만들어진다.

1. apexcharts 라이브러리
   2. react helmet
   3. toFixed()

💡 apexcharts 라이브러리

• https://apexcharts.com/
• 다양한 종류의 차트가 많이 있다.
• demos를 보며 사람들이 사용한 방법들을 참고하자
  

💡 react helmet

• head로 가는 direct link다.
• React에서 <head>의 title, favicon, css 등을 동적으로 변경할 수 있디.

  // App.js
  import { HelmetProvider, Helmet } from 'react-helmet-async';
  

function App() { return ( ); }

export default App;

<br>

### 💡 toFixed()
- 소수점을 원하는 자릿수까지 자른 문자열을 반환한다.
```js
3.1415.toFixed(); // '3'
3.1415.toFixed(2); // '3.14'
3.1415.toFixed(5); // '3.14150'

1. react-router 6
   2. react-query

💡 react-router 6

• react-router 6버전 변경 내용 요약
• useRouteMatch() → useMatch()
• Switch → Routes
• nested router → Outlet
  

💡 react-query

• 모든 state와 hook을 대체할 수 있음
• 사용 이유: 리액트 쿼리는 fetch에서 받아온 response data를 캐시에 저장해놓는다. 즉, 화면이 바뀔 때마다 데이터를 요청하지 않는다.
• npm i react-query
  

before

• coins.tsx

  const [coins, setCoins] = useState<CoinInterface[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    (async () => {
      const response = await fetch('https://api.coinpaprika.com/v1/coins');
      const json = await response.json();
      setCoins(json.slice(0, 100));
      setLoading(false);
    })();
  }, []);

after

• index.tsx

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { QueryClient, QueryClientProvider } from 'react-query';
  import { ThemeProvider } from 'styled-components';
  import App from './App';
  import { theme } from './theme';
  

const queryClient = new QueryClient();

ReactDOM.render( <React.StrictMode> </React.StrictMode>, document.getElementById('root') );

- coins.tsx
```js
  const { isLoading, data } = useQuery<ICoin[]>('allCoins', fetchCoins);

• api.ts

  export async function fetchCoins() {
  return await (await fetch('https://api.coinpaprika.com/v1/coins')).json();
  }

1. HTML 특수 문자 코드
2. temp 임시 객체 활용법
3. useLocation()

💡 HTML 특수 문자 코드

• 레이아웃 작업하면서 >와 같은 화살표가 필요할 때가 있었다. >를 사용하는 것은 태그로 인식하여 오류 발생 위험이 있으니 앞으로 특수 문자 코드를 이용하면 되겠다.

💡 temp 임시 객체 활용법

• 서버에서 받아온 데이터를 console.log를 사용하여 콘솔 창 객체에 저장한다.

  Object.keys(temp1).map(v=>typeof v).join()

  
  

💡 useLocation()

• useLocation()은 현재 머물고 있는 페이지에 대한 정보를 알려주는 hook이다.
• 경로 정보를 담고있는 객체이다.

  const location = useLocation();
  

useEffect(() => { console.log(location); }, [location]);

```js
{
  pathname: '', // 현재 경로 값
  search: '', // 현재 경로의 query parameter 값
  hash: '',
  state: null,
  key: 'default'
}

📌 일급 객체

• 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.
• 자바스크립트의 함수는 일급 객체이다.
  • 무명의 리터럴로 생성 가능. 즉, 런타임에 생성 가능
  • 변수나 자료구조(객체, 배열)에 저장 가능
  • 함수의 매개변수에 전달 가능
  • 함수의 반환값으로 사용 가능
• 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미이다.
• 함수는 객체이지만 일반 객체와 달리 호출할 수 있다.
• 그리고 함수 객체는 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.

  📌 함수 객체의 프로퍼티

• 데이터 프로퍼티 : arguments, caller, length, name, prototype
• 접근자 프로퍼티 : __proto __

  ✨ arguments 프로퍼티

• 함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회 가능한 유사 배열 객체
• 함수 내부에서 지역 변수처럼 사용되며, 함수 외부에서는 참조할 수 없다.
• 매개변수의 개수보다 인수를 더 많이 전달한 경우 초과된 인수는 무시된다.
• 그러나 그냥 버려지는 것이 아니라 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

  ✨ caller 프로퍼티

• ECMAScript 사양에 포함되지 않은 비표준 프로퍼티. 사용하지 말고 참고로만 알아둘 것

  ✨ length 프로퍼티

• 함수를 저의할 때 선언한 매개변수의 개수
• arguments 객체의 length 프로퍼티와 함수 객체의 length 프로퍼티의 값은 다를 수 있으므로 주의해야 한다.
• 인자(argument)의 개수 : arguments 객체의 length 프로퍼티
• 매개변수(parameter)의 개수 : 함수 객체의 length 프로퍼티

  function foo () {}
  console.log(foo.length)l // 0
  

function baz(x, y) { return x * y; }

console.log(baz.length); // 2

#### ✨ name 프로퍼티
- 함수 이름
- ES6 이전까지는 비표준이었다가 ES6에서 정식 표준이 되었다.
- ES5 : 빈 문자열을 값으로 갖는다.
- ES6 : 함수 객체를 가리키는 식별자를 값으로 갖는다.
#### ✨ __proto__접근자 프로퍼티
- 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는데 이는 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킨다.
- __proto __ 프로퍼티는 [[Prototpye]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티다.
- 내부 슬롯에는 직접 접근할 수 없고 간접적으로 프로토타입 객체에 접근할 수 있다. 
#### ✨ prototype 프로퍼티
- 생성자 함수로 호출할 수 있는 함수 객체.
- 즉, constructor만이 소유하는 프로퍼티다.
- 일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다. 
- prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 호출될 때 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다. 
```js
// 함수 객체는 prototype 프로퍼티를 소유한다.
(function () {}).hasOwnProperty('prototype'); // true

// 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
({}).hasOwnProperty('prototype'); // false