함수형 프로그래밍 Side effect가 없이 in, output이 동일한 순수함수로만 작성되고 공유상태, mutable을 피하는 SW를 만드는 프로세스 함수형 프로그래밍은 명령형(imperative) 이 아닌 선언형(declarative) 이며 애플리케이션의 상태는 순수 함수를 통해 전달됩니다. 애플리케이션의 상태가 일반적으로 공유되고 객체의 메서드와 함께 배치되는 객체 지향 프로그래밍과는 대조됩니다. 출처 함수형 프로그래밍은 딱 정해진 것이 아니라, 특징들을 갖는 프로그래밍의 패러다임이다. 애플리케이션의 상태가 일반적으로 공유되고 객체의 메서드와 함께 배치되는 객체 지향 프로그래밍과는 대조된다는 말은, 애플리케이션의 상태(클래스의 멤버변수)가 공유되고 메서드를 통해 처리되는 객체지향과 선언형이 다르다..

"Cancle an Axios request" Axios comes with a cancellation option to finish a request before it ends. This is useful besides the cleanup function to prevent memory leaking GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com useEffe..

https://www.acmicpc.net/problem/2638 상, 하, 좌, 우로 인접하고 값이 1인 치즈의 테두리값을 지워나가서 모든 치즈가 녹을 때까지 걸리는 시간을 구하는 문제다. 조건이 하나있는데 치즈 내부에 빈공간에 대해서는 노출된 면이 2면이어도 녹지 않는다는 것이다. 따라서 내부의 빈공간을 다른 값으로 마킹해야하는 것이 중요하다고 생각했다. 내부의 공간을 하는 것보다 외부의 값을 마킹하고 나머지 0부분을 내부값으로 쓰는 것이 좋다고 생각해서 외부값을 먼저 -1로 치환하고 난 다음, 치즈 테두리의 상하좌우값이 -1인것이 2개 이상이면 녹이고 나서 내부의 0을 다시 -1로 치환하는 방식으로 풀었다. 순서는 다음과 같다. 바깥에 이어져있는 0을 모두 -1로 치환한다. 각 치즈의 좌표에서 인접..

https://www.acmicpc.net/problem/2146 상하좌우로 이어진 섬에서 다른 섬으로 이동할 수 있는 최단거리를 구하는 문제다. 각 섬의 테두리에서 다른 섬의 테두리까지 도착하는 최단거리를 구하는 것으로 이해했고 이 풀이를 적용하기 위해 해야할 것은 다음과 같다. 각 섬을 숫자로 마킹한다. 테두리 좌표를 구해 해당 좌표에서 다른 섬의 테두리까지의 거리를 구한다. 모든 섬의 테두리에서 출발해 다른 섬의 테두리에 도착할 때까지의 거리 중 최단거리를 반환한다. 1번은 dfs로 상하좌우로 이어진 부분에 대해 1,2,3.. 숫자을 더하며 마킹을 했다. 그리고 해당 좌표로부터 상,하,좌,우로 이동했을 때 그 좌표의 값이 하나라도 0에 해당한다면 테두리이므로 섬의 숫자를 키로갖는 딕셔너리에 좌표를 ..

React에서 Infinite scroll 구현하기 (IntersectionObserver) 무한스크롤을 구현하는 방법은 다양하다! scroll IntersectionObserver getBoundingClientRect() useRef 이중에서 2번째, 웹 API로 있는 I-O를 사용해서 구현해보도록 할 것이다. 보기에 앞서 왜 IO를 사용하게 되었는지를 잠깐 정리해본다. scroll 스크롤이벤트를 attachment하여 현재 스크롤위치를 계산해서 맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다. 스크롤마다 한번의 이벤트가 발생하므로(거의 픽셀단위) 성능이슈를 예방하기 위해 쓰로틀링 적용을 고려해야한다. 추가적인 정보는 아래 포스팅에서 확인할 수 있다. 스크롤로 구현하기 getBo..

