FE

[React] formData 객체 생성

프로젝트 개발 도중 formData로 서버에 POST 해야하는 일이 생겨 formData 객체를 생성하고 entries() 메소드를 사용하여 내용을 확인하는 코드를 작성했다. 원래는 store에서 JWT 토큰을 통해 받아온 유저의 아이디를 id 값으로 설정해주어야 하지만 일단 테스트를 위해서 id=1이라고 가정했다.// const id = useUserStore.getState().user.userId; //userId from userData const id = 1; //test용 const formData = new FormData(); //객체 생성 formData.append( //Data에 append 해준다. "requestDto", JSON.stringify({ id, name, descri..

[Socket.io] socket.emit과 socket.on

1. 클라이언트 → 서버로 데이터 보내기(socket.emit) socket.emit: 서버-클라 or 클라-클라 간에 이벤트 전송시 사용됨 지정된 이벤트 이름과 함께 데이터 전송 → 해당 데이터는 반대쪽 끝에서 이벤트 리스너에 의해 수신됨 socket.emit('message', 'Data Example'); socket.emit( 이벤트 이름+ 데이터 ); 2. 서버에서 데이터 수신하기(socket.on) 서버 측은 socket.on 메서드를 사용하여 특정 이벤트를 수신 대기(listen) 함 socket.on(수신하고자 하는 이벤트 이름, 해당 이벤트 발생 시 실행될 콜백 함수) io.on('connection', (socket) => { socket.on('chat message', (msg) =..

[Vite+React] 깃허브 페이지 배포 이미지 경로 에러

개인 페이지를 만들던 도중 Vite를 사용해서 개발, build하고 깃헙 페이지로 배포하는 도중, 일부 이미지가 뜨지 않는 에러 발생 이는 경로 문제인데, 이미지를 사용할 때 import 하는 방식을 써서 그랬다. src로 경로를 직접 입력해줘야 성공적으로 배포가 된다. public/images/ 폴더에 이미지를 저장했는데, 아래 두가지 방법으로 경로를 수정하면 에러가 해결된다. 1. 경로 맨 앞에 /를 붙여주기 ex) ./images/ 2. 경로 앞에 깃허브 페이지 주소를 붙여주기 [배포한 깃헙 페이지 주소]/images/

redux-actions, immer, hooks(useSelector, useDispatch)를 사용한 container component 생성

$yarn add redux-actions redux-actions: 액션 생성 함수를 더 편리하게 . createAction 함수: 매번 객체 직접 생성할 필요 없이 간단하게 액션 생성 함수 선언 가능 modules/counter.js import { createAction, handleActions } from "redux-actions"; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE' export const increase = createAction(INCREASE); export const decrease = createAction(DECREASE); const initialState = {number: 0}; c..

Redux를 활용한 투두리스트 구현

리액트 애플리케이션: 컴포넌트 간의 데이터 props로 전달 컴포넌트 여기저기에서 필요한 데이터 있을 시 주로 최상위 컴포넌트인 App의 state에 넣어서 관리 리덕스(Redux): 전역 상태 관리 작업을 처리하는 상태 관리 라이브러리 프레젠테이셔널 컴포넌트 / 컨테이너 컴포넌트 분리 형식이 가장 많이 사용되는 패턴 프레젠테이셔널 컴포넌트: 상태 관리가 이루어지지 않고 그저 props를 받아와서 화면에 UI를 보여주기만 함 컨테이너 컴포넌트: 리덕스와 연동되어 있음, 리덕스로부터 상태를 받아 오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 함. 리덕스 사용할 때: 액션 타입, 액션 생성 함수, 리듀서 코드 작성 필요 가장 일반적인 구조: actions / constants / reducers 디렉터..

Todo app

chrome 확장 프로그램 react developer tools 넘나 좋군 리액트 개발팀 분들아... 고맙다 ... useCallback 리액트 렌더링 성능을 위해 제공되는 훅. 컴포넌트가 렌더링 될 때마다 함수를 생성해서 자식 컴포넌트의 속성으로 넘겨준다. on~~함수 값이 매번 다르게 되어 매번 렌더링이 되는데, 재 렌더링을 방지하기 위해 사용함. 첫번째 파라미터 - 기존함수두번째 파라미터 - []배열 *두번째 파라미터 배열 값에 함수가 재생성할 기준을 할당. if 다른 변수를 참조하게 된다면 그 변수들을 두번째 파라미터 배열값으로 넣어줌. => 해당 함수는 파라미터가 바뀔 때만 재 생성하게 됨. 데이터 렌더링 , 최적화 하나 항목 업데이트 렌더링 시간 너무 김. *느려지는 원인 분석 todo1 체..