시간이 멈추는 장소

[AWS] 로드밸런서의 SSL를 EC2 스프링부트와 연동하기

기은P — Fri, 20 Dec 2024 09:15:35 +0900

개요

프론트 사이트(https)에서 API 서버(http)로 연결하려면 Mixed Content Block 정책으로 인해 연결이 되지 않음
Selfed Sign SSL을 이용하면 PC에서는 연결이 되지만 모바일에서는 API 호출이 안되는 문제가 발생

기존 Nginx를 프록시 서버로 사용해서 https의 요청을 http로 사용했었는데, Selfed Sign SSL문제로 인해 다시 nginx를 제거.
AWS의 로드밸런서에서 사용중인 SSL 인증서가 있다는 것을 관리자에게 들음
따라서 AWS의 로드밸런서를 사용해서 nginx의 역할을 대체하기로함

조치 방법

http(80)요청이 오면 443으로 리다이렉트
https(443)요청이 오면 EC2가 포함된 그룹의 리스너로 리다이렉트
리스너 규칙은 아래와 같이 API에서 사용중인 스프링부트 서버의 포트로 설정한다. 이렇게 되면 443요청이 올 때 자동적으로 8080포트로 리다이렉트가 된다.

추가적으로 AWS 로드밸런서에서 주기적으로 헬스체크를 하기 때문에 해당 경로의 화이트리스트 추가가 필요하다.
내 경우에는 스프링의 화이트리스트에 “/actuator/health/**”를 추가하고, AWS 리스너 규칙의 상태검사의 경로를 똑같이 지정해주었다.

private static final String[] AUTH_WHITELIST = {
            "/barocert/**","/api/**", "/swagger-ui/**", "/swagger-ui.html",
            "/actuator/health/**"
    };


    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
        //CSRF, CORS
        httpSecurity.csrf((csrf) -> csrf.disable());
        httpSecurity.cors(Customizer.withDefaults());

        //세션 관리 상태 없음으로 구성, Spring Security가 세션 생성 or 사용 X
        httpSecurity.sessionManagement(sessionManagement -> sessionManagement.sessionCreationPolicy(
                SessionCreationPolicy.STATELESS));

        //FormLogin, BasicHttp 비활성화
        httpSecurity.formLogin((form) -> form.disable());
        httpSecurity.httpBasic(AbstractHttpConfigurer::disable);


        //JwtAuthFilter를 UsernamePasswordAuthenticationFilter 앞에 추가
//        httpSecurity.addFilterBefore(new JwtRequestFilter(adminService), UsernamePasswordAuthenticationFilter.class);

        // 권한 규칙 작성
        httpSecurity.authorizeHttpRequests(authorize -> authorize
                .requestMatchers(AUTH_WHITELIST).permitAll()
                //@PreAuthrization을 사용할 것이기 때문에 모든 경로에 대한 인증처리는 Pass
                //.anyRequest().permitAll()
                .anyRequest().authenticated()
        );

        return httpSecurity.build();
    }

스프링부트의 application.properties에 부가적인 설정을 추가해준다

# 서버가 요청의 헤더(예: X-Forwarded-For, X-Forwarded-Proto 등)를 처리하는 방식 설정
# "native"로 설정하면, 애플리케이션이 프록시 서버(예: Nginx, AWS ELB)의 헤더를 신뢰하여 처리
server.forward-headers-strategy=native

# Spring Boot Actuator에서 노출할 웹 엔드포인트를 설정
# "health"로 설정하면 /actuator/health 엔드포인트만 노출
management.endpoints.web.exposure.include=health

# /actuator/health 엔드포인트에서 상태의 세부 정보를 항상 포함하도록 설정
# 이 설정은 상태 확인 시 모든 세부 정보를 반환하도록 함 (예: 디스크 상태, DB 상태 등)
management.endpoint.health.show-details=always

# Spring Boot Actuator의 health 상태 확인에서 DB 상태 체크를 비활성화
# DB 연결 실패 여부에 상관없이 /actuator/health 응답에서 DB 상태를 제외
management.health.db.enabled=false

# Spring Boot Actuator와 관련된 로깅 레벨을 DEBUG로 설정
# Actuator 관련 디버깅 정보를 로그에 출력하여 문제를 분석하거나 동작을 확인할 수 있도록 설정
logging.level.org.springframework.boot.actuate=DEBUG

이후 헬스 체크를 진행해본다. EC2 SSH로 접속하고 아래 curl을 호출하는데 상태가 UP이면 정상, DOWN이면 문제가 있는 상태이다. 상세한 에러 내역도 나오니까 확인해서 고치자.

curl http://localhost:8080/actuator/health

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

기은P — Thu, 27 Jun 2024 16:31:37 +0900

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', '@ant-design/icons', 'rc-pagination', 'rc-notification'])({
    nextConfig
});

03. 발생이유

라이브러리 크기와 불러오기 방식

antd: 기본적으로 모든 Ant Design 컴포넌트와 스타일을 포함한 완전한 버전입니다. 이 버전을 불러올 때는 모든 Ant Design 컴포넌트와 스타일이 번들에 포함됩니다. 따라서 파일 크기가 크고 초기 로딩 시간이 더 걸릴 수 있습니다. 일반적으로 import { Button } from 'antd';와 같이 사용합니다.
antd/es: ES 모듈 형식으로 제공되며, 필요한 컴포넌트만 개별적으로 불러와서 사용할 수 있습니다. 이 방식은 트리 쉐이킹(tree shaking)이 가능하므로 번들 크기를 줄일 수 있습니다. 예를 들어 import Button from 'antd/es/button';와 같이 필요한 컴포넌트를 직접 지정하여 사용합니다.

2. 트리 쉐이킹과 번들 최적화

antd/es의 장점: ES 모듈 형식으로 제공되기 때문에 webpack과 같은 모듈 번들러에서 트리 쉐이킹을 활용할 수 있습니다. 이는 사용하지 않는 컴포넌트와 스타일을 번들에 포함시키지 않고 제거하여 번들 크기를 최소화할 수 있습니다. 따라서 대규모 애플리케이션에서 특히 유용합니다.
antd의 단점: 전체 라이브러리를 한 번에 불러오기 때문에 트리 쉐이킹이 제한적이며, 번들 크기가 크고 초기 로딩 속도가 느릴 수 있습니다. 작은 규모의 프로젝트에서는 큰 문제가 되지 않을 수 있지만, 큰 규모의 프로젝트에서는 번들 최적화가 중요한 요소가 될 수 있습니다.

3. 사용 시 고려사항

antd: 모든 컴포넌트와 스타일을 포함하기 때문에, 간편하게 모든 기능을 사용할 수 있으며 초기 설정이 간단합니다. 하지만 번들 크기와 성능에 대한 영향이 있을 수 있습니다.
antd/es: 필요한 컴포넌트만 선택적으로 불러와서 사용할 수 있습니다. 번들 크기를 최적화하고자 할 때 유용하지만, 초기 설정과 관리가 다소 복잡할 수 있습니다.

라고 하여, 번들 크기를 최소화, 경량화해서 사용하기 위해 나온게 es 모듈 컴포넌트인데, 이게 SSR을 사용하는 nextjs에서는 외부의 모듈을 사용하는 거기 때문에 문제가 발생하는 듯하다.

빌드할 때는 나중에 따로 조치를 해줘야할지도?

[Kafka] Docker compose 설치

기은P — Tue, 30 Apr 2024 15:45:12 +0900

백엔드 로직에 최적화가 필요해서 메시지 큐를 써야할 것 같은 상황에, Kafka를 쓰면 어떨까해서 고민해보다가 시간이 생겨 구현을 해보았습니다!

쉽게 구현이 될줄 알았는데, 생각보다 카프카 쪽 설정이 신경쓸 것들이 많더라구요.

1. 구성환경

배포를 같은 환경에서 자유롭게 진행하고자 카프카 컨테이너를 도커 안에 배치하도록 구성환경을 짰습니다.

모든 환경이 저랑 같을 수는 없겠지만, 저는 이런 시퀀스 구조로 카프카를 사용하도록 했어요.

1) 웹 사용자가 요청하면 Next.js 서버 사이드 단에서 Kafkajs를 호출

2) kafkajs는 도커 컨테이너에 있는 kafka broker에 publish

3) 같은 도커 컨테이너에 있는 Express.js에서 kafka를 subcribe하고 있는 상황에서 퍼블리싱이 일어나면 Express.js에서 정의한 이벤트 발생(Hello, Kafka! 텍스트 호출)

와 같이 물 흐르듯이 되었어야했는데, 그림과 같이 로컬환경에 있는 next.js에서 도커 컨테이너의 kafka 브로커까지 접속이 안되는 이슈가 있더라구요... 삽질을 많이 했습니다.

2. kafka docker-compose

아래는 카프카를 동작시킬 수 있는 docker-compose의 코드 입니다.

# docker-compose.yml
version: '2'

services:      
  zookeeper:
    image: confluentinc/cp-zookeeper:latest
    hostname: zookeeper
    container_name: zookeeper
    ports:
      - "2181:2181"
    environment:
      ZOOKEEPER_CLIENT_PORT: 2181

  kafka:
    image: confluentinc/cp-kafka:latest
    hostname: kafka
    container_name: kafka
    ports:
      - "9093:9093"
    environment:
      KAFKA_ADVERTISED_LISTENERS: INTERNAL://kafka:9092, PLAINTEXT_HOST://localhost:9093 #INTERNAL에 kafka:9092는 고정
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: INTERNAL:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT  #내부:PLAINTEXT 외부:PLAINTEXT_HOST
      KAFKA_INTER_BROKER_LISTENER_NAME: INTERNAL
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1 # Replication factor: 3 larger than available brokers: 1 에러 발생 방지
    depends_on:
      - zookeeper

kafka쪽 environment를 보면 구성 설정이 많이 있는데, 이것들을 일단 그대로 써보시는 것을 추천합니다.

여기서 주의할 점이 SECURITY_PROTOCOL_MAP 부분이 있는데, 이 뒤에 있는 변수들은 제가 임의로 지정한 변수가 아니고 kafka에서 지정한 변수더라구요...

INTERNAL: (내부용인것 같음)

PLAINTEXT: (평문이라는 의미)

PLAINTEXT_HOST: (평문 호스트 라는 의미같은데... 일단 그대로 씁시다)

이 3개의 변수는 변경하지 마시고 그대로 가져다 쓰시면서 어떤 의미인지 확인해 보시면 좋을 것 같습니다.

컨테이너에 사용되는 이미지는 confluentinc/cp-kafka:latest 이것을 사용했는데, 다른 것보다는 이 이미지가 사용하기가 편하더라구요. 밑에서 설명할 GUI하고 연동도 됩니다!

3. UI for Apache Kafka

위 사진과 같이 현재 카프카 클러스터의 상태를 보여주는 GUI인데, docker-compose에 추가해서 kafka와 같이 사용하면 편리하더라구요. 현재 토픽 상태나 브로커 상태에 대해 한 눈에 알아보기 쉽게 되어 있습니다.

위의 docker-compose.yml 파일에 아래 kafka-ui 컨테이너를 추가해주시면 됩니다.

...

  kafka-ui:
    image: provectuslabs/kafka-ui
    container_name: kafka-ui
    ports:
      - "8090:8080" # 8080은 많이들 사용하니 8090으로 접속하시길
    restart: always
    environment:
      - KAFKA_CLUSTERS_0_NAME=local # 임의의 이름 아무렇게나 지으셔도 됩니다
      - KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS=kafka:9092
      - KAFKA_CLUSTERS_0_ZOOKEEPER=zookeeper:2181

...

관련 링크는 여기입니다.
https://docs.kafka-ui.provectus.io/

About | UI for Apache Kafka

About Kafka-UI

docs.kafka-ui.provectus.io

4. 실행결과

위와 같이 컨슈머에서 등록한 이벤트를 발생시킬 수 있는 것을 확인했습니다.

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

기은P — Wed, 21 Feb 2024 15:05:53 +0900

리눅스(우분투) 설치 버전입니다.

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://download.docker.com/linux/ubuntu bionic stable"

6. 등록한 레포지토리를 포함해 다시 패키지를 최신으로 업데이트 합니다.

sudo apt update

7. 도커 설치

sudo apt install docker-ce

8. 도커 실행 상태 확인

sudo systemctl status docker

2. 도커 컴포즈 설치

도커 컴포즈는 리눅스 패키지에 포함이 되어있지 않아서 별도로 웹(깃허브)에서 파일을 다운받아 리눅스에 등록하는 형태로 사용이 가능합니다.

1. 도커 컴포즈 설치

sudo curl -L "https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

버전을 변경하고 싶으면 가운데에 있는 v2.5.0을 변경하면됩니다.

도커 컴포즈의 경로는 다들 /usr/local/bin/docker-compose 로 하는것 같습니다.

2. 도커 컴포즈 권한 부여

sudo chmod +x /usr/local/bin/docker-compose

3. 심볼릭 링크 연결

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

4. 버전 확인

docker-compose --version

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

기은P — Fri, 20 Oct 2023 17:59:38 +0900

코드보다는 알고리즘 접근 방법에 대해 정리합니다!

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<n; i++){
	for(int j = 0; j<=i; j++){
    	sum[i] += arr[j];
    }
}

이렇게 될 경우 시간 복잡도는 O(N^2)가 걸리게 되는데, sum_arr라는 새로운 배열을 만들고 계산한 값을 배열에 저장해서 사용하면 O(N)으로 누적합을 구할 수가 있게 됩니다!

for(int i= 0; i<n; i++){
	sum_arr[i+1] = sum_arr[i] + arr[i];
}
console.log(sum_arr[arr.length])

누적이라는 단어가 나온다면, 위처럼 계산한 값을 저장할 새로운 배열을 만들어야겠다는 생각으로 접근하는 것이 좋습니다.

2. 구간합이란?

누적합의 알고리즘과 같은데, 인덱스만 조금 달라집니다.

구간합 알고리즘은 현재 진행 단계의 인덱스까지의 합을 저장하는 sum[] 배열을 사용합니다.

sum[i-1]까지의 총합에 arr[i]를 더하면 sum[i]를 구할 수가 있게 됩니다.

하지만, 0번째부터 N까지를 구할때 i-1이라는 로직이 들어가기 때문에 sum[]배열을 사용할 경우 arr[]보다 +1 크게 만들고, 초기 값을 0으로 지정해주어야 합니다!

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

기은P — Tue, 17 Oct 2023 14:06:27 +0900

코드보다는 알고리즘 접근 방법에 대해 정리합니다!

keypoint.

리스트에 순차적으로 접근해야할 때 2개의 점의 위치를 기록하면서 처리하는 알고리즘

순차적, 일방향으로 되어있는 선형적인 구조에서 사용

1. 투 포인트란?

리스트에 순차적으로 접근해야할 때 2개의 점의 위치를 기록하면서 처리하는 알고리즘입니다.

구간을 설정하는 시작점과 끝점을 지정하는 방법이라고 생각하면 되는데, 순차적, 일방향으로 되어있는 선형적인 구조에서 사용할 수 있는 방법입니다!

예를 들어, 특정한 합을 가지는 부분 연속 수열을 찾는 문제가 있다고 합니다.

양의 정수로만 구성된 리스트[1,2,3,2,5]가 있을 때, 부분적으로 선택한 정수들의 합이 m(5)가 되는 수열의 개수를 출력해야 할때 위 투 포인트 알고리즘을 사용할 수 있습니다.

이 투 포인트 알고리즘의 특징은 2개의 변수를 이용해 리스트 상의 시작점과 끝점을 기록한다는 점입니다.

위 문제에서의 접근방법은 아래와 같습니다.

1) 시작점, 끝점이 첫 번째 원소의 인덱스(0)을 가리키도록 설정.
2) 현재까지의 합(s)과 m이 같으면 카운트를 증가
3) 현재까지의 합(s)이 m보다 작으면 end를 1 증가 시킴.
4) 현재까지의 합(s)보다 크거나 같으면 start를 1 증가 시킴.
5) 모든 경우를 확인할 때 까지 2~4번의 과정을 반복.

투 포인트 알고리즘의 특징은 위와 같은 방법이 아니더라도 문제를 풀 수 있는 접근방법이 많다는 점입니다.

만약 리스트가 [1,5,2,3,4] 라고 한다면, 시작점이 m이 된 경우에는 카운트를 증가시키고 다음 시작점으로 넘어가게끔 하는 순서를 추가할 수도 있습니다. 그 이후의 end를 계속 더한들 m이 될수는 없기 때문입니다.

2. 정렬되어 있는 두 리스트의 합집합

A리스트가 [1,3,5]이고 B리스트가 [2,4,6,8]일때, 두 리스트를 합쳐 1개의 리스트로 정렬하라는 문제가 주어졌을때, 2개의 포인터를 이용하여 각 리스트에서 처리되지 않은 원소 중 가장 작은 원소를 가리키게 하여 새 리스트로 원소를 추가하는 식으로 전개할 수 있습니다.

1) 정렬된 리스트 A에서 처리되지 않은 원소 중 가장 작은 원소를 i가 가리키도록 함.
2) 정렬된 리스트 B에서 처리되지 않은 원소 중 가장 작은 원소를 j가 가리키도록 함.
3) A[i]와 B[j] 중 더작은 원소를 결과 리스트에 추가한다.
4) 리스트 A와 B에서 더이상 처리할 원소가 없을때까지 1~3번의 과정을 반복.

포인터의 쓰임새에 중점을 두면 좋을 것 같습니다!

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

기은P — Tue, 17 Oct 2023 10:54:09 +0900

코드보다는 알고리즘 접근 방법에 대해 정리합니다!

keypoint.

자연수는 가운데 약수를 기준으로 각 등식이 대칭적인 형태를 보인다

제곱근이란 어떤 수를 두번 곱하여나오는 수에 대해, 그 수가 나오도록 두번 곱하는 수

소수에 2를 곱할 경우 그 수는 소수가 아니게 된다

1. 소수란?

2보다 큰 자연수 중 1과 자기 자신을 제외한 자연수로는 나누어 떨어지지않는 자연수를 말한다.

보통 1부터 N까지의 모든 소수를 출력해야 하는 문제가 나올 수가 있습니다.

2. 소수 판별 방법

1) X를 2부터 X-1까지의 모든 수로 나누어 보기

예를 들어, 16이라는 수가 있다면 16을 2로 나누고, 3으로 나누고, 4로 나누고, ... 15까지 나누어 보는 방법입니다.

이때 나머지가 0일 경우에는 소수가 아니게 되어서, 사실 16을 2로 나누었을때 이미 소수가 아님이 증명이 됩니다.

이 방법은 시간 복잡도가 0(X)으로 비효율적인 방법입니다...

2) 모든 수를 확인하지 않고 제곱근까지만 확인하기

자연수는 가운데 약수를 기준으로 각 등식이 대칭적인 형태를 보인다는 특징이 있습니다!

16이라는 숫자를 예를 들면,

1 2 4 8 16

이 약수가 되는데, 이를 가운데를 중심으로 양 끝 수를 2개씩 묶어서 곱하면 16이라는 수가 됩니다.

1x16, 2x8, 4x4, 8x2, 16x1

제곱근이란 어떤 수를 두번 곱하여나오는 수에 대해, 그 수가 나오도록 두번 곱하는 수를 말하는데, 16이라는 숫자에서는 4가 제곱근이 되겠지요!

그러므로 소수를 판별할 때에는 4 이상의 수까지 검사하지 않아도 결과는 동일하다는 것을 알게 되었습니다.

3. 에라토스테네스의 체

에라토스테네스의 체라는 알고리즘은 여러 개의 수가 소수인지 아닌지를 판별할때 사용하는 대표적인 알고리즘 입니다.

n=1000이라는 자연수가 주어지고, 1부터 n까지의 모든 소수를 출력하라는 문제가 주어졌을 때, 2번의 2)를 활용해서 1~1000까지의 모든 소수를 구하는 방법을 사용하면 될 테지만... 조금 더 효율적으로 시간을 아낄 수 있는 방법이 있습니다!

이는 소수의 특징을 이용한 것인데, 소수에 2를 곱할 경우 그 수는 소수가 아니게 됩니다. 또한, 그 수에 다시 2를 거듭해서 곱할 경우 그 수들도 소수가 아니게 되는 것이지요.

에라토스테네스의 체의 동작원리는 아래와 같습니다.

1) 2부터 N까지의 모든 자연수를 나열한다.
2) 나열한 수 중에서 아직 처리하지 않은 가장 작은 소수 i를 찾는다.
3) 나열한 수 중에서 소수 i의 배수를 모두 제거한다.
4) 더 이상 반복할 수 없을 때까지 2와 3의 과정을 반복한다.

이는 알고리즘으로 처리한 값을 재활용 할 수 있다는 점이 특징입니다!

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

기은P — Tue, 15 Nov 2022 17:18:43 +0900

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 Order Component)

고차 컴포넌트는 컴포넌트를 매개 변수로 받아 새로운 컴포넌트로 반환하는 함수를 의미합니다.

React에서 저희는 함수형 컴포넌트를 작성합니다.

HOC는 이렇게 작성한 컴포넌트를 인자로 받아 Wrapping 해서 새로운 컴포넌트를 반환해 컴포넌트의 재사용성을 늘리는 역할을 해줍니다.

3. 사용방법

HOC는 with로 시작하는 컨벤션으로 파일을 작성합니다.

먼저 예제로 작성할 코드를 보면서 설명을 적겠습니다.

HOC를 사용해서 여러 개의 이미지마다 공통적으로 마우스를 hover 할 때 반응하는 컴포넌트를 만들으려고 합니다.

1차적으로 작성된 코드가 Image만 있는 컴포넌트이고, 2차적으로 Image마다 event를 추가한다고 했을 때, HOC를 사용해 이 Image들에게 Wrapping을 하면 Image마다 event를 작성할 필요없이 Wrap하는 것으로 코드 작성이 쉬워집니다.

HOC가 재사용성을 늘리기 위해 사용하는 것이기 때문에 이러한 관점에서 코드를 보는 것이 중요합니다.

exam1/ImageBox.jsx

import withHover from "./withHover";

function ImageBox({
  imageUrl,
  imageTitle,
  isHovered,
  handleMouseEnter,
  handleMouseLeave
}) {
  return (
    <div>
      {isHovered && <div id="hover">{imageTitle}</div>}
      <img
        src={imageUrl}
        alt={imageTitle}
        width="400px"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      />
      <h5>이미지에 마우스를 올리면 이미지 제목이 표시됩니다.</h5>
    </div>
  );
}

export default withHover(ImageBox);

exam1/withHover.jsx

import { useState } from "react";

export default function withHover(InnerComponent) {
  // props는 App.jsx 부모에서 prop로 전달한 데이터
  return (props) => {
    const [isHovered, setIsHovered] = useState(false);

    function handleMouseEnter() {
      setIsHovered(true);
    }

    function handleMouseLeave() {
      setIsHovered(false);
    }

    return (
      <InnerComponent
        {...{
          ...props,
          handleMouseEnter,
          handleMouseLeave,
          isHovered
        }}
      />
    );
  };
}

위와 같은 코드가 HOC 컴포넌트이고, 인자로 Wrap할 컴포넌트를 받아서 return값으로 컴포넌트를 반환합니다!

유의할 점은 함수형으로 작성할 경우에는 위처럼

function withHOC() 내부에

return () => {

return (<innerComponent/>)

}

와 같이 return을 2개를 작성해서 사용해야 한다는 점입니다.

App.js

import logo from './logo.svg';
import './App.css';
import ImageBox from './exam1/ImageBox';
import { useEffect, useState } from 'react';
import axios from 'axios';
import TodoList from './exam2/TodoList';
import UserList from './exam2/UserList';

function App() {
  const url = "https://dog.ceo/api/breeds/image/random";
  const [title, setTitle] = useState('')
  const [image, setImage] = useState('');
  useEffect(() => {
    axios.get(url).then(response => { setTitle(response.data.message); setImage(response.data.message) })
  }, [])
  return (
    <div className="App">
      <ImageBox imageUrl={image} imageTitle={title} />
      <UserList />
      <TodoList />
    </div>
  );
}

export default App;

App.js에서는 랜덤 이미지를 호출해와 ImageBox에 이미지 주소와 title을 전달해줍니다.

*userList와 todoList는 주석을 달아서 테스트하면 됩니다.

4. 다른 코드

exam2/TodoList.jsx

import React, { useEffect, useState } from 'react';
import withHOC from './withHoc';

function TodoLIst({ data }) {
  let renderTodos = data.map((todo) => {
    return (
      <div key={todo.id}>
        <p>
          <strong>{todo.title}</strong>
        </p>
      </div>
    );
  });

  return (
    <div>
      <div>{renderTodos}</div>
    </div>
  );
}

export default withHOC(TodoLIst, 'todos');

exam2/UserList.jsx

import React, { useEffect, useState } from 'react';
import withHOC from './withHoc';

function UserList({ data }) {
  let renderUsers = data.map((user) => {
    return (
      <div key={user.id}>
        <p>
          <strong>{user.name}</strong>
        </p>
      </div>
    );
  });

  return (
    <div>
      <div>{renderUsers}</div>
    </div>
  );
}

export default withHOC(UserList, 'users');

exam2/withHoc.jsx

import React, { useEffect, useState } from 'react';

function withHOC(WrappedComponent, entityTitle) {
  return function () {
    const [data, setData] = useState([]);
    const [term, setTerm] = useState('');

    useEffect(() => {
      const timer = setTimeout(() => {
        let fetchData =
          entityTitle === 'users'
            ? [
              { name: 'yeji', id: 1 },
              { name: 'yoyo', id: 2 },
              { name: 'jojo', id: 3 },
              { name: 'aoao', id: 4 },
            ]
            : [
              { id: 1, userId: 1, title: 'hello', completed: true },
              { id: 2, userId: 2, title: 'bye', completed: true },
              { id: 3, userId: 3, title: 'mornign', completed: false },
              { id: 4, userId: 4, title: 'night', completed: false },
            ];

        setData([...fetchData]);

        clearTimeout(timer);
      }, 2000);
    }, []);

    let filterData = data.filter((d) => {
      if (entityTitle === 'users') {
        const { name } = d;
        return name.indexOf(term) >= 0;
      }

      if (entityTitle === 'todos') {
        const { title } = d;
        return title.indexOf(term) >= 0;
      }
    });

    return (
      <div>
        <h2>{entityTitle}</h2>
        <input
          type="text"
          value={term}
          onChange={(e) => setTerm(e.target.value)}
        />
        <WrappedComponent data={filterData}></WrappedComponent>
      </div>
    );
  };
}

export default withHOC;

App.js

위에 있는 App.js 그대로 사용하면 됩니다.

참고

https://ostarblog.tistory.com/12

https://velog.io/@ellie12/React-HOC-%EA%B3%A0%EC%B0%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

[React] useMemo와 useCallback의 차이

기은P — Thu, 3 Nov 2022 17:41:58 +0900

1. 개요

useMemo와 useCallback이라고 하는 hook 함수가 있지만 둘의 개념을 살펴보면 두 함수다 비슷한 역할을 가지고 있는 것 같아, 언제 어느 상황에 useMemo 또는 useCallback을 써야할지 판단을 하기 위해 정리를 해보려고 합니다.

(심지어 useCallback 안에 useMemo를 쓰는 경우도 있었음)

2. Memoization

먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다.

이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다.

3. useMemo

useMemo는 메모이제이션된 값을 반환하는 함수입니다.

useMemo(() => fn, [deps])

여기서 deps로 지정한 값이 변하게 된다면 () => fn 함수를 실행하고, 그 함수의 반환 값을 반환해줍니다.

deps는 dependency의 약어로, 의존성을 뜻하며 useMemo가 이 deps에 의존하고 있다는 것을 말합니다.

import React, { useState, useCallback, useMemo } from "react";

export default function App() {
  const [ex, setEx] = useState(0);
  const [why, setWhy] = useState(0);

  // useMemo 사용하기
  useMemo(() => {console.log(ex)}, [ex]);

  // 두 개의 버튼을 설정했다. X버튼만이 ex를 변화시킨다.
  return (
    <>
      <button onClick={() => setEx((curr) => (curr + 1))}>X</button>
      <button onClick={() => setWhy((curr2) => (curr2 + 1))}>Y</button>
    </>
  );
}

한 가지 예로 위와 같이 useMemo를 사용할 수 있습니다.

여기서 X라는 버튼을 클릭했을 때 setEx에 의해서 ex의 값을 1씩 증가시키는데, ex의 값이 변하기 때문에 useMemo에서 의존성으로 등록한 ex가 변화된 것을 감지해 지정한 함수가 실행되고, console.log로 인해 ex값이 출력되게 됩니다.

3-1. useMemo를 쓰는 이유?

import React, { useState, useCallback, useMemo } from "react";

export default function App() {
  const [ex, setEx] = useState(0);
  const [why, setWhy] = useState(0);

  // 버튼 클릭시 ex값이 출력된다.
  console.log(ex); 
  
  return (
    <>
      <button onClick={() => setEx((curr) => (curr + 1))}>X</button>
      <button onClick={() => setWhy((curr2) => (curr2 + 1))}>Y</button>
    </>
  );
}

컴포넌트의 state 값이 변하면 리렌더링이 일어나는 것은 모두 알고 계실 겁니다.

*렌더링 과정에 대해 이해가 가지 않는다면 아래 링크를 참고해주세요

https://narup.tistory.com/272

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

1. 개요 React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액

narup.tistory.com

버튼을 클릭할 경우 setState로 인해 state값이 변화되어 리렌더링이 일어나면 console.log가 찍히도록 위처럼 코드를 작성하면 되는데, useMemo를 사용하는 이유는 뭘까요?

사실, 위처럼 코드를 작성할 경우 X버튼, Y버튼, 혹은 컴포넌트가 부모 컴포넌트에 의해서 리렌더링이 될 경우 상태 값에 관계 없이 console.log가 찍히는 연산이 발생하게 됩니다.

만약, 단순하게 console.log가 아닌 복잡한 연산, 연산할 때마다 약 0.3초씩 걸린다고 가정하면 어떨까요? 답답하겠죠?

따라서 ex값이 변할 경우에만 연산을 실행할 수 있도록 useMemo를 사용해 ex라는 변수에 의존하도록 등록하는 것이지요.

결과, 리렌더링이 발생할 경우, 특정 변수가 변할 때에만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게 됩니다!

4. useCallback

앞서 보았던 useMemo는 메모이제이션된 값을 반환해서 참 직관적이었는데, 이 useCallback은 메모이제이션된 함수를 반환하는 특징을 가지고 있습니다.

useCallback(fn, [deps])

useCallback 또한 deps, 의존성이 있는 값이 변하면 fn에 등록한 함수를 반환하는 기능을 가지고 있습니다.

useMemo(() => console.log(), [test])
const memoizedCallback = useCallback(() => console.log(), [test])

일단은 useMemo와 useCallback의 모양은 위와 같습니다.

useCallback이 함수를 반환하기 때문에 그 함수를 가지는 const 변수에 초기화하는 것이 일반적인 모양입니다.

useMemo같은 경우는 deps값이 변하면 이 함수를 실행해라! 라는 느낌으로 활용이 가능한데,

useCallback은 어떨 때 사용해야 할까요?

useCallback 사용처는 아래와 같습니다.

1) 자식 컴포넌트에 props로 함수를 전달할 경우

2) 외부에서 값을 가져오는 api를 호출하는 경우

4-1) 자식 컴포넌트에 props로 함수를 전달하는 경우

먼저 함수는 값이 아닌 참조로 비교된다!는 점을 알고 있어야합니다.

const functionOne = function() {
  return 5;
};
const functionTwo = function() {
  return 5;
};
// 서로의 참조가 다르기 때문에 false
console.log(functionOne === functionTwo);

동일한 값을 반환하지만 참조가 다르기 때문에 false가 나옵니다.

위와 같이 컴포넌트에서 특정 함수를 정의할 경우 각각의 함수들은 모두 고유한 함수가 됩니다.

이런 고유한 함수가 생성될 경우, 부모를 통해 props에 함수를 전달받는 자식 컴포넌트에서는 props가 변경되었다고 판단해 리렌더링이 발생하게 됩니다.

function App() {
  const [name, setName] = useState('');
  const onSave = () => {};

  return (
    <div className="App">
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Profile onSave={onSave} />
    </div>
  );
}

useCallback을 사용하지 않을 경우, name이 변경되어 리렌더링이 발생하면 onSave함수가 새로 만들어지고, Profile 컴포넌트의 props로 onSave함수가 새로 전달되게 됩니다.

이때 Profile 컴포넌트에서 useMemo를 사용해도 이전 onSave와 이후 onSave가 같은 값을 반환하지만 참조가 다른 함수가 되어버리기 때문에 리렌더링이 일어나게 됩니다.

부모 컴포넌트만 수정하려고 했지만 연쇄적으로 하위 컴포넌트들 모두 렌더링이 일어나게 되어버리지요.

따라서 아래와 같이

import React, { useCallback, useState } from 'react';
import Profile from './Profile';


function App() {
  const [name, setName] = useState('');
  const onSave = useCallback(() => {
    console.log(name);
  }, [name]);

  return (
    <div className="App">
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Profile onSave={onSave} />
    </div>
  );
}

useCallback을 사용해서 onSave라는 함수를 재사용하는 것으로 자식 컴포넌트의 리렌더링을 방지할 수 있습니다!

4-2) 외부에서 값을 가져오는 api를 호출하는 경우

import React, { useState, useEffect } from "react";

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  const fetchUser = () =>
    fetch(`https://your-api.com/users/${userId}`)
      .then((response) => response.json())
      .then(({ user }) => user);

  useEffect(() => {
    fetchUser().then((user) => setUser(user));
  }, [fetchUser]);

  // ...
}

위의 코드는 fetchUser 함수가 변경될 때만 외부에서 api를 가져와 useEffect가 실행됩니다.

사실 이 코드는 정상적인 코드가 아닌데요.

앞서 말씀 드렸다시피 Profile이라는 컴포넌트가 리렌더링이 발생할 경우 fetchUser 함수에는 새로운 함수가 할당되게 됩니다. 그러면 useEffect()함수가 호출되어 user 상태값이 바뀌고, state 값이 바뀌었기 때문에 다시 리렌더링이 일어납니다.

무한루프에 빠져버리게 되는 것이지요.

이때 useCallback을 사용할 경우 fetchUser 함수의 참조값을 동일하게 유지시킬 수 있습니다.

import React, { useState, useEffect } from "react";

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  const fetchUser = useCallback(
    () =>
      fetch(`https://your-api.com/users/${userId}`)
        .then((response) => response.json())
        .then(({ user }) => user),
    [userId]
  );

  useEffect(() => {
    fetchUser().then((user) => setUser(user));
  }, [fetchUser]);

  // ...
}

api의 옵션으로 사용되는 userId가 변동될 때만 fetchUser에 새로운 함수가 할당되도록 설정하고, 그것이 아니면 동일한 함수가 실행되게 되서 무한 루프에 빠지지 않도록 할 수 있습니다!

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

기은P — Thu, 3 Nov 2022 15:09:40 +0900

1. 개요

React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액트를 알아보기 위해서 렌더링이란 무엇이고, 렌더링의 조건이 어떻게 되는 건지 확인차 적어보려고 합니다.

2. 렌더링이란?

아래의 Welcome을 컴포넌트라고 부릅니다. (정확히는 함수 컴포넌트)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다.

3. 렌더링 과정

3-1. React의 렌더링

기본적인 리액트의 렌더링 개념은 루트(<div id="root"></div>) DOM부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행하는 것을 말합니다.

* root id는 public/index.html에 기본적으로 설정이 되어있습니다.

* DOM은 HTML parser에 의해 생성된 트리 구조의 Node 객체 모델입니다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

기본적으로 리액트의 렌더링은 이러한 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, 그 React Element를 root.render()에 전달하는 과정을 거칩니다.

3-2. React Element

자, 그럼 React Element는 무엇일까요? 리액트 엘리먼트는 type과 props를 가지는 React만의 객체입니다. React.creatElement()를 이용해 만들 수 있으며, type으로 HTML 태그 이름을 가지고, 그 이외의 특징을 props로 관리하는 객체 형태로 정의됩니다.

// createElement를 이용해서 React Element 만들기
React.createElement(
  'div',
  { className: 'name' },
  'React'
)
// 위와 같은 의미 (JSX 문법)
<div className='name'>React</div>


// createElement를 이용해서 만들어진 React Element 객체
{
  type: 'div',
  props: {
    className: 'name',
    children: 'React'
  }
}

사실 위와 같은 createElement()라는 함수를 사용하기가 어렵기도 하고, 직관적이지도 않습니다.

따라서 JSX 문법을 사용해 보통 위의 객체를 DOM 형태(<div className='name'>React</div>)로 정의하여 사용합니다.

이러한 리액트 엘리먼트는 불변객체로 작용해서, 엘리먼트가 생성된 이후에는 해당 엘리먼트의 속성과 자식을 변경할 수 없다는 특징을 가지게 됩니다.

3-2. Virtual DOM

리액트의 특징 중 하나의 가상 돔(Virtual DOM)은 실제 DOM의 구조와 비슷한 React 객체의 트리를 말합니다.

웹 브라우저에서 사용자는 여러 가지 액션을 통해 웹 서버에 요청하고, 그에 따른 응답으로 DOM 구조가 빈번하게 바뀌는데, 이때마다 DOM이 수정되어 Render Tree가 생성되고, Reflow, Repaint의 과정을 계속 수행하게 된다면 굉장히 답답한 상황이 발생하게 될 것입니다.

이때 React에서는 Virtual DOM을 실제 DOM에 필요한 부분만 적절하게 반영해서 불필요한 수정이 일어나지 않도록 해주는데, 이 Virtual DOM의 가장 큰 장점은 개발자가 직접 DOM을 조작하지 않아도 된다는 점이고, 이러한 과정을 모두 자동화해준다는 점입니다.

또한 DOM의 수정을 batch로 한 번에 처리하기 때문에 리렌더링 연산을 최소화 할 수 있습니다.

3-3. 재조정(Reconciliation)

앞서 설명한 Virtual DOM에서 어떻게 리액트는 실제 DOM과 가상 DOM을 구별하는지 궁금할 텐데, 결과적으로 브라우저에 렌더링을 할 때 어떻게 기존의 컴포넌트와 변경이 되었는지 확인하기 위해 리액트에서 diffing 알고리즘을 사용하여 이 알고리즘을 통해 컴포넌트의 갱신합니다.

리액트는 아래의 2가지 가정을 기반으로 O(n)의 시간복잡도를 가지는 휴리스틱 알고리즘을 구현했습니다.

서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다.
개발자가 key prop을 통해 컴포넌트 인스턴스를 식별하여, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야할지 표시해 줄 수 있다.

위의 재조정 단계를 거쳐 이전 elements와 새로 생성된 elements를 비교해 엘리먼트가 변경되었다면 렌더링을 수행합니다.

4. 리렌더링

앞에서 렌더링을 설명했는데, 리액트에선 초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행하는 리렌더링이라고 하는 것이 있습니다.

내부 상태(state) 변경시
부모에게 전달받은 값(props) 변경시
중앙 상태값(Context value 혹은 redux store) 변경시
부모 컴포넌트가 리렌더링 되는 경우

위의 경우가 컴포넌트가 리렌더링 되는 조건입니다.

리액트가 아무리 최적화가 잘 되어있다고해도, 무분별하게 렌더링이 일어날 경우 성능 저하가 일어나게 되기 때문에, 이러한 조건들을 기준을 두고 코드를 작성하여 무분별하게 렌더링이 일어나지 않도록 주의하여야 합니다.

* redux store 변경시 자동으로 리렌더링이 되는 이유는, 리덕스 스토어가 <Provider store={store}>로 컴포넌트를 감싸주었을 때, 스토어 상태가 변경될 때마다 이를 참조하는 컴포넌트들이 리렌더링이 될 수 있도록 react-redux 라이브러리가 자동적으로 컴포넌트 들의 렌더 함수들을 subscribe 해주기 때문입니다.

4-1. 리렌더링 과정

위의 조건을 통해 컴포넌트 리렌더링
구현부 실행 = props 취득, hook 실행, 내부 변수 및 함수 재 생성
return 실행, 렌더링 시작
렌더 단계(Render Phase): 새로운 가상 DOM 생성 후 이전 가상 DOM과 비교해 달라진 부분을 탐색하고 실제 DOM에 반영할 부분을 결정
커밋 단계(Commit Phase): 달라진 부분만 실제 DOM에 반영
useLayoutEffect: 브라우저가 화면에 Paint하기 전에 useLayoutEffect에 등록해둔 effect(부수 효과 함수)가 동기적으로 실행되며, 이때 state, redux store 등의 변경이 있다면 한번 더 리렌더링
Paint: 브라우저가 실제 DOM을 화면에 그림. didUpdate 완료.
useEffect: update되어 화면에 그려진 직후, useEffect에 등록해둔 effect(부수 효과 함수)가 비동기로 실행

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

기은P — Thu, 3 Nov 2022 09:57:31 +0900

1. Partial<Type>

Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성해줍니다. 그리고 이 유틸리티는 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있습니다.

interface Address {
  email: string;
  address: string;
}

type MyEmail = Partial<Address>;
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;
  brand: string;
  stock: number;
}

// Partial - 상품의 정보를 업데이트 (put) 함수 -> id, name 등등 어떤 것이든 인자로 들어올수있습니다
// 현재 Product type은 인자에 type으로 Product를 넣으면 모든 정보를 다 넣어야하는데, 사실
// 아래와 같이 인터페이스를 정의하면 부분적인 데이터만 넣어도 정상적으로 작동합니다.
interface UpdateProduct {
  id?: number;
  name?: string;
  price?: number;
  brand?: string;
  stock?: number;
}
// 그러나 같은 인터페이스를 또 정의하는 것은 비용이 발생하기 때문에
// 이것을 피하기 위해서 Partial을 활용합니다.
function updateProductItem(prodictItem: Partial<Product>) {
  // Partial<Product>이 타입은 UpdateProduct 타입과 동일하다
}

2. Required<Type>

Required는 Partial과 반대로 모든 프로퍼티를 필수로 설정한 타입을 생성합니다.

interface Props {
  a?: number;
  b?: string;
}
 
const obj: Props = { a: 5 };
 
const obj2: Required<Props> = { a: 5 };

3. Pick<Type, Keys>

Pick 타입은 특정 타입에서 Keys라는 몇 개의 속성을 자유롭게 선택(title, completed)해 타입을 반환합니다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
console.log(todo)

4. Omit<Type, Keys>

Omit 타입은 Pick과 반대로 모든 프로퍼티를 선택한 상태에서 특정 Key를 제외한 타입을 반환합니다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

5. Readonly<Type>

Type 집합의 모든 프로퍼티를 읽기 전용으로 설정한 타입을 생성합니다. 이렇게 될 경우 생성된 타입의 프로퍼티는 재할당 될 수 없습니다.

interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
 
 // Cannot assign to 'title' because it is a read-only property.
todo.title = "Hello";

6. Record<Keys, Type>

타입 Type의 프로퍼티 키의 집합으로 타입을 생성합니다. 이 유틸리티는 타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용될 수 있습니다.

interface PageInfo {
  title: string;
}
 
type Page = "home" | "about" | "contact";
 
const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};
 
console.log(nav.about);

*Page라는 키에 PageInfo라는 타입을 Record로 연결시켜 각각의 키의 title을 정의하도록 매핑했습니다.

7. ReturnType<Type>

함수 Type의 반환 타입으로 구성된 타입을 생성합니다.

declare function f1(): { a: number; b: string };
 
type T0 = ReturnType<() => string>;     
// type T0 = string

type T1 = ReturnType<(s: string) => void>;     
// type T1 = void

type T2 = ReturnType<<T>() => T>;     
// type T2 = unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>;     
// type T3 = number[]

type T4 = ReturnType<typeof f1>;     
/*
type T4 = {
    a: number;
    b: string;
}
*/


