자바스크립트는 싱글 스레드 언어이지만 사용자 인터랙션, Ajax요청 등 다양한 비동기 작업을 논리적으로 병렬처리하는것처럼 보인다. 이 모든것은 이벤트 루프(Event Loop) 라는 시스템 덕분이다.

자바스크립트 런타임의 주요 구성 요소

자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 프로그램이다. 다음과같은 두가지 구성 요소가 있다.

콜스택(Call Stack) : 함수 호출을 관리하는 스택 구조로, 현재 실행중인 함수와 그 호출 순서를 추적한다.

힙(Heap) : 동적으로 할당된 메모리를 저장하는 공간으로, 객체와 함수 등이 저장된다.

Web API

Web API는 브라우저나 Node.js와 같은 런타임 환경에서 제공하는 API로, 자바스크립트 엔진 외부에서 비동기 작업을 처리하고(setTimeout, 타이머 요청 등) 비동기 작업의 완료 시점을 관리한다.

콜백 큐(Callback Que)

콜백 큐는 비동기 작업이 완료된 후 실행될 콜백 함수들을 대기시키는 큐로, setTimeout의 콜백함수나 이벤트 핸들러 같은 함수들이 큐에 들어와 FIFO구조를 실행한다. 이벤트 루프

콜백 큐에는 세가지 종류가 있다.

이벤트루프

이벤트루프는 콜 스택이 비어 있을 때 콜백 큐에서 대기 중인 콜백 함수를 콜 스택으로 이동시켜 실행한다. 이러한 메커니즘을 통해 자바스크립트는 비동기 작업을 처리하면서도 싱글 스레드 환경을 유지할 수 있는것이다.

이벤트루프 동작방식

1. 자바스크립트 코드는 Call Stack에 코드가 실행되며 함수들이 쌓임. 이때 바로 해결할 수 있는 동기코드는 바로 실행해서 보내버림
2. 비동기 함수(예: setTimeout, fetch 등)가 호출되면, 해당 작업은 Web API로 전달
3. 비동기를 처리해주고 관리해주는 Web API는 비동기 작업이 완료되면, 그에 대한 콜백 함수가 테스크 큐에 추가됩니다. 이때 테스크 큐에 들어가는 기준은 위에 보았던 표와 같다.
4. Event Loop는 Call Stack이 비는 순간을 기다림.
5. Call Stack이 비면, Callback Queue에서 가장 오래된 콜백을 Call Stack으로 옮겨 실행.

예시로 알아보도록 하자

console.log('1');

setTimeout(() => {
  console.log('2');     // 매크로태스크
}, 0);

Promise.resolve().then(() => {
  console.log('3');     // 마이크로태스크
});

console.log('4');

코드설명

먼저 console.log(“1”) 이 스택으로 이동한 후 실행된다.

setTimeout이 스택으로 이동하고 콜백함수가 Web API로 이동한 후 비동기 처리시 매크로 태스크 큐로 이동한다.

Promise가 실행되고 Web APIs로 이동했다가 비동기 처리시 .then()은 마이크로 테스크 큐로 이동한다.

스택에 console.log(“4”) 가 스택으로 이동하여 실행된다.

마이크로 테스크에 있는 then() 이 실행되고 마지막으로 매크로 테스크 큐에 있는 setTimeout() 이 실행된다.

실행 결과 : 1 - 4 - 3 - 2

너무 바쁘면 안좋은거 아닌가?

블로킹

JavaScript에서 어떤 작업이 끝날 때까지 다음 코드 실행이 멈추는 현상을 말한다.

블로킹의 예시

function waitSync(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {
    // 아무것도 하지 않지만, CPU는 계속 돌아갑니다
  }
}

console.log("작업 시작");
waitSync(3000); // 3초 동안 블로킹 발생
console.log("작업 완료");

이 코드를 실행하면 “작업 시작”이 출력되고, 3초 동안 멈춘 뒤 “작업 완료”가 출력된다.

이 3초 동안은 사용자 인터페이스(UI)도 멈추고, 클릭이나 입력 같은 이벤트도 무시되는데 이런 현상을 블로킹이라고한다.

해결

블로킹을 해결하기위해서 비동기 기술을 적용해야한다.

console.log("시작");

setTimeout(() => {
  console.log("3초 뒤 실행");
}, 3000);

console.log("끝");

출력

시작 끝 3초 뒤 실행

이처럼 비동기 작업은 다른 코드 실행을 막지 않는다. 이렇게 비동기를 적절히 사용하여 블로킹을 피해보자

Rest란?

HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처

HTTP 메서드와 REST의 관계

Rest API는?

REST를 기반으로 서비스 API 구현한 것

특징

1) HTTP URI 를 사용

 - 사용형식 :   ‘/groups/:group_id’ 처럼 사용한다. (HTTP URI)

 -  URI 를 사용해 자원(데이터)에 진입할 수 있고, 데이터 조작하려면 Server에 요청한다

2) HTTP Method 사용

 - 서버 연결시 HTTP 프로토콜의 Method를 사용

 -  URI 와 메소드로 CRUD 를 한다. (GET, POST, PUT, DELETE 메소드)

구성

REST는 자체 표현 구조로 구성되어 REST API 만으로 HTTP 요청의 내용을 이해할 수 있다.

Restful 과의 차이

Restful 이란?

: REST의 기본 원칙을 성실히 지킨 서비스 디자인

쉽게말해서 Rest API 설계원칙대로 잘 짜여진 디자인을 Restful 이라고 한다. 그래서 Restful API 가 되기 위해서는 Rest API 설계원칙을 잘 지켜야한다.

Rest API 설계원칙

REST에서 가장 중요한 기본적인 원칙은 두 가지다.

① URI는 리소스를 표현하는데 집중해야 한다 ② 행위에 대한 정의는 HTTP 요청 메서드를 통해 해야 한다

위 두 규칙이 RESTful API를 설계하는 중심 규칙이다.

1) URI는 리소스를 표현해야 한다

URI는 리소스를 표현하는 데 중점을 두어야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.

따라서 리소스 이름에 get 같은 행위에 대한 표현이 들어가서는 안 된다.

리소스에 대한 행위는 HTTP 요청 메서드로 표현한다

리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않는다. 행위(HTTP 요청 메서드)를 통해 리소스에 대한 명확히 표시를 해야 한다.

bad GET /todos/delete/1

good DELETE /todos/1

2. HTTP요청 메서드 요청

클라이언트가 서버에게 요청을 보낼 때 이 요청들을 크게 4가지 성격으로 분류할 수 있다.

CRUD라고 불리는 이 4가지 대표적인 요청에 대해 살펴보자.

(1) Create = POST - create는 서버에 정보를 올려달라는 요청이다. ( 생성 ) - create는 POST 메서드를 사용해 해당 URI를 요청하면 리소스를 생성한다.

(2) Read = GET

• read는 서버에서 정보를 불러오는 요청이다. ( 읽기 )

• read는 GET 메서드를 사용해 리소스를 조회하고 데이터를 가지고 온다.

(3) Update = PUT - update는 정보를 바꾸는 요청이다. ( 수정 )

- update는 PUT 은 데이터 전체를 바꾸고 싶을 때, PATCH는 데이터의 일부만 수정하고 싶을 때 사용한다.

(4) Delete = DETELE - delete는 정보를 지우는 요청이다. ( 삭제 )

- delete는 DELETE 메서드를 사용해 리소스를 삭제할 수 있다

간단하게 말하면 일을 시키고 결과가 나오기전에 다른일을 먼저하고있기 이다. 쉽게 예를들어서 설명하면

동기란

라면을 끓이고 있는 동안 계속 냄비만 바라보는 것 -> 물이 끓기 전엔 아무것도 못함.

비동기란

라면을 끓이는 동안 다른 일을 하다가, 물이 끓으면 알려달라고 해놓는 것 -> 물을 끓이는 동안 다른 일을 함.

기본으로 동기적으로 실행되지만 • 버튼 클릭 • 이미지 로딩 • API 요청 등등의 요인으로 인하여 비동기처리가 필요하다.

👷‍♂️JS에서 비동기작업을 다루는 방법 세가지

🤙 Callback

Callback 이란? -> “나중에 호출될 함수” 를 매개변수로 넘기는 함수 쉽게말해서 그냥 이 함수 실행하고 그 다음으로 실행할 함수를 Callback 함수라고 한다.

왜 사용해? “비동기적인 작업의 완료 시점에 맞춰 원하는 작업을 실행하기 위해” 사용된다.

어떻게 써?

// 동기적인 콜백함수 활용
function greet(name, callback) {
  console.log("안녕 " + name + "!");
  callback();  // 나중에 실행됨
}

function sayBye() {
  console.log("잘 가~");
}

greet("철수", sayBye);

/* 출력
    안녕 철수!
    잘 가~
*/

// 비동기적인 콜백함수 활용
function fetchData() {
  setTimeout(() => {
    console.log("🛬 데이터 도착!");
  }, 2000);
}

console.log("1. 요청 보냄");
fetchData();
console.log("2. 다음 작업");
/*출력
    1. 요청 보냄
    2. 다음 작업
    🛬 데이터 도착!
*/

단점: 콜백 지옥(callback hell) → 가독성↓, 디버깅 어렵 그렇기에 지금은 비동기처리로 Callback 보다는 Promise 와 Async/await 을 더 많이 사용한다.

🐣 Promise (객체)

• Promise 객체란 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체 쉽게말해서 "나중에 어떤 값이 도착할 거니까, 도착하면 .then()으로 그 값을 써줘!" 라고 할 수 있다

• Promise 상태 3가지 대기 : 아직 결과가 결정되지 않은 초기 상태. 성공 : 작업이 성공적으로 완료되어 결과값을 반환한 상태. 실패 : 작업이 실패하거나 오류가 발생한 상태. 흐름 :대기(Pending) → 성공(Fulfilled) or 실패(Rejected)

• Promise 사용 문법과 기본예제 기본문법

  const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행    
  if (성공조건) {
    resolve(결과값);
  } else {
    reject(에러메시지);
  }
  });

  비동기 작업을 수행하는 코드를 넣고 성공했을때와 실패했을때를
  정의하여 넣어줍니다.
  

