판교너굴맨의 개발노트

문제 발생 Redux toolket에서 예시로 아래와 같은 코드를 작성했다. const target = [1,2,3] export const fetchDataCombine = createAsyncThunk( 'project/test', async (target) => { const response = [] // eslint-disable-next-line no-restricted-syntax for (const data of target) { const url = `http://localhost:3000/?target=${data}`; response.push(await axios.get(url)); } return response; } ); // error for..of 문 내부에서 'await'을 작..

이번 스프린트에 실시간 양방향 통신 기능이 필요해서 Socket.io로 구현하게 되었다. Socket.io란? Socket.io는 양방향 통신을 가능하게 하는 WebSocket 기반의 라이브러리이다. 공식 문서: https://socket.io/get-started/chat Socket.IO는 실시간 웹 애플리케이션을 위한 이벤트 기반 라이브러리이다. 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능케 한다. 출처: 위키백과 서버 측 구현 (Node Express) 1. Typescript 실행환경 세팅 2022.06.23 - [node.js] - [node.js] node.js + typescript 실행환경 세팅하기 [node.js] node.js + typescript 실행환경 세팅하기 node..

문제 발생 React Testing 중 아래의 코드에서 계속 문제가 생겼다. test('test', () => { //given render(); const menuButton = screen.getByText('사내문서'); //when fireEvent.mouseOver(menuButton); const dropdownMenu = screen.getByText('도서대장'); //then expect(dropdownMenu).toBeDefined(); }); 먼저 ant Design 의 드롭다운을 사용했다. 드롭다운 시 도서대장 메뉴가 DOM에 출력 되는지 확인하기 위한 테스팅 코드이다. 문제가 없어 보이는 코드이지만 screen.debug() 실행시 '도서대장' Text가 출력이 되지 않는다. 즉,..

문제 발생 페이지가 이동하면 window.location.pathname의 값이 페이지 별로 받아와야 하는데 로딩 시에만 받아와서 헤더 컴포넌트가 원하는 화면에 출력되지 않음 해결 과정 contents 컴포넌트는 router가 적용된 컴포넌트가 아니기 때문에 window.location.pathname의 값이 로딩 될 때 한 번 받아오고 컴포넌트 끼리 라우터 될 때는 값을 받아오지 못했다고 생각함. 해결 withRouter함수로 라우터 컴포넌트가 아닌 contents컴포넌트를 감싸면 해당 컴포넌트에 라우터 기능이 적용 되어 history, match 등의 함수를 사용할 수 있으며, 페이지 이동 시(라우터 페이지) 주소 값을 받아올 수 있음 function Contents({ history }: Route..