*강의를 참고하며 코드를 따라 적는 중 오류 발생 *

*분명 그대로 똑같이 쳤는데 문제가 발생한것에 의아해서 작성하던 코드단락을 확인 * *e가 할당되지 않았다고 뜨는데 이 때문에 오류가 생긴거구나 하고 그냥 넘기는 섣부른 판단을 함 *

하지만 다른 부분에서 누락한 코드도 없었기 때문에 계속 의문 ** *그제서야 첫번째 사진의 해당 화면을 확인 * ReferenceError: useNavigate is not defined *오류 원인이 첫번째 줄부터 대놓고 나와있는 모습 * **오류 로그를 제대로 확인도 하지 않고 멋대로 e를 할당하지 않아서 생긴 오류라고 치부하고 넘겼었고 import한번 해주니 문제 없이 출력 됐다

이전에도 수차례 오류 발생시에 오류 로그를 통한 문제 해결이 잘 안되었던 일이 있던 나머지 이런 일이 생긴것으로 판단 앞으로는 주의해야겠다고 생각했다

유틸리티 우선 (Utility-First) CSS 프레임워크.

빠르고 쉽게 스타일링을 적용할 수 있는 클래스를 제공

기존의 CSS-in-JS 라이브러리인 Styled-Components보다 유연하고 직관적인 스타일링을 제공

특징

• 다양한 유틸리티 클래스를 제공, HTML 요소에 직접 클래스를 추가하는 방식으로 스타일링 가능.

• 불필요한 스타일을 제거하고, 필요한 부분만 스타일을 적용하는 방식으로 최적화되어 있음

• React의 JSX 문법과 함께 사용할 수 있어, 스타일링이 간편

Styled-Components와의 비교

• Tailwind CSS

  • 장점: 유틸리티 클래스 기반으로 간편한 사용, 성능 최적화

  • 단점: 클래스 네임이 길어질 수 있음, 프로젝트 초기 설정 필요

• Styled-Components

  • 장점: JavaScript 파일 내에서 스타일링 가능, 동적 스타일링 지원, 컴포넌트 기반 설계
  • 단점: 초기 설정 및 학습 곡선, 스타일링 시 성능 이슈 발생 가능

*서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 *

= 로그인 과정

인가(Authorization)

인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차

= 로그인이 일어난 이후의 과정

쿠키

*쿠키란 브라우저에 저장되는 작은 데이터 조각이며, key-value 형태로 저장된다 *

세션

세션이란 사용자와 서버 간의 연결이 활성화된 상태를 의미하는 개념 또는 인증이 유지되고 있는 상태

토큰

클라이언트에서 보관하는 암호화 또는 인코딩된 인증 정보.

• 서버의 상태를 유지하지 않고도 클라이언트의 인증 상태를 확인이 가능

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것

주로 무한스크롤에서 사용

Debouncing

짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간이 경과한 후에 한 번만 호출하도록 하는 것

주로 입력값 실시간 검색, 화면 resize 이벤트 등에서 사용

setTimeout과 메모리 누수

메모리 누수 : 필요하지 않은 메모리를 계속 점유하고 있는 현상

하나의 페이지에서 페이지 이동 없이 setTimeout을 동작시키고 타이머 함수가 종료될 때까지 기다린다면 메모리 누수 X

리액트로 만든 SPA 웹사이트는 페이지 이동 시 컴포넌트가 언마운트 되는데, 페이지 이동 전에 setTimeout 으로 인해 타이머가 동작중인 상태에서 clearTimeout을 안해주고 페이지를 이동한다면, 컴포넌트는 언마운트 되었음에도 불구하고 타이머는 여전히 메모리를 차지하고 동작하기에 메모리 누수 O

배열이나 객체의 중첩된 상태를 업데이트할 때 불변성을 유지하지 않으면 상태 반영이 제대로 이루어지지 않아, 예상치 못한 오류가 발생 가능

• Mutable 메서드 불변성 유지 X Mutable 메서드는 원본 데이터를 직접 수정하여 변경된 데이터를 반환합니다. 이 방법은 간단하지만, 상태 변화 추적이 어려워져 버그 발생 가능성이 높아집니다.

• Immutable 메서드 불변성 유지 원본 데이터를 변경하지 않고, 수정된 새로운 데이터를 반환합니다. 이를 통해 불변성을 유지하며, 상태 관리가 쉬워지고 예측 가능한 코드 작성을 돕습니다.

immer