type T5 = ReturnType<any>;     
//type T5 = any

type T6 = ReturnType<never>;     
//type T6 = never

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

기은P — Tue, 1 Nov 2022 17:59:25 +0900

1. 개요

고차함수는 외부 상태 변경이나 mutable(가변적인) 데이터를 피하고, 불변성(Immutability)를 지향하는 함수형 프로그래밍에 기반을 두고 있습니다.

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거해 복잡성을 해결하고, 변수의 사용을 억제해 상태 변경을 피하려고 하는 프로그래밍 패러다임 입니다.

-> 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 해 가독성을 해치고, 변수의 값을 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적인 원인이 될 수 있기 때문입니다.

이러한 함수형 프로그래밍은 순수 함수를 통해 side effect를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이는 방향으로 이어갑니다.

2. Array.prototype.sort()

sort는 Timesort 알고리즘을 사용한 순수함수입니다.

const fruits = ['Banana', 'Orange', 'Apple'];

// ascending(오름차순)
fruits.sort();
console.log(fruits); // [ 'Apple', 'Banana', 'Orange' ]

// descending(내림차순)
fruits.reverse();
console.log(fruits); // [ 'Orange', 'Banana', 'Apple' ]

const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();
console.log(points); // [ 1, 10, 100, 2, 25, 40, 5 ]

