위의 이미지가 redux 동작원리의 전부입니다. (미들웨어가 빠졌지만 이는 뒤에서 설명하겠습니다.) 설명하기에 앞서 각각의 요소에 대해서 알아보죠. Action 액션은 type 필드를 가진 자바스크립트 객체입니다. 쉽게 생각해서, 어떤 일이 일어났는지를 설명하는 이벤트라고 생각하셔도 무방합니다. 보통, type과 payload 프로퍼티를 가지며 type은 어떤 액션인지를 나타내며, payload는 데이터를 담습니다. 액션은 dispatch를 통해 reducer 함수로 보내지며 기존의 state를 기반으로 새로운 state를 생성합니다.(불변성을 지키는 것이 redux의 원칙이죠.) Dispatch redux에서 dispatch는 액션을 reducer로 전달합니다. 즉, state를 업데이트하는 유일한 방..
Frontend
webpack 공식문서에서 guide를 보며 정리해야할 것들을 기록으로 남기려합니다. 삽질하고, 헷갈리고, 중요 컨셉을 중점적으로 정리해보겠습니다. Asset Management 이미지나 폰트같은 자원들은 웹팩에 내장되어있는 로더를 사용합니다. { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource", }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: "asset/resource", } 로더를 정의하는 부분에서 type 을 정의해주는데요. asset/resource는 웹팩의 내장 로더인 file-loader를 사용하겠다는 것입니다. file-loader는 자원들을 output 파일에 생성하며 자원의 url을 expo..
테스트파일 절대경로 설정 상대경로가 너무 깊어지면 모듈을 import할때 매우 더러워지기 때문에 바벨, tsconfig.json에서 절대경로를 설정한다. 하지만 테스트 파일을 위한 절대경로는 따로 설정해줘야 한다. 당연히 jest.config.js에서 설정을 해야하며 아래와 같이 경로의 alias를 설정해 줄 수 있다. moduleNameMapper: { '^components/(.*)': '/components/$1', '^hooks/(.*)': '/hooks/$1', }, 맨 앞을 나타내는 정규표현식인 ^를 처음에는 안 써줬었는데 계속 path를 못 찾는 에러가 발생했다. ^를 써주니 $1 그룹도 잘 찾고 에러없이 테스트 파일을 실행시킬 수 있..
react와 redux toolkit을 활용해 테스트 코드 작성하는 방법을 공부하던 도중에 redux toolkit이 제공하는 createAsyncThunk를 테스트해야만 했습니다. 비동기 처리 로직을 담당하는 api이기 때문에 어떻게 테스트해야 하는지 고민을 했고 어떻게 결론에 도달했는지 공유합니다. Test flow export const fetchOneUser = createAsyncThunk( 'user/fetchOneUser', async (userId, { rejectWithValue }) => { try { const res = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`); return res...