Styled-Components With TS(theme, globalStyle) TypeScript TS에 Styled-Components를 적용해보자 설치 npm install @types/styled-components 1. 테마 공통적으로 사용되는 스타일을 테마로 묶어서 코드일관성을 지킬 수 있도록 한다. 이를 위해 먼저 타입선언과 테마를 작성해야한다. 1.1 styled.d.ts: 타입선언파일, 테마작성하기 .d.ts를 타입선언파일이라고 한다. TS코드의 타입 추론을 돕는 파일이다. 첫번째 단계는 styled.d.ts 라는 테마에 사용될 변수들의 타입들을 선언하는 파일을 만드는 것이다. styled.d.ts 만들기 import 'styled-components'; // and ex..

Recoil 전역상태관리 라이브러리로써 context, mob x, redux,.. etc가 있다. Recoil은 그 중 하나로써 최근에 나온 라이브러리다. Recoil은 크게 atoms, selectors으로 이루어져있다. atoms atoms은 상태의 단위로 업데이트 및 구독이 가능하다. => state로 생각 atom이 업데이트 되면 이를 구독하는 컴포넌트들이 리랜더링된다. atom 함수를 사용해 생성한다. const aState = atom({ key: 'uniqueKey', default: defaultValue, }) key, default 를 가지며 각각 전역적인 고유키, 초기 값을 뜻한다. useRecoil() 컴포넌트에서 읽고 쓰기 위해서 useRecoilState 를 사용한다. => 상..

프로그래머스 타겟넘버 배열에 나열된 숫자를 더하거나 빼면서 타겟넘버가 될 수 있는 경우의 수를 구하는 문제 모든 경우 (배열원소 하나하나에 덧셈 또는 마이너스를 해야함)의 수를 찾아야 하기 때문에 완전탐색, 그중에 dfs로 해결 dfs는 재귀로 구현하고 재귀이기에 base case를 넣어주어야한다. 여기서 base case, 재귀가 종료되는 조건은 연산횟수가 배열의 길이와 같을 때 종료한다. 경우의 수를 찾는 조건은 연산된 sum이 타겟넘버와 같을 때 answer를 1 증가시킨다. 백트래킹으로 덧셈 후, 마이너스 연산을 수행하도록 작성한다. function solution(numbers, target) { var answer = 0; const dfs = (n, t, s, i) => { if (n.len..

프로그래머스 메뉴리뉴얼 손님들이 주문한 메뉴들 중 2개 이상의 조합을 찾아내어 손님들이 공통적으로 가장 많이 주문한 메뉴의 구성을 찾아내는 문제인데, 주어지는 course의 각 숫자만큼의 메뉴 갯수를 찾아내는 것 예를들어 3명의 손님이 각각 A, B, C B, C ,D A, B, F 를 주문했고 파라미터로 [2,3,4]가 들어왔을 때의 경우 메뉴 2개의 조합에서 가장 많이 주문 된 것은 A,B가 2번, 3개 조합에서는 없고, 4개도 마찬가지로 없어서 리턴되야할 것은 ["AB"] 들어오는 파라미터의 각 숫자만큼 조합을 구해야했다. 손님이 주문한 메뉴를 각 파라미터의 갯수만큼 숫자를 올리면서 조합을 구하고 난 다음, 메뉴 갯수에서 가장 많이 주문한 갯수를 찾기 위해 메뉴당 max값을 구했다. 최종적으로 ma..

프로그래머스 짝지어제거하기 같은 알파벳이 연속하게 존재하면 반복되는 알파벳을 지우고 이를 계속 반복한다. baabaa가 인풋으로 들어올 때 b "aa" baa가 반복되므로 해당 알파벳을 지운다 bbaa가 되므로 "bb"가 반복된다. 이를 지우고 마지막으로 aa도 지운다. 최종적으로 남는 알파벳이 없으면 1을 리턴, 남으면 0을 리턴한다. 괄호 찾기 문제랑 유사하기에 스택을 생각해서 풀었다. 스택의 최상단 값이랑 다음에 들어올 값이랑 같을 때 스택에서 pop하고, 다르면 Push하여 스택의 길이가 1이상이면 0리턴, 0이면 1을 리턴하도록 했다. function solution(s) { var answer = 0; let len = s.length; let stk = []; for (let i = 0; i..