백준으로 문제를 풀고있으면 테스트하기 어렵다는 단점이 있습니다. 이 때, Replit을 통해 테스트를 할 수 있는 방법을 소개하겠습니다. 1. https://replit.com/ 에 접속합니다. 2. 회원가입을 진행합니다. 3. 로그인합니다. 4. 아래의 화면이 표시되는데요. 우측 상단에 '+'버튼을 누릅니다. 5. Template: Node.js 선택 6. Title 입력 7. '+ Create Repl'을 클릭한다. 8. 아래와 같이 Repl이 생성된 것을 알 수 있습니다. Repl이란 Read Eval Print Loop라는 뜻으로 읽고 평가하고 출력하고 반복하라는 뜻입니다. 사용자의 입력을 취하고 이를 평가하고 결과를 사용자에게 반환시키는 단순한 상호작용 컴포터 프로그래밍 환경입니다. 9. 백준의..

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 하게 상태 관리를 할 수 있습니다. 이 장에서는 리덕스 미들웨어의 개념을 이해하고, 미들웨어를 사용하여 비동기 작업ㅇ르 처리하는 방법을 알아보겠습니다. 미들웨어란 리덕스 미들웨어는 액션을 디스패치했을 때(=액션을 발생시키는 것) 리듀서에서 ..

1.no-case-declarations case/default 절에서는 선언을 허용하지 않는다. 이유는 선언이 전체 스위치 블록에서는 볼 수 있지만 해당 case에 들어올 때만 초기화되기 때문이다. 나의 경우는 해당 case에서만 사용할 것이기 때문에 case안에 넣고 싶다. 굳이 필요없이 api를 호출하고 싶지 않기 때문이다. 해결방법 var로 선언 블록으로 감싼다. 나의 경우는 블록으로 감싸는 것을 택했다. 참고: https://eslint.org/docs/latest/rules/no-case-declarations no-case-declarations - ESLint - Pluggable JavaScript Linter A pluggable and configurable linter tool fo..

immer 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 해 주는 라이브러리이다. 1. immer 설치 yarn add immer ▽ 참고 https://immerjs.github.io/immer/

컴포넌트의 코드를 재사용하기 위한 고급기술이다. imoprt produce from 'immer'; // produce는 두 가지 파라미터를 받는다. // 첫 번째 파라미터는 수정하고 싶은 상태이다. // 두번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수이다. // 두번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, // produce 함수가 불변성 유지를 대신해 주면서 새로운상태를 생성해 준다. const nextState = produce(originalState, draft => { draft.somewhere.deep.inside = 5; })

1. https://ngrok.com/ 에 접속한다. 2. 'Sign up for free'를 클릭한다. 3. 회원가입 완료 후 아래의 페이지가 표시된다. 4. 'Download for Windows'를 클릭한다. 5. C:\Windows\System32에 zip파일을 푼다. 6. C:\Users\jiyoon\AppData\Local\ngrok에 ngrok.yml파일을 생성한다. 7. 외부에서 접속하고자 하는 로컬 서버를 실행한다.(httpL//localhost.3000) 8. C:\Users\jiyoon\AppData\Local\ngrok에서 아래의 명령어를 입력한다. C:\Users\jiyoon\AppData\Local\ngrok>ngrok start --all 9. 'https://7809-125-..

1. 이진트리 넓이우선탐색(BFS) 출발지에서 도착지까지 가는 최단거리를 구할 때 사용한다. 2. 문제풀이 5에서 시작해서 -1, +1, +5를 해서 4, 6, 10을 만든다. Level 2인 4로 가서 3, 5, 9를 만드는데 5부터 다시 하면 무한루프를 돌기 때문에 이미 지나친 곳은 제거해준다. 그럼 Level 2는 3, 9, 7, 11, 15가 된다. 도착지인 14가 없으므로 Level3으로 간다. 2, 8, 14,... 진행되는데 14가 나왔으므로 끝낸다. function solution (s, e) { let answer = 0; let ch = Array.from({ length: 10001 }, () => ); let queue = []; queue.push(s); ch[s] = 1; let..

일단 페이지가 총 세개가 필요하다. https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad Configure third party OAuth authentication - Teams Describes authentication in Teams and how to use it in tabs docs.microsoft.com https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-auth/nodejs/src/views/tab/simple GitHub - OfficeDev/Microsoft-Teams-Samples:..