전체 글 527

TDD + node.js + typescript 세팅 반법

yarn add jest ts-jest @types/jest supertest dotenv yarn add --dev babel-jest @babel/core @babel/preset-env jest.config.js 파일을 프로젝트 최상단에 만들어주고 다음과 같은 내용을 작성하여 jest가 ts-jest를 사용하도록 알려주자 jest.config.js module.exports = { preset: 'ts-jest', //trypeScript파일은 ts-jest에서 CommonJS구문으로 변환 // testEnvironment: 'node', setupFiles: ['dotenv/config.js'], //테스트 환경 // testMatch: ['**/*.spec.[jt]s?(x)', '**/*.tes..

백엔드 2022.06.12

소켓 프로그래밍이란

사전적으로 '구멍', '연결', '콘센트' 등의 의미 이와 마찬가지로 네트워크 프로그래밍 관전에서도 소켓의 의미는 프로그램이 네트워크에서 데이터를 송수신할 수 있도록 "네트워크 환경에 연결할 수 있게 만들어진 연결부"가 바로 네트워크 소켓이다. TCP/IP 소켓 통신이란 보통 OSI 7 Layer(Open System Interconnection 7 Layer)의 네 번째 계층인 TCP(Transport Control Protocol) 상에서 동작하는 소켓을 주로 사용하는데, 이를 "TCP 소켓" 또는 "TCP/IP 소켓"이라고 부릅니다. (UDP에서 동작하는 소켓은 "UDP 소켓"이라고 합니다.) 클라이언트 소켓(Client Socket)과 서버 소켓(Server Socket) 두 개의 시스템(또는 프..

디버거 활용법

전체적인 변수의 값을 확인할 수 있습니다. 값을 임의적으로 변경할 수 있습니다. 전체적인 것을 확인하지 않고 관심있는 것을 확인하는데 사용됩니다. 변수에 대해서 알 수 있을 뿐만 아니라 result === 3인지 아닌지에 대해서도 알 수 있습니다. 함수가 어떤 순서대로 진행이 되었는지 알 수 있습니다. 로딩된 모든 스크립트를 확인할 수 있습니다. 우리가 걸어둔 브레이크 포인트를 볼 수 있습니다. 부분적으로 브레이크 포인트를 해제하려면 체크를 해제해주면 됩니다. 왼쪽부터 계속(F5): 바로 그 다음 브레이크 포인트로 실행 단위 실행(F10) : 코드를 한 줄 한 줄씩 실행합니다. 단 함수를 호출하는 경우 그 함수는 한번에 호출합니다. 단계 정보(F11) : 단위 실행과 비슷하지만 내부에 함수가 호출되면 함..

프론트엔드 2022.06.10

2022-06-08 면접 질문 정리

패킷 통신과 소켓 통신의 차이점을 말해주세요. 패킷 통신? IP 패킷 통신을 말한 것이 였을까? 패킷(Packet)이란 네트워크에서 출발지와 목적지간에 라우팅 되는 데이터 단위입니다. 아니면 HTTP통신과 소켓통신의 차이점을 말해달라는 것이였을까? https://applecoke.tistory.com/436 HTTP vs. WebSocket 정리 HTTP 통신 Hyper Text Transfer Protocol의 약자로써 인터넷에서 데이터를 주고받는 프로토콜을 말합니다. Client의 요청(Request)이 있을 때만 서버가 응답(Response)하여 해당 정보를 전송하고 곧바로 연결을 applecoke.tistory.com 버전 : 사용 중인 IP 버전을 식별하는 데 사용됩니다. 버전 4 (구현된 IP..

Intersection Observer API

Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection내의 변화를 비동기적으로 관찰하는 방법입니다. 일반적으로 알려진 해결방법은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 낳습니다. 일반적인 방법의 문제점 과거에 intersection 감지를 구현하면 영향을 받는 모든 요소를 알기 위해서 Element.getBoundingClientRect()와 같은 메서드를 호출하는 여러 이벤트 핸들러와 루프가 얽혀있었습니다. 모든 코드가 메인 스레드에서 실행되기 때문에, 이 중 하나라도 성능 문제를 일으킬 수 있습니다. intersection 정보는 아래와 같은 여러가지 이유 때문에 필요..

프론트엔드 2022.06.07

상태관리 라이브러리 Redux vs Mobx vs Recoil 전격비교

Redux Redux를 사용하기 위해서는 Action, Reducer, Dispatch, Store, view 등에 대한 개념을 알아야한다. 주요 개념 Action Redux에서 Action은 state를 바꾸는 방식이다. 액션 객체를 가지고 있고, 반드지 type 필드가 있어야 한다. Dispatch Action을 발생시키는 것으로 action 객체를 파라미터로 받는다. Reducer 변화를 일으키는 함수로 Action의 결과로 state를 어떤 식으로 바꿀지 구체적으로 정의하는 부분이다. 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아서 새로운 상태로 반환해준다. 리듀서는 파라미터 외의 값을 의존하면 안되고, 이전 상태는 건드리지 않은 상태로 새로운 상태 객체를 만들어 반환하는 순수 함수여..

프론트엔드 2022.06.05

알고리즘 이론 깨부수기 Sort

Bubble Sort n개의 원소를 가진 배열을 정렬할 때 In-place sort로 인접한 두개의 데이터를 비교해가면서 정렬을 진행하는 방식입니다. 가장 큰 값을 배열의 맨 끝에다 이동시키면서 정렬하고자 하는 원소의 개수 만큼을 두 번 반복하게 된다. Selection Sort n 개의 원소를 가진 배열을 정렬할 때, 계속해서 바꾸는 것이 아니라 비교하고 있는 값의 index 를 저장해둔다. 그리고 최종적으로 한 번만 바꿔준다. 하지만 여러 번 비교를 하는 것은 마찬가지이다. Insertion Sort n개의 원소를 가진 배열을 정렬할 때, i번째 배열을 정렬할 순서라고 가정하면 0부터 i-1까지의 원소들은 정렬되어 있다는 가정하에, i번째 원소와 i-1번째 원소부터 0번째 원소까지 비교하면서 i번째 ..

[leetcode] 1254. Number of Closed Islands

https://leetcode.com/problems/number-of-closed-islands/ Number of Closed Islands - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 입출력 예제 풀이 0이 육지이고 1이 바다이다. Return the number of closed islands. 즉 1(바다)로 둘러싸인 0(유지)의 수를 반환해야하는 것이다. 나의 풀이 방법은 이러했다. 이중배열을 돌면서 섬의 개수를 모두 센 후 그 중 보드판을 넘어..

코테 2022.06.04