Immer는 JavaScript에서 상태를 쉽게 변경할 수 있게 해주는 라이브러리

원본 데이터를 변경하지 않고도 마치 직접 수정하는 것처럼 코드를 작성할 수 있으며, Immer가 자동으로 불변성을 유지한 새 상태를 만들어줌.

기존의 상태관리 라이브러리인 Redux는 제공하는 기능과 연계된 미들웨어 등 매우 강력한 퍼포먼스를 자랑하지만, 설정과 사용법이 복잡함

Zustand는 상태관리 본연의 기능에 집중하여 위와 같은 복잡성을 줄이고, 보다 간단하고 직관적인 상태관리 기능을 제공함

특징

• 매우 간단한 API를 제공

• 매우 적은 설정 코드 및 적용 코드를 이용하여 상태관리 기능을 구현 가능

• 불필요한 리렌더링을 방지하는 등, 성능 최적화가 잘 되어 있다

• Zustand는 상태가 변경될 때, 해당 상태를 구독(상태의 변경을 감지하고, 해당 변경에 반응하는 컴포넌트만 업데이트하는 메커니즘)하고 있는 컴포넌트만 리렌더링해요.

• 상태의 일부가 변경되었을 때 그 상태를 사용하는 컴포넌트만 업데이트되므로, 애플리케이션 전체가 리렌더링되지 않는다

설치

yarn add zustand

node.js와 브라우저를 위한 Promise 기반 http 클라이언트(http를 이용해서 서버와 통신하기 위해 사용하는 패키지)

axios 설치

yarn add axios

get

서버의 데이터를 조회할 때 사용

get 사용법

axios.get(url[, config])

POST

서버에 데이터를 추가할 때 사용

보통 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용함

PATCH

어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드

DB와 API 서버를 생성해주는 패키지

*프론트엔드에 집중해야 할 것이 많기에 직접 백엔드를 구축할 수 없어서 사용함 *

또한 프론트엔드에서 백엔드가 하고 있는 작업을 기다리지 않고, 프론트엔드의 로직과 화면을 구현 할 수 있어 효율적으로 협업 가능

설치

yarn add json-server

실행

*리액트, json-server 둘다 실행. 리액트와는 별개로 따로 실행필요. *

- db.json 파일 생성 - 파일 내에 json 형식으로 내용 입력 - yarn json-server db.json --port 지정숫자 입력으로 실행

요청과 그에 따른 응답이 순차적으로 일어나는 방식

• 요청을 보내면 그 응답이 올 때까지 대기하고 그 다음 작업을 수행

• 일의 순서가 중요한 경우에 사용하는 방식

• 처리 순서는 보장됨. 다만 응답을 기다리는 동안 다른 작업 수행이 불가능하기에 비효율적

비동기 처리

요청과 그에 따른 응답이 비순차적으로 일어나는 방식

• 요청을 보내고 응답을 기다리지 않고, 다음 작업을 계속 수행

• 일의 순서가 중요하지 않은 경우 효율적인 비동기 처리를 사용

Promise

자바스크립트에서 비동기 작업의 완료 또는 실패를 처리하기 위해 사용되는 개념

• Promise는 비동기 작업의 결과를 다루기 쉽게 하기 위해 만들어졌으며, 비동기 작업이 끝난 이후에 실행될 콜백을 등록할 수 있는 메서드를 제공

• 본래 콜백 함수를 중첩해서 사용하다 보면 코드가 복잡해지고 가독성이 떨어지는 문제가 발생함

• 이를 해결하려고 나온것이 Promise

HTTP (HyperText Transfer Protocol)

웹 상에서 데이터를 주고받기 위한 프로토콜

• 클라이언트와 서버 간의 요청과 응답을 정의하며, 상태코드와 헤더를 포함한 다양한 요소를 가지고 있다

• HTTP는 클라이언트가 요청을 보내면 서버가 응답을 반환하는 방식

** 위 코드는 MOCK_DATA의 id값과 페이지의 id값이 서로 일치하면 해당 정보를 불러오게 작동하는 코드이다 **

** 사전에 console.log(pokemonId); 을 작성하여 올바른 id를 불러오고 있는지 확인 후 진행하려는데**

id값 10번에 해당하는 페이지를 클릭했으나 MOCK_DATA값이 1인 정보가 가져와 지는 문제가 발생

작성한 코드를 다시 확인해본 결과 문제의 원인은 금방 찾았다

const selectedPokemon = MOCK_DATA.find(
    (pokemon) => pokemon.id === pokemon.id
  );