위와 같이 단어, 숫자도 같이 오름순, 내림순으로 정리되며, 이때 원본 배열이 정렬된 배열로 변경됩니다.

3. Array.prototype.foreach()

const numbers = [1, 2, 3];
let pows = [];

// for 문으로 순회
for (let i = 0; i < numbers.length; i++) {
  pows.push(numbers[i] ** 2);
}

console.log(pows); // [ 1, 4, 9 ]

pows = [];

// forEach 메소드로 순회
numbers.forEach(function (item) {
  pows.push(item ** 2);
});

// ES6 화살표 함수
// numbers.forEach(item => pows.push(item ** 2));

console.log(pows); // [ 1, 4, 9 ]

foreach는 배열을 순회해 배열의 각 요소에 대해 인자로 주어진 콜백함수를 실행하는데, 반환값은 undefind입니다.

foreach의 특징은 for문과 다르게 중간에서 break를 할 수 없다는 점입니다.

foreach는 원본 배열(this)를 변경하지 않지만, foreach에서 사용된 콜백 함수 function(item)은 원본 배열을 변경합니다.

4. Array.prototype.map()

const numbers = [1, 4, 9];

// 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행
const roots = numbers.map(function (item) {
  // 반환값이 새로운 배열의 요소가 된다. 반환값이 없으면 새로운 배열은 비어 있다.
  return Math.sqrt(item);
});

// 위 코드의 축약표현은 아래와 같다.
// const roots = numbers.map(Math.sqrt);

// map 메소드는 새로운 배열을 반환한다
console.log(roots);   // [ 1, 2, 3 ]
// map 메소드는 원본 배열은 변경하지 않는다
console.log(numbers); // [ 1, 4, 9 ]

map은 배열을 순회해 각 요소에 대해 인자로 주어진 콜백함수의 반환값(결과값)으로 새로운 배열을 생성해 반환합니다.

이때 원본 배열은 변경되지 않습니다.

5. Array.prototype.filter()

const result = [1, 2, 3, 4, 5].filter(function (item, index, self) {
  console.log(`[${index}] = ${item}`);
  return item % 2; // 홀수만을 필터링한다 (1은 true로 평가된다)
});

console.log(result); // [ 1, 3, 5 ]

filter 메소드를 사용하면 if문을 대체할 수 있습니다.

배열을 순회하며 각 요소에 대해 인자로 주어진 콜백함수의 실행 결과가 true인 요소의 값만을 추출해 새로운 배열을 반환합니다.

배열에서 특정 케이스만 필터링을 걸어 새로운 배열을 추출할 때 사용합니다.

이때 원본 배열은 변경되지 않습니다.

6. Array.prototype.reduce()

const arr = [1, 2, 3, 4, 5];

/*
previousValue: 이전 콜백의 반환값
currentValue : 배열 요소의 값
currentIndex : 인덱스
array        : 메소드를 호출한 배열, 즉 this
*/
// 합산
const sum = arr.reduce(function (previousValue, currentValue, currentIndex, self) {
  console.log(previousValue + '+' + currentValue + '=' + (previousValue + currentValue));
  return previousValue + currentValue; // 결과는 다음 콜백의 첫번째 인자로 전달된다
});

console.log(sum); // 15: 1~5까지의 합
/*
1: 1+2=3
2: 3+3=6
3: 6+4=10
4: 10+5=15
15
*/

// 최대값 취득
const max = arr.reduce(function (pre, cur) {
  return pre > cur ? pre : cur;
});

console.log(max); // 5: 최대값

배열을 순회해 각 요소에 대해 이전의 콜백함수 실행 반환 값을 전달해 콜백함수를 실행하고 그 결과를 반환합니다.

합산, 최소/최대값, 평균 등 계산식에 사용됩니다.

이때 원본 배열은 변경되지 않습니다.

const sum = [1, 2, 3, 4, 5].reduce(function (pre, cur) {
  return pre + cur;
}, 5);

console.log(sum); // 20
// 5 + 1 => 6 + 2 => 8 + 3 => 11 + 4 => 15 + 5

reduce는 위와 같이 두번째 파라미터에 초기값을 세팅해서 호출할 수도 있습니다.

7. Array.prototype.some()

// 배열 내 요소 중 10보다 큰 값이 1개 이상 존재하는지 확인
let res = [2, 5, 8, 1, 4].some(function (item) {
  return item > 10;
});
console.log(res); // false

res = [12, 5, 8, 1, 4].some(function (item) {
  return item > 10;
});
console.log(res); // true

// 배열 내 요소 중 특정 값이 1개 이상 존재하는지 확인
res = ['apple', 'banana', 'mango'].some(function (item) {
  return item === 'banana';
});
console.log(res); // true

배열 내 일부 요소가 콜백함수의 조건을 만족하는지 확인해 그 결과를 boolean 타입으로 반환합니다.

이때 배열의 원본은 변경되지 않습니다.

8. Array.prototype.every()

// 배열 내 모든 요소가 10보다 큰 값인지 확인
let res = [21, 15, 89, 1, 44].every(function (item) {
  return item > 10;
});
console.log(res); // false

res = [21, 15, 89, 100, 44].every(function (item) {
  return item > 10;
});
console.log(res); // true

배열 내 모든 요소가 콜백함수의 조건을 만족하는지 확인해 그 결과를 boolean 타입으로 반환합니다.

이때 배열의 원본은 변경되지 않습니다.

9. Array.prototype.find()

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환한다.
let result = users.find(function (item) {
  return item.id === 2;
});

// ES6
// const result = users.find(item => item.id === 2;);

// Array#find는 배열이 아니라 요소를 반환한다.
console.log(result); // { id: 2, name: 'Kim' }

// Array#filter는 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.
result = users.filter(function (item) {
  return item.id === 2;
});

console.log(result); // [ { id: 2, name: 'Kim' },{ id: 2, name: 'Choi' } ]

배열을 순회해 각 요소에 대해 인자로 주어진 콜백함수를 실행해, 그 결과가 참인 첫번째 요소를 반환합니다. 만약, 참인 요소가 존재하지 않을 경우 undefined를 반환합니다.

filter와 다른 점은 find는 요소를 반환하는 것이고, filter는 배열을 반환합니다.

9. Array.prototype.findIndex()

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소의 인덱스를 반환한다.
function predicate(key, value) {
  return function (item) {
    return item[key] === value;
  };
}

// id가 2인 요소의 인덱스
let index = users.findIndex(predicate('id', 2));
console.log(index); // 1

// name이 'Park'인 요소의 인덱스
index = users.findIndex(predicate('name', 'Park'));
console.log(index); // 3

배열을 순회해 각 요소에 대해 인자로 주어진 콜백함수를 실행해, 그 결과가 참인 첫번째 요소의 인덱스를 반환합니다. 만약, 참인 요소가 존재하지 않는다면 -1을 반환합니다.

참고 사이트

https://poiemaweb.com/js-array-higher-order-function

Higher order function | PoiemaWeb

배열(array)는 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다.

poiemaweb.com

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

기은P — Tue, 25 Oct 2022 17:42:23 +0900

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(); // queue이기 때문에 선입선출, shift()를 사용한다.
    if (!visited.includes(node)) { // 해당 노드가 탐색된 적 없다면
      visited.push(node); 
      needVisit = [...graph[node], ...needVisit];
    }
  }
  return visited;
};

console.log(DFS(graph, "A"));
// ["A", "B", "D", "E", "F", "C", "G", "H", "I", "J"]

2. 넓이우선탐색(bfs)

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 BFS = (graph, startNode) => {
  const visited = []; // 탐색을 마친 노드들
  let needVisit = []; // 탐색해야할 노드들

  needVisit.push(startNode); // 노드 탐색 시작

  while (needVisit.length !== 0) { // 탐색해야할 노드가 남아있다면
    const node = needVisit.shift(); // queue이기 때문에 선입선출, shift()를 사용한다.
    if (!visited.includes(node)) { // 해당 노드가 탐색된 적 없다면
      visited.push(node);
      needVisit = [...needVisit, ...graph[node]];
    }
  }
  return visited;
};

console.log(BFS(graph, "A"));

[React] 불변성이란? 불변성을 지켜야 하는 이유

기은P — Mon, 24 Oct 2022 14:40:54 +0900

1. 개요

React를 빠르게 배울 때 값을 변경할 때 useState를 사용해야 한다, 불변성을 유지해야 한다, immer를 사용해야 한다, spread 연산자를 사용해야 한다, 공식처럼 생각하고 있었는데 javascript의 메모리 구조에 대해 알아보면서 react의 리렌더링이 일어나는 과정이나 불변성의 진짜 의미는 무엇일지 찾아보다가 괜찮은 블로그를 발견해 요점만 정리해보려고 합니다.

2. javascript 메모리 구조

자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고 있습니다.

콜스택: 실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간입니다. 이곳에 원시 타입들이 저장됩니다.

힙 메모리: 참조 타입들이 할당되는 곳입니다. 메모리 누수를 방지하기 위해 js 엔진의 메모리 관리자가 항상 관리하는 공간입니다.

* 원시 타입 : Boolean, String, Number, null, undefined, Symbol

* 참조 타입 : Object, Array

이 2가지의 타입을 꼭 구별해야 합니다! 왜냐면 이 타입별로 데이터 저장방식과 할당 방식이 달라지기 때문입니다.

3. 원시타입과 참조 타입의 데이터 저장방식과 재할당 비교

3-1. 원시타입과 참조 타입의 데이터 저장방식

원시타입: 변수 a에 값 10을 저장을 했을 경우 콜 스택의 변수값에 10이 그대로 저장됩니다.
참조타입: 변수 b,c,d에 array, object를 저장할 경우 실제 값은 메모리 힙에 저장되고, 메모리의 힙의 주소가 콜 스택의 값에 저장이 됩니다.

3-2. 변수 할당과 재할당

원시 타입의 특징

원시타입의 변수는 변수값을 변경하라는 명령을 받을 경우, 기존 콜스택의 값을 변경하지 않고 새로운 주소를 추가해 값을 저장하고 변수 b가 바라보게 합니다. 이것을 저희가 궁금해 하던 불변성이라고 합니다.(메모리 영역의 값은 변경되지 않는다!)

* 여기서 더이상 참조되지 않는 데이터는 가비지 컬렉터에 의해 적절한 시점에서 메모리가 해제됩니다.

참조 타입의 특징

a.에서 변수값을 할당하고, b.에서 push를 통해 값을 추가하게 되면 어떻게 될까요?

원시타입처럼 불변성이 지켜질까요?

실제로는 변수 a,b가 바라보고 있는 콜스택의 값이 변경되지 않고, 메모리 힙에 있는 데이터가 변경이 되어 불변성이 유지가 되지 않습니다!

4. 리액트에서 불변성을 지켜야 하는 이유

불변성을 지킨다의 의미는 메모리 영역에서 값을 변경할 수 없게 한다, 라는 의미입니다.

왜냐하면, 리액트의 state 변화 감지 기준은 콜 스택의 주소값이기 때문입니다.

리액트는 콜 스택의 주소값만을 비교해 상태 변화를 감지하는데, 이를 얕은 비교라고 합니다. 이것이 리액트의 state를 빠르게 감지할 수 있는 장점이자 불변성을 유지해야 하는 이유입니다.

-> 원시타입의 경우 3-2처럼 값을 재할당할 경우 새로운 메모리가 할당되어 콜 스택의 주소 값이 감지가 됩니다.

-> 하지만 참조타입의 경우 참조타입의 값만 변경하면 실제로 콜스택의 주소값은 변경이 없어 state 감지가 되지 않아 리렌더링이 되지가 않습니다. 그래서 저희가 spread 연산자를 쓰고, immer 라이브러리를 사용해 새로운 배열과 오브젝트를 만들어 반환하는 이유가 그것입니다.

참고

https://velog.io/@badahertz52/%EC%B0%B8%EC%A1%B0%ED%83%80%EC%9E%85%EA%B3%BC-React%EC%9D%98-%EB%B6%88%EB%B3%80%EC%84%B1

[Node.js] for 동기 처리(Promise, Mysql)

기은P — Fri, 21 Oct 2022 17:03:16 +0900

1. 개요

A 데이터베이스에서 데이터를 가지고 B 데이터베이스에 가공해서 Insert하는 프로그램을 짜는 과정에서 node.js 기반으로 프로그램을 짜보았습니다.

평소에는 자바로 짯지만 node.js로 코드를 짜면 npm 패키지로 쉽게 의존성이 필요한 라이브러리를 다운받을 수 있고, Linux에서도 쉽게 배포할 수 있어서 node.js를 사용해보았습니다.

*필요했던 의존성 라이브러리는 데이터베이스 커넥터와 스케쥴러 2개였습니다.

하지만 java와 다르게 node.js는 대부분 비동기 처리가 되어버려서 데이터를 가공하는데 순서를 맞추기가 굉장히 곤란했습니다.

A function output -> B function execute(x10)

이렇게 순차적으로 실행이 되는 로직으로 코드를 작성했고, java 기반에서는 로직이었는데 Node.jjs에서는 생각하는 방향대로 동작하지가 않았습니다.

2. for 문 안의 Promise

우선 아래 코드를 보면

for (let i = 0; i < 10; i++) {
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(i);
        }, 1000);          // 1초마다 resolve값으로 i가 넘어가서,
    })
    .then((data) => {
    	console.log(data); // 0,1,2.. 이런 순서대로 나오겠지? 
    });
}

1초마다 Promise의 settimeout가 작동해 i가 출력되는 것을 생각을 할텐데 결과는 그렇지가 않고,

1초뒤 0~9가 한꺼번에 출력되는 것을 확인할 수 있습니다.

이유는 for문 내부에서 명령문인 new Promise가 실행되어 Promise 객체가 생성되고, 10개의 Promise 객체가 생성되면서 1초뒤에 resolve를 실행하는 명령문이 setTimeout 함수를 통해 예약됩니다.

이때, 동기적인 작업이 for문이 끝나기 전까지는 Promise가 실행되지 않아서

for문이 종료될 때까지 Promise는 pending(대기)에 있다가

for문이 종료되면 1초 뒤 모든 Promise의 resolve를 실행해서 then으로 i값을 전달해서 1초 뒤에 0~9가 한꺼번에 출력되게 됩니다.

참고: https://velog.io/@thms200/2020-01-28-2301-%EC%9E%91%EC%84%B1%EB%90%A8-fwk5xyifw7

따라서 아래와 같이 Promise 객체를 밖으로 빼낸 상태에서 코드를 작성하면 됩니다.

 async function test() {
  const promiseFunction = (i) =>
        new Promise((resolve) => setTimeout(() => resolve(i), 1000));

    let arr = Array(10).fill(0);
    
    for (let i = 0; i < arr.length; i++) {
        const result = await promiseFunction(i);
        console.log(result);
    }
  }
test()

3. Mysql Query 동기적 적용

우선적으로 Mysql Query가 동기적으로 적용되는 코드를 보겠습니다.

Node.js에서 사용할 수 있는 Mysql 패키지를 install합니다.

npm i mysql promise-mysql

아래는 적용한 전체 코드입니다.

쿼리와 필요한 파라미터에 대한 처리는 자유롭게 하시면 됩니다.

index.js

const mysql = require('mysql2/promise');