예제

function checkEvenNumber(num) {
  return new Promise((resolve, reject) => {
    if (num % 2 === 0) {
      resolve(`${num}은 짝수입니다.`);
    } else {
      reject(`${num}은 홀수입니다.`);
    }
  });
}

checkEvenNumber(4)
  .then((res) => console.log(res))   // 4은 짝수입니다.
  .catch((err) => console.error(err));

.then과 .catch 를 이용하여 성공했을때 수행과 실패했을때의 수행을 명시해줍니다.

🐴 Async/await (키워드)

• Async/await 의 역할 • Promise 를 더 간결하고 직관적인 방식으로 다루기 위해 나온 문법 • then/catch 체인 없이도 비동기 처리 흐름을 동기처럼 읽을 수 있음

• Async/await의 기본 문법 및 기본 예제

  기본 문법

  async function 함수이름() {
  try {
   const result = await 비동기함수();
   console.log(result);
  } catch (error) {
   console.error(error);
  }
  }

예제

async function check() {
  try {
    const result = await checkEvenNumber(3);
    console.log(result);
  } catch (error) {
    console.error(error); // 3은 홀수입니다.
  }
}

check();

프로젝트는 작년 디자인 프로젝트 수행평가에서 시작하였다. 자습감독이 구글시트로 시행되고 있고 힘들다는 것을 해결하기위해서 이 프로젝트는 기획되었다. 디자인을 직접해보고 디자인 선생님께 실력늘었다고 칭찬들은건 아직도 기억난다. 하지만 이건 또 어케 만들지 이건 어케하지 하면서 불안 반 기대 반 이었다. 일단 우리는 팀을 구했고 총 5명이 모이게 되었다. 하지만 자습감독이 어떻게 이루어지는지부터 설명하고 티치몬을 이해했어야해서 처음부터 순조롭지는 않았던 것 같다.

🐴 제작과정

일단 제작기한이 2월 10일까지 모든 기능구현을 원하셨다. 그때부터 테스트를 해보며 진행해야 실제로 3월달부터 쓰일 수 있다고 하셔서이다. 그렇다보니 아직 tsx는 미숙해서 공부를하며 사용하기에는 시간이 오래걸릴것같아서 그냥 jsx로 개발을 진행하였다.(솔직히 미숙하게나마라도 ts쓸걸 후회하고 있다.) 그래도 처음으로 zustand 와 React-Query 를 써보면서 뿌듯하기도하고 관리하기도 훨씬 쉬워서 너무 편리했다.

import { create } from 'zustand';

const useLocation = create((set) => ({
    place: '',
    setPlace: (newPlace) => set({ place: newPlace }),
}));

export default useLocation;

간단한 장소 상태저장

export const usePatchMovement = () =>{
    const queryClient = useQueryClient();
    return useMutation({
        mutationFn : (props)=> API.patchMovement(props),
        onSuccess:(_, variables)=>{
            queryClient.invalidateQueries(['getMovement', variables.day]);
        },
        onError:(err)=>{
            console.error("수정 실패 ", err);
        }
    })
}

훅을 활용한 이석 수정 쿼리

현재는 또 어떻게해야 더 효율적으로 관리할 수 있을까를 생각해보고있다. 하지만 제일 힘들게했던건 구글 로그인이었던것 같다... 백엔드 전체부담으로해서 내가 할 수 있는게 없어서 답답하기도하고 선배분까지 부르면서 도움을 요청해서 겨우 해냈다. 🙇‍♂️ (하지만 나중에 알게된건 구현한 구글로그인 방식이 잘못되어서 수정을해야 했었다...) 그렇게 어찌저찌 2월 10일까지 자습감독 자동배정빼고는 완료했던것 같다. 자동배정도 몇일정도만 있으면 만들 수 있어서 걱정은 없었다.

🎂 완성

일정이 늦어지긴했지만 결국엔 2월 26일까지는 테스트를 완료하고 개발을 완성했다. 이때까지만해도 모든기능들을 테스트해보며 이게 진짜 되네?? 하며 느낌이 굉장히 좋았다. 배포하는 과정도 docker-compose 를 이용하고 하면서 docker에대한 많은 공부가 되었던 것 같다.

🔗 운영

실제로 3월달부터 사용하기위해 우리는 필요한 데이터들을 사이트에 적용시켰다.(학생, 선생님, 방과후 데이터) 우리도 운영하면서 에러 몇개나올것이라고 생각을했다. 하지만 나의 예상은 훨신 초월했다...

🐞 BugMon출현

자습감독 교체 에러, 학생들 자습상태 중복생성 에러, 메인 달력 에러, 학생 제거, 방과후 동기화에러, 방과후 업로드에러, 방과후 저장에러, 이석작성 에러, 등등의 에러가 있었다. 거기에 선생님들께서 학교 구글계정이 아닌데 로그인 시도를 하셔서 오류가 났다고 하시거나 학교 방과후데이터가 학생이 겹치게 되면서 로직이 꼬이거나 하기도 하여서 우리의 신뢰는 바닥을치게 되었다. 우리딴에서도 이상함을 느꼇다 분명 테스트를 해보고 기능들을 통과시켰는데 왜 이렇게 되는건지.. 사실 티치몬이 운영되기 전에 우리의 로직이 바뀌었기 때문이었다. 우리는 우리가 알고있는 자습감독 로직대로 코드를 짰었지만 학교에서의 자습감독 방식이 바뀌어버렸다. 그래서 다 만들었던 기능들을 다시 만들고 수정하느라 좀 더 시간이 걸렸던 것 같다. *거기에 운영 2일전에는 학생들 자습에대해서 소통 오류까지 있었다. * 하지만 그 부분은 우리에게 엄청난 타격이었다. 자습 로직을 수정해서 그 부분때문에 앞서말한 에러의 80%는 그 부분때문에 일어났다. 그렇게 티치몬은 에러덩어리의 버그몬소리를 듣게된것이다.

느낀점

이 프로젝트를 하기전에는 대회용이나 공부용으로 팀원들과 프로젝트를 해보았지만 실제로 운영할 목적으로 만든건 티치몬 프로젝트가 처음이었다. 기대에 부푼마음으로 개발하고 운영해보았지만 솔직히 운영 초기엔 너무 절망적이었다. 기대의 티치몬이 이렇게 되다니...왜 이렇게 된거지 도대체 왜 라고 생각하며 스트레스를 겁나 받았다. + (선생님들께 너무 죄송했음..)(진짜 죽고싶었음..ㅋㅋ)

하지만 다시 생각해보고나니 이것들은 다 우리의 미숙함때문이었다는것을 깨달았다. 시스템 수정이 있어도 오류가나면 코드잘못짠 놈들 잘못이지 지시의 문제는 아니기때문이다..소통의 오류는 걍 내잘못이다... 참... 그걸 확인했어야지 뭘 하는건지... 테스트의 중요함과 소통의 중요함은 무엇보다 뼈저리게 느끼게 된것 같다.

컴포넌트 생명주기란?

컴포넌트가 화면에 등장하고, 변경되며, 사라지는 *과정을 말합니다. 모든 React *컴포넌트는 라이프 사이클 이벤트가 있으며, 라이프사이클 이벤트는 컴포넌트가 수행한 작업이나 앞으로 수행할 작업에 따라 특정 시점에 실행된다.

이 생명주기 동안 특정 메서드들을 사용할 수 있으며, 주로 다음과 같은 3단계로 나뉩니다.

🛠️ 마운트

컴포넌트가 DOM에 삽입될때 발생하며 한 번만 실행된다.

클래스형

constructor() // 초기 state 설정, 바인딩 등
componentDidMount() // 렌더링 완료 후 실행(DOM 접근, API 호출등)
static getDerivedStateFromProps() // props로부터 state를 동기화
render()// jsx 반환

함수형

useEffect(() => {}, [])
// 컴포넌트 처음 렌더링될때 실행

🧭 업데이트

props 또는 state 가 변경될때 실행한다.

클래스형

static getDerivedStateFromProps() // props 변화 감지
shouldComponentUpdate() // 리렌더링 여부 결정
render() // 화면 다시 그림
getSnapshotBeforeUpdate() // DOM 업데이트 전 값을 가져옴
componentDidUpdate() // 업데이트 후 실행(API 재요청 등)

함수형

useEffect(() => {}, [deps])
// 특정 값(deps)가 변경될때 실행

😵 언마운트

컴포넌트가 DOM에서 제거될때 발생한다.

클래스형

componentWillUnmount() // 타이머 정리, 이벤트 정리 등 컴포넌트 종료 수행

함수형

useEffect(() => { return () => {} }, [])
//컴포넌트가 사라질때 정리해주는 작업으로 처리된다

📚 정리

다음과같이 컴포넌트가** 처음 나타날 때** API 요청을 보내고 싶거나, 데이터가 변경될 때마다 무언가를 처리하고 싶거나, 컴포넌트가 사라질 때 정리를 하고 싶을때 사용할 수 있어요.

클래스형은 사용할 메서드들이 많지만 함수형에서는 훅으로 다 처리할 수 있기때문에 편리하다. 그렇기 때문에 클래스형 컴포넌트보다는 함수형 컴포넌트가 더 권장되고있다.

💨 Hooks을 이용해 생명주기 관리

useEffect(() => {
  // 마운트 시 실행 (처음 1회만)
  return () => {
    // 언마운트 시 실행
  };
}, []); // 업데이트 조건

🛠️ 마운트

import React, { useEffect } from 'react';

function Welcome() {
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다!');
    // API 요청, 초기 설정 등
  }, []);

  return <h1>환영합니다!</h1>;
}

초기 렌더링 되었을때 useEffect 안의 내용을 실행한다.

🧭 업데이트

import React, { useEffect, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`🔄 count가 ${count}로 변경됨`);
  }, [count]); // count가 바뀔 때마다 실행됨

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

useEffect의 의존성배열([count])에 count 값을 넣어두어서 해당 값이 바뀌어서 재렌더링될때 useEffect가 다시 실행되게 된다.