** 해당 로직 부분의**

pokemon.id === pokemon.id X pokemon.id === pokemonId O

일치연산자를 사용하는 곳에서 오타가 발생했던 것

아마 작성시에 비슷한 단어이니 복사하고 수정을 거치지 않은 듯 한데, 원래라면 설치해두었던 확장앱인 에러렌즈가 작동하여

** 해당 사진처럼 알려주어야 했으나 앞서 확인할 때 사용한 코드인 console.log(pokemonId); 로 인해 매치가 되어 에러렌즈가 감지하지 못하게 되었었다**

** 결론은 심각한 문제는 아니였지만 사용하지 않는 코드 특히 console.log를 이용한 코드는 바로 지워주거나 주석을 달아주는것이 좋다고 크게 느꼈었다**

참고 영상을 보며 과제 진행중 코드 작성 후 오류가 발생.

handleOnlclick is not function

참고하던 영상과 내가 작성하던 코드를 아무리 확인해도 다른 부분이 없다.

보통 이런 오류가 생긴다면 원인을 알고 해결하기 위해 검색등을 통해 해결하겠지만, 당장 앞에 보이는 영상에서는 문제없이 페이지가 작동하고 있기에 의구심이 듬.

코드를 작업 전으로 계속 돌릴까 생각하던 도중 코드를 저장하고 vscode를 재부팅하니 마치 아무일도 없었던 것 처럼 오류가 사라짐.

이런 경우는 처음이었기에 상당히 당황하였지만 앞으론 이런 시스템적 오류도 존재 할 수 있다는걸 깨달았다

// Dex.jsx
export default function Dex() {
  const [selectedPokemon, setSelectedPokemon] = useState([]);

  return (
    <DexContainer>
      <Dashboard selectedPokemon={selectedPokemon} />
      <PokemonList PokemonList={MOCK_DATA} />
    </DexContainer>
  );
}

PokemonList.jsx에서 pokemonList, onAddPokemon을 props로 받아오고 있었는데 문제발생

=> 페이지가 안열림 확인해보니 Dex.jsx 파일의 pokemonList를 불러오는 부분이 PokemonList로 앞글자가 대문자로 작성됨 이로 인해 props가 일치하지 않게 되어 오류가 발생했었다

*하필 얼핏보면 구분이 힘든 ( p, P ) 차이 때문에 한번에 알아차리기 어려웠던것도 큼 *

& ( i, I) 같은 경우에도 주의하자

위와 같은 현상을 방지하려면 props를 통해 데이터를 단계별로 전달하지 않는 useContext를 사용하는 것이 좋다

기본 생성 방법

import { createContext } from "react";

const TodoContext = createContext();

export default TodoContext;

부모 → 자식 데이터 전달 메커니즘 = 컴포넌트 간의 정보 교류 방법

• props는 반드시 [부모] → [자식] 방향으로 흐름
• 읽기 전용으로 취급하며, 변경하지 않음

구조분해할당을 이용해 props의 추출이 가능

function Todo({ title }){
    return <div>{title}</div>
}

상단의 Guide 클릭 후 좌측 nav에서 installation을 통해 Lucide 사용을 위한 페이지로 이동

React 항목에서 사용하고 있는 패키지를 선택 후 해당 명령어를 터미널에 입력하여 설치하기

아이콘 사용 메인 페이지에서 원하는 아이콘을 선택 혹은 검색

React를 선택 후 선택한 아이콘의 태그와 import항목을 복사 후 원하는 곳에서 붙여넣어 사용하기

*해당 사진에서는 ellipsis-vertical 아이콘을 선택했고 해당 이름 그대로 태그를 직접 작성하고 사용해도 무방하나 기호의 여부를 잘 생각하고, 첫글자를 대문자로 선택하는 것을 잊으면 안됨 *

• <ellipsis-vertical /> X
• <EllipsisVertical /> O

• 컴포넌트를 분리하면 각 컴포넌트가 독립적인 모듈처럼 작동하게 되어, 코드의 재사용이 가능하고 유지보수가 쉬워짐

• 하나에 파일에 모든 로직과 UI를 담는 것은 복잡성을 증가시킴. 그렇기에 여러 컴포넌트로 나누면 각 컴포넌트의 역할이 명확해져 코드의 가독성이 향상.

코드 재사용성 증가

• 버튼, 입력 필드 등 자주 사용되는 UI요소를 독립된 컴포넌트로 분리하여 여러 곳에서 재사용할 수 있다