const func = () => {
  const pool = mysql.createPool({
    host: '주소',
    port: 포트,
    user: '아이디',
    password: '비번',
    database: '스키마'
  });
  
  const getSiteListQuery = async (agoDate, lastDate) => {
    const connection = await pool.getConnection(async conn => conn);
    try {
      const [rows] = await connection.query("SELECT deviceid, siteid  FROM FiveMinuteAccmofMeasureMentsMeter where createts BETWEEN ? and ? GROUP by deviceid, siteid order by siteid, createts desc;", [agoDate, lastDate]);
      connection.release();
      console.log('call')
      return rows
    } catch (err) {
      console.log('Query Error');
      connection.release();
      return false;
    }
  }

  const getSearchList = async (agoDate, lastDate, siteid, deviceid) => {
    const connection = await pool.getConnection(async conn => conn);
    try {
      const [rows] = await connection.query("SELECT * FROM FiveMinuteAccmofMeasureMentsMeter where createts BETWEEN ? and ? and siteid = ? and deviceid = ? order by siteid, createts desc;", [agoDate, lastDate, siteid, deviceid]);
      connection.release();
      return rows
    } catch (err) {
      console.log('Query Error : ' + err);
      connection.release();
      return false;
    }
  }

  let agoDate = new Date(2022, 9, 1);
  let currentDate = new Date(agoDate.getFullYear(), agoDate.getMonth(), 1);
  let currentLastDate = new Date(agoDate.getFullYear(), agoDate.getMonth() + 1, 0);


  getSiteListQuery(currentDate, currentLastDate).then((dataList) => {
    // 주의할 점. foreach를 사용하면 동기적인 처리가 되지 않습니다! 이유는 다음에서...
    // 1. for of 문 사용
    for (const value of dataList) {
      getSearchList(currentDate, currentLastDate, value.siteid, value.deviceid).then(
        data => console.log(data)
      );
    }

    // 2. entries를 사용해 index로 접근 가능
    for (const [index, value] of dataList.entries()) {
      getSearchList(currentDate, currentLastDate, dataList[index].siteid, dataList[index].deviceid).then(
        data => console.log(data)
      );
    }
  })

}
func();

*dataList는 A 데이터베이스에서 받은 데이터리스트고, getSearchList는 Promise 함수로, 파라미터를 받아서 B 데이터베이스에 db query를 실행시키는 함수입니다. 테스트용으로 확인용으로만 썼습니다.

주의할 점은 for of또는 array.entries를 사용할 때에 for scope 바깥에서 promise객체를 생성해야하고, foreach를 사용해서 반복하면 안됩니다!

4. foreach를 사용할 때 순차처리가 되지 않는 이유

https://velog.io/@hanameee/%EB%B0%B0%EC%97%B4%EC%97%90-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85%EC%9D%84-%EC%8B%A4%EC%8B%9C%ED%95%A0-%EB%95%8C-%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EC%A2%8B%EC%9D%84%EB%B2%95%ED%95%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0%EB%93%A4#for-%EB%AC%B8%EC%9C%BC%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

배열에 비동기 작업을 실시할 때 알아두면 좋은 이야기들

프론트엔드 인턴 면접에서 비동기 작업 관련 질문 대답 못한 뒤 외양간 뚝딱뚝딱 고치는 이야기.

velog.io

추후에 요점 정리해서 다시 작성하겠습니다.

[Javascript] this 정리

기은P — Thu, 20 Oct 2022 13:24:04 +0900

1. this의 정의

자바스크립트의 this는 현재 실행 문맥이라고 합니다. 여기서 현재 실행 문맥이라는 건 호출자를 뜻하는데, 호출자는 크게 세 가지로 나뉘어집니다.

객체의 메소드
함수
생성자 함수

만약 this가 나온다면 세 가지 경우 중 하나인 함수호출방식에 따라 누가 호출했는지 보고 this가 어떤 의미를 가지는지를 따져보면 됩니다. 이를 함수 호출 패턴이라고 하며, 자바스크립트의 this 는 함수 호출 패턴에 따라 this 가 어떤 객체의 this 가 될 지 정해지고, 이것을 this 바인딩이라고 합니다.

2. 사용방법

2-1) 객체의 메소드 호출할 때의 this 바인딩

var obj = {
  name: ‘test’
  sayName: function() {
    console.log(this.name);
  }
};
 
var kim = obj;
kim.name = "kim";
kim.sayName(); // "kim"
 
var lee = obj;
lee.name = "lee";
lee.sayName(); // "lee"

위와 같이 함수가 객체의 프로퍼티 값이면, 자신을 호출한 객체에 바인딩이 되며, 메소드로서 호출됩니다.

2-2) 함수를 호출할 때의 this 바인딩

기본적으로 this는 전역 개체(window)에 바인딩 되서 아래 코드처럼 this를 사용하면 전역에 있는 val 변수에 할당된 Hello가 출력됩니다.

var val = "Hello";
 
var func = function() {
  console.log(this.val);
};
func(); // "Hello"
console.log(this.val); // "Hello"
console.log(window.val); //  "Hello"
console.log(this === window); // true

콜백함수도 마찬가지로 this는 전역객체에 바인딩 됩니다.

var value = 1;
 
var obj = {
  value: 100,
  foo: function() {
    setTimeout(function() {
      console.log("callback's this: ",  this);  // window
      console.log("callback's this.value: ",  this.value); // 1
    }, 100);
  }
};
 
obj.foo();

주의할 점은 내부함수는 일반함수, 메소드, 콜백함수, 어디에서 선언되었던 관계없이 this는 전역객체를 바인딩합니다.

이런 구조를 피하는 방법은 아래와 같이 var that = this; 로 초기화해서 사용하면 됩니다.

var value = 1;
 
var obj = {
  value: 100,
  foo: function() {
    var that = this;  // Workaround : this === obj
 
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
 
      console.log("bar's that: ",  that); // obj
      console.log("bar's that.value: ", that.value); // 100
    }
    bar();
  }
};
 
obj.foo();

2-3) 생성자 함수 호출할 때의 this 바인딩

var Person = function(name) {
this.name = name;
};

var kim = new Person("kim");
console.log(kim.name); //kim

var lee = new Person("lee");
console.log(lee.name); //lee

New를 통해 생성자 함수를 생성한 객체에 대해 바인딩이 됩니다.

[React] SEO 처리 하기

기은P — Wed, 19 Oct 2022 17:20:21 +0900

1. 개요

React는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)으로 동작합니다.

이때 React에서는 HTML 파일이 딱 1개뿐이고, 그 내용조차 서버에서 javascript를 받아서 렌더링하기 전까지는 빈 껍데기인 상태이기 때문에 검색 엔진에 노출되기가 어렵습니다.

따라서 SEO에 노출시키기 위해 html 내용을 미리 만들어야합니다.

2. pre-rendering

pre-rendering이란, 빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말합니다.

빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 됩니다.

다만, 빌드 시에는 정적 파일만 가져오기 때문에 서버측에서 가져오는 데이터는 포함되어 있지 않습니다.

2-1. react-snap

1) pre-rendering을 사용하기 위해 react-snap 라이브러리를 설치합니다.

npm install --dev react-snap

2) package.json에 "postbuild": "react-snap" 스크립트를 추가해줍니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "react-snap"
  },

3) pre-rendering할 페이지를 package.json에 추가해줍니다.

"reactSnap": {
    "include": [
      "/index","/"
    ]
  }

4) npm run build로 빌드해줍니다.

그러면 먼저 빌드가 되고 자동적으로 react-snap 라이브러리가 실행됩니다.

5) serve로 서버 실행하기

serve 라이브러리를 전역에 설치하고,

npm install -g serve

/build/server.json을 생성해 아래와 같이 작성합니다

{
  "rewrites": [
    { "source": "/", "destination": "/200.html" },
    { "source": "/index", "destination": "/index.html" }
  ]
}

그다음 아래 명령어로 서버를 실행시킵니다.

serve -c server.json build

[React] SSR과 CSR(SPA) 차이

기은P — Wed, 19 Oct 2022 16:21:58 +0900

1. 개요

먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다.

이러한 렌더링을 하는 방식이 SSR과 CSR이 있는데, 이 두 가지 렌더링 방법에 대한 차이를 이해해보려고 합니다.

2. SSR(Server Side Rendering)

https://narup.tistory.com/235

[Next.js] SSG, SSR 개념 정리

1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. React: CSR(Client-Side-Rendering)..

narup.tistory.com

SSR은 Next.js 프레임워크에서 동작하는 렌더링 방법인데 자세한 설명은 위에 나와있고, 간략하게 설명을 하면

우리가 서버에게 웹 페이지를 요청할 때마다 새로고침이 일어나며, 서버에서 새로운 HTML을 그때그때마다 받아와 서버에서 그때그때마다 렌더링 하는 것을 말합니다.

3. CSR(Client Side Rendering), SPA(Single Page Application)

Next.js가 아닌 React.js는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)방식으로 렌더링합니다.

이는 모바일 친화적으로 사용될 수 있는 서비스가 필요해서인데, 그때그때마다 렌더링을 할 경우 모바일에서 성능이 부담이 갔기 때문입니다.

이때 나온 개념이 SPA(Single Page Application)으로, 최초 한번 전체 페이지를 로딩한 이후 부터에는 브라우저 내부에서 데이터만 변경해서 사용하는 방식입니다. 이러한 SPA 방식은 트래픽을 감소시키고 사용자에게 최적화된 환경을 제공할 수 있게 됩니다.

따라서 서버는 단순하게 Json 파일만 보내주고, 클라이언트 측에선 초기에 전송받은 HTML과 javascript를 통해 렌더링을 수행합니다. 이러한 과정을 CSR(클라이언트 사이드 렌더링)이라고 합니다.

3-1. SPA의 특징

클라이언트 사이드 렌더링을 수행하는 SPA는 서버에서 View를 렌더링하지 않고, HTML, JS, 각종 리소스를 서버에서 다운 받은 후 브라우저에서 렌더링을 수행하기 때문에 초기 View의 로딩 속도가 오래 걸리는 단점이 있습니다.

반면, 사용자의 액션에 따라 필요한 부분만 다시 읽어드리기 때문에 인터랙션이 빠르다는 장점이 있습니다.

3-2. SEO 문제

SEO란, Search Engine Optimization의 약자로 검색 엔진 최적화라는 의미인데 네이버나 구글과 같은 검색 엔진이 SPA로 만든 웹 페이지가 노출 되기 위한 과정을 말합니다.

SSR같은 경우 서버측에서 렌더링한 페이지(완성된 페이지)를 클라이언트로 전달하기 때문에 문제가 없는데, SPA 같은 경우는 완성된 페이지가 아닌 html+js+css와 같은 리소스를 받아서 브라우저 측에서 조합하기 때문에 검색 엔진에 노출되기가 어렵다는 문제가 있습니다.

*실제로 조회하면 html 뼈대만 있는 빈 페이지만 노출되게 됩니다.

참고

https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

[Javascript] 브라우저 동작 원리, 렌더링 트리

기은P — Wed, 19 Oct 2022 14:31:57 +0900

1. 브라우저 기본 구조

사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 웹페이지가 보여지는 창 등
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진 : 요청한 콘텐츠를 표시하기 위해 요청된 HTML과 CSS를 파싱해 화면에 표시합니다.
통신 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 독립적인 인터페이스로 각 플랫폼 하부에서 실행됩니다.
자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행합니다.
자료 저장소 : 자료를 저장하는 계층으로 로컬 스토리지, 쿠키와 같이 모든 종류의 자원을 하드디스크에 저장합니다.

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 인스턴스를 유지해서 독립된 프로세스로 처리합니다(이래서 메모리를 많이 먹는 걸수도?)

2. 렌더링 엔진

요청받은 HTML, XML 문서, 이미지와 같은 내용을 브라우저 화면에 표시합니다.

파이어폭스는 게코(Gecko) 엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit) 엔진을 사용합니다.(많이 들어본?)

동작과정은

위와 같이 HTMl 문서를 파싱하고, [콘텐츠 트리] 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다.

위에서 파싱한 정보를 바탕으로 스타일 정보와 HTML 표시 규칙이 포함된 렌더 트리를 생성합니다.

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데, 정해진 순서대로 화면에 표시됩니다.

렌더 트리 생성이 끝나면 배치가 시작되는데, 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다.

*파싱, 파서: 분석하는 것이라는 의미로, 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다. 파싱 결과는 문서 구조를 나타내는 DOM 노드 트리로 구현됩니다.

3. 웹킷의 동작 과정

브라우저가 문서(HTML)을 해석하면서 하는 수행하는 과정

불러오기(loading) : HTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림(resource stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있습니다. 로더는 단순히 읽기만 하는 것이 아니라 데이터를 읽었는지 확인하고, 팝업창을 열지 말지, 파일을 다운로드 받을지를 결정합니다.
파싱: 파싱은 DOM(Document Object Model)트리를 만드는 과정으로 HTML, XML 파서 2개의 파서를 가지고 있습니다. XML 파서는 XML 형식을 따르는 SVG, MathML등을 처리하는데 사용합니다.
렌더링 트리 : DOM 트리와 다르게 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조를 말합니다.

일반적으로 브라우저가 HTML 문서를 만나게 되면 HTML을 파싱하고 외부 자원인 css와 js 파일을 로드합니다.

Javascript는 전달된 시점에서 실행되고, DOM 트리의 구축을 완료한 이후에 이미지 파일 및 플래시 등의 외부 리소스를 로드하면서 모든 작업이 완료됩니다.

여기서 스크립트를 만나게 될 경우, <script> 태그를 만나면 스크립트가 해석 및 실행되는 동안 문서의 파싱은 중단되게 됩니다. 또한 스크립트가 외부에 있는 경우 네트워크로부터 자원을 가져와야 하는데 이 또한 실시간으로 처리되고 자원을 받을때까지 파싱은 중단됩니다.

*css는 이론적으로 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않습니다.

4. 자바스크립트 로드 async, defer 속성

앞서 살펴보았던 브라우저가 HTML을 해석하는 과정 대로 진행하게 되면

1번 -> 2번 -> 3번 순서로 코드가 실행됩니다.

이때, script가 해석 및 실행되는 동안 문서의 파싱이 중단되기 때문에, 2번에서 2초~3초가 걸릴 경우 홈페이지 전체적인 로딩이 늦어진다고 느껴지게 됩니다.

이런 경우에 async, defer 속성을 이용합니다.

Async : html 렌더링을 멈추지 않고 동시에 js 파일을 다운로드하고 다운로드가 끝난후에 자바스크립트를 실행합니다.

Defer : html 렌더링을 멈추지 않고 동시에 js 파일을 다운로드하고 html 렌더링이 끝난 후에 자바스크립트를 실행합니다.

참고

https://webclub.tistory.com/m/630

https://realmojo.tistory.com/m/96

[Javascript] 이벤트 버블링

기은P — Tue, 18 Oct 2022 17:28:41 +0900

1. 이벤트 등록

이벤트 버블링에 알기 전에 앞서 이벤트 등록에 대해 알아봅니다.

var button = document.querySelector('button');
button.addEventListener('click', addItem);

function addItem(event) {
	console.log(event);
}

웹 개발을 하셨던 분이라면 익숙한 코드지요? 버튼을 클릭했을 경우 addItem 함수를 실행시키는 코드입니다.

버튼을 클릭하면 addItem함수가 실행되고, event 인자가 넘어오며, console.log를 통해 event에 관련된 정보를 알 수 있게 됩니다.

동작 원리는 이러한데, 브라우저는 어떻게 이벤트를 감지할까요?

2. 이벤트 버블링

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가능 특성을 의미합니다.(하위 -> 상위)

아래와 같은 코드가 있다고 가정합니다.

<body>
	<div class="one">
		<div class="two">
			<div class="three">
			</div>
		</div>
	</div>
</body>

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent);
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

위 자바스크립트는 3개의 div에 모두 클릭이벤트를 등록하고, 클릭했을때 해당 클래스 이름을 출력하는 코드입니다.

그리고 제일 하위에 있는 div를 클릭하게 되면

제일 하위부터 상위까지의 div 클래스 이름이 출력됩니다.

이것과 같이 동작하는 것을 이벤트 버블링이라고 합니다.

이벤트 버블링이 발생하는 이유는 브라우저가 이벤트를 감지하는 방식 때문인데, 브라우저는 특정화면요소에서 이벤트가 발생했을 때, 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파합니다.

3. 이벤트 캡처

이벤트 캡처는 이벤트 버블링과 반대로 상위에서 하위로 흘러가는 진행 방식입니다.

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // default 값은 false입니다.
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

이벤트 버블링과 반대로 이벤트 캡처를 사용하려고 한다면 addEventListener의 옵션에 capture:true를 적용해주시면 됩니다.

그러면 위의 three가 있는 클래스를 클릭할 경우

상위에서 하위로 이벤트가 전파되어 출력이 됩니다.

4. event.stopPropagation()

이런 복잡한 이벤트의 전달방식을 신경쓰고 싶지 않다면 이벤트 속성에서 이벤트가 전파되는 것을 막는 stopPropagation() 함수를 사용하면 됩니다.

function logEvent(event) {
	event.stopPropagation();
}

참고

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

[Javascript] 이벤트 루프와 태스크 큐

기은P — Tue, 18 Oct 2022 15:23:37 +0900

1. Javascript 이벤트 루프

자바스크립트는 기본적으로 싱글 스레드로 한번에 하나의 작업만 할 수 있는 특징이 있습니다.

One thread == one call stack == one thing at a time

Call stack(호출 스택)은 우리가 어떤 순서로 작업을 수행하는지 기록하는 작업 스케쥴링과 관련된 도구입니다.

특정 함수를 실행하면 그 함수를 호출 스택의 맨 위에 놓는데 이것을 push 과정이라고 합니다.

만약에 함수가 어떤 값을 리턴하거나 실행을 종료하면, 호출 스택 맨 위에서 그 함수를 꺼내는데 이 과정을 pop이라고 합니다.

이와 같은 코드가 있으면 스택에 순서대로

main() -> printSquare() -> square() -> multiply()로 push가 되고,

pop은 함수의 실행이 종료되었을 때 그 함수를 꺼내는 것이니까

multiply() -> square() -> console.log() -> printSquare() -> main()과 같은 과정으로 pop이 됩니다.

* console.log도 함수입니다.

이런 식으로 콜 스택에 재귀적인 호출이 일어나 함수가 계속 쌓이게 되면 Maximum call stack size exceeded라는 에러메세지를 발생시킵니다.

2. 비동기 콜백

또한 간단한 프로그램이라면 상관 없지만, 복잡한 프로그램을 구동한다고 하고 시간이 매우 오래걸리는 작업이 스택에 쌓이고 실행될 경우, 그 다음 작업은 무한정 대기하게 되는데, 이 경우를 블로킹(blocking)이라고 합니다.

이것이 문제가 되는 이유는, 블록킹이 발생할 경우 브라우저가 다른 일을 할 수가 없기 때문에 조작이 불가능해지기 때문입니다.

이러한 문제를 해결하기 위한 해결 방안이 비동기 콜백(Asynchronous Callbacks)입니다.

자바스크립트가 싱글 스레드임에도 불구하고 웹사이트에서 여러 작업을 할 수 있도록 지원해주는 것이 브라우저가 Web APIs 같은 것들을 제공해 비동기 작업을 가능하게 해주기 때문입니다!

자바스크립트 내부에는 callstack이 있는데, ajax나 setTimeout, dom event 함수와 같은 비동기 함수를 pop 과정을 거쳐 실행하게 되면, 자바스크립트 엔진은 call stack에서 web APIs(브라우저)로 함수를 보내고 정해진 시간 혹은 이벤트가 발생한 순간에 순차적으로 Callback Queue라는 곳에 적재합니다.

Callback queue에 적재된 함수들은 js의 call stack에 쌓여있던 것들이 모두 제거되었을 때 차례대로 스택에 쌓여서 실행되게 됩니다. 이것을 이벤트 루프라고 합니다.

->이후 콜백 큐는 태스크 큐라고 정정합니다. HTML 표준 스택에서 task queue로 표기하기 때문입니다.

3. 태스크 큐와 마이크로태스크 큐

일반적인 동작과정은 위에서 설명한 것과 같은데, 세부적으로는 태스크 큐와 마이크로 태스크 큐, 2개의 큐로 나누게 되고 이는 Promise 동작 방식과 연관이 있습니다.

또한 자세한 내용으로 태스크큐와 마이크로태스크 큐 모두 제일 오래된 태스크에 우선순위를 주어 태스크를 꺼내는 우선순위 큐(priority Queue)로 동작합니다.

태스크큐에 들어가는 콜백함수들

setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링