😵 언마운트

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('⏰ 매초 실행 중...');
    }, 1000);

    return () => {
      clearInterval(id); // 컴포넌트가 사라질 때 타이머 제거
      console.log('🧹 컴포넌트가 언마운트됨. 타이머 제거 완료!');
    };
  }, []);

  return <p>타이머가 작동 중입니다.</p>;
}

useEffect 에서 return 을 시키면서 컴포넌트가 제거될때 실행된다. 예시에서는 setInterval 이벤트를 처리하기 위해서 사용된다.!

map()

🧐 내용

배열을 순회하며 새로운 배열을 반환하는 JavaScript 메서드.

주로 리스트로 되어있는 컴포넌트를 렌더링할때 사용됨.

🛠️ 문법

Array 자료형에서 .map()을 사용하여 새로운 배열을 반환함.

괄호안에는 화살표 함수가 삽입되며, 함수의 첫 번째 인자는 리스트의 요소, 두 번째는 요소의 index, 세 번째는 array 자체.

요소들을 변경시킬 수 있음.

예시

export default function CommentList(){
    const comments = [
        {
            name : '김민성',
            comment : '하이 나 김민성'
        },
        {
            name : '박다온',
            comment : '리액트로 프로제트 만들고 있어요'
        },
        {
            name : '백도준',
            comment : '리액트 재밋다'
        },
    ]
    const [data, setData] = useState(comments)
    function deleteComment(id){
        setData(data.filter(item=>item.name !== id))
    }
    return(
        <div className="contentontainer">
            {data.map(item=>
                <Comment comment = {item} deleteComment={deleteComment} />
            )}
        </div>
    )
}

Comment에 다른 props를 주면서 반복적으로 컴포넌트를 생성할 수 있습니다.

👍🏾 장점

filter()

🧐 내용

배열에서 특정 조건을 만족하는 요소만 필터링하여 새로운 배열을 반환하는 JavaScript 메서드.

주로 조건에 맞는 요소만 걸러내어 새로운 배열을 만들 때 사용됨.

🛠️ 문법

Array 자료형에서 .filter()을 사용하여 새로운 배열을 반환함.

호안에는 화살표 함수가 삽입되며, 함수의 첫 번째 인자는 리스트의 요소, 두 번째는 요소의 index, 세 번째는 array 자체.

return 문과 조건식을 세워서 어떤 요소들을 반환할지 찾을 수 있음.

array.filter((element, index, array) => {
  return 조건식;  // true인 요소만 남김
});

예시

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

numbers 라는 배열에서 짝수들만 반환하도록 할 수 있음.

👍🏾 장점

[조건부 렌더링과 input]

1. 리액트에서 입력한 input 데이터를 useState를 사용하여 가져온 후 출력하는 방법을 작성하고,

사용 예를 정리하시오.

조건부 렌더링

조건부 렌더링이란?

if 문, && 연산자, 삼항 연산자, filter() 등을 활용하여 조건에 따라 컴포넌트 또는 HTML 요소를 표시하거나 숨길 수 있는 기능

예시

export default function ConditionR(){
    const [isLogin, setLogin] = useState(false);
    return(
        <div className={'box'}>
            {!isLogin ? <button className={'btn1'} onClick={()=>setLogin(!isLogin)}>로그인</button> :  <div>
                <p>환영합니다~~</p>
                <button className={'btn2'} onClick={()=>setLogin(!isLogin)}>로그아웃</button>
            </div>}

            <hr />
            <p>모두함께 리액트 공부</p>

        </div>
    )
}

해당 코드에서는 useState로 isLogin 상태를 관리하면서 isLogin이 true라면 환영합니다를 보여주고

isLogin이 false 라면 로그인 버튼을 화면에 표시해줍니다.

input

🧐 내용

input 태그에있는 useState 로 관리하기 위해서는 value와 onChange props를 활용해야합니다.

useState 선언 → value = {state} , onChange = {(e)⇒setState(e.target.value)} → state 태그에 삽입(p태그, div태그 등등)

• 이때 onChange 에는 화살표함수가 들어가야합니다.

예시

import './style.css'
import {useState} from "react";

function InputText() {
    const [value, setValue] = useState('');
    const handleClick = ()=>{
        setValue('');
    }
  return (
    <>
        <div>
            <input
                type={"text"}
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <button type={"button"} onClick={handleClick}>초기화</button>
        </div>
        {value &&
            <div className={"modal"}>
                <p>입력한 값은 <span style={{color:'red'}}>{value}</span> 입니다</p>
            </div>}

    </>
  )
}

export default InputText

useState에 빈 문자열을 선언 후

value={value} onChange={(e) => setValue(e.target.value)}

로 값을 업데이트하고

태그안 태그에 값을 삽입하였습니다. ]]> https://velog.io/@dohun_08/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B3%B4%EA%B3%A0%EC%84%9C-19-%EC%98%A4%EB%A6%AC%EC%95%A4%ED%85%8C%EC%9D%B4%EC%85%98 https://velog.io/@dohun_08/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B3%B4%EA%B3%A0%EC%84%9C-19-%EC%98%A4%EB%A6%AC%EC%95%A4%ED%85%8C%EC%9D%B4%EC%85%98 Sun, 30 Mar 2025 09:13:00 GMT React Orientation

🛠️ 리액트의 특징

1. 컴포넌트 기반

리액트는 UI를 컴포넌트라는 독립적인 조각으로 나누어 개발합니다. 이를 통해 코드의 재사용성과 유지 보수성을 높입니다.

2. 가상 DOM(Virtual DOM)

리액트는 가상 DOM을 사용하여 실제 DOM 조작을 최소화합니다. 상태가 변경될 때마다 가상 DOM에서 업데이트를 수행한 후, 변경된 부분만 실제 DOM에 적용하여 성능을 향상시킵니다.

3. 단방향 데이터 흐름

데이터가 부모 컴포넌트에서 자식 컴포넌트로 전달되고, 자식 컴포넌트에서 부모 컴포넌트의 상태를 직접 변경할 수 없습니다.

4. JSX

리액트는 JSX(JavaScript XML)라는 문법을 사용하여 HTML과 JavaScript를 함께 작성할 수 있습니다.

const element = <h1>Hello, World!</h1>;

5. 상태 관리(State Management)

리액트는 각 컴포넌트의 상태(state)를 관리할 수 있는 기능을 제공합니다. 상태가 변경되면 해당 컴포넌트가 다시 렌더링되어 UI가 자동으로 업데이트됩니다.

6. Hook 을 이용한 관리

함수형 컴포넌트에서 상태와 생명주기를 쉽게 관리할 수 있도록 해줍니다. 기본적으로 제공되는 Hook 외에도 사용자 정의 Hook을 만들어 복잡한 상태 로직을 관리할 수 있습니다.

7. 풍부한 생태계

리액트는 리액트 라우터(React Router), 리덕스(Redux) 등 다양한 라이브러리와 함께 사용되어 애플리케이션의 구조와 상태 관리를 보다 쉽게 할 수 있습니다. 또한 많은 사람들이 사용하는 라이브러리 입니다.

🔂 리액트 18 → 19 에서 달라진점

Auto Batching

리액트 18: 자동 배치 기능이 도입되어 여러 상태 업데이트를 한 번의 렌더링으로 처리할 수 있게 되었습니다.

리액트 19: 자동 배치가 더욱 강화되어 비동기 작업에서도 상태 업데이트가 자동으로 배치됩니다. 이로 인해 성능이 개선되고, 불필요한 렌더링이 줄어듭니다.

→ 이제는 비동기 작업에서도 상태 업데이트가 자동으로 배치되어 불필요한 렌더링이 줄어듭니다.

Concurrent Rendering

리액트 18: Concurrent Mode의 기초가 도입되었으며, startTransition API가 추가되었습니다.

리액트 19: Concurrent Rendering이 더욱 발전하여, 더 많은 기능과 최적화가 추가되었습니다. 이로 인해 더 나은 사용자 경험을 제공할 수 있습니다.

→ startTransition API를 통해 비동기 업데이트의 우선 순위를 조정할 수 있어, 애플리케이션의 반응성을 높일 수 있습니다.

새로추가된 Hook

• useId 훅

컴포넌트의 고유한 ID를 생성하여 클라이언트와 서버 간에 일관성을 유지할 수 있도록 돕습니다.

import React, { useId } from 'react';

const MyComponent = () => {
  const id = useId(); // 고유한 ID 생성

  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
};

export default MyComponent;

• useSyncExternalStore 훅

리액트 애플리케이션에서 외부 데이터 소스와 동기화하여 상태를 관리하는 데 사용됩니다. 이를 통해 외부 저장소의 상태를 React 상태처럼 관리할 수 있습니다.

import React, { useSyncExternalStore } from 'react';

// 예시 외부 저장소
const store = {
  subscribers: new Set(),
  state: { count: 0 },

  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  },

  getSnapshot() {
    return this.state;
  },

  setCount(newCount) {
    this.state.count = newCount;
    this.subscribers.forEach(callback => callback());
  }
};

