FE

🌳7월1일 TIL🎶

🚀CRA를 사용한 프로젝트 세팅저번 주차 과제로 CRA(Create React App)을 사용하여 프로젝트를 세팅했다.출국을 코앞에 두고 급하게 진행했던터라, 여러 에러들을 마주했지만 차근차근 해결하지 못해 아쉬움이 남았다.오늘 코딩일기는 멘토님께 받은 피드백 위주로 기록을 해보려한다.📍dependencies와 devDependencies에는 어떤 차이가 있을까?dependencies에는 애플리케이션 동작과 직접적으로 연관된 라이브러리를 설치한다.npm install 라이브러리명devDependencies에는 프로그램 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치한다. devDependencies에 설치된 라이브러리는 배포할 때 포함되지 않는다. eslint와 prettier와 ..

[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 디렉터..