마이크로태스크큐에 들어가는 콜백함수들

Process.nextTick, promise, object.observe, MutationObserver

이벤트 루프는 이와 같은 2개의 큐에서 콜백함수를 꺼내야하는데, 순서는 마이크로태스크 큐가 태스크 큐보다 우선순위를 가지고 있습니다!

console.log('콜 스택!');
setTimeout(() => console.log('태스크 큐!'), 0);
Promise.resolve().then(() => console.log('마이크로태스크 큐!'));
 
->
콜 스택!
마이크로태스크 큐!
태스크 큐!

따라서 비동기 로직을 다룰 때 콜백 함수를 사용하게 될 경우, 이러한 우선순위를 예측하여 코드를 작성해야 합니다.

[Javascript] 호이스팅이란?

기은P — Mon, 17 Oct 2022 14:00:57 +0900

1. 호이스팅이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.

2. 자바스크립트 함수 동작 원리

1) 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는다.

2) 함수안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행한다. (함수 블록 {} 안에서만.)

3) 함수를 실행할 때, 호출한 위치보다 해당 함수가 하단부에 있을 경우 자바스크립트 Parser가 내부적으로 함수 위치를 끌어올려서 처리한다. -> 호이스팅

* 실제 메모리에서는 변화가 없습니다.

Why? 자바스크립트에서 함수를 선언하는 방식이 함수선언식과 함수표현식이 있습니다.

// 함수선언식
function test1() {
 return 1;
}

// 함수표현식
var test2 = function() {
 return 2;
}

자바스크립트에서는 함수도 객체로 인식되기 때문에 변수에 할당이 가능해서 함수표현식처럼 변수값에 함수 표현을 담아서 사용할 수 있습니다.

이 함수표현식의 장점 때문에 호이스팅이 사용되는데요.

함수표현식을 사용하면 클로저로 사용할 수 있고, 다른 함수의 인자로 넘기는 콜백(함수도 객체이기 때문에)으로 사용할 수 있기 때문입니다.

3. 함수표현식의 호이스팅 예제

/* 정상 */
 function printName(firstname) { // 함수선언문
     var inner = function() { // 함수표현식
         return "inner value";
     }
       
     var result = inner(); // 함수 "호출"
     console.log("name is " + result);
 }
 
 printName(); // > "name is inner value"

/* 오류 */
 function printName(firstname) { // 함수선언문
     console.log(inner); // > "undefined": 선언은 되어 있지만 값이 할당되어있지 않은 경우
     var result = inner(); // ERROR!!
     console.log("name is " + result);
 
     var inner = function() { // 함수표현식
         return "inner value";
     }
 }
 printName(); // > TypeError: inner is not a function

함수 표현식에 대한 할당이 호출하는 위치보다 밑에 있을 경우 에러를 발생합니다.

따라서 함수표현식을 사용할 때에는 코드의 최상단에 작성하도록 하거나, 혹은 let, const를 사용하면 됩니다.

참고

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[Jenkins] Linux EC2에서 Jenkins 설치하기(Java 11버전 설치)

기은P — Fri, 23 Sep 2022 13:22:18 +0900

1. 개요

새로 ec2 인스턴스에 jenkins를 설치하려고 하니 java version 이슈가 있어서 설치가 곤란했었던 터라, EC2 인스턴스의 Linux 환경에서 Jenkins를 설치하는 과정을 정리해보려고 합니다.

2. Jenkins 구동 실패

jenkins.service - Jenkins Continuous Integration Server

Loaded: loaded (/usr/lib/systemd/system/jenkins.service; disabled; vendor preset: disabled)

Active: failed (Result: start-limit) since 목 2022-06-30 08:32:00 KST; 7s ago

Process: 7079 ExecStart=/usr/bin/jenkins (code=exited, status=1/FAILURE)

Main PID: 7079 (code=exited, status=1/FAILURE)

localhost.localdomain systemd[1]: Failed to start Jenkins Continuous Integration Server.

localhost.localdomain systemd[1]: Unit jenkins.service entered failed state.

localhost.localdomain systemd[1]: jenkins.service failed.

localhost.localdomain systemd[1]: jenkins.service holdoff time over, scheduling restart.

localhost.localdomain systemd[1]: Stopped Jenkins Continuous Integration Server.

localhost.localdomain systemd[1]: start request repeated too quickly for jenkins.service

localhost.localdomain systemd[1]: Failed to start Jenkins Continuous Integration Server.

localhost.localdomain systemd[1]: Unit jenkins.service entered failed state.

localhost.localdomain systemd[1]: jenkins.service failed.

jenkins를 설치하고 systemctl start jenkins를 해서 구동하려는데, 구동이 실패했습니다.

원인에 대한 로그가 정확하게 나와있지 않아서, 사실 추측할 수밖에 없는 상황이었는데 아마 이미 사용하고 있는 포트가 있어서 포트가 겹치거나, 설치된 자바 버전이 맞지 않아서 구동이 실패하는 원인일 것이라고 생각했습니다.

-> 추후에 확인해보니 설치된 자바 버전이 맞지 않았습니다!

2. 과정

2-1. 설치할 수 있는 자바 버전 확인

yum list | grep jdk

위의 명령어로 확인해보면 java 1.7~1.8 버전만 yum 패키지에서 설치할 수 있는 것으로 나옵니다.

하지만 젠킨스 공식 홈페이지에서는 java 11 버전 이상을 지원하는 것으로 확인됩니다.

2-2. 설치되어 있는 Java 삭제

만약 다른 버전의 java가 설치가 되어 있다면,

yum list installed | grep "java"
# java-1.8.0-openjdk-headless.x86_64    1:1.8.0.222.b10-0.47.amzn1   @amzn-updates
# java-11-amazon-corretto-devel.x86_64  1:11.0.7.10-1                installed
yum remove java-1.8.0-openjdk-headless.x86_64

위의 명령어를 통해 자바를 제거해 줍니다.

2-3. Java 11 버전 설치

# aws coreetto 다운로드
sudo curl -L https://corretto.aws/downloads/latest/amazon-corretto-11-x64-linux-jdk.rpm -o jdk11.rpm

# jdk11 설치
sudo yum localinstall jdk11.rpm

# jdk version 선택
sudo /usr/sbin/alternatives --config java

# java 버전 확인
java --version

# 다운받은 설치키트 제거
rm -rf jdk11.rpm

위의 명령어를 통해 java 11버전을 설치해줍니다.

2-4. Jenkins 설치

# yum에 젠킨스 repository 추가
sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo 

# 로컬 gpg 키링에 jenkins gpg key 추가
sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key 

# 젠킨스 설치
sudo yum install jenkins 

# 젠킨스 시작
sudo systemctl service jenkins start

아마, 위 과정이면 젠킨스가 정상적으로 시작이 될 겁니다.

3. Jenkins 포트 변경

젠킨스가 설치되어 있는 환경에서

sudo vi /etc/sysconfig/jenkins

위 명령어로 젠킨스 설정을 수정해줍니다.

JENKINS_PORT=" "를 찾아 사용하고 싶은 포트로 변경해줍니다.

3-1. 다른 방법으로 포트 변경

위의 방법으로 포트 변경이 되지 않았다면 아래 방법을 사용하면 됩니다.

sudo vi /usr/lib/systemd/system/jenkins.service

[React] 콜백에서의 useState, useEffect 사용 이슈

기은P — Thu, 22 Sep 2022 17:46:16 +0900

1. 개요

위 아래로 스크롤 할 때, 섹션별로 스크롤이 이동하는 기능을 구현하는 과정에서 scroll event를 사용하게 되었는데, 이때 event가 발생할 때 콜백으로 scroll section index 값을 변경하려고 했습니다.

이때, 스크롤 인덱스가 무조건 변경되는 것이 아니라, 인덱스가 특정 범위를 넘지 않도록 필터링을 하는 조건을 추가하였는데요.

useEffect의 dependency로 등록한 scrollIndex의 console은 잘 찍히는 반면, 필터링하는 부분에서의 scrollIndex 값은 1로 고정이 되어 있었습니다.

사용된 코드

  const outerDivRef = useRef();
  const windowSize = useRef(getWindowDimensions());
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
  const [scrollIndex, setScrollIndex] = useState(1);
  const scrollIndexRef = useRef(1);

  useEffect(() => {
    console.log("변경 후 index : " + scrollIndex)
  }, [scrollIndex])

  const moveDown = () => {
    console.log("move down")
    if (5 <= scrollIndex) return;
    setScrollIndex(scrollIndex + 1);
  }

  const moveUp = () => {
    console.log("move Up")
    if (scrollIndex <= 1) return;
    setScrollIndex(scrollIndex - 1);
  };

  function getWindowDimensions() {
    const { innerWidth: width, innerHeight: height } = window;
    return {
      width,
      height
    };
  }

  useEffect(() => {
    const wheelHandler = (e) => {
      e.preventDefault();
      windowSize.current = getWindowDimensions();
      const { deltaY } = e;
      if (deltaY < 0) {
        moveUp()
      }
      else if (deltaY > 0) {
        moveDown()
      }

    }

    const outerDivRefCurrent = outerDivRef.current;
    outerDivRefCurrent.addEventListener("wheel", wheelHandler);
    return () => {
      outerDivRefCurrent.removeEventListener("wheel", wheelHandler);
    }
  }, [])

2. 원인

왜 scrollIndex가 콜백 함수 호출시 값이 고정되어 있었냐면, 리스너를 통해 콜백 함수가 호출될 시, 호출될 때 state가 고정된다고 합니다.

일단 콘솔을 찍어서 테스트 해봅니다!

2-1. setState 확인

moveDown은 callback 함수로 등록한 함수로, callback을 호출하면 스크롤 인덱스가 호출전과, 호출후에 변동이 있을 줄 알았는데, setState의 값은 변동이 없었습니다.

2-2. ref.current 확인

ref.current로 임시로 숫자를 등록해 증감하도록 useState와 같이 테스트를 해보았는데,
useState는 변동되지 않지만, ref.current값은 변동되는 것을 확인할 수 있었습니다!

2-3. let 확인

마지막으로 useState, ref.current, let 3개를 모두 테스트 해보았는데

콜백함수가 동작했을 때, 동기적으로 값이 바뀌는건 ref.current와 let 2개 인 것 같습니다.

결론: 콜백함수를 등록했을 때의 state 값은 고정이 되어 변동되지 않고, ref.current와 let이 변동됩니다.

3. 이유

조금 검색을 해보았는데, 이렇다고 합니다.

이 불변성이라는 이름이 아직도 거부감이 들 수도 있는데, 위에서 확인했듯이 한 번 랜더링된 컴포넌트가 가지고 있는 상태값은 그 중간에 변하지 않는다.

[count, setCount] 의 setCount 를 이용할 때, 이 setCount 는 메모리 어딘가에 있는 _val 을 변경한 것이지, 지금 옆에 가지고 있는 count 가 변경된 것이 아니다.

이 count 값이 새로운 값이 되는건 리랜더링이 된 이후다. (이때 count 는 바로 직전의 count 와는 전혀 관계가 없는 새로운 녀석이다.) 리랜더링할 때(= Functional Component가 다시 호출될 때) 다시 useState 를 부르면 그때 변경된 _val 값을 가져온다고 생각할 수 있다.

그래서 아래와 같은 경우에 당황한 적이 많았다. 여러분들도 분명히 있을거라 생각한다.

const [state, setState] = useState(0);

useEffect(() => {
  setState(state + 1); // 분명 state에 1을 더했는데?
  console.log(state); // 호출: 0
}, []);

setState 를 이용한 직후에 state 값을 불렀는데, 업데이트가 되지 않는 상황이었다.

처음에는 뭔가 비동기적으로 발생해서 중간에 shadow 구간이 생기는건가… 라고 생각했는데 그게 아니었다.

state 값이 새로운 값이 되려면 리랜더링이 되어야 하는데, JS는 싱글 스레드로 돌아가기 때문에 useEffect 에 들어있는 콜백이 마무리된 이후에 리랜더링이 진행될 것이다. 그러면 아직 console.log(state) 를 실행하는 시점에는 리랜더링이 되기 전이라는거니까, state 값은 0인 것이 당연하다.

출처: https://medium.com/hcleedev/web-usestate%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%95%A8%EC%A0%95-7b4825c16b9

4. 결론

useState(): 리렌더링이 발생한 이후 state값이 변경됨(비동기적)

useEffect(): dependency로 등록한 값이 변경된 이후 등록한 effect 함수가 작동함

단순하게 useState를 사용하면 값이 바뀌고, useEffect내부에서 setState를 사용할 경우, 그 다음에 바로 값이 바뀌는 것도 아니라는 것을 알았습니다...

3번의 이유에서 작성된 코드처럼 setState를 한다고 해서 값이 바뀌는 것을 가정하고 코드를 작성하면 원하는 결과가 나오지 않는다는 점이죠.

4-1. useState + useEffect 개선안

const [state, setState] = useState(0);

setState(state + 1);
  
useEffect(() => {
  console.log(state); // 호출: 1
}, [state]);

위와 같이 useEffect에 dependency를 등록해서 값이 변경될 경우에 호출하거나,

4-2. useState 내부에서의 콜백

위처럼 useState 내부에서 콜백을 사용하도록 합니다.

4-3. setState 전 값 비교

  const [scrollIndex, setScrollIndex] = useState(0);
  let scrollIndexLet = 0;
  
  // not working
  const moveUp1 = () => {
    if (scrollIndex >= 5) return;
    setScrollIndex(scrollIndex + 1);
  };
  
  // working
  const moveUp2 = () => {
    if (scrollIndexLet >= 5) return;
    scrollIndexLet += 1;
    setScrollIndex(scrollIndexLet);
  };

setState전에 state 값에 대한 필터링이 필요하다면 ref.current나 let을 사용해서 state와 관계가 없는 값을 사용해야 합니다.

[React] Redux Toolkit 에서의 비동기 처리(createAsyncThunk, extraReducers)

기은P — Mon, 19 Sep 2022 18:01:33 +0900

1. 개요

앞서서 Redux Toolkit의 상태관리를 위한 기본적인 사용법에서 알아보았는데요, createSlice()를 통해 Slice라는 것을 생성하며, 여기에 초기 default 값과 dispatch를 통해 호출할 reducer 함수를 지정했었습니다.

프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다.

따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다.

하지만 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에, Redux Toolkit의 createAsyncThunk를 사용해 비동기 처리를 진행하도록 합니다.

2. createAsyncThunk()

createAsyncThunk()의 속성은 아래와 같습니다.

createAsyncThunk(typePrefix: string, payloadCreator: AsyncThunkPayloadCreator,
options?: AsyncThunkOptions): AsyncThunk

아래와 같이 사용합니다.

export const fetchUser = createAsyncThunk(
  'auth/profile',
  // 만약, api를 호출할때 object를 추가하고 싶으면 async (object, thunkAPI)로 호출합니다.
  async (_, thunkAPI) => {
    try {
      const response = await axios.get<{
        name: string
        email: string
        type: string
      }>('api/users/me')
      return response.data
    } catch (error) {
      return thunkAPI.rejectWithValue(error)
    }
  }
)

위와 같이 첫번째 파라미터로 typePrefix로 액션 타입을 생성하고, 두번째 파라미터로 promise 기반으로 결과를 반환하는 action을 작성합니다.

기억해야 할 점.

createAsyncThunk는 Promise의 3가지 상태와 같이 pending, fulfilled, rejected의 상태를 갖습니다.

저희가 기본적으로 비동기를 처리하는 promise를 사용하는 것처럼 함수를 작성해주시면 됩니다.

3. extraReducer

공식사이트 :: https://redux-toolkit.js.org/api/createReducer#usage-with-the-builder-callback-notation

위에서 비동기 처리를 할 액션을 정의했으니, 리듀서에 연결해야겠죠?

다만, 앞에서 설명했다시피 Redux에서는 자체적으로 비동기 처리를 지원하지 않아서, extraReducers라는 것을 사용해 createAsyncThunk로 생성한 Thunk를 등록시켜주어야합니다.

export const fetchSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUser.pending, (state) => {
      state.loading = 'pending';
    });
    builder.addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = 'succeeded';
      state.user = action.payload;
    });
    builder.addCase(fetchUser.rejected, (state) => {
      state.loading = 'failed';
    });
  },
});

위와 같이 extraReducer에 파라미터인 builder를 통해 addCase를 사용해 case(pending 상태에 대한 처리, fulfilled에 대한 처리 등)를 등록해주어야 합니다.

promise 결과가 pending이면 대기중인 상태인 것이고,

fulfilled면 성공, rejected면 거절이니까, 그 상황에 맞게끔 반환되는 값을 state에 지정해주면 됩니다.

4. 사용

useDispatch를 통해 createAsyncThunk를 통해 만든 Thunk 함수를 호출하고, useSelecter를 통해 state값을 동기화 시켜줍니다.

먼저 전역에서 사용할 수 있는 dispatch hooks을 만들어줍니다.

store/index.ts

...
const combinedReducers = combineReducers({
  authReducer: authSlice.reducer,
  testReducer: testSlice.reducer,
  searchItemReducer: searchItemSlice.reducer,
})
export type OurStore = ReturnType<typeof combinedReducers>

const rootReducer = (
  state: ReturnType<typeof combinedReducers>,
  action: AnyAction
) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state,
      ...action.payload,
    }
    return nextState
  }
  return combinedReducers(state, action)
}

export const store = configureStore<OurStore>({
  reducer: rootReducer,
})

// https://redux-toolkit.js.org/usage/usage-with-typescript#getting-the-dispatch-type
export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch

...

searchForm.ts


import { useAppDispatch } from '../store'
import { unwrapResult } from '@reduxjs/toolkit';

const LoginPetch = () => {
  const dispatch = useAppDispatch();
  
  const { user, loading } = useSelector(state => state.postsState);
  

  useEffect(() => {
    const apiAction = dispatch(fetchUser());
    // unwrapResult 함수를 사용할 경우 바로 state의 값을 가져올 수 있다.
  	const apiResult = unwrapResult(apiAction);
  }, [dispatch]);
  
  return (
    <>
      <PostCardGrid user={user} />
      {loading !== 'idle' && <PostCardGridSkeleton />}
    </>
  );
};

[React] Redux Toolkit 사용법

기은P — Mon, 19 Sep 2022 15:23:16 +0900

1. 개요

React에서 상태관리 툴로 Redux를 사용하는데, Redux를 사용하기가 상당히 까다롭고 진입장벽이 높습니다.

액션 함수, 액션 생성 함수, 리듀서, 스토어... 또 타입스크립트를 쓰게 되면 해당 타입을 또 일일히 지정해주어야 하고 관리할 상태값이 1개가 생길 때마다 작성하는 코드도 많아집니다. 가독성도 안좋아지고요...

이러한 문제 때문에 상태관리를 도와주는 라이브러리가 등장하게 되었는데, 사실 Redux Toolkit보다 더 직관적이고 좋은 라이브러리는 많습니다.

다만 상태관리라는 개념에 대해 정확하게 알고 사용하는 것이 좋을 것이라고 생각이 되어 Redux를 먼저 사용해보고 그 Redux를 편리하게 만든 Redux Toolkit에 알아보려고 합니다!

2. 설치

공식사이트는 아래와 같습니다.

https://redux-toolkit.js.org/introduction/getting-started

npm install @reduxjs/toolkit react-redux

공식 사이트에 나온 것처럼 프로젝트에 위 패키지를 설치해 줍니다!

3. 주요 함수 및 실제 사용 코드

리덕스 툴킷을 사용할 때 2개의 함수만 잘 사용하시면 됩니다.

실제 리듀서가 동작하는 createSlice(), store의 구성설정인 configureStore().

아이러니하게도 기능 압축이 잘 된 라이브러리인데, 공식 사이트의 설명이 조금 난해하게 되어 있습니다.

요점만 잘 이해하기 위해서 함수별로 정리해보겠습니다.

3-1.createSlice()

/store/counterSlice.ts

import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState = { value: 0 } as CounterState

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

코드는 타입스크립트로 작성되었습니다. 자바스크립트로 된 버전은 공식사이트를 참고해주세요.

위 코드는 카운트를 증감하는 예제입니다.

createSlice함수는 파라미터에 name, initialState, reducers 이 3개를 작성해주면 됩니다.

1) initialState: default값이면서 동시에 상태 관리에 사용되는 type입니다.

