Today Hailie Learned

대부분의 웹앱에는 인증 DOM이 필요하다. 인증 DOM =Authentication DOM 사용자가 로그인해야만 접근 가능한 구역이 있다. 1. 리액트 앱에서 인증이 작동하는 원리 2. 사용자 인증의 예시 (가입, 로그인, 로그아웃, 로그인 시 보호된 리소스에 접근하는 법) 3. 사용자가 페이지 떠나도 로그인 유지해주는 기능 & 자동 로그아웃 기능 웹사이트에서 인증이 필요한 이유 => 보호해야 할 정보가 있다!! 유저 비밀번호, 데이터베이스에 저장된 데이터 및 미인증 사용자의 접근이 제한된 페이지에 리액트 앱이 요청을 보낼 때 그 요청을 받는 API 엔드 포인트가 그런 데이터에 속한다. 프로필 페이지 자체에도 접근 제한 + 요청받는 API 엔드포인트에도 접근 제한 걸어야 한다. 인증이 어떻게 작동할까? ..

이번 문제에서는 (3), (4), (5), (6)위치에 들어갈 값을 구하는 프로그램을 작성하는 것이었다. 내가 생각한 해결 방법은 (1)에 (2)의 자리수 별 숫자를 곱하는 것이었다. 그래서 (2)에 들어간 숫자를 하나씩 뽑아와야했다. 타입이 숫자인 경우 split을 사용할 수 없기 때문에 숫자에 ''를 더해서 문자로 만들어주고, split('')을 사용해서 배열로 만들고, 배열을 풀어주는 방식을 썼다. 그리고 여기서 자릿수는 세자리 수로 정해져 있기 때문에 구조분해 할당을 써서 깔끔하게 썼다. const [a, b, c] = (num2 + "").split("").map(Number); 👇전체 코드👇 const fs = require("fs"); const [num1, num2] = fs .readFi..

캐시란 많은 시간이나 연산이 필요한 작업의 결과를 저장해두는 것 (일시적인 데이터를 저장하기 위한 목적으로 존재하는 고속의 데이터 저장 공간이다. ) 첫 작업 이후에 이 데이터에 대한 요청이 있을 경우, 데이터의 기본 저장 공간에 접근할 때보다 더 빠르게 요청을 처리할 수 있다. 캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 효율적으로 재사용할 수 있다. 기본 스토리지 계층인 SSD, HDD에 액세스하는 것이 아니라서 데이터 검색의 성능을 높인다. 캐시의 데이터는 일반적으로 RAM과 같이 빠르게 액세스할 수 있는 하드웨어에 저장되며, 소프트웨어 구성 요소와 함께 사용될 수 있다. 캐시의 장점 - 애플리케이션 성능 개선 - 데이터베이스 비용 절감 - 백엔드 부하 감소 - 예측 가능한 성능 캐시가 사용되..

가비지 컬렉션이란 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것. => JAVA, C#, JAVASCRIPT 등이 있다. 가비지 컬렉션 방법 ✔️ 트레이싱 : 한 객체에 flag를 두고, 가비지 컬렉션 사이클마다 flag에 표시 후 삭제하는 mark and sweep 방법 객체에 in-use flag를 두고, 사이클마다 메모리 관리자가 모든 객체를 추적해서 사용 중인지 아닌지를 표시(mark)한다. 그리고 표시되지 않은 객체를 삭제(sweep)하는 단계를 통해 메모리를 해제한다. ✔️ 레퍼런스 카운팅 : 한 객체를 참조하는 변수의 수를 추적하는 방법 객체를 참조하는 변수는 처음에는 특정 메모리에 대해 레퍼런스가 하나뿐이지만, 변수의 레퍼런스가 복사될 때마다 레퍼런스 카운트가 늘어난다...

컴퓨터의 기본 구조 하드웨어 = 입출력장치, 중앙처리장치(CPU), 기억장치 소프트웨어 = 하드웨어 위에서 제어하며 작업을 수행하는 프로그램 ✔️ 입출력장치 모니터, 스피커 등등 ✔️ 중앙처리장치 CPU의 구성 1. 산술/ 논리 연산 장치(ALU) = 레지스터에 저장된 데이터를 이용하여 덧셈, 곱셈 같은 산술 연산을 한다. 2. 제어장치 = 프로그램에 따라 명령과 제어 신호를 생성하여 각종 장치의 동작을 제어한다. 3. 레지스터 = CPU의 내부 메모리로서 CPU에서 사용하는 데이터를 일시적으로 저장하는 장소 (용량 적음) ✔️ 기억장치의 구성 - 주기억장치 = 데이터나 프로그램을 보관하기 위한 1차 기억 장치 / RAM & ROM / 시스템 꺼지면 지워짐 - 보조 기억장치 = 주기억장치보다 읽는 속도 ..

스레드란? 명령어가 CPU를 통해서 수행되는 객체의 단위이다. 하나의 프로세스 내에는 1개 이상의 스레드가 반드시 존재하고, 이러한 스레드는 같은 프로세스에 있는 자원과 상태를 공유한다. 하나의 스레드가 수정한 메모리는 같은 메모리를 참조하는 스레드에 영향을 미친다. 예를 들어 하나의 스레드에서 오픈한 파일을 다른 스레드가 사용할 수 있다. 프로세스가 종료되면 그 프로세스에 속해있던 스레드도 함께 종료된다. ✔️ 스레드의 필요성 하나의 프로세스 안에서 여러 개의 루틴을 동시에 수행해서 수행 능력을 향상하려고 할 때 스레드를 사용하게 되는데, 독립적으로 수행하여 처리하려고 할 때 사용하게 됩니다. 즉 여러 개의 작업 단위로 구성된 프로그램에서 요청을 동시에 처리하기 위해서! ✔️ 스레드의 특징 - 프로세스..

1. Redux Toolkit 설치하기 # NPM npm install @reduxjs/toolkit 2. package.json에서 리덕스 라이브러리 삭제하기 (Redux Toolkit에 이미 포함되어 있기 때문에 ) 3. 리듀서 함수 만드는 곳에 slice 만들기 - createSlice import { createSlice } from "@reduxjs/toolkit"; //리덕스 툴킷 시작하기 // createSlice가 createReducer보다 더 강력함 const initialState = { counter: 0, showCounter: true }; // 전역 상태의 slice를 미리 만들어놓기 // 코드를 유지보수하기 좋다. createSlice({ name: "counter", ini..

코드 분할 (Code Spliting) 번들링을 할 때, HTML 웹 페이지에 JS를 추가하는데, 모던 웹으로 발전하면서 점점 DOM을 다루는 정도가 정교해지면서 JS 코드 자체가 방대해지고 무거워졌다. 이를 해결하기 위한 방법으로, 번들을 물리적으로 나눈 후, 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 것이다. => 이게 바로 코드 분할! 코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다. 번들 분할 하는 방법 => 서드파티 라이브러리는 npm을 통해 다운받는 라이브러리인데, 사용자에게 다양한 메소드를 제공하기 때문에 코드의 양이 많고, 번들링 시 많은 공간을 차지한다. 그래서 사용 중인 라이브러리 전부..

useRef란? 1. 특정 요소의 DOM 주소값을 가져오는 React Hook이다. React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있다. React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고, 원하는 결과가 나오지 않을 수도 있기 때문이다. 그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있다. 이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있다. 하지만 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef..