전체 글

[Next.js] Antd es module 사용시 이슈(nextjs antd syntaxerror cannot use import statement outside a module)

01. Antd es module 사용시 이슈antd의 es라고 붙은 컴포넌트를 사용할때  cannot use import statement outside a module 이런 이슈가 발생했다.처음에 고치다가 잘 안되서 포기했는데, 다시 잘 찾아보니 해결 방법이 굉장히 간단했다.   02. 해결방법1) yarn add next-transpile-modules 설치2) next.config.mjs에 코드 추가/** @type {import('next').NextConfig} */import withTM from 'next-transpile-modules'; ...// antd는 무조건 들어가야하고, 나머지는 옵션export default withTM(['antd', 'rc-picker', 'rc-util'..

[Kafka] Docker compose 설치

백엔드 로직에 최적화가 필요해서 메시지 큐를 써야할 것 같은 상황에, Kafka를 쓰면 어떨까해서 고민해보다가 시간이 생겨 구현을 해보았습니다!쉽게 구현이 될줄 알았는데, 생각보다 카프카 쪽 설정이 신경쓸 것들이 많더라구요. 1. 구성환경  배포를 같은 환경에서 자유롭게 진행하고자 카프카 컨테이너를 도커 안에 배치하도록 구성환경을 짰습니다. 모든 환경이 저랑 같을 수는 없겠지만, 저는 이런 시퀀스 구조로 카프카를 사용하도록 했어요.1) 웹 사용자가 요청하면 Next.js 서버 사이드 단에서 Kafkajs를 호출2) kafkajs는 도커 컨테이너에 있는 kafka broker에 publish3) 같은 도커 컨테이너에 있는 Express.js에서 kafka를 subcribe하고 있는 상황에서 퍼블리싱이 일어..

[리눅스] 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;..