interface로 type을 지정하고, initalState의 값을 초기화를 시켜주는데, 카운터 예제이기 때문에 초기값을 0으로 설정한 것을 확인할 수 있습니다.

2) name: createSlice()를 통해 slice를 생성하게 되는데, 내부적으로 중복을 피하기 위해서 사용되는 고유한 값입니다.

3) reducers: 상태 변화를 처리하는 함수를 정의합니다. 함수의 이름은 dispatch로 부르는 액션 함수의 이름이며, 함수 내부는 위와 같이 state의 상태 값을 변경하는 처리를 해줍니다. dispatch에 포함해서 전달한 값은 PayloadAction<>의 타입의 action.payload 값으로 확인할 수 있습니다.

기존의 Redux에서 액션 타입을 지정하고, 타입에 따른 액션 생성함수, action.type에 따른 상태 변화 처리 및 불변성 처리를 3단계에 나눠서 했었다면, Redux Toolkit에서는 이 하나의 함수를 정의하는 것으로 끝납니다!

4) 후처리: createSlice로 생성된 counterSlice의 actions를 export시켜 외부에서 action을 호출할 수 있게 합니다. reducer 또한 export시켜 추후에 store에 리듀서를 등록할 수 있도록 노출시켜 줍니다.

3-2. configureStore()

/store/store.ts

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../store/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

3-1에서 내보낸 reducer를 configureStore에 등록시켜 줍니다. 추후에 App에서 state.counter.value를 사용해 store에 저장된 리듀서의 값을 가져올 수 있습니다.

3-3. App 전역 Provider에 등록

// index.tsx
import {Provider} from "react-redux"
import {store} from './store/store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

위에서 작성한 store를 전역에서 사용할 수 있도록 React의 App 시작점에 Provider로 등록을 해줍니다.

3-4. Store 호출

import React from 'react'
import type { RootState } from '../../app/store'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './store/counterSlice'

export function Counter() {
  const count = useSelector((state: RootState) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

useSelector Hooks를 이용해 store에 저장된 state를 가져오고, useDispatch를 사용해 변경할 값을 reducer에 전달해줍니다.

일반 Redux보다 Redux Toolkit으로 사용한 코드가 훨씬 더 직관적입니다!

4. 온라인에서 실제로 해보기

https://codesandbox.io/s/github/reduxjs/redux-essentials-counter-example/tree/master/?from-embed

redux-essentials-counter-example - CodeSandbox

redux-essentials-counter-example using @reduxjs/toolkit, @testing-library/jest-dom, @testing-library/react, @testing-library/user-event, react, react-dom, react-redux, react-scripts

codesandbox.io

[CSS] 자주 쓰는 CSS 정리

기은P — Fri, 16 Sep 2022 13:53:39 +0900

1. img, video 등 오브젝트 요소에는 object-fit: cover 속성을 사용

내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다.

2. 반응형 css 작업 우선순위

레이아웃을 작성할 때 반응형으로 작업하고 있고, 반응형을 나누는 기준이 min-width라면 모바일 크기부터 데스크탑으로, 작은 화면에서 큰 화면으로 우선순위를 맞춰서 작업한다.

3. display: flex 사용

되도록이면 flex를 사용하되 flex를 아무 이유 없이 남발하지 말것.

flex 밑의 자식은 flex-item이 된다.

flex-item이 1일 경우 flex: 1 1 0이 된다.

grow: 늘어남 / shrink 줄어듬

flex-grow가 0이면 크기 고정, 1이면 컨테이너를 채우도록 늘어남

flex-shrink가 0이면 크기 고정, 1이면 컨테이너에 맞게 줄어듬

4. overflow

내용이 요소의 크기를 벗어 났을때

visible : 박스를 넘어가도 보여줍니다.
hidden : 박스를 넘어간 부분은 보이지 않습니다.
scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

5. css 상속

대표적으로 font와 color는 상속이되고, display, width와 같은 속성은 상속이 되지 않음

6. grid 사용

위와 같은 디자인은 3개의 칸으로 나눠서 디자인 하고, 컬럼을 모바일 1개, 태블릿 2개, 데스크탑 3개로 나눠서 반응형으로 디자인할 수 있다.

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-evenly gap-10

css를 위와 같이 작성하도록 한다.(with. tailwindcss)

[Typescript] 자주 쓰는 문법 정리

기은P — Thu, 8 Sep 2022 10:13:41 +0900

1. 배열

// default
let list: number[] = [1,2,3];
// or
let list: Array<number> = [1,2,3];



// interface array
interface EnumServiceItem {
    id: number; label: string; key: any
}
interface EnumServiceItemList extends Array<EnumServiceItem>{}
// using
var result: EnumServiceItem[] = [
    { id: 0, label: 'CId', key: 'contentId' },
    { id: 1, label: 'Modified By', key: 'modifiedBy' },
];

2. 인터페이스

상속이 가능하다.

interface PeopleInterface {
  name: string
  age: number
}

// interface 확장시 extends 키워드 사용
interface StudentInterface extends PeopleInterface {
  school: string
}

interface 확장시 extends 키워드 사용

3. type

인터페이스와 같이 객체의 타입을 정의하는 키워드.

type과 interface 같은 기능을 갖지만, 확장성이 좋은 interface를 사용하는 것이 더 좋다고 한다.

type UserType = {
  name: string;
  age: number;
};

// type 뒤의 &은 interface의 extends 키워드와 같은 역할(확장)
type NewUserType = UserType & { address: string };

let obj: NewUserType = { name: "NAME", age: 29, address: 'Busan' };

4. ? 물음표(선택적 프로퍼티)

4-1. 선택적 프로퍼티

인터페이스의 프로퍼티 이름 끝에 ?를 붙여 표시.

interface ICompanyInfo {
  name: string;
  chairman?: string;
}

let obj: ICompanyInfo = {
  name: 'FaceBook'
};

선택적 프로퍼티를 사용하지 않을 경우, ICompanyInfo의 인터페이스를 모두 기술하지 않아서 에러가 발생하는데,

위와 같이 프로퍼티 이름 끝에 ?를 붙일 경우 에러가 발생하지 않음.

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = {color: "white", area: 100};
    if (config.clor) {
        // Error: Property 'clor' does not exist on type 'SquareConfig'
        newSquare.color = config.clor;
    }
    return newSquare;
}

또한 위와 같이 인터페이스에 속하지 않은 프로퍼티의 사용을 에러로 처리해줌.(color인데 clor로 기술해서 오류 발생)

4-2. 옵셔널 체이닝

interface ICompanyInfo {
  name: string | null | undefined;
}

let obj: ICompanyInfo = {
  name: "FaceBook"
};

console.log(obj.name?.length);

프로퍼티의 타입을 여러 개로 옵션을 주었을 때, 단순하게 obj.name을 사용할 경우 null 또는 undefined가 가능하다고 문제가 발생하는데,

obj.name?.length 로 사용할 경우 undefined를 리턴해줌 -> 에러처리에 용이하다.

5. 제네릭

가장 자주볼 수 있는 기능

// number 타입의 매개변수를 return하는 함수
function NumberReturnFunc(arg: number): number {
  return arg;
}

// string 타입의 매개변수를 return하는 함수
function StringReturnFunc(arg: string): string {
  return arg;
}

// boolean 타입의 매개변수를 return하는 함수
function BooleanReturnFunc(arg: boolean): boolean {
  return arg;
}

위 3개의 함수를

function GenericReturnFunc<T>(arg: T): T {
  return arg;
}

한 개의 함수로 만들 수 있다.

제네릭 함수 구현 방법은 함수명 뒤에 "<T>"를 추가하고, T는 매개변수의 타입 또는 반환 타입으로 설정해서 사용한다.

여기서 T는 변수와 같은 느낌으로, 다른 문자열을 사용해도 된다. <O>, <P>, <Unit> 등등

let numVar = GenericReturnFunc<number>(123);
let strVar = GenericReturnFunc<string>('ABC');

사용할 때는 위와 같이 함수를 호출하고 < > 내부에 적용한 타입을 지정한다.

-> 함수 호출하는 건 간단하기 때문에 함수를 잘 만들어야 한다.

function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length); // 배열은 .length를 가지고 있습니다. 따라서 오류는 없습니다.
  return arg;
}

위와 같이 T라는 타입의 배열로도 사용할 수 있다. 때문에 arg의 .length는 문제가 없이 작동한다.(any와 unknown 타입인 경우 에는 에러가 발생한다.)

5-1. 제네릭 화살표 함수

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

위의 펑션을 아래의 화살표 처럼 사용할 수 있다.

5-2. 객체 리터럴 타입의 함수

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: { <T>(arg: T): T } = identity;

5-3. .tsx에서의 제네릭 화살표 함수 사용

let GenericReturnFunc = <Type>(arg: Type): Type => {
  return arg;
}

.tsx 확장자 파일에서 위와 같은 코드를 사용할 경우 <Type>에서 태그 <> 에러가 발생한다.

이때 제네릭 화살표 함수를 구현해야 하는 경우, 제네릭 매개 변수에 extends를 사용해서 컴파일러에게 제네릭 화살표 함수라고 알려 주어야 한다.

let GenericReturnFunc = <Type extends {}>(arg: Type): Type => {
  return arg;
}

[ElasticSearch] Logstash No configuration found in the configured sources. [에러해결]

기은P — Tue, 2 Aug 2022 15:19:21 +0900

1. 개요

ElasticSearch에 Logstash의 배치 스케쥴러를 사용하려고 했는데 configuration을 못찾는다는 오류가 발생했습니다.

config폴더에 pipelines.yml과 logstash.conf 파일은 바꾼적이 없는데 말이죠.

2. 에러해결

구글링을 해본 결과...

conf 파일의 권한이 없거나, 존재하지 않거나, 이름을 틀렸거나 등등 인데

혹시나 관리자 권한으로 실행을 해보았는데도 에러는 해결되지 않았습니다.

조금 더 구글링을 해보니, logstash.bat을 실행할때 -f 뒤의 parameter로 .conf를 지정해주었던 것이 기억이 났습니다!

logstash.bat -f config/logstash.conf

위 명령어로 실행시키면 잘 동작합니다.

[Git] 변경된 내용 삭제(git reset)

기은P — Tue, 26 Jul 2022 15:04:31 +0900

1. 개요

서버에서 서비스 중인 프로그램에 대해 업데이트를 진행할 때, 우연찮게 서버 내부에서 수정사항이 발생하고, 이 수정사항에 대해 git에 반영하지 않고 변경된 내용을 삭제하고 단순하게 pull만 받고 싶을 때가 있습니다.

2. 코드

git reset
git checkout .
git clean -fdx

1번째 줄 : 모든 staged된 파일이 unstage됩니다(실수로 커밋했을 경우, 로컬에서 unstage)

2번째 줄 : 모든 변경 사항을 취소합니다.

3번째 줄 : 추적할 수 없는 모든 파일 제거(추적된 파일만 남습니다)

이후에 git pull로 변경된 내용을 받고 서비스를 진행하면 됩니다.

참고

https://extbrain.tistory.com/83

[git] 커밋되지 않았거나 저장되지 않은 모든 변경 사항 취소

▶git 커밋되지 않았거나 저장되지 않은 모든 변경 사항 취소 ▶설명 git을 사용할 때 커밋되지 않았거나 저장되지 않은 변경 사항이 나타나는 경우가 많습니다. 이 때 현재 로컬에서 작업한 사항

extbrain.tistory.com

[ElasticSearch] logstash + mysql window 환경 연동

기은P — Tue, 19 Jul 2022 16:36:53 +0900

1. 개요

ElasticSearch에 RDB로 이용하고 있는 mysql 데이터를 적재하고 싶어서 찾아보다가, elk의 스택인 logstash를 이용해서 batch job 형태로 주기적으로 적재할 수 있는 방법을 찾게 되었습니다.

일단은 테스트 용도이기 때문에, 윈도우 환경에서 작업을 했고, 리눅스 환경에서의 예제는 많지만 윈도우 환경에서의 예제는 없는 것 같아 정리해보려고 합니다.(elk가 생각보다 상당히 리소스를 많이 차지합니다)

2. 준비물

1) ElasticSearch

https://www.elastic.co/kr/downloads/elasticsearch

Download Elasticsearch

Download Elasticsearch or the complete Elastic Stack (formerly ELK stack) for free and start searching and analyzing in minutes with Elastic.

www.elastic.co

2) Logstash

https://www.elastic.co/kr/downloads/logstash

Download Logstash Free | Get Started Now

Download Logstash or the complete Elastic Stack (formerly ELK stack) for free and start collecting, searching, and analyzing your data with Elastic in minutes.

www.elastic.co

3) Mysql, Mysql connector

RDB로 사용하는 Mysql은 알아서 설치가 되었다고 생각하고...

https://mvnrepository.com/artifact/mysql/mysql-connector-java/8.0.18?__cf_chl_rt_tk=zaRajG9xCh3rQuIRHVjRuu4RLOo4WgNidVrt8TTON2k-1658197549-0-gaNycGzNCL0

Maven Repository: mysql » mysql-connector-java » 8.0.18

JDBC Type 4 driver for MySQL Note: There is a new version for this artifact mysql mysql-connector-java 8.0.18 // https://mvnrepository.com/artifact/mysql/mysql-connector-java implementation group: 'mysql', name: 'mysql-connector-java', version: '8.0.18' //

mvnrepository.com

mysql-connctor-java.jar를 받아줍니다

3. 기본 포트

ElasticSearch = http://localhost:9200/

4. Logstash 설정 파일

제 설정 파일의 폴더 구성은 아래와 같습니다.

config/pipelines.yml

...

# List of pipelines to be loaded by Logstash
#
# This document must be a list of dictionaries/hashes, where the keys/values are pipeline settings.
# Default values for omitted settings are read from the `logstash.yml` file.
# When declaring multiple pipelines, each MUST have its own `pipeline.id`.
#
# Example of two pipelines:
#
- pipeline.id: "mysql"
  pipeline.workers: 1
  pipeline.batch.size: 1
  path.config: "C:/elk/logstash-8.3.2/config/*.config"
#   config.string: "input { generator {} } filter { sleep { time => 1 } } output { stdout { codec => dots } }"
# - pipeline.id: another_test
#   queue.type: persisted

...

저 4개의 주석을 제외해주고 작성해주는데,

path.config: 뒤의 경로는 실제로 logstash가 설치된 config 폴더의 경로를 입력해주면 됩니다.

config/logstash.conf

# Sample Logstash configuration for creating a simple
# Beats -> Logstash -> Elasticsearch pipeline.

input {
  jdbc {
	jdbc_driver_library => "C:/elk/logstash-8.3.2/lib/mysql-connector-java-8.0.18.jar"
	jdbc_driver_class => "com.mysql.jdbc.Driver"
	jdbc_connection_string => "jdbc:mysql://localhost:3306/maindatabase?serverTimezone=UTC"
	jdbc_user => "root"
	jdbc_password => "1234"
	jdbc_paging_enabled => true
	tracking_column => "unix_ts_in_secs"
	use_column_value => true
	tracking_column_type => "numeric"
	schedule => "*/60 * * * * *"
	statement => "SELECT *, UNIX_TIMESTAMP(updateAt) AS unix_ts_in_secs
		FROM maindatabase.shop WHERE (UNIX_TIMESTAMP(updateAt) > :sql_last_value
		AND updateAt < NOW()) ORDER BY updateAt ASC"
  }
}

filter {
  mutate {
    copy => { "id" => "[@metadata][_id]"}
    remove_field => ["id", "@version", "unix_ts_in_secs"]
  }
}

output{
   elasticsearch{
		hosts => ["127.0.0.1:9200"]
    	index => "shop" 
    	document_id => "%{[@metadata][_id]}"
    	document_type => "_doc"
    #user => "elastic"
    #password => "changeme"
   }
}

logstash를 받고 나서 logstash-sample.conf가 있을 텐데 그 파일명을 위처럼 수정해주시면 되고, 위의 내용을 입력합니다.

이 파일의 설정값으로 RDB에서 특정 데이터베이스의 테이블의 ID를 읽어서 ElasticSearch의 특정 주기마다 적재하기 때문에 이 설정값에 대한 이해가 중요합니다!!

1) jdbc_driver_library : 아까 받은 mysql connector java의 경로를 작성합니다

2) jdbc_connection_string : database 접속 주소를 설정합니다.

3) schedule : 스케쥴 주기(크론식)

4) statement(중요함!!) : 데이터베이스에서 테이블을 조회하는 쿼리를 작성합니다. FROM 뒤에는 테이블을 작성하시고, :sql_last_value는 현재 스케쥴러가 동작한 시간이 들어가기 때문에, 이에 맞춰서 sql을 작성하면 됩니다.

5) hosts : ElasticSearch의 주소를 입력합니다.

6) index : _doc/index에 적재될 이름을 지정합니다. (document_id는 보통 테이블의 Unique한 id번호로 지정하게 됩니다.)

5. 실행

cmd창을 열고, C:\elk\logstash-8.3.2\bin과 같은 logstash가 설치된 bin 폴더에 들어가서 아래의 명령어를 입력해 실행합니다.

-f 인자로 "config/logstash.conf", 4번에서 설정한 logstash의 설정 파일 인자를 넘겨주는 것입니다.

logstash.bat -f config/logstash.conf

log4j에 의해서 실행 중인 로그를 확인할 수 있는데,

로그의 상태가 ERROR인 상태의 내용을 확인하면서 조정하시면 정상적으로 RDB의 테이블에서 데이터를 읽어서 ElasticSearch에 적재를 할 수 있게 됩니다.

아래와 같이 shop라는 인덱스에 적재가 된 내용을 확인해볼 수 있습니다.

[ElasticSearch] Insert(생성), Search(조회) 기본적인 CRUD

기은P — Mon, 18 Jul 2022 15:10:27 +0900

1. 개요

RDB를 하다가 ElasticSearch를 찾아보는데, 개념 자체가 RDB랑은 많이 달라서 최대한 알기 쉽게끔 필요한 기능만 정리를 해보려고 이 글을 작성해봅니다.

클러스터, 샤드랑 노드, 인덱스, 다큐먼트 등 개념적인 부분은 이 글에서는 다루지 않겠고, 아래 가이드북 링크를 참고해주시길 바랍니다.

https://esbook.kimjmin.net/03-cluster/3.2-index-and-shards

ElasticSearch 버전은 7.0버전 이상의 버전으로 진행합니다. 7.0버전부터 type이 사라졌기 때문입니다.

2. 클러스터 관련 Rest API

1) 클러스터 상태 조회

# curl -XGET http://localhost:9200/_cluster/health?pretty=true

* status: yellow = 모든 데이터가 읽기/쓰기 가능한 상태입니다. 다만, replica shard(복제 샤드)가 배정되지 않은 상태이므로 검색 성능에 영향이 있을 수 있습니다를 알려주는 상태 표시입니다. 복제 샤드가 있으면 초록색으로 나옵니다.

2) 클러스터 인덱스 조회

# curl -XGET http://localhost:9200/_cat/indices?v
# curl -XGET http://localhost:9200/_cat/shards?v

예제들 가운데서 _cat이라는 url 속성이 사용자가 생성한 인덱스인줄 알았는데, elastic search에서 제공하는 고정된 기본 기능입니다!

* 인덱스라는 단어가 여러 뜻으로 사용되기 때문에 데이터 저장 단위인 인덱스는 인디시즈(indices)라고 표현하기도 합니다.

3) index 생성

# curl -XPUT 'localhost:9200/test?pretty'

test라는 인덱스를 생성합니다.

RDB와 다르게 create, insert 이런 문법은 사용하지 않고 PUT REST API를 통해 생성합니다.

* pretty는 결과(response)를 잘 정리해서 보여주는 옵션입니다.

* acknowledged : true면 결과가 성공되었다는 의미입니다.

# curl -XGET http://localhost:9200/_cat/indices?v

인덱스를 생성한 후, 2번의 인덱스를 다시 조회해봅니다.

4) document 생성(PUT)

# curl -XPUT 'localhost:9200/test2/_doc/1?pretty' -H 'Content-Type: application/json' -d '{
"name": "james"
}'

PUT REST API를 이용해서 document를 생성합니다.

test2라는 index에 id는 1인 곳에 name이 james라는 데이터를 생성했습니다.

* PostMan이라는 프로그램을 사용하고 있습니다.

