SSE를 통해서 실시간 알림을 구현해야 했다. 많은 웹사이트에서 확인 가능한 기능이며, 작은 부분이지만 구현하기는 꽤 어려웠다. 특히 서버쪽에서 헤더에 토큰을 담아서 보내달라고 하셨는데 EventSource 객체는 헤더에 접근 권한이 없기 때문에 다른 방법을 사용해야 했다. 또 컴포넌트가 랜더링 되었을때 최초 한번만 구독요청을 보내고 유지하도록 하는것이 중요했다. SSE란 SSE(Server-Sent Events)는 클라이언트(또는 브라우저)에 메시지를 받는 방법으로, 클라이언트와 서버 간에 초기 연결이 설정되면 서버가 메시지를 클라이언트로 전달할 수 있게 된다. 이때 한 방향으로만 (서버 to 클라이언트) 작동합니다. 한번 연결이 설정되면 이벤트가 발생하면 클로즈 하기 전까지 서버에서 데이터를 넘겨준다..

기존의 리덕스를 사용한 소스코드를 Redux ToolKit을 적용한 형태로 변경해보자. 설치 해당 프로젝트 폴더에서 yarn add 명령어를 통해 툴킷 패키지를 설치한다. yarn add @reduxjs/toolkit Redux 소스코드 수정하기 src/redux/config/configStore.js import { configureStore } from "@reduxjs/toolkit" import counter from "../modules/counter"; const store = configureStore({ reducer : { counter : counter, } }) export default store 스토어 소스코드 수정 Toolkit을 사용하면 스토어, 루트리두스를 한번에 설정할 수 ..

CRA를 통한 리액트 프로젝트 생성 Redux설치 Duck패턴을 적용한 Redux 사용하기 설치 프로젝트를 생성하고자 하는 경로에서 해당 명령어를 통해 리액트 프로젝트를 생성한다. yarn create react-app [프로젝트명] 생성된 프로젝트 디렉토리로 이동한다. cd [프로젝트명] yarn add 명령어를 통해서 해당 프로젝트에 리덕스와 react-redux 라이브러리를 설치한다. yarn add redux yarn add react-redux 프로젝트 구조 리액트에서 Duck패턴으로 리덕스를 적용할때 보다 알아보기 쉽게 하기 위해 프로젝트 폴더를 정리해 보았다. . ... ├── src │ ├── components │ │ └── Counter.jsx │ ├── redux │ │ ├── con..

useEffect 란 컴포넌트의 라이프사이클에 따라 Mount(랜더링), Update(리랜더링), Unmount(화면에서 사라짐)에 따라서 특정 로직을 수행하고 싶을 때 사용한다. 인자로 콜백함수와, 의존성배열(dependency Array)을 받는다. 의존성 배열에 값을 어떻게 넣어주는가에 따라 특정 라이플 사이클에만 동작하도록 실행조건을 제어 할 수있다(마운트 될때만, 특정값이 변경될 때만…) 인자 내 콜백함수의 return 작성을 통해 수행한 동작에 대한 클린이 가능하다. /* 콜백 함수만 받는 형태 */ useEffect(()=>{ /* 로직 */ }) /* 콜백함수와 의존성 배열을 받는 형태*/ useEffect(()=>{ },[/* 빈 배열, 혹은 상태값이 담긴 배열*/]) React 에서 u..

useState 란 가장 기본적인 Hook 함수형 컴포넌트도 가변적인 상태값을 가질 수 있도록 한다. React 에서 useState 사용하기 import 하기 import React, {useState} from 'react' // 시작은 import 부터 해주어야 합니다. // 코드에서 useState를 사용하면 대부분 에디터에서 자동으로 import 됩니다기본 사용방법 import React, { useState } from 'react'; // 변수선언자, 구조분해할당, 초기값설정 입니다. // const [값을 담을 변수명, 값을 변경할 함수명] = useState(초기값) // useState는 배열을 리턴합니다. 리턴된 배열을 구조분해 할당을 통해 값을 할당합니다..

CSS in JS CSS 스타일을 JavaScript 코드 안에서 정의하고 관리하는 방식을 말한다! CSS 클래스 이름이나 인라인 스타일을 직접 작성하는 대신, JavaScript 객체를 사용하여 스타일을 정의하고 관리할 수 있다. 컴포넌트별 스타일 관리 : 컴포넌트별로 스타일을 관리할 수 있다. 이를 통해 스타일의 재사용성을 높이고, 스타일 충돌 문제를 해결할 수 있다. JavaScript의 기능 활용 : JavaScript의 기능을 활용하여 동적으로 스타일을 변경할 수 있다. 코드 유지 보수성 : 스타일을 정의하는 코드와 해당 스타일을 사용하는 코드가 함께 있어서 코드 유지 보수성이 높아집니다. 리액트에서 CSS in JS를 구현하는 방법으로는 다양한 라이브러리가 있다. 대표적으로 Styled Com..