const Counter = () => {
  // 외부 저장소와 동기화된 상태 사용
  const { count } = useSyncExternalStore(store.subscribe, store.getSnapshot);

  return (
    <div>
      <h1>Count: {count.count}</h1>
      <button onClick={() => store.setCount(count.count + 1)}>Increment</button>
      <button onClick={() => store.setCount(count.count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

Suspense

액트 18: Suspense의 사용이 개선되어 비동기 작업에서의 대기 상태를 더 잘 처리할 수 있게 되었습니다.

리액트 19: Suspense의 기능이 추가적으로 확장되어, 더 많은 상황에서 사용할 수 있으며, 서버 컴포넌트와의 통합이 개선되었습니다.

→ 이를 통해 비동기 데이터 로딩 시 UI를 더욱 매끄럽게 처리할 수 있습니다.

이외에도 다양한 기능들이 개선되고 추가되었습니다.

🎯 jsx의 기본 규칙 작성 후 예제

jsx 의 규칙

1. 모든 태그는 반드시 닫혀 있어야 하며, 빈 태그는 /로 닫아야 합니다.
2. JSX는 항상 단일 루트 엘리먼트를 반환해야 합니다. 여러 요소를 반환하려면 하나의 부모 엘리먼트로 감싸야 합니다.
3. JSX 내부에서는 중괄호 {}를 사용하여 JavaScript 표현식을 포함할 수 있습니다. 이를 통해 변수나 함수 결과를 동적으로 렌더링할 수 있습니다.
4. JSX에서 HTML 속성은 camelCase로 작성해야 합니다. 예를 들어, class는 className으로, tabindex는 tabIndex로 작성해야 합니다.
5. JSX 내에서 조건부 렌더링을 사용할 수 있습니다. 일반적으로 && 또는 삼항 연산자를 사용하여 조건부로 요소를 렌더링합니다.

예제

• 모든 태그는 닫힌 태그

// 올바른 빈 태그
const element = <br />; 

// 잘못된 예
const element = <br>; 

• JSX는 항상 단일 루트 엘리먼트를 반환

// 올바른 예
const element = (
  <div>
    <h1>Hello</h1>
    <p>Welcome to JSX</p>
  </div>
);

// 잘못된 예
const element = (
  <h1>Hello</h1>
  <p>Welcome to JSX</p> // 오류 발생
);

• javascript 표현식 포함

const name = "React";
const element = <h1>Hello, {name}!</h1>; // "Hello, React!" 출력

• camelCase 로 작성하기

const element = <div className="container" tabIndex={0}>Hello</div>;

• 조건부 렌더링

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
  </div>
);

🪞 리액트에서 렌더링의 정의와 초기렌더링과 리렌더링의 차이점

렌더링이란?

리액트에서 컴포넌트를 화면에 표시하는 과정입니다.

즉, React가 상태나 속성이 변경될 때 UI를 업데이트하여 사용자가 볼 수 있도록 하는 것을 의미합니다.

렌더링과정

1. 컴포넌트 호출: React 컴포넌트가 호출되면 JSX 코드가 실행됩니다.
2. 가상 DOM 생성: JSX 코드에 따라 가상 DOM이 생성됩니다. 가상 DOM은 실제 DOM의 메모리 내 표현입니다.
3. 변경 사항 감지: 상태(state)나 속성(props)이 변경되면, React는 새로운 가상 DOM을 생성하여 이전 가상 DOM과 비교합니다.
4. Diffing: React는 두 가상 DOM을 비교하여 변경된 부분을 찾습니다. 이를 통해 최소한의 변경 사항만 실제 DOM에 적용할 수 있습니다.
5. 실제 DOM 업데이트: 변경된 부분만 실제 DOM에 적용하여 사용자에게 새로운 UI를 보여줍니다.

초기렌더링과 리렌더링의 차이점

초기 렌더링 : 컴포넌트가 처음으로 화면에 나타나는 과정으로 컴포넌트의 초기 상태와 속성(props)에 따라 UI가 설정됩니다.

리렌더링 : 상태(state)나 속성(props)이 변경되어 컴포넌트가 다시 렌더링되는 과정으로 변경된 데이터에 따라 UI가 업데이트됩니다.

Props 와 State

📖 Props 의 개념과 특징

Props란?

React 의 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는데 사용되는 객체입니다.

특징 : 읽기전용, 데이터 전송, 컴포넌트 재사용성

부모 컴포넌트로부터 데이터 전송받아서 사용할 수 있습니다.

props의 값은 변경하지 못하고 읽기 전용입니다.

각각의 컴포넌트에 다른 값을 줄 수 있어서 코드의 중복성을 줄일 수 있습니다.

사용법

• 기본

    // Profile 컴포넌트에서 Avatar 컴포넌트로 Props 보내기
    export default function Profile() {
     return (
       <Avatar
         person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
         size={100}
       />
     );
    }
  
    // Avatar 컴포넌트에서 Props 읽기
    function Avatar(props) {
     // props.size, props.name 으로 사용가능
    }
  
    function Avatar({ person, size = 100 }) {
     // 구조분해할당으로 사용가능
     // 기본값은 size prop이 없거나 size={undefined}로 전달될 때 사용됩니다.
    }

• 모든 props

    function Profile({ person, size, isSepia, thickBorder }) { //계속 반복해서 전달하는 경우
     return (
       <div className="card">
         <Avatar
           person={person}
           size={size}
           isSepia={isSepia}
           thickBorder={thickBorder}
         />
       </div>
     );
    }
  
    모든 Props 전달가능
  
    function Profile(props) {
     return (
       <div className="card">
         <Avatar {...props} />
       </div>
     );
    }

• jsx

    import Avatar from './Avatar.js';
  
    // 자식으로 jsx를 보낼때
  
    function Card({ children }) {
      return (
        <div className="card">
          {children}
        </div>
      );
    }
  
    export default function Profile() {
      return (
        <Card>
          <Avatar
            size={100}
            person={{
              name: 'Katsuko Saruhashi',
              imageId: 'YfeOqp2'
            }}
          />
        </Card>
      )
    }

리하면

🔗 Hook 의 개념과 규칙, 종류

개념 : Hook은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수들입니다. 

규칙 :

1. 최상위 컴포넌트에서 호출

   1. Hook은 컴포넌트에서만 호출가능하고 최상위에서 호출해야 합니다. (if문, for문 안에서 호출불가능)

2. 함수형 컴포넌트에서만 사용가능

   1. Hook은 함수형 컴포넌트 내에서만 사용할 수 있습니다. class 형 X

3. use 로 시작하기

   1. Hook은 use로 시작하는 이름을 가져야 합니다.

종류

• 내장 Hook
  • useState, useEffect, useRef 등등등
• 사용자 정의 Hook
  • use로 시작하는 함수로, 기본 Hook을 조합하여 특정한 로직을 캡슐화할 수 있습니다.

정리하면

🤪 useState 사용문법과 사용예제

사용하는법

리액트 라이브러리에서 useState 를 불러와줍니다.

함수형 컴포넌트의 최상위에서 useState를 이용해서 값을 설정해줍니다.

자료형을 설정해주고 대괄호, 첫번째 요소는 값을 담을 변수, 두번째 요소는 값을 변경할 함수를 설정해줍니다.

예제

input 박스의 값을 관리한다고 가정했을때

import {useState} from 'react'

export default function Login(){
    const [id, setId] = useState('');
    //'' 는 초기값
    return(
        <input type='text' value = id onChange={e=>setId(e.target.value)} />
    )
}

🧱 함수를 이용하여 컴포넌트 작성하기

1. 기본 함수형컴포넌트

기본사용법

function MyComponent() {
  return (
    <div>
      <h1>Hello, Function Component!</h1>
    </div>
  );
}

export default MyComponent;

함수형은 export default 를 function 앞에 붙일 수 있습니다.

export default function MyComponent() {
  return (
    <div>
      <h1>Hello, Function Component!</h1>
    </div>
  );
}

1. 화살표함수형 컴포넌트

기본사용법

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, Arrow Function Component!</h1>
    </div>
  );
};

export default MyComponent;
```![](https://velog.velcdn.com/images/dohun_08/post/7f89ec8d-e6c5-417e-af96-0867ac372b46/image.png)

컴퓨터에는 CPU, 메모리만 있는 것이 아닌 스피커, 모니터, 키보드, 마우스등등의 입출력장치와 외장 하드 디스크나 USB메모리 등 보조기억장치가 컴퓨터에 달려있습니다. 다양한 외부 장치가 컴퓨터 내부와 어떻게 연결되고 소통하는지를 알아봅시다.

🤮 입출력 장치의 까다로움

1. 입출력장치에는 종류가 너무나도 많다

입출력 장치만 하더라도 키보드, 모니터, USB 메모리, 마우스, 프린터 등등 매우 많습니다. 장치가 이렇게 다양하면 장치마다 속도, 데이터 전송 형식 등도 다양합니다. 따라서

다양한 입출력 장치와 정보를 주고받는 방식을 규격화하기가 어렵습니다.

2. CPU와 메모리의 데이터 전송률은 높지만 입출력 장치의 전송률은 낮다

CPU와 메모리처럼 전송률이 높은 장치는 1초에도 수많은 데이터를 주고받을 수 있지만, 키보드나 마우스와 같이 상대적으로 전송률이 낮은 장치는 같은 시간 동안 데이터를 조금씩만 주고받을 수 있습니다. 따라서

전송률의 차이는 CPU와 메모리, 입출력장치 간의 통신을 어렵게합니다.

전송률 : 데이터를 얼마나 빨리 교환할 수 있는지를 나타낸 지표

🎮 장치 컨트롤러

위의 문제들을 해결하기위해 입출력장치는 컴퓨터에 직접 연결되지 않고 장치 컨트롤러라는 하드웨어를 통해 연결됩니다.

장치 컨트롤러를 연결하기위한 하드웨어적인 통로

🎒 역할

• CPU와 입출력장치 간의 통신중개 입출력장치의 말들을 CPU가 받아들일 수 있도록 변환해줍니다.

• 오류 검출 장치 컨트롤러는 자신과 연결된 입출력장치에 문제는 없는지 오류를 검출합니다.

• 데이터 버퍼링 버퍼링이란? 전송률이 높은 장치와 낮은 장치 사이에 주고받는 데이터를 버퍼라는 임시 저장 공간에 저장하여 전송률을 비슷하게 맞추는 방법

버퍼링을 이용하여 버퍼에 데이터를 조금씩 모았다가 한꺼번에 내보내거나, 데이터를 한 번에 많이 받아 조금씩 내보내는 방법으로 CPU와 전송률이 낮은 입출력장치와의 전송률 차이를 완화시켜줍니다.

이러한 역할들을 통하여 입출력 장치의 까다로운점들을 모두 해결!

🛠️ 내부 구조

• 데이터 레지스터

• 버퍼링*을 위해 CPU와 입출력장치 사이에 주고받을 데이터가 담기는 레지스터. 데이터를 모았다가 전달하는 버퍼역할을 해줌

• 상태 레지스터 입출력장치가 입출력 작업을 할 준비가 되었는지, 입출력 작업이 완료되었는지, 입출력장치에 오류는 없는지 등의 상태 정보가 저장됩니다.

• 제어 레지스터 입출력장치가 수행할 내용에 대한 제어 정보와 명령을 저장합니다.

🪛 장치 드라이버

장치 컨트롤러의 동작을 감지하고 제어함으로써 장치 컨트롤러가 컴퓨터 내부와 정보를 주고받을 수 있게 하는 프로그램입니다. 장치 드라이버를 인식하고 실행할 수 있다면 어디회사의 제품이건 사용할 수 있습니다. 반대로 장치 드라이버를 인식하지 못한다면 입출력장치를 사용할 수 없습니다.

입출력 장치를 연결하기 위한 소프트웨어적인 통로

💻 장치 드라이버를 실행시키는 주체

...그것은 운영체제 운영체제가 장치 드라이버를 인식하고 실행할 수 있다면 입출력장치와 컴퓨터 내부의 정보를 주고받을 수 있습니다. 운영체제에 기본적으로 깔려있는 장치 드라이버들도 있지만 장치 제작자가 장치 드라이버를 따로 제공하는 경우 입출력장치는 해당 드라이버를 직접 설치해야만 사용이 가능합니다.

마무리..

아두이노를 노트북이 인식을 못했던 경험이 있었는데 그걸 해결할려고 CH340이라는 프로그램을 깔아서 실행시켰던 경험이 있습니다. 이때는 이해가되지 않았지만 이제는 이해가되어 다른 입출력장치를 사용할때도 고려해봐야겠습니다.

키에 산술적인 연산을 적용하여 항목이 저장되어 있는 테이블의 주소를 계산하여 항목에 접근한다. 이렇게 키에 대한 연산에 의해 직접 접근이 가능한 구조를 해시 테이블이라 부르며, 해시 테이블을 이용한 탐색을 해싱이라 한다.

현상

• 충돌 서로 다른 키를 갖는 항목들이 같은 해시주소를 가지는 현상이다.
• 오버플로우 충돌이 발생하고, 해시 주소에 더이상 빈 버킷이 남아 있지 않으면 발생한다. 오버플로우가 발생하면 해시테이블에 항목을 더 이상 저장하는 것이 불가능해진다.

해싱방법

선형조사법

만약 충돌이 ht[k]에서 발생했다면 ht[k+1]이 비어 있는지를 살펴본다. 만약 비어있지 않다면 ht[k+2]를 살펴본다. 이런 식으로 비어있는 공간이 나올 때까지 계속하여 조사하는 방법이다. 만약 테이블의 끝에 도달하게 되면 다시 테이블의 처음으로 간다. 만약 조사를 시작했던 곳으로 되돌아오게 되면 테이블이 가득 찬 것으로 판단한다.

문제점

클러스터링문제 : 저장된 숫자들이 모여있을때 탐색횟수가 늘어나게되는 문제

이차조사법

이차조사법에서는 만약 충돌이 ht[k]에서 발생했다면 ht[k+1]이 비어 있는지를 살펴본다. 만약 비어있지 않다면 ht[k+4]를 살펴본다. 이런 식으로 비어있는 공간이 나올 때까지 k+n제곱으로 계속하여 조사하는 방법이다. 만약 테이블의 끝에 도달하게 되면 다시 테이블의 처음으로 간다. 만약 조사를 시작했던 곳으로 되돌아오게 되면 테이블이 가득 찬 것으로 판단한다.

문제점

클러스터링문제 : 2차 클러스터링 문제 -> 집중되어지는 slot을 중심으로 클러스터링이 발생될 확률이 여전히 높다

이중해싱법

이중해싱법에서는 만약 충돌이 ht(k)에서 발생했다면 (h(k)+1*h'(k))이 비어 있는지를 살펴본다. 만약 비어있지 않다면 (h(k)+2*h'(k))를 살펴본다. 이런 식으로 비어있는 공간이 나올 때까지 계속하여 조사하는 방법이다. 만약 테이블의 끝에 도달하게 되면 다시 테이블의 처음으로 간다. 만약 조사를 시작했던 곳으로 되돌아오게 되면 테이블이 가득 찬 것으로 판단한다.

체인법

*충돌을 해결하는 두 번째 방법은 해시 테이블의 구조를 변경하여 각 버킷이 하나 이상의 값을 저장할 수 있도록 하는 것이다. * 즉, 각 버킷에 고정된 슬롯을 할당하는 것이 아니라 각 버킷에 삽입과 삭제가 용이한 연결 리스트를 할당한다. 물론 버킷 내에서는 원하는 항목을 찾을 때는 연결 리스트를 순차 탐색한다.

문제점

링크 공간의 필드가 필요하다

분할 정복 알고리즘!

하나의 리스트를 두 개의 균등한 크기로 분할하고 분할된 부분 리스트를 정렬한 다음, 두 개의 정렬된 부분 리스트를 합하여 전체가 정렬된 리스트를 얻고자 하는 것

☑️ 장단점

장점

• 빠른속도를 자랑합니다. 데이터의 영향을 작게받아서 최악, 평균, 최선의 경우 모두 O(n log n)의 시간 복잡도를 가집니다.

• 큰 데이터 정렬에 적합합니다. 메모리에 다 담을 수 없는 큰 파일을 정렬해야 할 때, 하드 디스크 등의 외부 저장 장치를 활용해 부분적으로 나눠서 정렬한 후 병합하는 방식으로 사용할 수 있습니다

단점

• 작은 데이터에서는 오히려 비효율적 작은 데이터에서는 오히려 비효율적이어서 삽입 정렬 같은 알고리즘보다 느릴 수 있습니다.

• 병합 과정에서 추가적인 연산 필요 병합 과정에서 추가적인 연산 필요하여 배열을 쪼개고 병합하는 과정이 많아 캐시 효율성이 떨어질 수 있습니다.

  🛠️ 방법

  

1. 분할 : 입력 배열을 같은 크기의 2개의 부분 배열로 분할한다.

2. 정복 : 부분 배열을 정렬한다. 부분 배열의 크기가 충분히 작지 않으면 순환 호출을 이용하여 다시 분할 정복 기법을 적용한다.

3. 결합 : 정렬된 부분 배열들을 하나의 배열에 통합한다.

코드

#include <stdio.h>
int sorted[100],count;

void merge(int list[], int left,int mid, int right)
{
    int i,j,k,l;
    i=left;
    j=mid+1;
    k=left;
    while(i<=mid && j<=right)
    {
        if(list[i]<=list[j])
        {
            sorted[k++]=list[i++];
        }
        else
        {
            sorted[k++]=list[j++];
        }
    }
    if(i>mid)
    {
        for(l=j; l<=right; l++)
        {
            sorted[k++]=list[l];
        }
    }
    else
    {
        for(l=i; l<=mid; l++)
        {
            sorted[k++]=list[l];
        }
    }
    for(l=left; l<=right; l++)
    {
        list[l]=sorted[l];
    }
}

void mergesort(int list[], int left,int right)
{
    int mid;
    if(left<right)
    {
        mid=(left+right)/2;
        mergesort(list,left,mid);
        mergesort(list,mid+1,right);
        merge(list,left,mid,right);
    }
}

int main()
{
    int list[4]={27,12,20,25};
    mergesort(list,0,3);
    for(int i=0; i<4; i++)
    {
        printf("%d ",list[i]);
    }
    return 0;
}

마무리

퀵정렬, 합병정렬등 상황에 맞게 써야겠다

전역 상태를 관리해주는 라이브러리입니다. props로만 상태를 주고받는 불편함을 없애주기 위해서 생겼습니다.

atom

리코일에서 상태를 정의할 때 사용되는 가장 작은 단위입니다. 값을 저장하고 컴포넌트에서 불러와 사용할 수 있습니다.

selector

셀렉터는 아톰이나 다른 셀렉터의 값을 기반으로 파생된 상태를 계산하는 함수입니다. 아톰의 값을 가공하거나 여러 아톰을 조합해서 새로운 값을 만들 때 사용됩니다.

왜 쓰는건데?

• 원래는 props로 전달해서 컴포넌트끼리 상태를 계속 주고받았다면 리코일을 사용하여 전역으로 상태를 관리할 수 있어서 편리합니다.
• 배우기도 쉽고 간편하여 바로 배우고 써먹을 수도 있습니다.(리액트 useState 사용과 유사)
• 렌더링 수를 최소화 할 수 있습니다.

  사용방법

  라우터 감싸기

  RecoilRoot로 상태를 사용할 컴포넌트를 감싸줍니다.

  아톰 생성하기

  아톰을 생성할때는 지정 key가 필요합니다. key는 아톰의 고유한 속성을 나타내줍니다. default에는 아톰의 값들이 들어있습니다. default를 객체나 리스트로 선언해서 사용하는것도 쌉가능!

아톰 사용하기

아톰을 useRecoilState를 이용해 불러옵니다. countAtom을 import해와서 생성했던 아톰을 불러와줍니다. default에 있는 값들을 사용할 수 있습니다. setCount같이 defualt의 값들을 업데이트 시킬 수도 있습니다.

⭐️ useRecoilState 아니여도 값만 사용하고 싶다면 useRecoilValue를 추천합니다.

셀렉터 생성하기

셀렉터에도 고유한 key를 선언해줍니다. get으로 아톰의 값을 가져와서 값을 가공시켜 리턴해줄 수 있습니다. setCount같은거를 미리 선언할 수 있다고 볼 수 있죠.

셀렉터 사용하기

isEvenState를 useRecoilValue를 이용 해 값만 불러올 수 있습니다. isEven에는 카운트될때마다 Odd, Even이 번갈아가며 나타나게됩니다. 셀렉터로는 이밖에도 비동기식도 처리할 수 있습니다.

마무리

이 리코일을 이용해서 전역상태를 깔끔하게 관리해봅시당 ㅎㅎㅎㅎㅎㅎ

평균적으로 매우 빠른 수행 속도를 자랑하는 정렬 방법입니다.

• 전체리스트를 2개의 부분 리스트로 분할하고, 각가의 부분 리스트를 다시 퀵정렬하는 전형적인 분할정복법을 사용.

• 피벗을 설정하고 피벗을 기준으로 좌우에 작은값, 큰값을 놓는 방법을 반복합니다.

• 시간복잡도 : O(nlogn)

⭐️ 분활정복법이란? 문제를 조금씩 나눠가면서 문제를 푼 다음 마지막에 합쳐서 문제를 해결

🛠️ 퀵정렬 방식

1. 피벗선택
2. Low, High 지정 후 교환
3. 피벗과 High값을 교환
4. 왼쪽, 오른쪽에 있는 리스트에 1~4의 과정반복

*이 방식은 왼쪽을 피벗으로 선택하여하는 퀵정렬입니다.

피벗선택

피벗과 low, high값들을 지정해줍니다. 피벗은 제일 첫번째 요소로 지정해줍니다. 초기의 low는 피벗보다 + 1 초기의 high는 right와 같이 합니다.

Low High 지정

왼쪽에 피벗보다 작은값, 오른쪽에는 피벗보다 큰값으로 넣기위해서 low는 피벗보다 작은값이라면 +1을 해주며 옮깁니다. high는 피벗보다 큰값이라면 -1을 해주며 옮깁니다. 만약 low가 피벗보다 큰값을만나면 멈추고 high도 피벗보다 작은값을만나면 멈춥니다. 멈춘둘은 값을 교환해줍니다.

피벗과 High 교환

위의 작업을 반복하면 그림과 같이 low > high 의 상황이 생깁니다. 이때 high의 값과 피벗의 값을 교환해줍니다. 그렇게 된다면 피벗의 왼쪽에는 피벗보다 작은값들이, 피벗의 오른쪽에는 피벗보다 큰 값들이 있을것입니다.

반복

피벗보다 작은쪽에 있는 값들로 위의 과정을 반복하고 피벗보다 큰쪽에 있는 값들로 위의 과정을 반복합니다. 반복했을때 마지막에는 정렬됩니다.

코드

#include <stdio.h>
#define swap(x,y,t) ((t)=(x), (x)=(y), (y)=(t))
int partition(int list[], int left,int right)
{
    int pivot,temp,low,high;
    low = left;
    high= right+1;
    pivot=list[left];
    do
    {
        do
        {
            low++;
        }while(list[low]<pivot && low<=right);
        do
        {
            high--;
        }while(list[high]>pivot);

        if(low<high)
        {
            swap(list[low],list[high],temp);
        }
    }while(low<high);
    swap(list[left],list[high],temp);
    return high;
}

void quicksort(int list[], int left,int right)
{
    if(left<right)
    {
        int q=partition(list, left, right);
        quicksort(list,left,q-1);
        quicksort(list,q+1,right);
    }
}

int main()
{
    int list[6]={10,2,20,7,50,1};
    quicksort(list,0,5);
    for(int i=0; i<6; i++)
    {
        printf("%d ",list[i]);
    }
    return 0;
}

퀵정렬의 장단점

🙆‍♂️ 장점

1. 정렬된 상태가 아닌 이상 시간복잡도가 O(nlogn)이라서 속도가 매우 빠릅니다.

2. 추가 메모리를 거의 사용하지 않기에 대규모 데이터를 다룰 때 메모리 사용량이 상대적으로 적습니다.

🙅‍♂️ 단점

1. ** 특정 조건(정렬된 상태) 하에 성능이 급격하게 떨어진다. (O(n2))**

2. 퀵 정렬은 재귀적으로 구현되기 때문에, 배열이 매우 클 경우 스택 오버플로우가 발생할 수 있습니다.

   마무리

   

   근데 킹갓 파이썬에서는 딸깍 몇번으로 퀵정렬 할 수 있습니다...네...감사합니다

영어단어로 Proxy란 대리 라는 의미를 가지고 있습니다. 프론트에서의 요청을 받고 서버대신 데이터를 전달해주는 의미로 볼 수 도 있습니다.

a 가 프론트, c가 서버일때 원래는 a - c 이렇게 데이터를 주고받았다면 프록시 b 를 통해서 a - b - c 형태로 주고받을 수 있습니다.

하면 좋은점들

1. CORS 문제 해결

Proxy는 다른 도메인 간의 데이터 요청 시 발생하는 CORS 문제를 우회할 수 있게 해줍니다. Proxy를 사용하면 서버끼리의 통신으로 간주하여 제한을 피할 수 있습니다.

2. 간편한 개발 환경 설정

//프록시 설정없이
const addTodo = async () => {
      const response = await axios.post("http://localhost:8080/user/insert", {
          task:newTodo
      })
};
//프록시 설정 on
const addTodo = async () => {
      const response = await axios.post("/user/insert", {
          task:newTodo
      })
};

간단하게 할일을 추가하는 axios문 입니다. Proxy 설정으로 인해 axios문마다 굳이 http://localhost:8080 해주지 않아도 처음으로 자신의 url에 있나 확인 후 없다면 Proxy에 있는 url을 사용하여 api요청을 보냅니다.

3. 보안 및 로깅 기능 강화

Proxy 서버는 데이터 요청을 중간에서 필터링할 수 있기 때문에, 요청 기록(log) 관리와 보안 필터링 기능을 제공합니다. 이를 통해 애플리케이션 보안을 강화하거나 요청 데이터를 더 잘 추적할 수 있습니다.

4.속도 개선

캐싱 기능을 설정해 같은 요청에 대한 응답을 Proxy 서버에 저장함으로써 다음 요청에 대해 더 빠르게 응답을 제공하여 불필요한 연산을 줄여줍니다.

이밖에도 다양한 좋은기능들이 있을겁니다. 네

리액트에 적용시켜보자

pakage.json 방법

//pakage.json
{
  ...(다양한 스크립트들),
  "proxy": "http://localhost:5000"  // 프록시 추가
}

pakage.json에 스크립트로 프록시를 추가하면 프록시 설정 끝 간단하쥬?

라이브러리 활용하기

1. http-proxy-middleware 라이브러리 설치하기

   npm install http-proxy-middleware --save

2. src/setupProxy.js 파일 생성 src 폴더에 setupProxy.js 파일을 만듭니다. 이 파일이 존재하면 create-react-app에서 자동으로 인식하여 프록시 설정을 적용합니다.

3. 프록시 설정 코드 추가

   // src/setupProxy.js
   const { createProxyMiddleware } = require('http-proxy-middleware');
   

module.exports = function (app) { app.use( createProxyMiddleware({ target: 'http://localhost:5000', // 백엔드 서버 주소 changeOrigin: true, }) ); };

이렇게하면 설정 끝~

## 마치며
앞으로 프록시서버를 잘 이용해서 개발해보도록 하겠습니다. 감사합니다.

타입스크립트는 기본적으로 변수나 함수의 타입을 지정해줄 수 있습니다.

데이터를 주고받을때 데이터의 타입이 객체여야하는데 문자열로 와서 오류를 일으킨다?

오류가나서 오류메시지를 확인했더니 다른곳을 가르키면서 여기 오류났다고 알려준다?

props로 받아왔는데 이 prop이 어떤 prop인지 어케알아? - 그렇기에 propsType을 사용함...

이러한 상황을 방지하기위해서 타입스크립트를 써야합니다. 걍 유용합니다. 얼른 js에서 갈아탑시다.

기본으로 알아야할것들

타입을 지정해주는 방법으로 크게 type과 interface가 있습니다. user의 데이터 타입을 정의해 보겠습니다.

type

기본적으로 type 이름과 함께 타입을 정의해주시면 됩니다. 배열은 type 이름 = 타입[]; 한다면 해당타입의 배열을 지정해줄 수 있습니다. 객체는 중괄호! 또한 |이나 & 타입을 활용하여 설정해주기도 가능!!

interface

객체의 형태로 만들어져 객체의 타입을 지정하는데 유리합니다. interface에 interface를 상속받아서 User에는 live라는게 없지만 상속을 통해 있는것으로 간주합니다.

type과 interface의 차이점 type: 유니언(|) 및 교차(&) 타입을 쉽게 사용할 수 있어, 여러 타입을 결합하거나 선택적 타입을 설정할 때 유용합니다. interface: 주로 객체의 구조를 설명하는 데 특화되어 있습니다. 또한 extends를 사용해 다른 인터페이스를 상속받습니다. 정리 interface는 객체를 정의하는데 유리 type은 여러 타입을 조합할때 유리

Pick, Omit

Pick

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

// User 타입에서 id와 name 속성만 선택
type UserPreview = Pick<User, "id" | "name">;

const user: UserPreview = {
  id: 1,
  name: "Alice"
  // age나 email을 추가하면 오류 발생
};

Pick은 원래있던 인터페이스에서 골라올 수 있습니다. 내가 사용하고 싶은 인터페이스에서 조금만 골라내면될때 굳이 다시 선언을 하지않더라도 쓸 수 있는 유용한친구입니다.

Omit

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

// User 타입에서 id와 email 속성을 제외
type UserWithoutContactInfo = Omit<User, "id" | "email">;

const user: UserWithoutContactInfo = {
  name: "Alice",
  age: 25
  // id나 email을 추가하면 오류 발생
};

Omit은 Pick과 반대로 몇개만 빼고싶을때 쓸 수 있습니다.

제네릭

제네릭은 타입계의 변수같은느낌? 어떤 타입이 올지 모를때는 제네릭을 활용하여 선언해주면 개꿀딱지 ㅎㅎ

타입 설정하기

타입

타입안에 타입을 선언하기도 쌉가능!!! 이것으로 반복되는 코드들을 줄일 수 있어서 행복합니다 ㅎㅎ

변수

number, string, 등등 선언해줄 수 있습니다. 위에서 선언해주었던 type도 이용해서 선언할 수 있습니다.

함수

function 형태든 화살표 형태든 매개변수에 타입지정 후 리턴값에도 타입지정해주기!

배열

배열을 여러형태의 배열로도 저장할 수 있습니다.

객체

interface를 활용하여 객체의 타입지정해주기

훅

useState : 제네릭을 활용하여 설정하기

const [user, setUser] = useState<string>();

useEffect : 매개변수에도 타입설정, 반환값에도 타입을 설정해주기

useEffect((num:number):number => {
    return num;
}, [user]);

useRef : useRef에서는 HTML요소나 null 설정해준 후 넣기 혹은 useState처럼 제네릭을 이용해서 설정해주기

const divRef = useRef<HTMLDivElement | null>(null);
const countRef = useRef<number>(0);

useContext : createContext에서 타입을 지정해주면 자동으로 useContext로 불려올때 타입이 지정되서 옴.

interface User {
    name: string;
    age: number;
}

const UserContext = React.createContext<User | null>(null);

const MyComponent = ():User => {
    // useContext에서 `user`가 `User | null`로 추론됨
    const user = useContext(UserContext);
    return user;
};

마치며..

이밖에도 typescript의 유용한 문법들은 정말 많습니다. 더욱 공부하여 사용하면 좀 더 편안한 개발을 할 수 있을겁니다(아마..?)감사합니다

: 유니온 파인드 알고리즘은 대표적인 그래프 알고리즘 중 하나로, 주어진 그래프의 노드들을 서로 다른 집합으로 분리하거나, 두 개의 노드가 같은 집합에 속하는지 여부를 판단하는 데 사용됩니다.

Union-Find 알고리즘의 과정

과정은 총 3단계로 이루어져 있습니다.

Set()

초기화를 담당해주는 함수

• union 과 find 연산을 하기전에 노드들을 하나의 집합으로 초기화해주는 함수입니다.

  Union()

  더하기를 담당해주는 함수
• 받은 두 집합을 합쳐줍니다.

  Find()

  찾는것을 담당해주는 함수
• 주어진 노드에 따라 대표 노드를 반환해준다.

예시

문제

오늘은 새학기날이다. 현수네 반 학생은 N명이다. 현수는 각 학생들의 친구관계를 알고 싶다. 모든 학생은 1부터 N까지 번호가 부여되어 있고, 현수에게는 각각 두 명의 학생은 친구 관계 가 번호로 표현된 숫자쌍이 주어진다. 만약 (1, 2), (2, 3), (3, 4)의 숫자쌍이 주어지면 1번 학 생과 2번 학생이 친구이고, 2번 학생과 3번 학생이 친구, 3번 학생과 4번 학생이 친구이다. 그리고 1번 학생과 4번 학생은 2번과 3번을 통해서 친구관계가 된다. 학생의 친구관계를 나타내는 숫자쌍이 주어지면 특정 두 명이 친구인지를 판별하는 프로그램 을 작성하세요. 두 학생이 친구이면 “YES"이고, 아니면 ”NO"를 출력한다.

▣ 입력설명 첫 번째 줄에 반 학생수인 자연수 N(1<=N<=1,000)과 숫자쌍의 개수인 M(1<=M<=3,000)이 주어지고, 다음 M개의 줄에 걸쳐 숫자쌍이 주어진다. 마지막 줄에는 두 학생이 친구인지 확인하는 숫자쌍이 주어진다.

정리 : 친구관계를 입력받고 친구의 친구면은 친구가 된다..! 입력 예시 : {1, 2} {2, 3} {3, 4} 면은 1,2는 친구, 2,3은 친구, 3,4는 친구일때 2,3이 친구여서 1,4도 친구가 된다. 사람두명을 입력받아서 친구인지 아닌지 판단해주는 문제!

풀이 과정

입력 : 4 3 {1, 2} {2, 3} {3, 4} {1, 4} 4 = 학생 수 3 = 입력받을 갯수({}중괄호당 1개) 마지막 {1, 4}는 확인받고 싶은 친구 관계 출력 : Yes

전체 코드

#include<stdio.h>

int n, parent[1001];

int Find(int v)
{
    if (parent[v] == v)
        return v;
    else
        return parent[v] = Find(parent[v]);
}

void Union(int x, int y)
{
    x = Find(x);
    y = Find(y);

    if (x != y)
        parent[x] = y;
}

void Set()
{
    int i;

    for (i = 1; i <= n; i++)
        parent[i] = i;
}

int main(void)
{

    int m, i,a, b;

    scanf("%d %d", &n, &m);

    Set();

    for (i = 0; i < m; i++)
    {
        scanf("%d %d", &a, &b);

        Union(a, b);
    }

    scanf("%d %d", &a, &b);
    if (Find(a) == Find(b))
        printf("YES\n");
    else
        printf("NO\n");

    return 0;
}

과정1

//배열을 인덱스의 값으로 초기화 하고있음
void Set(){
    for(int i=0; i<=n; i++){
        parent[i]=i;
    }
}

부모 배열을 하나 만들어주고 set함수를 이용하여 노드들의 값을 하나의 집합으로 초기화 시켜줍니다.

과정2

void Union(int x, int y){
    x = Find(x);
    y = Find(y);

    if(x!=y)
        parent[x] = y;
}

union 함수로 받은 값들이 원래 있던 값인지 확인해준 후 리턴해줍니다.

과정3

int Find(int v){
    if(parent[v] == v){ //부모와 값이 같다면 그대로 리턴하여 유니온함수의 x,y값 지정
        return v;
    }
    else{ //부모의 값을 계속 리턴받으며 친구 관계를 확인
        return parent[v] = Find(parent[v]);
    }
}

find 함수로 확인하고 싶은 친구 관계를 확인해줍니다.

정리

Union 알고리즘은 여러 개의 집합을 하나로 합쳐서 작업을 처리하는 방법입니다. 집합과 노드들을 이용해서 사용해보세요 ㅎㅎ

우리의 효자 useState. 이친구는 내가 본 변수중에 제일 저장하기 좋은 변수입니다. count에 변수를 저장해뒀다가 setCount로 count의 수를 바꿔줍니다. 그러면 엥? 그냥 count = 1, count++ 해주면 더 간편한거 아닌가? 싶지만 노노노

화면에있는 값까지 같이 렌더링시켜주면서 변수의 값을바꿔주기 때문에 좋다 이말이야

useEffect()

의존성배열을 활용하여 useEffect 사용하기

컴포넌트가 렌더링될때만 함수를 실행시키고싶다면 useEffect를 써야합니다.(의존성배열은 빈배열이 됨) 또한 조건이 충족될때 렌더링 되게하고싶다면 useEffect를 사용해줍니다.

useContext()

우리는 보통 다른 컴포넌트로 데이터를 보낼때 props를 사용합니다. 하지만 데이터를 사용하지 않는 컴포넌트 또한 props로 받아야 필요한 다른 컴포넌트로 전달할 수 있습니다. 이런 번거로움을 해결하고자 useContext()를 사용해줍니다.

사용방법

createContext로 Context를 만들어 준 후 데이터를 담아 호출해줍니다. 이렇게 불러와서 사용할 수 있습니다.

useRef

useRef 의 기능으로는 두가지가있습니다.

첫번째 저장공간으로서의 기능입니다.

자주 바뀌는 값을 state 로 설정해둔다면 바뀔때마다 렌더링 되므로 비효율적입니다. 그렇기에 자주바뀌지 않는값을 Ref로 지정해둡니다.

어? 근데 이러면 그냥 let 쓰면 되는거 아니에요? 할 수 도 있지만 let변수를 선언하고 state를 이용해서 렌더링 시킨다면 let변수는 다시 0으로 초기화 되어서 사용할 수 가 없습니다.

사용방법

Ref는 오브젝트형식으로 값을 저장해줍니다. 값을 current에 담을 수 있으며 불러올때 또한 current를 이용해 줍니다.

두번째 돔요소 조정으로서의 기능입니다.

돔요소를 Ref 변수에 담을수도 있습니다!

사용방법

예제 : 렌더링됐을때 인풋박스로 포커스해두기 돔 요소에 ref 속성을 추가하여 Ref변수를 넣어줍니다. 그렇다면 Ref의 current에 돔요소가 담기게됩니다. 요소의 value와 focus등등을 이용하여 기능을 만들수도 있습니다!

useMemo

useMemo는 값을 지정해서 메모리에 저장시켜주는 훅입니다. useEffect의 상위호환같은 느낌??? useMemo는 값의 메모이제이션을 위해 사용됩니다. 내가 이 state가 변할때 얘는 실행안시키고 다른 함수만 실행시키고 싶은데...싶을때 딱좋은 친구 *메모제이션 : 메모리에 저장시켜뒀다가 써먹는 그거 맞음 ㅇㅇ

사용방법

10000을 더해주는 함수와 1을 더해주는 함수입니다. 10000을 더해주는 함수는 for문이 돌아서 오지게 느립니다. state가 바껴서 렌더링될때마다 이런 함수를 계속 실행시켜주면 큰일나겠죠? 그래서 useMemo를 이용하여 state인 hardNum이 바뀔때만 hardSumf() 가 실행되도록 하였습니다.

이러면 그냥 useEffect 쓰는거랑 뭐가다르냐 하실 수 있지만 hardNum이 object라고 생각해봅시다.

hardNum에는 주소가 들어간다는거 알고계시죠? 네, 그때 useEffect를 쓴다면 hardNum에 들어있는 주소는 바뀌지 않기 때문에 아무리 object안에 값 이 변해도 인식을 못한다~ 이말이야 하지만 우리의 useMemo 는 그런것까지 다 인식해준다 이말이야^^

useCallback

useCallback은 useMemo와 비슷하게 컴퓨터 메모리에 저장시켜주는 훅 입니다. 그렇기 때문에 꼭 렌더링될때 함수가 새로 생성되지 않도록해주는 훅입니다. 주로 자식 컴포넌트에 콜백 함수를 전달할 때, 불필요한 렌더링을 막기 위해 사용됩니다.

사용방법

다음과같은 변수가 있다고 할때 someNum에는 함수들이 객체로 저장되어 함수가 들어있는것이 아닌 주소를 가지고 있는것입니다. 그렇기때문에 state가 바뀌어서 새로 렌더링이 될때마다 다른 주소값을 가지게 됩니다. 그러면은 또 렌더링될때마다 값이같은 함수실행하고 의미가 없죠? 그래서 useCallback을 사용하여 num이 바뀔때만 해당 함수가 실행되도록 하였습니다.

마지막

솔직히 모르겠으면 강의 찾아보는게 ㄹㅇ 개꿀딱지 https://www.youtube.com/@starcoding 이분꺼 보고 내꺼 다시보면 아하 이래서~ 그냥 나옴;;

key를 지정하지않는다면?

key를 지정해주지 않는다면 배열함수가 돌아갈때 모든 요소들을 렌더링시켜버립니다. 위 코드로 예시를 들자면 새로운 요소가 추가될때마다 원래 있던 요소를 기억하지못하여 다시 모든 리스트들을 생성해냅니다. 만약 리스트가 1000개, 10000개가 있는데 추가될때마다 생성되면 욕도 오지게 생성되겠죠잉?

잘못된 key를 지정한다면?

index는?

근데 그럼 key로 index값 주면 끝 아니야? 할 수 있습니다. 하지만 index도 무적은 아닙니다. 추가하기가 됐을때 인덱스값이 밀려나면서 새로추가된 친구가 인덱스 0을 가지게되요. 이러면은 위에랑 똑같겠죠?

중복된다면?

중복된 key를 가지게 된다면? 당연히 이상해질거같지만 결과는 요소가 복제가 되거나 업데이트가 이상하게 될수도 있습니다. 당연히 하지말아야겠죠?

key를 지정하는 올바른 방법

네, 그래서 올바르게 주기위해서는 state를 오브젝트 형식으로 제작하여 id라는 key를 만들어줍니다. key를 id로 겹치지않게 지정해줍니다.

느낀점

솔직히 나도 key? 귀찮은데 안해야징ㅎ 이였지만 음 해야할것같다 안그러면 나중에 어어...? 이거 왜 안되지 왜 복사가 되지??? 하면서 GPT도와줘 ㅠㅠㅠ 할거 뻔함. 안그러기 위해서는 내가 똑똑해져야지 에효 그냥 key귀찮더라도 지정해주자~~

var

var는 중복선언을 허용합니다.

var num = 10;
console.log(num);

var num = 20;
console.log(num);

하지만 만약 같은 프로젝트를 진행하는 A개발자가 var 키워드로 num변수를 사용했습니다. 그런데 B개발자가 var 키워드로 num변수를 선언하여 사용한다면 값이 바뀌게되어 프로그램이 엉망이됩니다.

let

let은 중복선언이 되지않는다.

let num = 10;
console.log(num);

let num = 20;
console.log(num);

이렇게 한다면 에러가나며 진행되지않습니다. 이렇게 중복선언을 막아줍니다.

let num = 10;
console.log(num);

num = 20;
console.log(num);

const

const 는 상수로 분류되어 선언을 한 후 값을 바꿀려하면 오류가난다. (변수라고 부르지않음)

const id = "name"
const pw = 1234

id = "id" //오류
pw = 4321 //오류

호이스팅

호이스팅이란?

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다

var

console.log(a) //-> undefined
var a = 1;
console.log(a) //-> a

이렇게 작성해도 에러가나지않고 변수 a를 코드실행전에 변수가 있다는것을 인지하고 값이 선언되지않아 undefined가 뜨게 된다.

var의 호이스팅은 모든 호이스팅이 전역변수로 지정된다.

let, const

console.log(a) 
let a = 1;
console.log(a) 

let의 경우 호이스팅이 되지만 TDZ_(Temporal Dead Zone)_가 있어 에러가 나며 a를 선언하기전까지는 실행해주지 않는다.(const도 동일)

스코프

var

함수스코프란?

함수스코프는 함수안에서 변수가 선언되었다면 활용할 수 있습니다.

var의 경우 함수스코프로 되어있어 if문 밖에서 정의된 변수 x는 if문 안에서도 사용할 수 있습니다.

function main(){
    if(ture){
        var x = 0; 
    }
    console.log(x);
}

또다른 문제

function main(){
      var x = 1;
    if(ture){
        var x = 0;
        console.log(x) // -> 0
    }
      console.log(x); // -> 0
}

다음과 같이 var는 함수스코프이기 때문에 같은 함수에서 값을 다시 선언한다면 그대로 적용이 됩니다.

let

블록스코프란?

블록스코프는 중괄호({})를 기준으로 선언된 변수를 활용할 수 있습니다.

let의 경우 블록스코프로 되어 있어 if문에서 정의된 변수 x는 밖에서 consol.log(x)하지 못합니다.

function main(){
    if(ture){
        let x = 0; 
    }
    console.log(x);  //오류
}

function main(){
    if(ture){
        let x = 0;
        console.log(x); //x
    }
}

또다른 문제

function main(){
      let x = 1;
    if(ture){
        let x = 0;
        console.log(x) // -> 0
    }
      console.log(x); // -> 1
}

다음과 같이 let은 블록스코프이기 때문에 같은 블록에서 선언된것만 취급한다.

대부분의 언어에서 블록스코프를 사용하고 있습니다.

정리

이용할 배열

forEach

names.forEach(element => {
    console.log(element);
});

결과 { id: 'a', name: 'kim' } { id: 'b' } { id: 'c' } { id: 'd' } { id: 'e' } { id: 'f' } { id: 'g' } { id: 'h', name: 'kim' }

names의 값을 모두 반환해준다. 함수 안에서 실행되고 있는것이 뽀.인.트

map

let data = names.map((element)=>{
    return element.id
})
console.log(data); //배열로 return 됨

결과 [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ]

리턴을 해주어야하고 배열로 리턴되는것이 뽀.인.트

filter

data = names.filter((element)=>{
    return element.id=="a"
})
console.log(data);

결과 [ { id: 'a', name: 'kim' } ]

리턴하면서 조건을 달아줄 수 있다. 이걸 이용해서 리턴할 요소들을 걸러준다. + 배열로 리턴해준다. (map에서 동일하게 실행해준다면 True, False 로 나온다.)

some

data = names.some((element)=>{
    return element.id == "a"
})
console.log(data);

결과 true

리턴되는 조건이 있는지 없는지 true, false 로 출력해준다.

every

data = names.every((element)=>{
    return element.id =="a"
})
console.log(data);

결과 false

리턴되는 조건이 모두 해당하는지 살펴봐준다.

find

data = names.find((element) => {
    return element.name=="kim"
})
console.log(data);

결과 { id: 'a', name: 'kim' }

filter처럼 리턴에 해당하는 조건의 값을 리턴해준다. find에서는 스트링으로 리턴하고, 해당하는 값중 먼저있는 값을 리턴해준다.

정리

모두 각자의 장점이 있는 배열함수들이였다. 비슷한 함수들로는 find와 filter, every와 some이 있었지만 각자의 차이점이 뚜렷하여 적절한 때에 잘사용해야겠다^^

find → 스트링값으로 리턴, 처음에 가까운 값을 리턴 filter -> 배열로 조건에 해당하는 값 모두 리턴해준다.

팀 편성

나름 조금은 알던 애들이 있어서 나쁘지 않은데? 였고 후에 보니 잘하는 친구도 한명 껴있어서 너무 좋다 ^^ 였다.

아이디어 회의

처음 아이디어 회의는 참 순조로웠다. 이것저것 아이디어가 나오며 괜찮은데? 괜찮은데? 하며 디자인까지 팀원이 틀을 잡아놓겠다고하여 기분좋게 시작하였다.

다가올 앞길은 모른채..그저 기대반 설렘반 이였던....

첫째날

아이디어 갈아엎기

디자인하고 한대로 개발을 하고있던중 선생님들과 선배님들께서 우리의 아디이어를 듣고 피드백해주셨다. 하지만 들어보니 참신하지만 심사위원분들이 좋아할것같지 않은 아이디어, 너희하고 비슷한 아이디어 5팀넘게 있었다. 등의 얘기를 들었습니다.

확인해보니 진짜 다 거기서 거기 였습니다 ㅋㅋㅋㅋ 그래서 첫째날은 거의 아이디어 생각하는 시간 이였던것 같습니다. 여기 수정하고 저기 수정하고 이건어때? 저건어때? 하면서말이죠...

수정 -> 갈아엎기 -> 다시돌아가기 -> 수정 반복 후 결국엔 원래의 아이디어에서 조금 수정한 버전으로 들고갔습니다. (시간이 순삭되었던...)

둘째날

비상

아이디어에 시간을 많이 쏟아서 밤새 계속해서 개발을 진행하였습니다. 그래서 저희는 열심히 개발을하며 시간을 보냇지만 저는 백엔드와 프론트를 어떻게 연결해서 사용하는지, AI는 어떻게 활용하는지 전혀 몰랐기 때문에 큰 도움이 되지 못한것같습니다.... (이때 진짜 슬펏음)

망했다 ㅋㅋ

결국 잘하는 친구 한명이서는 한계가 있었고 심지어 제가 맡은 화면조차 친구에게 넘겨주었더니 폰트가 깨지고 비율이 이상하고 했습니다. 선배님께 물어보니 각각의 컴퓨터마다 기본적인 css가 다를 수 있다고 하였습니다. (근데 사파리에서 실행이랑 구글에서 실행도 다르더라..ㅋㅋ)

발표

결국에 우리는 구현해내지 못하고 피그마로만 디자인을 보여주며 발표했다.. 발표형식은 각각팀의 부스를 돌면서 심사위원이 평가하는것이였고 우리는 간단한 ppt를 준비해서 말빨로라도 좀 밀고 가야겠다 싶었다.. 다른 몇몇의 사람들은 발표를 들으며 떠드는걸 즐겨하셨지만 심사위원분들과 교장쌤께는 욕만 얻어먹고 말았다 ㅠㅠㅠ(나였어도 이건 좀 할듯 ㅇㅇ) 억울하거나 그런점은 없다. 내가 더 잘했으면 내가 더 열심히 했다면 결과는 바뀌었을 테니까

느낀점

이번 해커톤으로 인해서 깨달은점이 많은것 같습니다. 정말 제 자신이 어느정도인지 알게되고 아이디어가 정말 중요하구나. 내가 심사위원이였어도 쩝 다 비슷하네 이런 반응이 나올거같더군요..ㅋㅋ 그렇기에 아이디어가 참 중요한 것 같습니다. 또한 개발을 위해서 중요한것은 역시 첫째는 소통 두번째는 커뮤니케이션 세번째는 대화가 아닐까 싶습니다. 그리고 저의 개발 실력을 많이 키워야겠다고 다짐합니다. AI딱대. 너 딱 기다려.

⭐️--------------------------------------------------------------------------- 아이디어. 소통. 기술. ⭐️--------------------------------------------------------------------------- 그리고 디자인좀 잘하고싶다...