* 동일한 URL에 다른 내용의 document를 입력하게 되면 위와 같이 "result" : "update"라는 결과를 받게됩니다.

5) Document 조회 (GET)

데이터가 생성이 되었다면, 해당 인덱스의 document를 조회해봅니다.

# curl -XGET 'http://localhost:9200/test2/_doc/1?pretty'

* url에 있는 _search는 query DSL으로 사용되는 API이며, 뒤에 query를 명시함에 따라 다른 결과를 받아볼 수 있습니다.

Elasticsearch에서는 단일 도큐먼트별로 고유한 URL을 갖습니다. 도큐먼트에 접근하는 URL은
http://<호스트>:<포트>/<인덱스>/_doc/<도큐먼트 id>
구조로 되어 있습니다.

6.x 이전 까지는, http://<호스트>:<포트>/<인덱스>/<도큐먼트 타입>/<도큐먼트 id> 구조였으나,

Elasticsearch 7.0 부터는 도큐먼트 타입 개념이 사라지고 대신 고정자 _doc 으로 접근해야 합니다!

참고 사이트

https://esbook.kimjmin.net/04-data/4.2-crud

[Elasticsearch] The bulk request must be terminated by a newline [\\n] 에러

기은P — Mon, 18 Jul 2022 10:31:39 +0900

1. 개요

elastic search의 자동완성 기능을 구현해보려고 샘플 데이터를 insert하는 도중,

The bulk request must be terminated by a newline [\\n]

와 같은 에러가 발생했습니다.

2. 해결 방법

{"index":{"_index":"autocomplete_test_1","_id":"1"}}
{"word":"스팀게임"}
{"index":{"_index":"autocomplete_test_1","_id":"2"}}
{"word":"스팀게임 추천"}
{"index":{"_index":"autocomplete_test_1","_id":"3"}}
{"word":"스팀게임 추천 2019"}
{"index":{"_index":"autocomplete_test_1","_id":"4"}}
{"word":"스팀게임 환불"}
{"index":{"_index":"autocomplete_test_1","_id":"5"}}
{"word":"스팀게임 싸게"}
{"index":{"_index":"autocomplete_test_1","_id":"6"}}
{"word":"스팀게임 순위"}
{"index":{"_index":"autocomplete_test_1","_id":"7"}}
{"word":"스팀게임 추천 2020"}
{"index":{"_index":"autocomplete_test_1","_id":"8"}}
{"word":"스팀게임 환불하는법"}

샘플 데이터가 위와 같은 데이터라면,

맨 마지막 줄에 Enter로 한 줄을 추가해주시면 됩니다.

정상적으로 insert가 잘 됩니다.

[Mysql] 위도 경도 반경 구하기

기은P — Fri, 15 Jul 2022 11:07:18 +0900

1. 개요

지도에 관한 로직을 짤때 latitude, longitude 위도 경도 값을 구해서 radius, 위도 경도 값 기준으로 주변 5km, 10km의 위도 경도 리스트 또는 거리를 알고 싶을 때가 있습니다.

이러한 로직을 mysql에서 구현할 수 있을까 해서 찾아봤는데 stack over flow에서 친절하게도 작성된 sql이 있더군요.

https://stackoverflow.com/questions/8850336/radius-of-40-kilometers-using-latitude-and-longitude

Radius of 40 kilometers using latitude and longitude

Possible Duplicate: Radius of multiple latitude/longitude points distance calculations in mysql queries select within 20 kilometers based on latitude/longitude I have a MyISAM table, which...

stackoverflow.com

2. SQL

SELECT
    *,
    ( 6371 * acos( cos( radians({$lat}) ) * cos( radians( `lat` ) ) * cos( radians( `lng` ) - radians({$lng}) ) + sin( radians({$lat}) ) * sin( radians( `lat` ) ) ) ) AS distance
FROM `positions`
HAVING distance <= {$radius}
ORDER BY distance ASC

정확한 공식에 대한 이해는 부족하지만, 위도와 경도를 기준으로 해당 테이블 안에 위도와 경도 중에서 거리가 {$radius}보다 작은 위도 경도 리스트를 출력하는 쿼리라고 생각합니다.

저는 radius를 2로 주었고, 결과는 위와 같이 나옵니다.

[Next.js] router query(props) 값이 비어있는 오류

기은P — Fri, 15 Jul 2022 10:47:00 +0900

1. 개요

Next.js에서 router를 사용해서 페이지 이동을 할때, query에 keyword를 담아서 페이지 이동을 시키려고 했습니다.

search라는 페이지에 해당하는 tsx에서 props로 저 쿼리가 읽혀야 하는데 props.data에 값이 비어있었습니다...

2. 해결 방법

  const router = useRouter();
  const queries = router.query; // 전달받은 쿼리 내용

  useEffect(() => {
    if (!router.isReady) return;
    console.log(queries)
    
    }, () => { })
  }, [router.isReady])

위와 같이 전달 받은 tsx에서 useRouter() 객체를 가지고 초기화를 해서 사용해야 합니다.

이유는 정적파일 최적화(Automatic Static Optimaizaion)에 의해서 최적화된 페이지의 루트 매개 변수가 제공되지 않아서 query가 빈 객체가 된다고 합니다...

저 router의 isReady를 useEffect에서 감시하도록 두고 그 내부에서 쿼리로 받은 데이터를 사용하면 됩니다!

참고 사이트

https://im-designloper.tistory.com/98

[ElasticSearch] received plaintext http traffic on an https channel, closing connection 에러

기은P — Thu, 14 Jul 2022 09:35:17 +0900

1. 개요

윈도우 환경에서 ElasticSearch를 설치하고 localhost:9200으로 열어보았을때,

received plaintext http traffic on an https channel, closing connection

라는 오류가 발생하고 연결이 되지 않는 이슈가 있었습니다.

2. 해결 방법

[elasticsearch설치폴더]/config/elasticsearch.yml

...


# Enable security features
xpack.security.enabled: false

xpack.security.enrollment.enabled: false

# Enable encryption for HTTP API client connections, such as Kibana, Logstash, and Agents
xpack.security.http.ssl:
  enabled: false
  keystore.path: certs/http.p12

# Enable encryption and mutual authentication between cluster nodes
xpack.security.transport.ssl:
  enabled: false
  verification_mode: certificate
  keystore.path: certs/transport.p12
  truststore.path: certs/transport.p12
# Create a new cluster with the current node only
# Additional nodes can still join the cluster later
cluster.initial_master_nodes: ["DESKTOP-4GLM324"]

# Allow HTTP API connections from anywhere
# Connections are encrypted and require user authentication
http.host: 0.0.0.0

# Allow other nodes to join the cluster from anywhere
# Connections are encrypted and mutually authenticated
#transport.host: 0.0.0.0



...

- xpack.security.enabled: false

- xpack.security.enrollment.enabled: false

- xpack.security.http.ssl:
enabled: false

- xpack.security.transport.ssl:
enabled: false

저 설정 파일에 들어가서 총 4개의 옵션을 true-> false로 변경해주시면 됩니다.

elasticsearch를 사용할 때 https를 통해서 ssl 인증서가 필요하게 되는데, 이 인증서에 대한 작업이 선행되지 않아 보안적인 이슈가 발생하는 것으로 확인됩니다.

local에서 테스트 할 때는 저 옵션만 false로 바꿔서 테스트를 진행하고, 실제 운영할 때는 ssl을 적용하는 방향으로 해결을 하는 것이 좋을 것 같습니다.

후에 http://localhost:9200 로 접속하면 아래와 같이 연결 된 것을 확인할 수 있습니다!

[Node.js] Selenium 크롤링 사용

기은P — Tue, 12 Jul 2022 17:12:47 +0900

1. 개요

프로젝트를 진행하다보니 실제 프로젝트에 사용할 데이터가 필요할 때가 있는데,

이 데이터를 얻기 위해 자연스럽게 인터넷의 정보를 쉽게 얻어 올 수 있기 위해 크롤링을 사용해야 했습니다.

2. 패키지

먼저 폴더를 하나 생성하고

npm init -y

로 node.js 기반 패키지를 생성해줍니다.

사용할 라이브러리는 selenium으로

npm install selenium-webdriver

위의 패키지를 설치해줍니다.

selenium 크롤링을 사용하기 위해서는 브라우저의 드라이버를 사용해야 합니다.

http://chromedriver.storage.googleapis.com/index.html

저는 크롬 드라이버를 사용했기 때문에, 위의 링크에서 최신 크롬 드라이버를 받아주면 됩니다.

다운 받은 드라이버는 프로젝트 폴더에 넣어줍니다.

3. 코드

index.js

const {Builder, By, Key, until} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');    

const run = async () => {
	// headless로 크롬 드라이버 실행
    let driver = await new Builder()
    .forBrowser('chrome')    
    .setChromeOptions(new chrome.Options().headless().addArguments("--disable-gpu", "window-size=1920x1080",
    "lang=ko_KR"))
    .build();

    try {
        // 특정 URL 생성
        await driver.get('https://map.kakao.com/');
        let userAgent = await driver.executeScript("return navigator.userAgent;")
        console.log('[UserAgent]', userAgent);

        // By.id로 #query Element를 얻어온다.
        let searchInput = await driver.findElement(By.id('search.keyword.query'));
        // keyword를 선택하고 검색 버튼 사용
        let keyword = "닭발";
        searchInput.sendKeys(keyword, Key.ENTER);

        // css selector로 가져온 element가 위치할때까지 최대 10초간 기다린다.
        await driver.wait(until.elementLocated(By.id('info.search.place.list')), 10000);
        let resultElements  = await driver.findElements(By.className("placetit"));

        // 검색한 elements 하위의 value를 출력함
        console.log('[resultElements.length]', resultElements.length)
        for (var i = 0; i < resultElements.length; i++) {
            console.log('- ' + await resultElements[i].getCssValue())
        }
    }
    catch(e){
        console.log(e);
    }
    finally {
        driver.quit();
    }
}
run();

headless, 크롬 창이 팝업되지 않은 백그라운드에서 크롤링이 되는 옵션을 사용했는데,

동작하는 과정을 확인하고 싶다면 .setChromeOptions(...)을 지우시면 됩니다.

node index.js

node index.js를 입력해 실행하면 elementes의 결과물이 출력됩니다.

자세한 문법은 아래 링크를 참고하시면 됩니다.

https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/

selenium-webdriver

www.selenium.dev

[React] Redux 사용하기(2) - 카운터 구현

기은P — Tue, 21 Jun 2022 15:13:27 +0900

1. 개요

첫번째 글에서 흐름을 설명했던 카운터를 실제로 구현해보겠습니다.

코드는 아래 블로그를 참고했습니다.

https://react.vlpt.us/redux/04-make-modules.html

4. 리덕스 모듈 만들기 · GitBook

4. 리덕스 모듈 만들기 이번에는, 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을

react.vlpt.us

2. 코드 작성

결과물은 위와 같습니다. 인풋 값으로 숫자를 입력받아 그 값만큼 현재값에서 +하거나 -하는 카운터 기능입니다.

프로젝트 폴더 구조는 위와 같습니다.

module/counter.js

/* 액션 타입 만들기 */
// Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.
// 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.
const SET_DIFF = 'counter/SET_DIFF';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';

/* 액션 생성함수 만들기 */
// 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.
export const setDiff = (diff) => ({ type: SET_DIFF, diff });
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });

/* 초기 상태 선언 */
const initialState = {
  number: 0,
  diff: 1
};

/* 리듀서 선언 */
// 리듀서는 export default 로 내보내주세요.
export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case SET_DIFF:
      return {
        ...state,
        diff: action.diff
      };
    case INCREASE:
      return {
        ...state,
        number: state.number + state.diff
      };
    case DECREASE:
      return {
        ...state,
        number: state.number - state.diff
      };
    default:
      return state;
  }
}

modules/reducer.js

import { combineReducers } from "redux";
import counterReducer from "./counter";

const rootReducer = combineReducers({
    counterReducer
})

export default rootReducer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './modules/reducer';

const store = createStore(rootReducer);
console.log(store.getState());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import './App.css';
import CounterContainer from './container/CounterContainer';

function App() {
  return (
    <div className="App">
      <CounterContainer/>
    </div>
  );
}

export default App;

component/Counter.jsx

import React from 'react';

function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) {
  const onChange = e => {
    // e.target.value 의 타입은 문자열이기 때문에 숫자로 변환해주어야 합니다.
    onSetDiff(parseInt(e.target.value, 10));
  };
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <input type="number" value={diff} min="1" onChange={onChange} />
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
      </div>
    </div>
  );
}

export default Counter;

container/CounterContainer.jsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Counter from '../component/Counter';
import { increase, decrease, setDiff } from '../modules/counter';

function CounterContainer() {
  // useSelector는 리덕스 스토어의 상태를 조회하는 Hook입니다.
  // state의 값은 store.getState() 함수를 호출했을 때 나타나는 결과물과 동일합니다.
  const { number, diff } = useSelector(state => ({
    number: state.counterReducer.number,
    diff: state.counterReducer.diff
  }));

  // useDispatch 는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 Hook 입니다.
  const dispatch = useDispatch();
  // 각 액션들을 디스패치하는 함수들을 만드세요
  const onIncrease = () => dispatch(increase());
  const onDecrease = () => dispatch(decrease());
  const onSetDiff = (diff) => dispatch(setDiff(diff));

  return (
    <Counter
      // 상태와
      number={number}
      diff={diff}
      // 액션을 디스패치 하는 함수들을 props로 넣어줍니다.
      onIncrease={onIncrease}
      onDecrease={onDecrease}
      onSetDiff={onSetDiff}
    />
  );
}

export default CounterContainer;

3. 코드 분석

modules/counter.js를 먼저 보겠습니다. 여기에서는 액션과 액션 생성함수, 리듀서를 지정합니다.

카운터에서 입력받는 숫자가 diff이고, number는 현재 state이며 상태가 변할 값입니다.

만약 number가 현재 state라는 말에 대해 이해가 가지 않는다면 전 글을 읽고 오시길 바랍니다.

https://narup.tistory.com/243?category=1044606

[React] Redux 사용하기(1) - 개념과 흐름

1. 개요 React 기반으로 웹 프로젝트를 개발할때, 컴포넌트의 상태 관리를 해야할 경우가 생기는데, 이때 사용하는 것이 Redux입니다. 리액트의 꽃이라고 할 수 있고, 처음 접하는 사람에게 굉장히

narup.tistory.com

1) 이 counter라는 상태 관리에서는 총 2가지의 state를 관리합니다.

현재 값: number

입력 값: diff

이 state는 리듀서를 통해 store에 저장되고, 저희 개발자는 store에서 이 state를 가져다가 쓸 수 있는데, 자세한 것은 아래에서 후술하겠습니다!

2) increase(), 카운터 증가를 호출할 경우

한 가지 액션이 발생되었을 경우를 예로 들어보겠습니다.

+버튼을 눌렀을 경우, 컴포넌트 측(CounterContainer.jsx)의 dispatch(increase())가 호출되면서 위 코드의 액션 생성 함수가 호출될 것입니다.

그러면 액션 생성함수는 타입이 INCREASE라는 액션을 반환합니다.

export const increase = () => ({ type: INCREASE });

그다음 액션 생성함수가 값을 반환하면, 리듀서로 지정한 counterReducer(state, action)가 호출되고,

그다음 switch-case에 따라

return {
  ...state,
  number: state.number + state.diff
};

...state와 number가 반환됩니다.

...state는 뭐지 싶습니다. ...이 들어간 이 연산자는 스프레드 연산자로 현재 state의 값을 새롭게 복사해서 반환합니다.

Redux에서 불변성을 유지해야 하기 때문에 무조건! 위와 같이 스프레드 연산자를 사용하도록 해야합니다.

이 카운터 리덕스에서는 총 2가지 어떤 상태를 관리한다고 했죠?

number와 diff라는 2가지의 상태를 관리한다고 1번에서 했습니다.

...state는 number와 diff를 그대로 복사해서 return을 해버립니다.

여기서 추가적으로 number가 현재 state의 number와 state의 diff값을 서로 더한 값을 반환한다고 되어있으니,

만약 현재 number가 6이고, diff가 3인 초기 상태였을 경우,

리듀서를 통과하면 현재 number는 9가되고, diff는 3인 되는 것이죠.

counterReducer가 return하면 이 리턴된 값을 스토어(Store)에 저장해야 합니다.

modules/reducer.js에서 combineReducers()함수는 여러 가지 리듀서를 한 가지로 합쳐주는 함수인데,

const rootReducer = combineReducers({
    counterReducer, //todoReducer, toggleReducer 등등
})

저희가 프로젝트에서 한 가지 리듀서만 사용하지는 않기 때문에 이처럼 rootReducer라고 리듀서를 따로 지정해서 관리합니다.

그리고 스토어에 리듀서를 저장하기 위해

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

위와 같이 createStore()함수에 rootReducer를 담아 store 객체를 만들고, Provider로 App 컴포넌트를 감싸서 Store를 등록해줍니다.

이렇게 하면 App 컴포넌트 하위에 있는 컴포넌트 들은 프로바이더에 등록된 스토어에서 저장된 값들을 자유롭게 사용할 수 있게 됩니다!

const { number, diff } = useSelector(state => ({
    number: state.counterReducer.number,
    diff: state.counterReducer.diff
  }));

container/CounterContainer.jsx에서처럼 값을 읽을때는 useSelector()를 통해 읽으며,

// useDispatch 는 리덕스 스토어의 dispatch 를 함수에서 사용 할 수 있게 해주는 Hook 입니다.
  const dispatch = useDispatch();
  // 각 액션들을 디스패치하는 함수들을 만드세요
  const onIncrease = () => dispatch(increase());

container/CounterContainer.jsx에서처럼 useDispatch()를 통해 액션 함수를 호출해서 사용합니다.

3) setDiff(), 입력 값을 변경할 경우

한 가지 더 예를 들어보겠습니다.

현재 number는 19이고, diff를 5로 변경하려고 입력했습니다.

위 처럼 Input 컴포넌트에서 숫자를 변경할 경우 디스패치를 통해 setDiff()가 호출됩니다.

2번과 같이 액션 생성함수를 통해 액션 값이 반환되는데,

export const setDiff = (diff) => ({ type: SET_DIFF, diff });

특이한 점은 인자로 diff값을 받아서 액션에 diff값을 담아줍니다. 어떤 값으로 변경할지 지정해주는 것이죠.

그다음 리듀서를 통해

case SET_DIFF:
    return {
      ...state,
      diff: action.diff
    };

...state, 즉 스프레드 연산자를 통해 현재의 상태(number와 diff)를 반환하며,

action 함수에서 담았던 diff를 diff: action.diff로 초기화해서 반환합니다.

현재 number가 19이고 diff가 1인 상태였다면,

number가 19이고 diff가 5인 상태로 값을 변경해서 반환해주는 것입니다.

2번과 같이 리듀서를 통해서 반환된 값은 스토어(Store)에 저장되며, 각 컴포넌트에서 useSelector()함수를 통해 값을 가져올 수 있게 됩니다.

전체 소스 코드입니다

https://github.com/kimdongjang/learn-redux

[React] Redux 사용하기(1) - 개념과 흐름

기은P — Tue, 21 Jun 2022 11:06:39 +0900

1. 개요

React 기반으로 웹 프로젝트를 개발할때, 컴포넌트의 상태 관리를 해야할 경우가 생기는데, 이때 사용하는 것이 Redux입니다. 리액트의 꽃이라고 할 수 있고, 처음 접하는 사람에게 굉장히 러닝 커브가 높은 부분입니다.(저도 그랬습니다.)

(상태 관리 하는 이유 : 리렌더링에 의한 자원 소모를 줄이기 위해서)

사실 Redux가 어렵기도 해서 사용하기 쉽게 라이브러리들이 개발이 되어서 MobX, xstate, recoil, zustand 등 여러가지 라이브러리가 등장하고, Redux를 굳이 사용하지 않아도 위 라이브러리로 간편하게 상태 관리를 할 수 있게 되었습니다.

하지만, 리액트 프로그래밍을 시작하는 사람으로서 어떤 맥락으로 상태관리가 이루어지는지 파악하는 것은 중요하다고 생각합니다.

2. 중요 키워드 및 개념

액션

사용자에 의해서 상태의 변화(ex: 버튼을 눌렀을 경우)가 생길때 이것을 액션이 발생되었다고 말합니다.