분리 기준

• 컴포넌트는 각자 하나의 책임만 가지기

• UI요소에 따라 분리하기 (Header, Main, Footer 등)

컴포넌트가 화면에 보여지거나 사라졌을 때 무언가를 실행하고싶다면

=> useEffect를 사용

useEffect는 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 훅이다

App 컴포넌트가 화면에 렌더링 된 이후 useEffect 안에 있는 console.log가 실행

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
        // 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

useRef

useState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 hook

• Re-rendering과 상관없이 값을 기억하기 위해 사용되는 것이다

• state는 변경되면 렌더링이 되고, ref는 변경되면 렌더링이 안된다

스타일css 뼈대가 같은 요소 3가지에 각각 이름에 맞는 color값을 줘보기 => 조건부 사용

const App = () => {
  return (
    <>
      <StyledBox>RedBox</StyledBox>
      <StyledBox>BlueBox</StyledBox>
      <StyledBox>GreenBox</StyledBox>
    </>
  );
};

border값의 color 속성을 각각 바꿔줄 것 이기에 함수 사용을 위한 ${ } 안에 props 전달

const StyledBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
`;

*각 요소에 설정 값 지정 *

const App = () => {
  return (
    <>
      <StyledBox borderColor="red">RedBox</StyledBox>
      <StyledBox borderColor="blue">BlueBox</StyledBox>
      <StyledBox borderColor="green">GreenBox</StyledBox>
    </>
  );
};

같은 코드가 반복되고있다 => 리팩토링 필요 (switch문, map메서드)를 이용하기

switch문

const BoxList = ["red", "blue", "green"];

const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "RedBox";
    case "blue":
      return "BlueBox";
    case "green":
      return "GreenBox";
    default:
      return "BlackBox";
  }
};

map

const App = () => {
  return (
    <>
      {BoxList.map((boxColor) => {
        return (
          <StyledBox key={boxColor} borderColor={boxColor}>
            {getBoxName(boxColor)}
          </StyledBox>
        );
      })}
    </>
  );
};

결과

CSS Reset

브라우저마다 기본으로 제공하는 스타일을 초기화하고 기본값을 주기 위해 하는 설정

• CSS Reset은 cross browsing을 위해 필요한 작업들 중 하나

• cross browsing: 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 작업을 말한다.*

• 검색 등으로 Reset으로 자주 사용하는 속성들을 복사하여 사용하기

• 보통 reset.css 파일을 따로 작성하여, import

간단한 예시

(Chrome 브라우저)기준 CSS 초기화를 하지 않은 상태

(Chrome 브라우저)기준 CSS 초기화를 해준 상태

*CSS in Js : 자바스크립트안에 CSS => 자바스크립트 코드로 CSS를 작성 *

장점

• css-in-js를 사용해 기존의 import방식과는 달리 조건문, 변수 등 다양한 로직을 이용가능

css-in-js 방식을 이용하려면 styled-components를 사용해야 함

styled-components: 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지

사용법

• yarn으로 styled-components 설치

• 터미널에 yarn add styled-components 입력

• 설치 완료 후 아래의 형식을 지켜 사용

  const 변수명 = styled.적용하고싶은 html형식 `백틱안에 원하는 속성 기입`

변수명 적용 시 파스칼 케이스 사용 => PascalCase

추가로 알아둘 내용

( 1 )

const styledBox = styled.div``;

• 위 형식으로 styled-components 사용 시도 => 실패

• 변수명을 파스칼 케이스로 사용 안함

• StyledBox로 변경 => 성공

( 2 )

• css 속성 입력 시 자동완성 선택 할 때 tab키가 아닌 enter키 누르기를 습관화 하기

• => tab을 눌러서 자동완성을 하면 : (colon) X

• => enter를 눌러서 자동완성을 하면 : (colon) O

조건에 따라 값을 선택할 때 사용하는 연산자

<button onClick={() => toggleCompleted(todo.id)}>완료</button>

• 완료 문구만 적힌 텍스트에서 삼항연산자를 이용한 함수를 추가 {todo.completed ? "되돌리기" : "완료"}

<button onClick={() => toggleCompleted(todo.id)}>{todo.completed ? "되돌리기" : "완료"}</button>

<p>

• css추가, completed가 true면 line-through, false면 none. 취소선 추가

<p style={{textDecoration: todo.completed ? "line-through" : "none",}}>

(+) 위 두 예시 모두 자바스크립트 문법이 들어가기에 { } 기입은 필수.