Today Hailie Learned

리액트에서는 태그 대신 Link를 사용해야한다. 이유는 태그의 href로 이동하면 상태값을 잃고 속도도 저하된다고 한다. 리액트의 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. 핵심 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 그래서 상태 값이 유지되지 못하고 속도도 저하된다. Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지를 새로 불러오지 않는다. 사용 예시 import { Link } from "react-router-dom"; ... log out 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

⭐️리덕스는 꼭 action을 통해서 상태를 변경해야해서 새로운 데이터를 반환해야한다!! 매우 중요!!⭐️ (아래 예시는 vanilla JS에서 쓰는 리덕스 예시 입니다. ) ❌그래서 아래처럼 바로 수정을 하면 안된다. ❌ const reducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return state.push(action.text) case DELETE_TODO: return; default: return state; } }; 🟢이렇게 수정해야한다. 🟢 const reducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return [...st..

최적화 (Optimization) 란? 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정이다. 최적화를 잘 해놓은 앱일수록 더 빠르게 함수를 호출한다. => 앱이 더 빠른 속도로 구동되면서 유저에게 좋은 UX를 준다. 여러 분야에서 최적화의 의미가 다르지만, 웹 개발에서의 최적화란, 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 하는 것이다. 왜 최적화를 해야할까?? 1. 이탈률 감소 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하는 것인데, 만약 최적화가 잘되지 않은 웹이라면 화면 로딩시간이 오래 걸린다는 뜻이다. 이는 사용자가 페이지를 이탈할 확률이 높아진다는 뜻이다. => 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로..

►배포 자동화 파이프라인 : 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조. 1. Source 단계 : 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행 2. Build 단계 : Source 단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공한다. 이 단계를 거쳐 생성된 결과물을 다음 단계로 전달하는 작업을 수행한다. 3. Deploy 단계 : Build 단계로부터 전달받은 결과물을 실제 서비스에 반영하는 작업을 수행한다. ►CI/CD 파이프라인 ✔️ 지속적 통합 (CI : continuous integration) 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식. Code : 개발자가 코드를 코드 저..

Lighthouse란? 사이트를 검사하여 성능 측정을 할 수 있는 도구이고, 개선책도 제공해주는 자동화 툴이다. - 구글에서 개발한 오픈소스이고, 성능, 접근성, PWA, SEO 등을 검사 한다. - Chorme DevTools, CLI, 노드 모듈 등 다양한 경로를 통해 사용 가능하다. - 검사 결과에 따른 리포트를 생성해주어, 점수가 낮은 지표를 한눈에 알아볼 수 있다. 1. 구글 개발자 도구에서 lighthouse 탭에서 검사 가능 2. Node CLI 에서 실행하기 - 전역 모듈로 설치 npm install -g lighthouse - 검사 실행 lighthouse - 모든 옵션 보는 명령어 lighthouse --help 👇 크롬에서 본 백준 페이지의 Ligthhouse 👇 👇 크롬에서 본 정..

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

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..

Custom Hook이란? 개발자가 커스텀한 Hook! 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을때 커스텀 Hook을 사용한다. Custom Hook의 장점 1. 상태 관리 로직의 재활용이 가능하다. 2. 보다 적은 양의 코드로 동일한 로직을 구현할 수 있다. 3. 직관적으로 코드를 짤 수 있어서 명료하다. Custom Hook 만들 때 규칙 1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이기 2. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은 조건부여서는 안된다. 3. 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다. 주의할 점 Custom Hook을 사용했다고 해서 두 ..