Web Programming

[리눅스] docker, docker-compose 설치

리눅스(우분투) 설치 버전입니다. 1. 도커 설치 리눅스에 도커를 설치하려면 아래 명령어를 따라가야합니다. 1. 리눅스 SSH 접속 2. 패키지 최신 업데이트 sudo apt update 3. 도커 다운로드를 위한 https 관련 패키지 설치 sudo apt install apt-transport-https ca-certificates curl software-properties-common 4. 도커 레포지토리 접근을 위한 GPG Key 설정 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - 5. 도커 레포지토리 등록 sudo add-apt-repository "deb [arch=amd64] https://downl..

[알고리즘] 구간 합, 누적 합

코드보다는 알고리즘 접근 방법에 대해 정리합니다! 1. 누적 합이란? 배열에서 0번째 인덱스부터 N번째 인덱스까지 탐색을 진행하면서 누적해서 값을 더한 결과를 말합니다. array[1,3,5,6,7,9,13]가 있으면 1부터 13까지 순차적으로 탐색하면서 값을 더한 것을 말하는데, 다만 값을 단순하게 더하는 것이 아닌 누적해서 더한다는 것이 포인트입니다. 1+, (1+3), (1+3+5), (1+3+5+6), ... 이런식으로 더해 나가야하는 거죠! 코드로 단순하게 구현해 보면 아래와 같은 모습이 됩니다. for(int i = 0; i

[알고리즘] 투 포인트(Two Point)

코드보다는 알고리즘 접근 방법에 대해 정리합니다! keypoint. 리스트에 순차적으로 접근해야할 때 2개의 점의 위치를 기록하면서 처리하는 알고리즘 순차적, 일방향으로 되어있는 선형적인 구조에서 사용 1. 투 포인트란? 리스트에 순차적으로 접근해야할 때 2개의 점의 위치를 기록하면서 처리하는 알고리즘입니다. 구간을 설정하는 시작점과 끝점을 지정하는 방법이라고 생각하면 되는데, 순차적, 일방향으로 되어있는 선형적인 구조에서 사용할 수 있는 방법입니다! 예를 들어, 특정한 합을 가지는 부분 연속 수열을 찾는 문제가 있다고 합니다. 양의 정수로만 구성된 리스트[1,2,3,2,5]가 있을 때, 부분적으로 선택한 정수들의 합이 m(5)가 되는 수열의 개수를 출력해야 할때 위 투 포인트 알고리즘을 사용할 수 있습..

[알고리즘] 소수판별, 에라토스테네스의체

코드보다는 알고리즘 접근 방법에 대해 정리합니다! keypoint. 자연수는 가운데 약수를 기준으로 각 등식이 대칭적인 형태를 보인다 제곱근이란 어떤 수를 두번 곱하여나오는 수에 대해, 그 수가 나오도록 두번 곱하는 수 소수에 2를 곱할 경우 그 수는 소수가 아니게 된다 1. 소수란? 2보다 큰 자연수 중 1과 자기 자신을 제외한 자연수로는 나누어 떨어지지않는 자연수를 말한다. 보통 1부터 N까지의 모든 소수를 출력해야 하는 문제가 나올 수가 있습니다. 2. 소수 판별 방법 1) X를 2부터 X-1까지의 모든 수로 나누어 보기 예를 들어, 16이라는 수가 있다면 16을 2로 나누고, 3으로 나누고, 4로 나누고, ... 15까지 나누어 보는 방법입니다. 이때 나머지가 0일 경우에는 소수가 아니게 되어서,..

[React] HOC(고차 컴포넌트) 함수형 예제

1. 개요 기술면접을 보았을때 HOC란 무엇인가?라고 물었을때 잘 모른다고 대답을 했었는데요, 살짝 찾아보니까 메인 다큐먼트에서는 클래스형 컴포넌트에서 사용되는 것이 있었습니다. 기술면접에서 물어볼 정도면 뭔가 중요한 내용이 있는게 아닐까 싶어서 HOC를 함수형으로 사용할 수 있는 방법을 찾아보았고, 어째서 HOC에서 물어보셨는지에 대해 깨닳게 되었습니다! 예제로 사용한 깃허브 주소입니다. https://github.com/kimdongjang/hoc_test GitHub - kimdongjang/hoc_test Contribute to kimdongjang/hoc_test development by creating an account on GitHub. github.com 2. HOC(Higher Or..

[React] useMemo와 useCallback의 차이

1. 개요 useMemo와 useCallback이라고 하는 hook 함수가 있지만 둘의 개념을 살펴보면 두 함수다 비슷한 역할을 가지고 있는 것 같아, 언제 어느 상황에 useMemo 또는 useCallback을 써야할지 판단을 하기 위해 정리를 해보려고 합니다. (심지어 useCallback 안에 useMemo를 쓰는 경우도 있었음) 2. Memoization 먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다. 3. useMemo useMe..

[React] 렌더링(리렌더링)

1. 개요 React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액트를 알아보기 위해서 렌더링이란 무엇이고, 렌더링의 조건이 어떻게 되는 건지 확인차 적어보려고 합니다. 2. 렌더링이란? 아래의 Welcome을 컴포넌트라고 부릅니다. (정확히는 함수 컴포넌트) function Welcome(props) { return Hello, {props.name}; } 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다. 3. 렌더링 과정 3-1. React의 렌더링 기본적인 리액트의 렌더링 개념..

[Typescript] Utility Type 정리(ReturnType, Required 등)

1. Partial Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성해줍니다. 그리고 이 유틸리티는 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있습니다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 interface Product { id: number; name: string; price: number;..

[Javascript] 고차 함수 정리(array, reduce, filter 등)

1. 개요 고차함수는 외부 상태 변경이나 mutable(가변적인) 데이터를 피하고, 불변성(Immutability)를 지향하는 함수형 프로그래밍에 기반을 두고 있습니다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거해 복잡성을 해결하고, 변수의 사용을 억제해 상태 변경을 피하려고 하는 프로그래밍 패러다임 입니다. -> 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 해 가독성을 해치고, 변수의 값을 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적인 원인이 될 수 있기 때문입니다. 이러한 함수형 프로그래밍은 순수 함수를 통해 side effect를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이는 방향으로 이어갑니다. 2. Array...

[알고리즘] 깊이우선탐색(dfs) / 넓이우선탐색(bfs) (feat.javascript)

1. 깊이우선탐색(dfs) const graph = { A: ["B", "C"], B: ["A", "D"], C: ["A", "G", "H", "I"], D: ["B", "E", "F"], E: ["D"], F: ["D"], G: ["C"], H: ["C"], I: ["C", "J"], J: ["I"] }; const DFS = (graph, startNode) => { const visited = []; // 탐색을 마친 노드들 let needVisit = []; // 탐색해야할 노드들 needVisit.push(startNode); // 노드 탐색 시작 while (needVisit.length !== 0) { // 탐색해야할 노드가 남아있다면 const node = needVisit.shift();..