아래와 같이 타입과 value로 이루어져있습니다. type은 무조건 들어가야하며 value는 자유롭게 작성해도 됩니다.

{
  type: "PUSH_BUTTON"
  button: "pushed"
}

// 혹은

{
  type: "PUSH_BUTTON"
  isToggle: true
}

액션 생성함수

액션을 만드는 함수입니다. 파라미터(data)를 받아와서 액션 객체 형태로 리턴해서, 사용자가 사전에 지정한 액션을 호출할 수 있게 합니다.

export function pushButton(data) {
  return {
    type: "PUSH_BUTTON",
    data
  };
}

리듀서

변화를 일으키는 함수입니다. useReducer()와 똑같은 형태를 가지고 있으며, 현재의 상태(state)와 전달받은 액션(action)을 파라미터로 받고, 새로운 상태의 값(return +-1, 증분된 값)을 반환합니다.

// 카운터 기능을 예로 들었을 경우입니다.
function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

액션에서 지정한 type을 switch-case로 확인하고, 전달받은 state 파라미터에 +1또는 -1를 추가해서 반환합니다.

이 현재의 state와 반환되는 state가 가장 중요합니다.

먼저 아래 스토어(store)에 대해 확인하겠습니다.

스토어

리덕스에서는 단 하나의 스토어를 만들게 되는데, 이 스토어 내부에는 현재의 앱 상태(state)와 리듀서(reducer)가 들어가 있습니다.

위와 같이 카운터를 만들었다고 가정하고, 리듀서 쪽에서 정의한 state를 다시 확인해보겠습니다.

카운터로 인해 숫자가 늘어나고 줄어드는 텍스트 박스(컴포넌트)가 있으며, 이 상태를 저희는 redux를 이용해 상태 관리를 하려고 합니다.

위 컴포넌트를 redux로 사용할 경우, 아래와 같이 useSelector()라는 함수를 이용해서 스토어(store)에 저장된 현재의 상태(state)를 가져와서 초기화를 해줍니다.

  const count = useSelector((state: RootState) => state.counter.count);
  
  return (
  	<div>{count}</div>
  )

저희가 +1버튼을 누르거나 -1버튼을 누를때, 디스패치(dispatch)라는 것을 통해 액션 생성함수를 호출하도록 합니다.

디스패치

디스패치는 스토어(store)에서 제공하는 함수중의 하나로 액션을 발생시켜주는 도구입니다.

 const dispatch = useDispatch(); // 디스패치 함수를 가져옵니다

  // 각 액션들을 디스패치하는 함수들을 만들어줍니다
  const onIncrease = () => {
    dispatch(increase());
  };

  const onDecrease = () => {
    dispatch(decrease());
  };

위와 같이 디스패치 함수 안에 액션 생성함수를 지정하고, onIncrease()(액션 생성함수)를 호출하면, 액션 생성함수로 인해 액션이 생성되고, 그 다음 리듀서가 호출되며 현재의 상태(텍스트 박스의 숫자가 3이면 3, 혹은 19면 19)에 리듀서에서 지정한 return state +1이 반환되며, 이 값이 스토어(store)에 저장됩니다.

useSelector()는 스토어에 있는 값을 가져다가 텍스트 박스를 갱신시켜주게 되고, 결과적으로 +1이 된 값이 사용자에게 보여 지게 됩니다.

이 흐름!이 가장 중요하고 이 흐름을 이해하셨으면 리덕스를 다 이해하신 거라고 보면 됩니다.

원래라면 전체 코드를 딱 적고, 그 코드에 대한 설명을 하는게 편하긴 하지만, 리덕스 같은 경우는 전반적인 이해와 전체적인 흐름에 대한 이해가 필수적으로 들어가야 했기 때문에 이 글에 대해서는 흐름만 이해할 수 있도록 작성했습니다.

*위 그림에서 Middleware는 크게 중요하지 않기 때문에 그냥 넘어가셔도 무방합니다.

컴포넌트 쪽에서 작성한 전체코드는 아래와 같습니다.

const CounterContainer = (props: CounterContainerProps) => {
  // 상태를 조회합니다. 상태를 조회 할 때에는 state 의 타입을 RootState 로 지정해야합니다.
  const count = useSelector((state: RootState) => state.counter.count);
  const dispatch = useDispatch(); // 디스패치 함수를 가져옵니다

  // 각 액션들을 디스패치하는 함수들을 만들어줍니다
  const onIncrease = () => {
    dispatch(increase());
  };

  const onDecrease = () => {
    dispatch(decrease());
  };

  const onIncreaseBy = (diff: number) => {
    dispatch(increaseBy(diff));
  };

  return (
    <Counter
      count={count}
      onIncrease={onIncrease}
      onDecrease={onDecrease}
      onIncreaseBy={onIncreaseBy}
    />
  );
};

실제로 Redux를 사용해서 상태관리를 하는 부분에 대한 자세한 코드는 다음 글에서 작성하도록 하겠습니다.

[Next.js] Proxy Axios 설정

기은P — Mon, 20 Jun 2022 10:52:29 +0900

1. 개요

Axios를 사용해 Next.js서버가 아닌 다른 도메인으로 url을 요청할 때가 있는데, 이때 프록시 설정을 하지 않으면 CORS 오류로 인해 호출이 되지 않는 경우가 있습니다.

또한, React에서 package.json에 프록시를 명시한 것과 다르게 Next.js에서 Proxy는 조금 다른 방법으로 설정을 해야만 했습니다.

2. 코드

Axios 호출

  useEffect(() => {
    async function get() {
      try {
        const result: AxiosResponse<any, any> = await axios.post("/redis/visit");
        console.log(result.data)
        if (result) setVisitor(result.data)
      }
      catch (e) {

      }
    }
    get();
  }, []);

사용자가 페이지가 로딩될 때 api가 호출되게끔 하기 위해 useEffect에 동기적으로 api를 호출하는 코드를 작성했습니다.

next.config.js

module.exports = (phase, { defaultConfig }) => {
  const rewrites = () => {
    return [
      {
        source: '/redis/:path*',
        destination: "http://172.12.0.1:4949/redis/:path*",
      },
    ];
  }
  
  return { rewrites }
}

module.exports에 const rewrites 함수를 정의하고,

리턴하는 배열의 source에는 axios에서 호출하는 path 부분만 작성하며,

destination에는 실제로 접근해야할 URL과 포트를 포함해서 작성하면 됩니다.

next.js에서 초기에 설정해야할 값들이 많은데, 어떤 곳에서는 redirect를 써야한다, 함수를 호출하거나 변수로 먼저 선언한다던가, 다 시도를 해보아도 되지가 않았지만, 위 방법을 사용하니 잘 작동했습니다.

참고

https://www.edmondchuc.com/blog/next-js-development-proxy-server

[Nginx] Nginx Proxy Manager 설치

기은P — Fri, 17 Jun 2022 10:26:17 +0900

1. 개요

Nginx Proxy Manager를 재설치해야 하는 일이 빈번히 있어서 설치과정을 정리했습니다.

Nginx Proxy Manager는 리버스 프록시, 리다이렉션, 보안 인증, SSL 인증서 관리를 GUI로 할 수 있게 도와주는 툴입니다.

가이드 참고

https://nginxproxymanager.com/guide/#features

Nginx Proxy Manager

Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt

nginxproxymanager.com

2. docker-compose.yml

version: '3'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

3. 실행

docker-compose up -d

도커 컴포즈로 실행하면 위와 같이 관련된 이미지를 받습니다.

프록시 매니저가 설치가 되면 81포트로 접속해줍니다(localhost:81)

위와 같이 로그인 UI가 나오는데, 초기에

email: admin@example.com

password: changeme

로 설정이 되어 있어서 위 계정으로 로그인 하시면 됩니다.

로그인 하시면 계정 변경하라는 UI가 나오는데, 취향에 맞게 변경해주시면

위와 같이 프록시를 관리할 수 있게 됩니다.

[Nginx] SSL 설정(HTTPS 적용)

기은P — Wed, 15 Jun 2022 08:58:32 +0900

1. 개요

기존에 웹 사이트를 HTTP로 운영하고 있다가, 사용자의 정보같은 민감한 정보를 사용하게 될 경우에는 SSL 인증서를 사용한 보안처리를 해야합니다.

웹서버에 SSL 인증서를 사용해 웹사이트를 HTTPS로 열 수 있게끔 Nginx 프록시 서버에 SSL 인증서를 적용하는 방법을 확인해보겠습니다.

2. 준비물

도메인, SSL 인증서(chain key, private key)

도메인은 유료로도 발급할 수 있지만, 저는 개발용이기 때문에 무료로 도메인을 발급해주는 no-ip라는 사이트를 통해서 받았습니다.

https://www.noip.com/

× Please select your Language To view website content in your Language, please select an option below.

www.noip.com

또한 SSL 인증서 발급도 유료가 아닌 무료로 할 수 있는데, Lets Encrypt라는 인증기관을 통해서 certbot 도구로 SSL인증서를 발급받을 수 있습니다.

https://letsencrypt.org/ko/

Let's Encrypt - 무료 SSL/TLS 인증서

letsencrypt.org

https://certbot.eff.org/

Certbot

Tagline

certbot.eff.org

3. nginx.conf

worker_processes  auto;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;

    # 443 포트로 접근시 ssl을 적용한 뒤 3000포트로 요청을 전달해주도록 하는 설정.
    server {
            server_name idu-market.shop;

            location / {
                    proxy_pass http://127.0.0.1:3000;
            }

            listen 443 ssl; # managed by Certbot
            ssl_certificate /etc/letsencrypt/live/idu-market.shop/fullchain.pem; # managed by Cert>
            ssl_certificate_key /etc/letsencrypt/live/idu-market.shop/privkey.pem; # managed by Ce>

            include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
            ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    }

    # 80 포트로 접근시 443 포트로 리다이렉트 시켜주는 설정
    server {
             return 301 https://$host$request_uri;
             # managed by Certbot


            listen 80;
            server_name idu-market.shop;
            return 404; # managed by Certbot
    }

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
}

1) server 80 블록

nginx를 사용할 때 기존에 80포트(http)로 접근되는 요청을 proxy_pass에 특정 웹서버(:3000)로 연결시켰다면,

SSL을 사용할 때는 443포트(https)로 연결시키도록

 return 301 https://$host$request_uri

를 작성해주는 것이 포인트입니다

2) server 443 블록

443포트는 https 요청에 연결되는 포트로, proxy_pass에 특정 웹서버(:3000)로 리다이렉트 해주는 부분을 명시해주면 됩니다.

여기서 중요한 포인트는 ssl certificate 부분입니다.

앞서 준비한 도메인과 연결된 SSL 인증서의 chain key, private key를 nginx가 설치된 서버의 특정 폴더에 저장하고,

        ssl_certificate /경로/fullchain.pem;
        ssl_certificate_key /경로/privkey.pem;

그 키가 위치한 폴더의 경로를 작성해주시면 됩니다.

443으로 들어오는 요청을 SSL 인증서로 암호화 하겠다는 의미입니다.

참고 사이트

https://gist.github.com/woorim960/dda0bc85599f61a025bb8ac471dfaf7a

Nginx를 이용하여 https 적용하는 법

Nginx를 이용하여 https 적용하는 법. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

[OpenSSL] SSL 인증서 발급 방법 요약

기은P — Thu, 9 Jun 2022 16:15:23 +0900

1. 개요

웹 서버에 https 적용을 위한 SSL 인증서를 발급 받는 방법을 정리했습니다.

2. openssl for windows 다운

https://code.google.com/archive/p/openssl-for-windows/downloads

Google Code Archive - Long-term storage for Google Code Project Hosting.

code.google.com

윈도우에서 SSL 인증서 생성을 위해 위의 링크에 접속해서 프로그램을 다운받습니다.

k, e, d와 같은 라벨이 있는데 저는 e로 다운받고 진행했습니다.

3. 환경변수 설정

2번에서 압축 파일을 받고 푼 다음, /bin 경로에 있는 openssl.exe를 시스템 환경변수에 등록해줍니다.

4. private.key 생성

rem AES256으로 암호화된 2048bit 길이의 private key를 생성해줍니다.

openssl genrsa -aes256 -out private.key 2048

사용할 패스워드를 입력해줍니다.

Enter pass phrase for private.key: [패스워드 입력]
Verifying - Enter pass phrase for private.key: [패스워드 다시 입력]

5. public.key 생성

openssl rsa -in private.key -pubout -out public.key

rem private.key를 통해 public.key를 생성해줍니다. 서로 매칭되는 키이기 때문에 4번에서 사용한 패스워드를 똑같이 입력해줍니다.

Enter pass phrase for private.key:[패스워드 입력]

6. 인증 서명 요청서(CSR) 생성

openssl req -config ./openssl.cnf -new -key private.key -out private.csr

인증 서명 요청서(CSR)란, 인증기관(CA)을 통해 인증서를 발급받기 위한 정보를 담고 있는 신청서입니다. 인증기관에게 인증서를 받기 위해 서류를 작성하는 신청서라고 생각하시면 됩니다.

국가, 도시, 조직 등의 정보인데 개발/배포 용도에 따라 작성해주시면 됩니다.

Country Name (2 letter code) [AU]:KR
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (eg, YOUR name) []:
Email Address []:

rem에 대한 추가정보인데 작성할 필요는 없습니다.
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:

7. 자체 인증 기관(CA) 키 생성

openssl genrsa -aes256 -out root.ca.key 2048

Enter pass phrase for root.ca.key: [패스워드 입력]
Verifying - Enter pass phrase for root.ca.key: [패스워드 다시 입력]

8. 자체 인증기관의 CSR 생성

openssl req -config ./openssl.cnf -x509 -new -nodes -key root.ca.key -days 3650 -out root.ca.pem

6번과 마찬가지로 개발/배포 용도에 따라 적당히 작성해주면 됩니다.

9. 자체 인증기관을 통해 인증서(CRT) 발급

openssl x509 -req -in private.csr -CA root.ca.pem -CAkey root.ca.key -CAcreateserial -out private.crt -days 3650

7번에서 사용한 rem CA키의 패스워드를 입력합니다.

Enter pass phrase for root.ca.key: [패스워드 입력]

10. 최종 산출물

[Nginx] 리버스 프록시(Reverse Proxy) 개념 및 사용법

기은P — Fri, 3 Jun 2022 16:32:54 +0900

1. 개요

리버스 프록시란? 클라이언트 요청을 대신 받아 내부 서버로 전달해주는 것을 리버스 프록시(Reverse Proxy) 라고 합니다.

저도 사실 프록시라는 개념이 낯설었는데요, 일단 프록시라는 개념부터 확인해야 합니다.

프록시란 대리라는 의미로, 정보를 대신 전달해주는 주체라고 생각하면 되는데, 만약 이 프록시 없이 웹 서버를 운영한다고 가정합니다.

localhost:3000

라고 하는 웹서버를 열어서 운영했을 때, 사용자가 갑자기 많아지거나, 웹서버가 그대로 노출되어 있기 때문에 보안적으로 위험성이 있겠죠? nginx를 사용하면 로드 밸런싱으로 부하를 줄여줄 수 있고, 분산 처리 또한 가능하며 웹서버의 SSL 인증도 적용할 수 있습니다.

따라서 아래와 같이 사용자 -> nginx -> 웹서버로 구성해서 사용자의 요청을 nginx가 대신 웹서버로 전달해주도록 구성합니다.

출처: https://velog.io/@chickenfondue/nginx-docker-compose%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%9C-%EA%B5%AC%EC%84%B1

2. 리버스 프록시의 장점

장점은 아래와 같습니다.

로드 밸런싱 : Nginx는 클라이언트의 요청을 프록시 서버에 분산하기 위해 로드 밸런싱을 수행하여 성능, 확장성 및 신뢰성을 향상시킬 수 있습니다.
캐싱 : Nginx를 역방향 프록시로 사용하면 미리 렌더링된 버전의 페이지를 캐시하여 페이지 로드 시간을 단축할 수 있습니다. 이 기능은 프록시 서버의 응답에서 수신한 콘텐츠를 캐싱하고 이 콘텐츠를 사용하여 매번 동일한 콘텐츠를 프록시 서버에 연결할 필요 없이 클라이언트에 응답하는 방식으로 작동합니다.
SSL 터미네이션 : Nginx는 클라이언트와의 연결에 대한 SSL 끝점 역할을 할 수 있습니다. 수신 SSL 연결을 처리 및 해독하고 프록시 서버의 응답을 암호화합니다.
압축 : 프록시 서버가 압축된 응답을 보내지 않는 경우 클라이언트로 보내기 전에 응답을 압축하도록 Nginx를 구성할 수 있습니다.
DDoS 공격 완화 : 수신 요청과 단일 IP 주소당 연결 수를 일반 사용자에게 일반적인 값으로 제한할 수 있습니다. 또한 Nginx를 사용하면 클라이언트 위치와 "User-에이전트" 및 "Referer"와 같은 요청 헤더 값을 기준으로 액세스를 차단하거나 제한할 수 있습니다.

3. 코드

nginx.conf

user nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

	# 백엔드 upstream 설정
    # upstream myweb-api {
    #     server api:8080;
    # }

	# 프론트엔드 upstream 설정
    upstream next-server {
        server 172.17.0.1:3000; # docker를 사용하지 않는다면 localhost:3000(웹서버주소)
    }

    server {
        listen 80;

		# /api 경로로 오는 요청을 백엔드 upstream 의 /api 경로로 포워딩
        # location /api {
        #     proxy_pass         http://myweb-api/api;
        # }

		# / 경로로 오는 요청을 프론트엔드 upstream 의 / 경로로 포워딩
        location / {
            proxy_pass         http://next-server/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    # include /etc/nginx/conf.d/*.conf;
}

주의깊게 봐야할 부분은 http 블럭 안의 upstream 블럭과 server 블럭입니다.

1. 사용자가 nginx 서버 주소로 요청합니다(localhost:80). 기본적으로 http는 80포트를 사용하기 때문에 nginx에서는 listen 80포트로 구성합니다.

2. nginx서버는 location 블럭에서 proxy_pass로 지정된 주소로 요청을 전달해줍니다.

3. 만약 운영중인 서버가 localhost:8080, 혹은 localhost:3000이면 upstream 블럭에 localhost:8080, localhost:3000으로 적어줍니다.(필자는 docker-compose로 구성했기 때문에 172.17.0.1로 작성했습니다).

4. 웹서버(port 3000)를 시작하고, nginx도 시작해줍니다.

5. nginx 서버 주소로 요청하면(localhost:80), proxy_pass로 지정한 웹 서버로 요청이 전달됩니다.

4. docker-compose 사용시

docker-compose.yml

version: "3.8"

networks:
  corp:
    driver: bridge

services:
  nginx_proxy:
    image: nginx:1.21.5-alpine
    container_name: nginx_proxy    
    ports:
      - 80:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf

  next-client:
    container_name: next-client
    build:
      context: ./
      dockerfile: ./Dockerfile
    ports:
      - 3000:3000

docker-compose.yml 폴더 위치에 nginx 폴더를 생성하고 nginx.conf 파일을 생성해줍니다.

nginx_proxy 블럭의 내용은 고정입니다.

밑의 next-client는 docker로 띄울 웹 서버의 정보입니다.

필자는 Next.js로 웹 서버를 만들었고, Dockerfile로 빌드하도록 설정했습니다.

참고

https://jjeongil.tistory.com/1490

https://velog.io/@chickenfondue/nginx-docker-compose%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%9C-%EA%B5%AC%EC%84%B1

[Jenkins] ERROR: Couldn't find any revision to build. Verify the repository and branch configuration for this job. 오류 해결

기은P — Fri, 3 Jun 2022 15:26:20 +0900

1. 개요

Jenkins를 통해 Github와 웹훅으로 연결해서 자동배포를 하는데, 새 프로젝트를 연결하면서

ERROR: Couldn't find any revision to build. Verify the repository and branch configuration for this job.

라는 오류가 발생했습니다.

2. 오류 해결

레포지토리 또는 브런치 구성이 유효한지 한번 확인해라?? 같은 느낌이었는데,

github 레포지토리 설정하는 부분에서 브런치가 자동적으로 */master로 설정되는 부분이 있었습니다.

*/master -> */main

기본적으로 git을 사용하면 root 브런치가 main으로 잡히기 때문에 위로 변경해주면 됩니다.