아래의 유틸 클래스를 적용하여 생성한 클래스입니다. BasicLogger 클래스 - https://velog.io/@bi-sz/Spring-Boot-BasicLogger-Class

⭐ ResourceCloseHelper.java

Closeable, JDBC, Socket 등의 리소스를 안전하게 닫아 리소스 누수 를 방지하고, 애플리케이션의 안정성을 높이기 위해 ResourceCloseHelper 클래스를 생성해줍니다.

close(Closeable... resources

• Closeable타입의 리소스 (예: InputStream, OutputStream 등..) 를 안전하게 닫습니다.
• IOException과 일반 Exception이 발생해도 무시하고 계속 진행합니다.

closeDBObjects(Wrapper... objects)

• JDBC 관련 리소스(ResultSet, Statement, Connection)를 안전하게 닫습니다.
• SQLException과 일반 Exception이 발생해도 무시하고 계속 진행합니다.

closeSocketObjects(Socket socket, ServerSocket server)

• Socket과 ServerSocket 리소스를 안전하게 닫습니다.
• IOException과 일반 Exception이 발생해도 무시하고 계속 진행합니다.

closeSockets(Socket... sockets)

• Socket 리소스를 안전하게 닫습니다.
• IOException과 일반 Exception이 발생해도 무시하고 계속 진행합니다.

package com.liyo.cmm.util;

import java.io.Closeable;
import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.sql.Wrapper;

public class ResourceCloseHelper {
    /**
     * Resource close 처리.
     * 
     * @param resources
     */
    public static void close(Closeable... resources) {
        for (Closeable resource : resources) {
            if (resource != null) {
                try {
                    resource.close();
                } catch (IOException ignore) {
                    BasicLogger.ignore("Occurred IOException to close resource is ingored!!");
                } catch (Exception ignore) {
                    BasicLogger.ignore("Occurred Exception to close resource is ingored!!");
                }
            }
        }
    }

    /**
     * JDBC 관련 resource 객체 close 처리
     * 
     * @param objects
     */
    public static void closeDBObjects(Wrapper... objects) {
        for (Object object : objects) {
            if (object != null) {
                if (object instanceof ResultSet) {
                    try {
                        ((ResultSet) object).close();
                    } catch (SQLException ignore) {
                        BasicLogger.ignore("Occurred SQLException to close resource is ingored!!");
                    } catch (Exception ignore) {
                        BasicLogger.ignore("Occurred Exception to close resource is ingored!!");
                    }
                } else if (object instanceof Statement) {
                    try {
                        ((Statement) object).close();
                    } catch (SQLException ignore) {
                        BasicLogger.ignore("Occurred SQLException to close resource is ingored!!");
                    } catch (Exception ignore) {
                        BasicLogger.ignore("Occurred Exception to close resource is ingored!!");
                    }
                } else if (object instanceof Connection) {
                    try {
                        ((Connection) object).close();
                    } catch (SQLException ignore) {
                        BasicLogger.ignore("Occurred SQLException to close resource is ingored!!");
                    } catch (Exception ignore) {
                        BasicLogger.ignore("Occurred Exception to close resource is ingored!!");
                    }
                } else {
                    throw new IllegalArgumentException("Wrapper type is not found : " + object.toString());
                }
            }
        }
    }

    /**
     * Socket 관련 resource 객체 close 처리
     * 
     * @param objects
     */
    public static void closeSocketObjects(Socket socket, ServerSocket server) {
        if (socket != null) {
            try {
                socket.shutdownOutput();
            } catch (IOException ignore) {
                BasicLogger.ignore("Occurred IOException to close resource is ingored!!");
            } catch (Exception ignore) {
                BasicLogger.ignore("Occurred Exception to shutdown ouput is ignored!!");
            }

            try {
                socket.close();
            } catch (IOException ignore) {
                BasicLogger.ignore("Occurred IOException to close resource is ingored!!");
            } catch (Exception ignore) {
                BasicLogger.ignore("Occurred Exception to close resource is ignored!!");
            }
        }

        if (server != null) {
            try {
                server.close();
            } catch (IOException ignore) {
                BasicLogger.ignore("Occurred IOException to close resource is ingored!!");
            } catch (Exception ignore) {
                BasicLogger.ignore("Occurred Exception to close resource is ignored!!");
            }
        }
    }

    /**
     * Socket 관련 resource 객체 close 처리
     * 
     * @param sockets
     */
    public static void closeSockets(Socket... sockets) {
        for (Socket socket : sockets) {
            if (socket != null) {
                try {
                    socket.shutdownOutput();
                } catch (IOException ignore) {
                    BasicLogger.ignore("Occurred IOException to close resource is ingored!!");
                } catch (Exception ignore) {
                    BasicLogger.ignore("Occurred Exception to shutdown ouput is ignored!!");
                }

                try {
                    socket.close();
                } catch (IOException ignore) {
                    BasicLogger.ignore("Occurred IOException to close resource is ingored!!");
                } catch (Exception ignore) {
                    BasicLogger.ignore("Occurred Exception to close resource is ignored!!");
                }
            }
        }
    }
}

JDBC와 Socket 관련 리소스 관리에 유용한 ResourceCloseHelper 클래스를 정리해보았습니다.

⭐ BasicLogger

애플리케이션의 디버깅, 정보 기록 등을 체계적으로 관리하기 위해 로깅 레벨을 정의하고, 각 레벨에 해당하는 로거를 제공하는 BasicLogger 클래스를 생성해줍니다.

ignore

• 기록이나 처리가 불필요한 경우 사용합니다.
• 메시지와 예외를 로깅합니다.

debug(String message, Exception exception)

• 디버그 정보를 기록하는 경우 사용합니다.
• 메시지와 예외를 로깅합니다.

debug(String message)

• 디버그 정보를 기록하는 경우 사용합니다.
• 메시지만 로깅합니다.

info(String message)

• 일반적인 정보를 기록하는 경우 사용합니다.
• 메시지를 로깅합니다.

package com.liyo.cmm.util;

import java.util.logging.Level;
import java.util.logging.Logger;

public class BasicLogger {
    private static final Level IGNORE_INFO_LEVEL = Level.OFF;
    private static final Level DEBUG_INFO_LEVEL = Level.FINEST;
    private static final Level INFO_INFO_LEVEL = Level.INFO;

    private static final Logger ignoreLogger = Logger.getLogger("ignore");
    private static final Logger debugLogger = Logger.getLogger("debug");
    private static final Logger infoLogger = Logger.getLogger("info");

    /**
     * 기록이나 처리가 불필요한 경우 사용.
     * @param message
     * @param exception
     */
    public static void ignore(String message, Exception exception) {
        if (exception == null) {
            ignoreLogger.log(IGNORE_INFO_LEVEL, message);
        } else {
            ignoreLogger.log(IGNORE_INFO_LEVEL, message, exception);
        }
    }

    /**
     * 기록이나 처리가 불필요한 경우 사용.
     * @param message
     * @param exception
     */
    public static void ignore(String message) {
        ignore(message, null);
    }

    /**
     * 디버그 정보를 기록하는 경우 사용.
     * @param message
     * @param exception
     */
    public static void debug(String message, Exception exception) {
        if (exception == null) {
            debugLogger.log(DEBUG_INFO_LEVEL, message);
        } else {
            debugLogger.log(DEBUG_INFO_LEVEL, message, exception);
        }
    }

    /**
     * 디버그 정보를 기록하는 경우 사용.
     * @param message
     * @param exception
     */
    public static void debug(String message) {
        debug(message, null);
    }

    /**
     * 일반적이 정보를 기록하는 경우 사용.
     * @param message
     * @param exception
     */
    public static void info(String message) {
        infoLogger.log(INFO_INFO_LEVEL, message);
    }
}

로깅 레벨을 체계적으로 관리하여 애플리케이션의 디버깅, 모니터링, 문제 해결 등에 유용하게 사용될 수 있는 로깅 유틸 클래스를 정리해보았습니다.

'vue'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

> npm install -g @vue/cli

Vue 프로젝트를 생성하기 위해 vue 를 install 한 후 버전을 확인해보니 명령어 실행이 불가능하였다.

환경변수 설정을 하지 않아 vue 경로를 찾지 못하는 경우이다.

C:\Users\사용자\AppData\Roaming\npm 경로에 Vue 가 설치되어있다.

환경변수 설정하기

1. 윈도우11 기준 검색창에 환경을 검색해서 시스템 환경 변수 편집 을 열어줍니다.

2. 환경 변수로 들어가줍니다.

3. 시스템 변수의 Path 를 눌러줍니다.

4. vue 경로를 추가해줍니다.

cmd 관리자 권한에서 명령어를 입력하면 실행됩니다.

vsCode에서는 여전히 실행이 안 되서 결국 컴퓨터를 재부팅하니까 됐습니다..

다음 오류로 인해 AGSService 서비스를 시작하지 못했습니다. 서비스가 시작이나 제어 요청에 빠르게 응답하지 않았습니다.

AGSService 서비스 연결을 기다리는 동안 제한 시간에 도달했습니다(45000밀리초).

AGSService.exe

해당 파일은 Adobe에서 제공하는 Adobe 제품군 라이센스, 인증 관련 프로그램이다.

System Service로 윈도우가 시작할 때마다 자동으로 실행된다. 서비스 이름은 AGSService 이다.

서비스 중지하기

cmd에서 다음 명령어를 통해 서비스를 사용 안 함으로 변경해준다.

> sc stop "AGSService"
> sc config "AGSService" start= disabled

서비스 실행을 종료하고, 부팅시 실행되지 않도록 설정을 변경해주었습니다.

오류로 인해 실행되지 못해서 서비스가 시작되지도 못 했네요..

명령프롬포트에서 적용이 안 되는 경우 서비스에서 해당 항목을 우클릭하여 서비스를 중지하고, 시작유형을 사용 안 함 으로 설정해주면 된다.

완전 삭제하기

> sc delete "AGSService"

해당 명령어로 서비스를 완전히 삭제할 수 있다.

서비스가 실행중인 상태에서는 재부팅을 해야 적용되며, 종료된 상태에서는 바로 적용된다.

혹시나 삭제가 안 된다면, 명령 프롬포트를 관리자 권한으로 실행했는지 확인!

저는 Adobe 를 사용하고있지 않아서 서비스는 자동 실행되지 않도록 설정하고, 완전 삭제하지는 않았습니다.

언제 사용하게될 지 모르니,, 하지만 당분간은 사용할 일 없을듯..

• 지식 기반 인증 : 사용자가 기억하고 있는 지식 ( ID / PW )
• 소지 기반 인증 : 소지하고 있는 사용자 물품 ( 공인인증서 / OTP )
• 생체 기반 인증 : 고유한 사용자의 생체 정보 ( 홍채 / 정맥 / 얼굴 / 지문 )
• 특징 기반 인증 : 사용자의 특징을 활용 ( 서명 / 발걸음 / 몸짓 )

🌟 서버 프로그램 구현

• 프론트엔드(Front-end) : 화면 구현
• 백엔드(Back-end) : DTO/VO 구현 -> SQL문 구현 -> DAO 구현 -> Service 구현 -> Controller 구현

🌟 EAI 구축 유형

✡️ 포인트 투 포인트(Point-to-Point)

• 가장 기초적인 애플리케이션 통합 방법
• 1:1 단순 통합 방법

  ✡️ 허브 앤 스포크(Hub & Spoke)

• 단일한 접점의 허브 시스템을 통하여 데이터를 전송하는 중앙 집중식 방식

  ✡️ 메시지 버스(Message Bus)

• 애플리케이션 사이 미들웨어(버스)를 두어 연계하는 미들웨어 통합 방식
• 뛰어난 확장성과 대용량 데이터 처리 가능

  ✡️ 하이브리드(Hybrid)

• 그룹 내부는 허브 앤 스포크, 그룹 간에는 메시지 버스 방식

🌟 스크럼 (SCRUM)

• 매일 정해진 시간, 장소에서 짧은 시간의 개발을 하는 팀을 위한 프로젝트 관리 중심 방법론
• 스트린트 (Sprint) : 2~4 주의 짧은 개발 기간
• 번 다운 차트 (Burn Down Chart) : 백로그 대비 시간을 그래픽 적으로 표현한 차트

🌟 서비스 지향 아키텍처 ( SOA : Service Oriented Architecture )

• 프로세스 수행을 지원하는 정보 시스템의 구현을 위해 가장 선진화된 소프트웨어 아키텍처
• 서비스라고 정의되는 분할된 애플리케이션 조각들을 Loosely-coupled 하게 연결해 하나의 완성된 Application 구현

🌟 피코넷 ( PICONET )

• 여러개의 독립된 통신 장치가 블루투스 기술이나 UWB 통신 기술을 사용하여 통신망을 형성하는 무선 네트워크 기술

*특징 *

• 네트워크를 구성하는 장비 간에 사전에 네트워크의 정의와 계획이 없이 상황에 따라 조정 프로토콜에 의하여 마스터와 슬레이브의 역할을 하면서 네트워크를 형성
• 주로 수십미터 이내의 좁은 공간에서 네트워크를 형성
• 정지 또는 이동하고 있는 장치를 모두 포함

🌟 지그비 ( Zigbee )

• 저속 전송 속도를 갖는 홈 오토메이션 및 네트워크를 위한 표준 기술
• 버튼 하나로 하나의 동작을 잡아 집안 어느 곳에서나 전등 제어 및 홈 보안시스템 VCR on/off
• 인터넷을 통한 전화 접속으로 홈 오토메이션을 더욱 편리하게 이용하려는 것에서 부터 출발한 기술
• IEEE 802.15 표준 기반, 메시 네트워크 방식 사용

🌟 리뷰의 유형

✡️ 동료 검토 (Peer Reiview)

• 2~3 명이 진행하는 리뷰의 형태로 작성자가 요구사항 명세서를 설명하고, 이해관계자들이 설명을 들으면서 결함을 발견하는 형태로 진행하는 검토 기법

✡️ 워크스루 (Work Through)

• 검토 자료를 회의 전에 배포해서 사전 검토한 후 짧은 시간 동안 회의를 진행하는 형태
• 리뷰를 통해 오류를 검출하고 문서로 만드는 기법

✡️ 인스펙션 (Inspection)

• 소프트웨어 요구, 설계, 원시 코드 등의 저작자 외의 다른 전문가 또는 팀이 검사하여 오류를 찾아내는 공식적 검토

🌟 JSON

• "속성-값 쌍", "키-값 쌍" 으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 표맷

JSON의 주요 특징

• AJAX (Asynchronous JavaScript and XML) 에서 많이 사용
• XML(eXtensible Markup Language)을 대체하는 주요 데이터 포맷
• 언어 독립형 데이터 포맷으로 다양한 데이터 프로그래밍 언어에서 사용
• 사람이 읽고 쓰기에 쉬우며, 기계가 분석하고 생성하기에 용이

🌟 요구사항 명세 단계 주요 기법

✡️ 비정형 명세기법

• 사용자의 요구를 표현할 때 자연어를 기반으로 서술하는 기법
• 사용자와 개발자의 이해가 용이
• 명확성 및 검증에 문제

✡️ 정형 명세기법

• 사용자의 요구를 표현할 때 수학적인 원리와 표기법으로 서술하는 기법
• 정형 명세 언어인 Z-스키마, Petri-Net, 상태 차트 활용
• 표현이 간결하고 명확성 및 검증에 용이
• 기법의 이해가 어려움

🌟 VTL(Virtual Tape Library)

• 대용량 백업 및 데이터 소산에 강점이 있는 테이프 방식의 장점을 취하기 위해서 디스크를 가상의 테이프 미디어로 모방하는 방식

🌟 가상화 백업

• 하이퍼바이저에서 관리되는 가상서버(VM)의 이미지 파일을 백업하는 방식으로 백업환경을 백업 에이전트 중심의 가상화 서버 또는 프록시 서버 레벨에서 SW와 HW를 일체형으로 통합 구축하는 방식

🌟 디지털 포렌식

• 범죄 행위에 대한 사실을 사법기관에 제출하기 위해 디지털 증거자료를 획득, 분석, 보관, 제출, 기록하는 일련의 과정을 지침

• 원칙으로는 정당성, 재현성, 연계성, 신속성, 무결성

🌟 개발환경 인프라 구성방식

✡️ 온프레미스(On-Premise) 방식

• 외부 인터넷망이 차단된 상태에서 인트라넷 망만을 활용하여 개발환경을 구축하는 방식

• 데이터와 정보의 외부 유출이 민감한 경우 해당 장비를 자체 구매하고 특정 공간에 개발환경을 구축

✡️ 클라우드(Cloud) 방식

• 아마존, 구글, 마이크로소프트 등 클라우드 공급 서비스를 하는 회사들의 서비스를 임대하여 개발환경 구축

✡️ 하이브리드(Hybrid) 방식

• 온프레미스와 클라우드 방식을 혼용하는 방식

🌟 분석 자동화 도구 CASE

상위 CASE

• 계획 수립 요구분석, 기본 설계 단계를 다이어그램으로 표현
• 모델들 사이의 모순 검사 및 모델의 오류 검증, 일관성 검증 지원
• 자료 흐름도 프로토타이핑 작성 지원 및 UI 설계 지원

하위 CASE

• 구문 중심 편집 및 정적/동적 테스트 지원
• 시스템 명사서 생성 및 소스코드 생성 지원

🌟 DAO (Data Access Object)

• 특정 타입의 테이터베이스에 추상 인터페이스를 제공하는 객체로 세부내용 노출없이 데이터를 조작하는 객체

🌟 DTO (Data Transfer Object)

• 프로세스 사이에서 데이터를 전송하는 객체로 데이터 저장, 회수 외에 다른 기능이 없는 객체

🌟 VO (Value Object)

• 간단한 엔티티를 의미하는 작은 객체
• 가변 클래스인 DTO와 달리 고정 클래스를 가지는 객체

🌟 외부 단편화를 해결하기 위한 기법

✡️ 버디 메모리 할당 (Budy Memory Allocation)

• 요청한 프로세스 크기에 가장 알맞은 크기를 할당하기 위해 메모리를 2ⁿ의 크기로 분할하여 메모리를 할당하는 기법

✡️ 통합 (Coalescing)

• 인접한 단편화 영역을 찾아 하나로 통합하는 기법

✡️ 압축 (Compation)

• 메모리의 모든 단편화 영역을 하나로 압축하는 기법

🌟 HIPO 차트의 종류

• 가시적 도표(Visual Table of Contents) : 시스템의 전체적인 기능과 흐름을 보여주는 계층(Tree) 구조도
• 총체적 도표(OverView Diagram) : 프로그램을 구성하는 기능을 기술한 것으로, 입력, 처리, 출력에 대한 전반적인 정보를 제공하는 도표
• 세부적 도표(Detail Diagram) : 총체적 도표에 표시된 기능을 구성하는 기본 요소들을 상세히 기술하는 도표

• 데이터 흐름도(DFD)는 시스템 구성요소인 프로세스와 프로세스 간 데이터 흐름을 표현하는 주요 도구
• 자료 흐름 그래프 또는 버블(Bubble)차트라고 부르기도 함
• 구조적 분석 기법에 사용
• 자료 흐름과 기능을 자세히 표현하기 위해 단계적으로 세분화

💫 데이터 흐름도 구성 요소

• 처리기 (Process) : 입력된 데이터를 원하는 형태로 변환하여 출력하기 위한 과정 / 원(○)으로 표시
• 데이터 흐름 (Data Flow) : DFD의 구성요소들 간의 주고받는 데이터 흐름 / 화살표(→)로 표시
• 데이터 저장소 (Data Store) : 데이터가 저장된 장소 / 평핸선(=)으로 표시
• 단말 (Terminator) : 프로세스 처리과정에서 데이터가 발생하는 시작과 종료를 나타냄 / 사각형(□)으로 표시

🌟 데이터 모델링 절차

요구사항 분석 -> 개념 모델링 -> 논리 모델링 -> 물리 모델링

✡️ 요구사항 분석

• 데이터 모델링 작업을 시작하기 전, 시스템 또는 애플리케이션의 요구사항 분석
• 필요한 데이터와 해당 데이터의 속성, 관계 등을 이해하고 문서화

✡️ 개념 모델링

• 요구사항을 기반으로 개념적 모델을 구축
• 개념적 모델은 엔티티와 엔티티 간의 관계를 나타내는 엔티티-관계 다이어그램(ERD) 으로 표현

✡️ 논리 모델링

• 개념적 모델을 바탕으로 논리적 모델 개발
• 논리적 모델은 개념적 모델을 데이터베이스 시스템의 특정 구현 방식에 맞게 변환
• 엔티티를 테이블로 변환하고, 속성을 열(Column)로 매핑
• 관계를 외래 키(Foreign Key)로 표현하여 테이블 간의 관계 설정

✡️ 물리 모델링

• 논리적 모델을 기반으로 물리적 모델 설계
• 물리적 모델은 실제 데이터베이스 시스템에서 사용될 구조 정의
• 테이블 간의 관계, 인덱스, 제약조건 등을 정의
• 각 열의 데이터 유형, 크기, 제약조건 등을 명시

🌟 ISO/IEC 9216(ISO/IEC 25010 : 2011로 변경)의 소프트웨어 품질 특성

✡️ 기능성 (Functionality)

• 명시된 요구와 내제된 요구를 만족하는 기능 제공

✡️ 신뢰성 (Reliability)

• 명시된 조건에서 사용될 때 성능 수준을 유지할 수 있는 소프르웨어 제품의 능력
• 옳고 일관된 결과를 얻기 위하여 요구된 기능을 수행할 수 있는 정도
• 주어진 시간동안 주어진 기능을 오류없이 수행하는 정도

✡️ 사용성 (Usability)

• 사용자에 의해 이해되고, 학습되고, 사용되고 성호될 수 잇는 소프트웨어 제품의 능력

✡️ 효율성 (Efficiency)

• 사용되는 자원의 양에 따라 요구된 선능을 제공하는 소프트웨어 제품의 능력

✡️ 유지보수성 (Maintainability)

• 환경과 요구사항 및 기능적 명세에 따른 소프트웨어의 수정, 개선 혹은 개작 포함

✡️ 이식성 (Portability)

• 한 환경에서 다른 환경으로 전이될 수 있는 소프트웨어 제품의 능력

🌟 데크 (Duque:Double Ended Ended Queue)

큐의 양쪽 끝에서 삽입과 삭제를 할 수 있는 구조

🌟 UWD (Ultra Wide Band : 초광대역 무선)

• 중심 주파수의 20% 이상의 점유 대역폭을 가지는 신호, 또는 점유 대역폭과 상관없이 500MHz 이상의 대역폭을 갖는 신호와 수 GHz 대의 초광대역을 사용하는 초고속의 무선 데이터 전송기술

🌟 킬 스위치 (kill Switch)

• 스마트폰 이용자가 도난당한 스마트폰의 작동을 웹사이트를 통해 정지할 수 있도록 하는 일종의 자폭 기능
• 스마트폰의 유통, 도난이나 분실을 어느 정도 막을 수 있음
• 원격 잠금, 개인 정보 삭제 기능 등이 있으며 단말기의 펌웨어나 운영체제에 탑재

🌟 검증과 확인

💫 검증 (Verification)

• 소프트웨어 개발 과정을 테스트
• 올바른 제품을 생산 하고 있는지 검증
• 이전 단계에서 설정된 개발규격과 요구충족 판단
• 개발자 혹은 시험자의 시각으로 소프트웨어가 명세화된 기능을 올바로 수행하는지 알아보는 과정

  💫 확인 (Validation)

• 소프트웨어 결과를 테스트
• 만들어진 제품이 제대로 동작 하는지 확인
• 최종 사용자 요구 또는 소프트웨어 요구에 적합한지 판단
• 사용자 시각으로 올바른 소프트웨어가 개발되었는지 입증 하는 과정

🌟 자료 사전 (Data Dictionary : DD)

• 데이터 흐름도(Data Flow Diagram) 에 기술된 자료들에 대해 정의하는 것

💫 자료사전 기호

= : 정의 (is conposed of) + : 연결 (and) {} : 반복 (interation of) [] : 선택 (choose only one of) () : 생략 (optional) ** : 주석 (comment)

💫 자료사전 작성 목적

• 조직에 속해잇는 다은 사람들에게 특정한 자료 용어가 무엇을 의미하는지를 알려주기 위해 용어의 정의를 조정하고, 취합하고 문서로 명확히 하는 목적

🌟 Zing (초고속 근접 무선통신기술)

• 기기를 키오스크에 갖다 대면 원하는 데이터를 바로 가져올 수 있는 기술
• 10cm 이내 근접 거리에서 기가급 속도로 데이터 전송이 가능한 초고속 근접 무선통신 기술

🌟 애드-혹-네트워크 (Ad-hoc Network)

• 네트워크의 구성 및 유지를 위해 기지국이나 액세스 포인트와 같은 기반 네트워크 장치를 필요로 하지 않는 네트워크
• 노드(Node)들에 의해 자율적으로 구성되는 구조
• 활용분야는 긴급 구조, 긴급회의, 전쟁터에서의 군사 네트워크

기다리고 기다리던 !! 아크 브라우저 윈도우 버전을 사용할 수 있게 되었습니다. iOS 는 대기 없이 사용할 수 있습니다!

안내사항도 같이 나와있었습니다.

계정 및 다운로드 링크를 공유하지 말라고 나와있네요. 베타 기간 동안 윈도우 11에서만 사용 가능하며, 추후 10도 지원할 계획이라고 합니다.

아이콘도 너무 귀엽네요. 택배를 뜯은 기분..

이름과 이메일을 입력하고 가입할 수 있었습니다. 회원가입 자체가 해당 베타 초대 메일을 받은 이메일로만 가입이 가능하였습니다.

https://arc.net/

공식 홈페이지에서 Join Windows Waitlist 버튼을 클릭하여 윈도우 버전 대기가 가능합니다.

⭐ 아크브라우저 살펴보기

브라우저가 이렇게 예쁠 일이라니..

너무 예뻐서 다운로드까지 받아주었습니다..

아직 커스텀을 하지 않아 조촐한 모습입니다.

회원가입을 하고 로그인을 하면서, 기존에 사용하던 크롬과 연동이 되는지 구글 계정과 북마크 정보를 가져올 수 있었습니다.

Imported From Chrome 폴더에 사용하던 북마크가 보입니다.

좌측 상단에 있는 왼쪽 구글은 Gmail 오른쪽 구글은 캘린더 였습니다.

크롬에서도 창 하나 더 열어서 메일과 캘린더는 확인할 수 있었으니, 편리할지는 사용해 봐야 알 것 같습니다.

좌측 상단에 보이는 Space1 은 북마크나 다른 앱? 이라 표현해야할지, 원하는 것들을 모아다가 분류를 할 수 있는 것 같습니다.

죄측 하단에 있는 New Tab 을 클릭하니 새 창을 열 수 있었습니다.

구글 계정 정보도 같이 넘어간 줄 알았는데 로그인 정보는 남아있지 않아, 새로 로그인 하고 인증도 했습니다..

계정정보 바로 _Save.. _

Space 영역과 Tab 영역이 구분되는 게 기존 브라우저와의 차이점 같네요.

메뉴 부분을 닫아서 전체화면으로 했을때 왼쪽으로 당겨지는것 같은 오른쪽이 비는 현상은 오류인 것 같습니다.

아직 초기버전이라 그런지 약간의 버벅임은 있네요.

단축키 : ctrl + s

크롬같은 경우에는 탭이 많아지면 위 사진처럼 분리해서 비슷한 것들끼리 모아두고 보곤 했습니다.

좌측 하단을 보면, Space 가 메뉴 영역? 북마크, 연동 앱 Tab 과 분리된 무언가. .ㅋㅋ 정도로 생각했는데, 크롬 자체를 여러개 켜서 분리한 것 처럼 새로운 작업 공간을 열어주는 Space 였습니다.

Space 별로 설정을 달리해줄 수 있어 좋은것 같습니다.

업무용, 학습용, 일상용 등 구분해서 사용하면 이전 기록들을 보거나 자료를 저장하기 너무 좋을 것 같습니다.

💫 Profile

Space 영역에서 마우스 우클릭을 해주니 프로필을 설정할 수 있습니다.

Turn "Space" into Folder 에서는 다른 Space 에 있는 폴더를 자유자재로 이동하여 사용할 수 있습니다.

💫 Theme

마지막으로 가장 기대했던 Theme !! Space 별로 테마를 사용할 수 있어서 너무 좋은것 같아요 .

테마를 클릭하니 나오는 창입니다. 벌써부터 파스텔 색상보이는게 너무 예쁘네요.

배속을 하지 않은 영상입니다. 녹화를 하기 전에는 괜찮았는데 끊김이 조금 있네요. 그래도 예뻐요 성능적인 부분은 따로 정리하려합니다. ㅎㅎ

Space 별로 색상을 넣어주었습니다.

💫 keep

아이콘이 보관함 모양이라 keep 이라고 쓰긴 했지만 휴지통에 가까운 것 같습니다.

종료하고 재실행 해 보았는데 그대로 남아있네요! 개수 제한, 기간은 아직 모르겠지만 따로 설정이 있을거 같네요!

💫 탭 고정 ( 즐겨찾기 )

Tab 을 끌어다가 메일과 캘린더가 있던 부분에 올려 바로가기 아이콘처럼 생성할 수 있습니다.

아이콘이 아니어도, 라인 위로 올려주면 고정할 수 있습니다. 녹화영상에는 폴더로 들어갔지만 자유롭게 사용할 수 있습니다.

라인 하단에 있는 Tab 은 12시간 이후 자동 삭제됩니다. 지속적으로 사용할 Tab 들은 라인 위로 올려 고정하여 사용하면 유용할 것 같습니다.

💫 탭 전환

윈도우의 전환과 유사하네요. 아크브라우저 내의 Tab 을 빠르게 전환할 수 있습니다.

단축키 : ctrl + s

💫 화면 분할

단축키 : ctrl + shift + +

분할됐을때 좌측 사이드바에서도 Tab이 분할되어 있는게 마음에 드네요.

윈도우 베타 버전에서는 4개까지 분할이 가능하네요. 세로 말고 가로로도 추가하고 싶은데,, 아직 방법을 모르겠습니다.

🌠 정리

예쁘다!!

iOS 버전에서는 이젤을 사용하여, 노트 및 이미지 등 다양하게 활용할 수 있는데 윈도우 베타 버전에서는 아직 해당 기능이 보이지 않네요.

AI 검색 등 다양한 기능이 업데이트될 예정입니다.

크롬외에 다른 브라우저는 불편해서 잘 사용을 하지 않았는데, 아크브라우저는 예뻐서 마음에 드네요 ㅎㅎ 기대가 됩니다.

오류를 해결하기 위해 코드를 분석하던 도중 디버깅을 하려 해도 감이 잡히지 않는 경우를 종종 맞닥뜨리게 되는 것 같다.

Logging 을 통해서 아주 간단하게 원인을 파악하고 해결할 수 있어 살짝 허무했던 경험을 살려 기록을 남깁니다 ..

⭐ 로그 ( Log ) , 로깅 ( Logging )

Log 란 시스템 동작 시 시스템 상태, 작동 정도 를 시간의 경과에 따라서 기록한 것입니다.

Logging 이란 정보를 제공하는 일련의 기록인 Log를 생성하는 과정입니다.

*Logging 의 장점 *

• 개발 프로그램의 디버깅
• 예기치 못한 문제의 원인 파악
• 시스템 및 사용자의 동작 패턴 분석
• 해커(침입)의 비정상 동작의 기록 감지
• 분석을 통한 통계화

⭐ 로깅 라이브러리

Logback, Log4J, Log4J2 등의 로그 관련 작업을 할 수 있는 라이브러리들이 있습니다.

Spring Boot 에서는 위의 라이브러리들을 통합하여 인터페이스로 제공하는 SLF4J 라이브러리도 제공합니다.

SLF4J 를 사용하게 된다면 다른 로깅 프레임워크로 전환하더라도 소스 코드 자체의 변경을 막을 수 있습니다.

⭐ 로그 레벨

log level 은 아래와 같다

trace < debug < info < warn < error

error 가 가장 심각한 로그 레벨이다.

일반적으로 개발서버는 debug, 운영서버는 info 로 설정하며 설정된 level 이하의 상태는 출력되지 않는다.

⭐ 사용해보기

현재 작업하고있는 프로젝트에서 Log4J2 를 사용하고있어 해당 예시를 통해 정리하였습니다.

💫 dependency 의존성 추가

<dependency>
    <groupId>org.bgee.log4jdbc-log4j2</groupId>
    <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
    <version>1.16</version>
</dependency>

maven 프로젝트에서 pom.xml 파일에 dependency 를 추가해주었습니다.

dependencies {
    implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16'
}

gradle 프로젝트의 경우 build.gradle 에서 dependency 를 추가해주었습니다.

https://mvnrepository.com/ 레포지토리 저장소에서 쉽게 원하는 라이브러리와 버전에 맞는 dependency 를 찾아볼 수 있습니다.

💫 설정하기

resources 폴더 안에 properties 파일을 생성하여 다양한 설정들을 할 수 있습니다.

• 프로퍼티들을 개별 설정
• 로그 레벨 설정
• 파일 최대 용량 설정
• 에러일 경우의 로그처리는 어떻게 할 것인지
• root 레벨 설정
• 로그파일을 저장할 경로 설정

이 외에도 너무 많고 다양한 설정들이 있지만 상세한 코드나 설정 방법에 대해서는 생략하겠습니다.. ㅎㅎ

💫 코드 작성

import org.apache.logging.log4j.Logger;
import lombok.extern.log4j.Log4j2;

사용할 라이브러리들을 import 해줍니다.

Spring Boot 프로젝트에서 Service 클래스에서 사용해주었습니다.

@Log4j2 를 통해 사용을 선언해주었습니다.

log.debug("sendSatusUpdate service");
log.info("batchStatusUpdate err : {}", err);
log.error("error: {}", mapping);

코드에서 자유롭게 용도게 맞게 사용해줄 수 있습니다.

💫 올바른 로그 사용법

// worst
log.trace("trace log=" + error);

// best
log.trace("trace log={}", error);

worst 의 방식으로 trace 를 출력한다면 로그 출력 자체에는 문제가 없지만

자바 문법상 "trace log = " + error 이라는 문자열 더하기 연선이 먼저 일어난 후 log level 을 확인하게됩니다.

해당 프로젝트의 log level 설정이 debug 인 경우, trace 는 debug 이하의 log level 이므로 출력되지 않지만 이미 불필요한 연산이 일어난 경우가 됩니다.

best 방식은 SLF4J 치환문자를 사용하는 방십입니다.

문자열에 중괄호를 넣어 순서대로 출력하고자 하는 데이터들을 , 로 구분한 후 전달하여 치환해주는 방식이므로 불필요한 연산이 발생하지 않습니다.

🌠 정리

코드를 분석하면서 어디서 디버깅을 하고 오류를 수정해야하는지 조차 모를 정도로 정보가 없을 때, 직관적으로 코드에 log 를 찍어보면서 시간을 단축할 수 있었습니다.

오류가 있어 특정한 기능이 작동하지 않지만, 콘솔에 오류가 나타나지 않아 답답했던 상황에서 error log 를 찍어보니 어떤 코드에서, 어떤 오류가 발생하였는지 숨겨져있던 오류가 출력되었습니다.

log level 설정 단계에서 생략되어 보이지 않았던 오류를 출력하여 해결한 경우라고 볼 수도 있겠습니다.

'Publishig to Server...' has encountered a problem..

Could not delete C:\Users\KwonBi\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\
tmp0\wtpwebapps\Project\WEB-INF\lib\spring-social-web-1.1.4.RELEASE.jar. 
May be locked by another process.

프로젝트를 실행하기 전 서버를 클린하려는 데 해당 오류가 발생하였습니다.

해결 방법

톰캣이 실행되면서 이전에 쌓인 tmp0 폴더의 파일들이 삭제되지 않아 발생한 문제입니다.

보통 서버 구동에서 문제가 생기면 서버 클린을 해주는데, 저는 클린을 진행하다 발생한 오류이고 삭제되어야될 파일이 삭제되지 않아 발생한 오류이므로, Clean Tomcat Work Directory 를 진행해주었습니다.

Clean Tomcat Work Directory 를 진행하고 Clean 해주니 오류가 사라졌습니다.

위의 방법으로 해결이 되지 않는 경우 물리적으로 .metadata 디렉토리에 들어가 직접 삭제해주면 됩니다.

.metadata 디렉토리는 사용하는 workspace 디렉토리에 존재합니다. 저는 기본 경로에서 workspace 를 사용하고 있어 C:\Users\KwonBi\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core 경로에서 확인할 수 있었습니다.

해당 디렉토리의 tmp 폴더를 삭제해줍니다.

저는 서버가 4 개여서 tmp0, tmp1, tmp2, tmp3 으로 데이터가 쌓이는 것 같습니다.

오류가 발생한 서버는 가장 마지막 서버로 tmp3으로 추정되지만 서버를 실행할 때 자동으로 생성되어 데이터가 쌓이는 부분이니 4 개를 전부 다 삭제해도 무관합니다.

앞서 정리한 다양한 Broker 중에 Mosquitto 를 선택하여 설치및 테스트를 진행하였습니다.

⭐ Mosquitto 설치하기

Mosquitto 는 MQTT 3.1과 3.1.1을 구현한 오픈소스 메세지 브로커이며 QOS 2를 지원합니다.

https://mosquitto.org/download/ 공식 홈페이지에서 다운받을 수 있습니다.

별다른 설정사항 없이 설치가 완료되었습니다.

⭐ 설치완료 테스트

cmd(명령 프롬프트) 를 관리자 권한으로 실행합니다.

1. mosquitto 설치 폴더로 이동한 후 mosquitto -v 를 실행해줍니다.

2. Tcp 1883 활성을 확인합니다.

cmd 창에서 netstat -an 를 실행해줍니다.

3. 서비스 시작

cmd 창에서 net start mosquitto 를 실행해줍니다.

이미 서비스가 시작되어있는 상태네요.

4. Subscriber (구독자) 실행

cmd 창에서 mosquitto_sub -h localhost -t /testTopic 를 실행해줍니다.

mosquitto_sub -h 호스트 -t 토픽명

5. Publisher (공급자) 로 메시지 전송

새로운 cmd 창을 열어 실행해줍니다.

mosquitto_pub -h localhost -t /testTopic -m "Hello liyo"

mosquitto_pub -h 호스트 -t 토픽명 -m 메시지

이전에 실행해둔 구독자 의 cmd 창을 확인해보면 Hello Liyo 메시지를 확인할 수 있습니다.

6. 서비스 종료

cmd 창에서 net stop mosquitto 를 실행해줍니다.

MQTT 는 M2M 또는 IoT 를 위한 경량 Protocol 로서 저전력 장비에서도 운용이 가능하며, Network bandwidth 가 작은 곳에서도 충분히 운용 가능하도록 설계된 Protocol 입니다.

💫 MQTT 특징

🔹 Connection Oriented

MQTT Broker 와 연결을 요청하는 클라이언트 는 TCP/IP 소켓 연결을 한 후 명시적으로 연결을 끊거나 네트워크 사정에 의해 연결이 끊어질 때까지 상태를 유지합니다.

하트비트인 Live 와 Topic 에 발행되는 메시지를 통해 연결을 유지하고 메시지 송수신을 하게됩니다.

🔹 Broker

MQTT Protocol 을 사용하여 Publisher 와 Subscriber 사이에서 메시지를 관리하며 전송해주는 역할을 합니다.

• Mosquitto
• Mosca
• HiveMQ
• RabbitMQ MQTT Plugin

등의 MQTT Broker 가 있습니다.

https://github.com/mqtt/mqtt.org/wiki/server-support 해당 깃 페이지에서 다양한 브로커에 대한 지원 기능 목록을 확인해볼 수 있습니다.

🔹 Pub/Sub Model

Broker 를 통한 발행/구독 메세징 패턴입니다.

• 발행 : Broker 에 메시지를 전송
• 구독 : Broker 가 구독하고있는 클라이언트에게 메세지를 전송

일대일 혹은 일대다 통신 가능

🔹 Qos ( Quality of Service )

3가지의 _QoS Level 이 있습니다.

• 0 : 최대 한 번 전송하며 메시지를 전달합니다. 구독하는 클라이언트가 받는 것을 보장하지 않습니다.
• 1 : 최소 한 번 전송합니다. 구독하는 클라이언트가 메시지를 받았는지 불확실하면 정해진 횟수만큼 재전송합니다.
• 2 : 구독하는 클라이언트가 요구된 메시지를 정확히 한 번 수신할 수 있도록 보장합니다.

🔹 Topic

메시지를 발행/구동하는 행위는 채널단위로 일어나며 이 단위를 Topic 이라고 합니다.

Topic 은 슬래시(/) 로 구분되는 계층 구조를 가집니다.

최상위 토픽은 슬래시(/) 로 시작하지 않아야하며 와일드 카드 문자를 사용할 수 있습니다.

• + : One-Level Wild Card
• # : Multi-Level Wild Card

🔹 LWT ( Last will and testment )

MQTT 는 신뢰할 수 없는 네트워크를 포함하는 경우에 자주 사용되기 때문에 비정상적으로 연결이 끊어질 수 있다고 가정하는 것이 합리적입니다.

LWT 는 유언, 유언장 이라는 의미로서 Broker와 Client가 연결이 끊어지면 자동으로 다른 구독자들에게 메시지가 전송되는 기능입니다.

일반적으로 Broker에 연결을 시도하는 시점에 will topic, will message, will qos 등을 지정합니다.

Enter new UNIX usename : 우분투에서 사용할 닉네임을 입력해줍니다. New password : 사용할 패스워드를 입력해줍니다. Retype new password : 패스워드를 재 입력해줍니다.

계정을 생성하고 성공적으로 세팅이 완료되었다는 문구과 함께 여러 정보가 출력됩니다.

ECMA SCript 와 Lint 를 합친 용어로 문법상 에러를 먼저 검출 해낼 수 있는 도구입니다. Typescript 와 함께 많이 사용됩니다.

useEffect 나 useCallback 에서의 dependency array 가 빠졌거나, 코딩 스타일이 지정한 것과 다른 경우 Error로 인식하여 검출하거나, Warning 형태로 경고해줍니다.

예기치 않은 코딩 스타일을 방지하고, 팀의 코딩스타일을 하나로 맞출 수 있도록 도와주는 툴입니다.

💫 ESLint Config

가장 유명한 것중 하나인 airbnb 의 ESLint Config 입니다.

Airbnb Javascript Style Guide https://airbnb.io/javascript

싱글 캐릭터를 가급적 피해주고, 함수 명은 카멜케이스로 작성하기를 권장합니다.

function 이라는 키워드를 제외하고 Arrow Function 형태로 만드는 것을 추천합니다.

🔹 Prettier

코딩 스타일을 변환해주는 Tool 입니다.

const text = "TEXT" 
const text= 'TEXT' 

등 스타일이 다른 것을 하나로 통일해줍니다.

htpps://prettier.io/

https://tomcat.apache.org/ 톰캣 홈페이지에서 톰캣을 설치해줍니다.

저는 설치파일을 갖고있어서 빠르게 압축까지 풀어주었습니다.

https://velog.io/@bi-sz/Tomcat 톰캣의 기본 폴더 구조 관련해서는 지난 게시글에서 한 번 다루었기 때문에 넘어가겠습니다.

https://velog.io/@bi-sz/Java환경변수설정 https://velog.io/@bi-sz/Java-JRE-환경변수설정 새로 추가한 서버여서 아무 환경세팅이 되어 있지 않아 JAVA 설치와 환경변수 설정도 해주었습니다.

cmd 에서 tomcat 의 bin 경로로 들어가서 startup.bat 명령을 입력하여 실행해줍니다.

http://localhost:8080/ 로컬로 접속하면 톰캣이 실행되어 기본 화면이 보이는 모습입니다.

⭐ war 파일 배포하기

저는 Jenkins 를 사용하고 있어서 git repository 에서 자동으로 war 파일을 던져주기 때문에 추출하는 작업을 하지 않았습니다.

프로젝트 우클릭 -> export 클릭 -> war 검색 후 선택 -> war파일 이름과 저장 경로 선택

의 과정으로 작업 툴에서 export 를 통해서 war 파일을 추출할 수 있습니다.

추출한 war 파일을 C:\ApacheTomcat85_infra\webapps 경로에 넣어줍니다.

톰캣이 실행되면 war 파일을 풀어서 폴더로 풀어주고 배포되는 방식입니다.

💫 파일 명을 ROOT.war 로 생성한 경우

C:\ApacheTomcat85_infra\webapps 경로에 있는 기존 ROOT파일의 이름을 다른것으로 변경해준 후 생성한 ROOT.war 파일을 넣어줍니다.

tomcat은 별도의 설정이 없으면 자동으로 _webapps_내 ROOT폴더를 root로 실행하기 때문에 파일명을 ROOT 로 지어주면 별도의 설정을 할 필요가 없습니다.

💫 임의의 파일명으로 war을 생성한 경우

C:\ApacheTomcat85_infra\webapps 경로에 war 파일을 넣어줍니다.

tomcat 의 설치폴더인 C:\ApacheTomcat85_infra\conf 경로에서 server.xml 을 수정해줍니다.

Host 태그 내부에 경로를 추가해줍니다.

<Context path="[경로]" docBase="[war파일의 이름]"  reloadable="false" > </Context>

이 설정은 _tomcat_서버에서 하나의 가상경로를 추가하는 방법으로 path="/" 로 설정하면 ROOT 폴더 대신 등록한 폴더가 실행됩니다.

⭐ 톰캣 윈도우 데몬 서비스 등록

톰캣 실행을 위해서 매번 cmd 에서 tomcat 의 bin 경로로 들어가서 startup.bat 명령을 입력하기 번거롭기 때문에 컴퓨터를 재부팅할 때마다 서버가 고정적으로 실행되도록 데몬 서비스를 등록해주려합니다.

1. 톰캣 기본 포트 변경

tomcat 의 설치폴더인 C:\ApacheTomcat85_infra\conf 경로에서 server.xml 을 수정해줍니다.

톰캣의 기본 포트가 8080으로 설정되어있는데 추후에 다른 것들과 겹칠 우려가 있기 때문에 8081로 변경해주었습니다.

2. service.bat 설치

관리자 권한으로 cmd 를 실행하여 C:\ApacheTomcat85_infra\bin 톰캣의 경로에서 아래 명령을 실행해줍니다.

> service.bat install

3. 윈도우 서비스에서 확인하기

service.bat 설치가 완료되면 윈도우 실행창 ( 윈도우 + r ) 을 실행창에서 services.msc 를 실행하여 윈도우 서비스 창을 열어줍니다.

서비스 창에서 Apache Tomcat 이 추가된 것을 확인할 수 있습니다.

4. 데몬 실행하기

Apache Tomcat 서비스를 더블클릭하거나 우클릭하여 속성을 클릭합니다.

속성창에서 시작 유형을 자동으로 변경하고, 서비스를 시작하고 확인을 눌러줍니다.

서버의 상태가 실행중으로 변경됨을 확인하였습니다.

⭐ 배포 완료

배포가 잘 된 모습입니다.

서버 자체에서 로컬로 확인을 해 주었으니 외부접속을 위한 포트포워드 설정을 해 주어야합니다.

https://velog.io/@bi-sz/Network포트포워드설정 포트포워딩 관련해서는 위의 게시글에 정리해두었습니다.

포트포워딩 설정 후 IP를 통한 접근에서도 배포한 서버에 잘 접근되는 모습입니다.

외부 접속 가능한 도메인 주소로도 잘 접근되네요!

외부 접근을 위해 설정했던 포트포워딩작업을 정리하였습니다.

⭐ 포트포워드

외부 접속을 위해서는 외부의 기기가 내부에 있는 컴퓨터나 서버가 연결된 공유기를 통과해야합니다.

공유기는 방화벽 역할을 하기때문에 내부 컴퓨터에 접근이 가등하도록 하려면 특정 포트를 열어줘야합니다.

외부의 기기에는 고정된 IP 만 전달하고, 외부 기기가 내부에 접근할 수 있도록 내부의 공유기 관리자에서 설정하는 과정이 포트포워드입니다.

허가된 포트로 접근한 외부 사용자만이 해당 서버 혹은 PC로 접근이 가능하도록 설정해주는 것입니다.

⭐ 포트포워드 설정하기

저는 ipTIME 을 사용하고 있어 해당 방법을 정리하였습니다.

1. 공유기 설정 페이지 접속

http://192.168.0.1 공유기 설정 페이지에 접속해줍니다.

초기 계정은 아래와 같습니다. ID : admin PW : admin

따로 설정해 놓은 계정을 잃어버렸다면 공유기의 reset 버튼을 10초 정도 눌러 초기화할 수 있습니다.

2. 시스템 요약 정보

로그인 후 화면에서 관리 도구로 들어가줍니다.

외부 IP 주소를 확인할 수 있습니다.

3. 포트포워드 설정

고급설정 -> NAT/라우터관리 -> 포트포워드설정 에서 규칙을 추가하여 포트포워딩 작업을 해줄 수 있습니다.

예시

규칙 이름 : TEST 내부 IP 주소 : 192.168.0.77 (해당 컴퓨터의 ip 주소, cmd -> ipconfig ) 외부 포트 : 7890:7890 내부 포트 : 3000:3000

4. 포트포워드 확인하기

https://yuip.org/en/port-check 위의 사이트에서 포트포워드가 되어있는지 확인할 수 있습니다.

외부에서 접속을 위한 외부 IP, 포트번호 를 입력하고 TEST 버튼을 클릭하면 포트포워드 여부를 알려줍니다.

평소에 jdk 만 사용하여 jre는 따로 환경변수 설정한 적이 없는거 같아서 생소하였습니다.

⭐ JRE (Java Runtime Environment)

자바 실행환경으로 자바 프로그램을 실행하는데 필요한 것입니다.

jre 자체는 자바 프로그램을 실행하는 데 필요한 것으로, 자바 프로그램을 실행시키는데는 문제가 없지만, 자바 프로그램을 코딩할 때 jdk가 아니라 jre를 사용하면 컴파일이 정상적으로 되지 않는 등의 문제점이 생길 수 있습니다.

⭐ JDK (Java Development Kit)

자바 개발 키트입니다. 자바를 개발하는데 필요한 기능들을 모아둔 것입니다.

자바 프로그램 개발을 위해서는 jdk 를 다운받아 자바 기능을 사용하고 컴파일 해주어야합니다.

jdk 에는 jre 도 포함되어있습니다.

⭐ jre 환경변수 설정

1. 작업표시줄 검색창에 환경 변수를 검색하여 시스템 환경 변수 편집으로 들어갑니다.

2. 시스템 속성의 고급 탭에서 우측 하단의 환경 변수를 클릭합니다.

3. 환경 변수에서 새로 만들기 버튼을 클릭하여 아래 정보를 입력하고 확인버튼을 클릭합니다.

변수 이름(N) : JRE_HOME

변수 값(V) : JRE가 설치된 폴더의 경로

저의 경우에는 자바 1.8 버전을 다운받아 C:\Program Files\Java\jre1.8.0_181 해당 값을 입력해 주었습니다.

4. 시스템 변수(S) 에서 Path를 더블클릭하여 환경 변수 편집 창으로 들어갑니다.

5. 환경 변수 편집 탭에서 아래와 같이 설정해줍니다.

• 좌측 상단의 새로 만들기 버튼을 클릭한 후 %JRE_HOME%\bin 을 입력해줍니다.

• 우측 중단의 위로 이동 버튼으로 위로 옮겨줍니다.

• 우측 하단의 확인 버튼으로 저장해줍니다.

🌠 정리

jre : 자바 프로그램을 실행시키는 데 필요한 것 jdk : 자바 프로그램을 개발하는 데 필요한 것

jdk를 다운로드 받으면 jre 도 포함되어 있기 때문에, 개발한 자바 프로그램을 실행시키는 것까지 가능합니다.

⭐ 프로젝트 생성

> npx create-expo-app -t expo-template-blank-typescript
> What is your app named? ... my-first-typescript-app

프로젝트 생성시의 옵션을 달리하여 타입스크립트 템플릿의 expo 프로젝트를 생성해주었고, Functional Component 로 미리 만들어둔 component 들을 가져와주었습니다.

✡️ 기본 컴포넌트 변환

💫 Typography

파일 명을 Typography.js -> Typography.tsx 로 변경해주었습니다.

불필요한 코드들을 주석처리 해주었습니다.

props 를 선언하기 위해서 React.FC 로 Typography 컴포넌트를 정의해줍니다.

props 명을 선언하고 타입을 지정합니다. ? 는 값이 없을 수도 있는 경우 사용합니다.

🌠 TypeScript Test

package.json 의 script 에 "test:typescript":"tsc" 를 추가해줍니다. 하단의 devDependencies 의 "typescript": "^5.1.3" 부분은 프로젝트를 생성할 때 자동으로 추가된 부분입니다.

> npm run test:typescript

명령어를 치게되면 tsc 라고 응답해줍니다.

numberOfLines 부분의 타입을 number 에서 string 으로 변경해주었습니다. 코드상에도 바로 빨간줄이 보이지만

> npm run test:typescript

명령어를 치게되면 잘못되었다고 오류를 알려줍니다.

💫 LocalImage

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 RemoteImage

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

테스트도 한 번 실행해보았습니다. 문제 없네요!

💫 SingleLineInput

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 MultiLineInput

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 Icon

> npm install @expo/vector-icons --save

@expo/vector-icon 라이브러리를 설치해주었습니다.

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

name 부분에서 타입에러가 뜹니다.

IconName 을 별도로 지정해주면서 해결하였습니다.

💫 TabIcon.tsx

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 Spacer

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 Divider

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

따로 설정해줄 부분이 없어서 props 에 대한 Generic 선언도 하지 않았습니다.

💫 Button

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 Badge

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

Typography 에서 오류가 발생했습니다. 안에 count 값, children 이 설정되어있지 않아 오류가 발생하였습니다.

count 값이 있냐 없냐를 기준으로 분기를 해주었습니다.

기본 컴포넌트들을 전부 수정해주었습니다.

✡️ 헤더 컴포넌트 변환

💫 HeaderTitle

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 HeaderGroup

파일을 tsx 로 변경해주었고, React.FC 를 사용하여 변환해주었습니다.

💫 HeaderIcon

💫 Header

> npm install react-native-safe-area-context --save

헤더에서는 react-native-safe-area-context 를 사용하고있기 때문에 라이브러리를 설치해주었습니다.

Compound Components 패턴으로 되어있기 때문에 수정해야할 부분이 조금 더 많습니다.

우선 Header Component 부터 수정해주었습니다.

사용할 Compound Components 들의 타입 정의를 해주었습니다.

마지막으로 테스트! 문제 없네요!

https://github.com/bi-sz/my-first-typescript-app.git

이번 게시글에서는 React 에서의 TypeScript 를 다루어 보려고 합니다!

⭐ Generic

자료형을 먼저 정의하지 않고 여러 타입들을 사용할 수 있도록 열어두는 것입니다.

const item = <T>(arg:T[]):T[] => {
   return arg;
 }

⭐ 컴포넌트 정의

💫 React.FC<Type>, React.FunctionComponent<Type>💫

const ComponentA: React.FC<Type> = (props) => {
  return <ComponentCode {...etc}/>;
}

props 선언이 맞지 않는다면 다른 결과값이 나타날 수 있습니다.

FC는 Generic 으로 선언되어 있어 안에 타입을 지정해주면 props 에 대한 타입 추론을 하도록 되어있습니다.

💫 useState

const [data, setData] = useState<string>("""")

useState 도 마찬가지로 Generic 의 형태로 선언되어있습니다.

Generic 으로 선언된 <String> 을 통해 state 가 가지고 있는 값이 String 인것을 알 수 있습니다.

💫 useCallback

const onPressed = useCallback <(text:string)=>void>((text)=>{
  {/* do something */}
}, [])

함수 자체를 Generic 로 선언해둔 형태입니다.

💫 useMemo

const onPressed = useMemo<string>(()=>{
  return "text"
}, [])

Generic 의 형태로 선언되어있습니다.

💫 FlatList

<FlatList<TypeFlatListITem>
  data = { /* some data */ }
  renderItem = {()=>{ /* render */ }}
/>

위와 같은 형태로 item 의 Type 을 추론할 수 있습니다.

• JavaScript + Type check = TypeScript
• Microsoft 에서 개발
• Javascript와 다르게 정적 타입 언어

** 정적 타입 언어 ** -컴파일시 에러가 발생하게 되면서 잘못 되었음을 알려줍니다. -높은 진입장벽과 여러명이 작업하더라도 유지되는 생산성을 보입니다.

** 동적 타입 언어 ** -컴파일 단계 없이 프로그램이 구동될 때 타입체크가 됩니다. -낮은 진입장벽과 혼자 작업할 때에는 높은 생산성을 보입니다.

💫 TypeScript 를 사용해야하는 이유

1. 동적 타입 언어의 경우 해당 타입이 어떠한 상황에 따라서 전체가 바뀌는 경우가 있습니다.

최초에는 Number 형태로 있다가 이후 String 값이 추가되면서 전체 Type 이 String 으로 변환되는 경우입니다.

Type 이 의도치 않게 변경되었기 때문에 알지 못하는 Undefined 에러 혹은 Type 에러 가 발생할 수 있습니다.

정적 타입 언어를 사용하게 된다면 컴파일 시 타입체크를 하게 되어있기 때문에 해당 에러들을 사전에 방지할 수 있습니다.

2. IDE 에서 제공되는 Type 추론

_동적 타입 언어_의 경우 _컴파일_을 하지 않기 때문에 해당 객체 내부에 어떤 _프로퍼티_가 있는지에 대해서 매번 찾아봐야합니다.

TypeScript 의 경우에는 이미 컴파일이 되어있기 때문에 IDE 에서 자동으로 찾아줍니다.

💫 Primitive Types

기본으로 제공해주는 타입을 Primitive Types 이라합니다.

• String : 문자열 Type
• Number : 숫자 Type
• Boolean : true, false 등
• null : 데이터가 없는 것
• enum : 열거형 데이터

🔹 선언 방법

const a:string = "Keep calm and code react-native"

변수 명을 선언한 뒤 :(콜론) 뒤에 해당 타입 명을 지정해 줍니다.

🔻 string, number, boolean

const a:string = 'Test code ${variable}` (OK)
const a:string = 0 (ERROR)
const a:number = 10 + 2 (OK)
const a:number = 10 + "2" (ERROR)
const a:boolean = a === 10 (OK)
const a:boolean = list.length (ERROR)

🔻 enum

enum COCLORS {
  Red,
  Blue,
}
const a:COLORS = COLORS.Red (OK)
const a:COLORS = 'red' (ERROR)

🔻 list

const strList:string [] = [""A"", ""B"", ""C""] (OK)
const numList:number[] = [0, 1, 2,"3"] (ERROR)

https://velog.io/@bi-sz/React에서의 TypeScript

⭐ RestTemplate 사용을 위해 의존성 추가

Maven 프로젝트 이므로 pom.xml 파일에 의존성을 추가해주었습니다.

apache에서 제공하는 httpcore, httpclient 의존성을 추가해주었습니다.

RestTemplate 을 생성할 때 어떠한 HTTP Client 를 사용할 것인지 ClientHttpRequestFactorty 를 전달하여 지정할 수 있습니다. 기본 생성자의 경우 내부적으로는 ClientHttpRequestFactory 의 구현체인 SimpleClientHttpRequestFactory 를 사용하여 초기화 합니다. jdk가 기본으로 제공하는 HttpURLConnection 을 통해 ClientHttpRequest 객체를 생성합니다. HttpComponentsClientHttpRequestFactory 를 생성자에 넘겨 사용할 수 있습니다.

⭐ RestTemplate

package egovframework.com.api.RestTemplateUtil;

import java.net.URI;
import java.util.HashMap;
import java.util.Map;

import org.apache.commons.lang3.ObjectUtils;
import org.apache.commons.lang3.StringUtils;
import org.json.JSONObject;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.ResponseEntity;
import org.springframework.http.client.HttpComponentsClientHttpRequestFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.client.RestTemplate;

@Component
public class RestTemplateUtil {

    public HashMap<String, Object> send(Map<String, String> param, String url, HttpHeaders header) {

        // 결과값을 담을 객체 생성
        HashMap<String, Object> result = new HashMap<String, Object>();
        if(ObjectUtils.isEmpty(param)) {
            result.put("ERROR", "수신 패킷 전송 오류");
            return result;
        }
        if(StringUtils.isEmpty(url)) {
            result.put("ERROR", "수신 패킷 전송 오류");
            return result;
        }
        if(header == null) {
            result.put("ERROR", "수신 패킷 전송 오류");
            return result;
        }

        try {
            // 타임아웃 설정 시 HttpComponentsClientHttpRequestFactory 객체 생성
            HttpComponentsClientHttpRequestFactory factory = new HttpComponentsClientHttpRequestFactory();
            factory.setConnectTimeout(5000); //타임아웃 설정 5초
            factory.setReadTimeout(5000);//타임아웃 설정 5초

//            //Apache HttpComponents : 각 호스트(IP와 Port의 조합)당 커넥션 풀에 생성가능한 커넥션 수
//            HttpClient httpClient = HttpClientBuilder.create()
//                                                    .setMaxConnTotal(50)//최대 커넥션 수
//                                                    .setMaxConnPerRoute(20).build();
//            factory.setHttpClient(httpClient);

            // RestTemplate 객체 생성
            RestTemplate restTemplate = new RestTemplate(factory);

            // 설정한 Header와 Body를 가진 HttpEntity 객체 생성
            HttpEntity<?> entity = new HttpEntity<>(param, header);     // 요청하기 위해 body와 header합치기
            // HTTP POST 요청
            ResponseEntity<String> response = restTemplate.exchange(new URI(url), HttpMethod.POST, entity, String.class);            
            // result로 응답받은 결과를 출력
            JSONObject jsonObj = new JSONObject(response.getBody());

            if(!ObjectUtils.isEmpty(jsonObj)) {
                result.put("result", jsonObj);
            }

        } catch (Exception e) {
            result.put("ERROR", "api 호출 에러");
            e.printStackTrace();
            return result;
        }

        return result;
    }
}

⭐ 요청 URL 설정

properties 파일에 url 정보를 추가해주었습니다.

⭐ RestTemplate Butilder Util

Builder 패턴을 이용하여 RestTemplate 으로 HTTP 요청을 할 Util 클래스를 생성해주었습니다.

url을 설정하고, 헤더를 설정하고, 파라미터를 설정하고 API 를 호출해줍니다.

API 호출을 통해 받은 response 값을 Map 으로 변환, 시간 포맷, String, JSON 타입 변환 등의 작업도 아래에 추가해주었습니다.

Util 파일에 메시지를 전송하는 API를 호출하는 sendMessage 함수를 만들어주었고 이제 함수를 호출하여 API를 사용할 수 있습니다.

⭐ API 호출 함수 사용하기

Controller 에서 호출하여 사용해주었습니다.

잘 동작하였고,, 추후에 쓸 일이 많을거 같아서 갖다 쓰려고 정리한 글 ..