ESTP 하고재비로 살아가기

TCP/IP 4계층과 OSI 7계층, 전송 계층의 handshake

대왕판다 — Wed, 3 May 2023 09:33:55 +0900

기본용어

네트워크 토폴로지: 네트워크의 물리적인 구성 요소들이 서로 어떻게 연결되어 있는지, 또는 논리적으로 어떻게 구성되어 있는지를 묘사하는 방식
트래픽 (Traffic): 네트워크 상에서 데이터가 이동하는 양. 트래픽은 인터넷 사용자의 수, 웹 사이트의 인기도, 서비스의 사용량 등에 따라 변동될 수 있음.
대역폭 (Bandwidth): 네트워크가 한 번에 전송할 수 있는 데이터의 양(초당 전송 속도) 일반적으로 초당 비트(bit) 또는 바이트(Byte) 단위로 측정 (배관의 파이프 크기)
처리량 (Throughput): 네트워크에서 초당 실제로 처리되는 패킷의 양을 나타내는 실용적인 지표 (실제 파이프 속 흐르는 물의 양)

전송계층의 3-way handshake (연결 수립)

4-way handshake (연결 해제)

FIN → 더 이상 보낸 데이터가 없음을 의미

Graceful connection release(정상적인 연결 해제)
정상적인 연결 해제에서는 양쪽이 커넥션이 서로 모두 커넥션을 닫을 때까지 연결되어 있다.
Abrupt connection release(갑작스런 연결 해제)
1. 갑자기 한 TCP 엔티티가 연결을 강제로 닫는 경우
  - RST 패킷 수신, 타임아웃, 지속적인 재전송 실패, ICMP 에러 메시지
2. 한 사용자가 두 데이터 전송 방향을 모두 닫는 경우

OSI 7계층

응용 계층 (Application Layer):
- 클라이언트는 웹 브라우저를 사용해 특정 홈페이지를 요청 이 때, HTTP 프로토콜이 사용되며, 클라이언트는 HTTP 요청 메시지를 생성합니다. 이 요청 메시지는 메소드(GET, POST 등), URI, 프로토콜 버전, 헤더 정보 및 본문 데이터(예: JSON)를 포함합니다.
- 서버는 클라이언트의 요청을 처리하고, HTTP 응답 메시지를 생성합니다. 이 응답 메시지는 상태 코드(예: 200 OK), 프로토콜 버전, 헤더 정보 및 본문 데이터(예: JSON)를 포함합니다.
표현 계층 (Presentation Layer): 표현 계층은 데이터 형식을 처리하고, 필요한 경우 암호화/복호화를 수행합니다. JSON과 같은 형식의 데이터는 이 계층에서 처리됩니다.
세션 계층 (Session Layer): 세션 계층은 클라이언트와 서버 간의 연결을 관리합니다. 즉, 세션을 생성, 유지 및 종료하는 역할을 담당합니다.
전송 계층 (Transport Layer):
- 전송 계층은 클라이언트와 서버 간의 통신을 관리하며, 일반적으로 TCP 프로토콜을 사용합니다. HTTP 요청 메시지는 TCP 세그먼트로 나누어지고, 각 세그먼트는 목적지에 도달할 때까지 전송 계층에서 추적 및 관리됩니다.
- 흐름 제어와 오류 처리를 담당하며, 필요한 경우 세그먼트의 재전송을 수행합니다.
네트워크 계층 (Network Layer): 네트워크 계층은 IP 프로토콜을 사용하여 데이터 패킷을 전송합니다. 이 계층에서는 패킷의 출발지와 목적지 IP 주소를 확인하고, 라우팅을 통해 최적의 경로를 선택하여 데이터를 전송합니다.
데이터 링크 계층 (Data Link Layer): 데이터 링크 계층은 물리 계층에서 전송되는 비트를 프레임으로 구성하고, 에러 검출 및 흐름 제어를 수행합니다. 이 계층에서는 MAC 주소를 사용하여 데이터를 전송합니다.
물리 계층 (Physical Layer): 물리 계층에서는 전기 신호로 변환된 데이터 비트를 실제로 전송합니다. 케이블, 무선 신호, 광섬유 등 다양한 매체를 통해 데이터가 전송됩니다.

[디자인패턴] 싱글톤 패턴, 팩토리 패턴

대왕판다 — Wed, 12 Apr 2023 23:09:51 +0900

의존성 주입과 싱글톤 패턴

의존성 주입은 객체 간의 결합도를 낮추기 위한 설계 패턴
객체 생성 및 관리를 담당하는 제 3자인 컨테이너가 객체 간의 의존성을 연결해주는 방식
객체는 자신이 필요로 하는 의존 객체가 어떤 것인지 알지 못하더라도, 외부(컨테이너, 의존성 주입자)에서 주입받은 객체를 사용하여 동작할 수 있다.
싱글톤 패턴은 객체를 하나의 인스턴스만 생성하여 공유하는 방식의 패턴이다.
의존성 주입을 통해 싱글톤 객체를 사용하 객체 간의 결합도를 낮출 수 있다.()
그렇기에 모듈들을 쉽게 교체할 수 있다→테스팅과 마이그레이션이 수월하다.

의존성 주입을 하지 않은 경우

// 싱글톤 클래스
public class Singleton {
    private static Singleton instance;

    private Singleton() {
    }

    public static Singleton getInstance() {
        if (instance == null) {
            instance = new Singleton();
        }
        return instance;
    }

    public void doSomething() {
        // some code
    }
}

public class Client {
    public static void main(String[] args) {
        Singleton singleton = Singleton.getInstance();
        singleton.doSomething();

        // Singleton 객체에 의존하는 다른 객체 생성
        OtherClass otherClass = new OtherClass();
        otherClass.doSomethingElse();
    }
}

// 싱글톤 클래스에 의존하는 클래스
public class OtherClass {
    private Singleton singleton;

    public OtherClass() {
// 인스턴스를 직접 생성
        singleton = Singleton.getInstance();
    }

    public void doSomethingElse() {
        singleton.doSomething();
    }
}

위 코드에서는 OtherClass 클래스에서 Singleton 객체를 직접 생성하는 코드가 중복되어 나타나고
Singleton 객체의 생성 및 관리에 대한 책임이 OtherClass 클래스로 넘어가게 되므로, 유지보수 및 확장성이 저하된다.

의존성 주입을 사용하는 경우

public class Singleton {
    // same code
}

public class Client {
    public static void main(String[] args) {
        Singleton singleton = Singleton.getInstance();
        singleton.doSomething();

        // 생성자를 통해 의존성 주입
        OtherClass otherClass = new OtherClass(singleton);
        otherClass.doSomethingElse();
    }
}

public class OtherClass {
    private Singleton singleton;

    // 생성자를 통해 의존성 주입
    public OtherClass(Singleton singleton) {
        this.singleton = singleton;
    }

    public void doSomethingElse() {
        singleton.doSomething();
    }
}

**OtherClass**클래스에서 **Singleton**객체를 생성하지 않고, 생성자를 통해 의존성 주입을 받도록 변경
객체의 생성/관리 책임이 Client 클래스로 다시 돌아가므로 유지보수 및 확장성이 개선

팩토리 패턴

팩토리패턴이란?

객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화
상위 클래스가 중요한 뼈대 결정 ↔ 하위 클래스에서 객체 생성에 관한 구체적 내용 결정

팩토리 패턴의 효용성

객체 생성 로직의 캡슐화 (+유연화)
- 객체 생성 과정을 외부로부터 감춘다.
- 사용하는 코드에서는 객체 생성 과정을 알 필요가 없어지며
- 객체 생성 과정이 변경되더라도 클라이언트 코드에 영향을 미치지 않음
객체 생성의 표준화
- 팩토리 패턴을 사용하면 객체를 생성하는 방식을 표준화할 수 있음
- 이를 통해 객체 생성을 일관성 있게 처리할 수 있으며 유지보수 및 확장성이 개선

코드 중복 제거

팩토리 패턴을 사용하면 객체 생성 로직을 중복으로 작성하는 것을 방지

public interface Animal {
    void makeSound();
}

public class Client {
    public static void main(String[] args) {
// dog 객체를 직접 생성
        Animal dog = new Dog();
        dog.makeSound();
    }
}

public class Dog implements Animal {
    @Override
    public void makeSound() {
        System.out.println("Bark!");
    }
}

public interface Animal {
    void makeSound();
}

public class Dog implements Animal {
    @Override
    public void makeSound() {
        System.out.println("Bark!");
    }
}

public class AnimalFactory {
    public static Animal createAnimal(String type) {
        switch (type) {
            case "dog":
                return new Dog();
            default:
                // some code
        }
    }
}

public class Client {
    public static void main(String[] args) {
// 애니멀팩토리를 이용해 객체 생성
        Animal dog = AnimalFactory.createAnimal("dog");
        dog.makeSound();
    }
}

Git 사용중 로컬-원격 저장소간 충돌상황일때(변경 사항이 충돌하지 않을때)

대왕판다 — Thu, 16 Mar 2023 23:52:02 +0900

깃허브 레포지토리에서 리드미를 수정하고, 이를 fetch 혹은 pull 하지 않은 상태로,

즉 로컬에서 원격 저장소의 변경 내역을 업데이트하지 않은 상태로 새로운 커밋을 남겼다.

이후 로컬저장소 변경 내역을 원격 저장소로 보내려하니 아래와 같은 에러가 발생했다.

 git push origin main
 

To https://github.com/yongwoo-jeong/community-bulletin-board-MPA
 ! [rejected]        main -> main (fetch first)
error: 레퍼런스를 'https://github.com/yongwoo-jeong/community-bulletin-board-MPA'에 푸시하는데 실패했습니다
힌트: 리모트에 로컬에 없는 사항이 들어 있으므로 업데이트가
힌트: 거부되었습니다. 이 상황은 보통 또 다른 저장소에서 같은
힌트: 저장소로 푸시할 때 발생합니다.  푸시하기 전에
힌트: ('git pull ...' 등 명령으로) 리모트 변경 사항을 먼저
힌트: 포함해야 합니다.
힌트: 자세한 정보는 'git push --help'의 "Note about fast-forwards' 부분을
힌트: 참고하십시오.

위와 같은 상황에서 rebase를 통해 커밋을 선택, 이어붙이는 방식으로도 해결할 수 있겠지만

동일한 코드라인에 대한 변경사항이 없어 충돌하지 않을 것이라는 생각이들어 다른 방법을 찾아보았다.
(원격 저장소에서는 리드미 파일만 추가 되었음)

실제 간단하게 `git fetch origin` 이후 `git merge origin/main` 명령어를 통해 정상적으로 커밋 로그에 병합할 수 있었다.

1. git merge origin/main을 실행하면 Git은 원격 저장소(origin/main) 변경 사항을 로컬 브랜치와 결합하려고 시도한다.

2. 변경 사항이 충돌하지 않으면 Git은 브랜치 히스토리에 따라 fast-forward merge 혹은 새로운 merge(커밋)를 수행한다.

공통 조상 식별: Git은 로컬 브랜치와 원격 브랜치 모두에서 공유하는 가장 최근의 공통 조상 커밋을 찾는다 (기준)
변경 사항 비교: Git은 공통 조상 커밋 이후의 로컬 브랜치와 원격 브랜치(origin/main)의 변경 사항을 비교한다. 충돌이 없으면 Git은 fast-forward 병합 또는 새로운 병합 커밋을 수행할 수 있다.
Fast-forward 병합: 로컬 브랜치가 원격 브랜치보다 뒤쳐져 있고(더 오래된 커밋) 공통 조상 이후 로컬 브랜치에 새로운 커밋이 없는 경우 Git은 fast-forward 병합을 수행할 수 있다. 이 경우 Git은 로컬 브랜치 포인터를 원격 브랜치(origin/main)의 최신 커밋으로 이동시킨다.
병합 커밋: 로컬 브랜치가 공통 조상 커밋 이후 새로운 커밋이 있는 경우 Git은 두 브랜치의 변경 사항을 결합한 새로운 병합 커밋을 만든다.
충돌 해결: 로컬 브랜치와 원격 브랜치의 변경 사항 간에 충돌이 있는 경우 Git은 병합 프로세스를 중단하고 충돌하는 파일을 수동으로 충돌을 해결하고 변경 사항을 커밋하여 병합을 완료해야 한다. ( 나의 경우는 충돌사항이 없었다.)

참고: https://www.atlassian.com/git/tutorials/using-branches/git-merge

자바 서블릿에서의 session

대왕판다 — Tue, 14 Mar 2023 11:38:50 +0900

자바 서블릿 게시판 프로젝트를 만들며 로그인을 세션 방식으로 구현했다. 그렇다면 이 세션은 무엇인지 알 필요가 있다는 생각이 들어 정리해본다.

세션이란?

Session은 영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다. - 위키 백과 -
== 클라이언트-서버 간 연결 상태를 의미한다.
== 클라이언트가 브라우저에 접속해 서버와 접속이 종료하기 전 상태

HTTP 통신 구조는 HTTP 통신의 이해 를 참고할 수 있다.

세션 동작 과정

HTTP 같은 클라이언트-서버 프로토콜에서 세션은 세 가지 과정으로 이루어진다.

클라이언트가 (TCP) 연결을 수립한다.
클라이언트는 요청을 전송한 뒤 응답을 기다린다.
서버는 요청을 처리하고 데이터와 상태 코드를 돌려보낸다.
(HTTP/1.1부터는 이 과정 이후 연결을 닫지않는다. == 2, 3번 과정이 몇 번에 걸쳐 일어난다.)

이를 로그인 과정에 대입한다면, (연결 수립 전제)

클라이언트는 로그인을 요청한다. - 요청
WAS에서는 DB에 사용자 정보를 확인, 검증한다.
검증이 된 경우 세션저장소 에서 회원정보 세션을 생성하고 세션ID(키)를 발급한다.
세션ID를 쿠키에 담아 클라이언트로 전송한다. - 응답
이후 클라이언트가 서버에 재요청하게 될 때 세션 ID를 헤더쿠키에 넣어 데이터를 요청한다.
서버는 세션ID를 통해 클라이언트(회원정보)를 구별하여 알맞게 응답한다.

자바 SevletContext 내에서의 세션

서블릿 컨테이너(아파치 톰캣)가 시작되면, 해당 서블릿 컨테이너는 모든 웹 어플리케이션들을 배포하고 로드(load)한다.
웹 어플이케이션이 로드되면 서블릿 컨테이너는 ServletContext를 한번 생성하여, 서버의 메모리에 보관한다.
서블릿 컨테이너는 특정 포트번호(8080, 80)에서 HTTP 요청을 받는 웹 서버에 연결된다.
클라이언트가 요청을 보낼때 서블릿 컨테이너는 HTTPServletRequest, HTTPServletResponse 인스턴스를 생성,
필터 체인과 서블릿 인스턴스를 통과하도록 한다.
- chain.doFilter(request, response)를 호출하면 req, res가 다음 필터로 넘어가거나 서블릿에 도달
- 서블릿의 경우 service() 메서드가 호출되고 doXXX() 메서드를 호출한다.
클라이언트가 처음으로 웹앱에 방문하거나 request.getSession()을 통해 HttpSession 을 처음으로 가져오면,
서블릿 컨테이너는 새로운 HttpSession 객체를 생성하고 길고 유니크한 ID 를 생성 후 서버 메모리에 저장한다.
- 이는 session.getId()를 통해 가져올 수 있다.
서블릿 컨테이너는 JSESSIONID란 이름을 key로, 생성한 session ID를 value로 하여 HTTP 응답의 Set-Cookie header에 cookie로 설정합니다.
HTTP 쿠키 스펙에 따라 클라이언트(브라우저)는 쿠키가 유효한 동안 이 쿠키를 후속 요청 쿠키헤더로 보내야한다.
- 유효한 동안 : 고유 식별자가 만료되지 않은 세션을 참조하고 도메인 및 경로가 올바른 경우
- HttpSession의 기본값은 30분이며 web.xml 의 를 통해 설정가능
- 웹브라우저 인스턴스(탭,창)이 실행되는 동안 세션 쿠키가 활성화되고, 이를 닫으면 session 이 삭제된다.
서블릿 컨테이너는 들어오는 모든 HTTP 요청의 쿠키헤더에서 JSESSIONID 라는 이름의 쿠키가 있는지 확인하고,
그 값(길고 유니크한 session id)을 이용해 서버 메모리에 저장된 HttpSession을 가져온다.

참고(레퍼런스)

HTTP 쿠키 - MDN

톰캣 에서는 어떻게 JSESSIONID 를 만드는 것일까

세션(Session)이란? (What is a Session?)

서블릿의 인스턴스화, session, 멀티스레딩에 관련된 질문과 답변에 대한 번역

서블릿이 static resouces 들을 처리하지 못하는 경우(css, js, 이미지 로딩 실패)

대왕판다 — Mon, 13 Feb 2023 23:11:00 +0900

웹 게시판을 스프링 프레임워크 없이 서블릿만으로만 구현하는 도중 jsp 파일이 외부 css, js 파일들을 로딩하지 못하는 문제에 마주했다.

이 문제를 해결하기 위한 과정에서 새로운 사실들을 알게되었다.

우선 브라우저는 html, jsp 페이지들을 받아와 렌더하는 과정에서 <link rel='stylesheet'type="text/css" 같은 링크 태그를 마주한다.
별도의 새로운 Request를 서버에 요청한다.
이 과정에서 자바 서블릿 프로젝트의 경우 DefaultServlet이 이 정적 콘텐츠들을 처리한다.

문제는, 개발자가 자신이 만든 servlet.java 코드 속 WebServlet 애노테이션에 루트 url을 매핑해주었을 때 생긴다.

우선 서블릿 컨테이너와 웹 애플리케이션은 다음과 같은 url pattern 으로 연동이 가능하다.

'/' 로 시작하고 '/*' 으로 끝나는 path 매칭
"*.action" 과 같은 확장자 매칭
'/' 만 정의한 경우 디폴트 서블릿
그 외 동치 매칭

내 프로젝트에서 발생한 문제가 바로 위의 3번이었다.

나의 경우 프론트 컨트롤러 패턴으로, 디스패쳐 서블릿이 모든 리퀘스트를 받아 각 컨트롤러(커맨드) 메서드에 전달하는 방식을 택했다.

즉 한 서블릿에서 모든 리퀘스트를 받게 디자인했다.

처음엔 '/*'와 같이 모든 url들을 동적으로 매칭하려고 했다.

@WebServlet("/*")
public class FrontController extends HttpServlet {
  @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response){
    String url = request.getRequestURI();
            if (Objects.equals(url, "/")) {
                request.getRequestDispatcher("/home.jsp").forward(request, response);
            }
}

이렇게되면 디스패쳐 서블릿이 모든 정적 요청들을 다 받아들인다.

즉 정적 리소스들을 처리해주는 디폴트 서블릿으로 도달하지 못하고 위 프론트컨트롤러 자바클래스 내에서 처리를 시도한다.

(정적 리소스 처리가 불가하다)

이후 정적 리소스에 대한 리퀘스트까지 프론트컨트롤러 서블릿에서 처리한다는 것을 깨달은 후 다음과 같이 매핑했다.

@WebServlet("/")
public class FrontController extends HttpServlet {
  @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response){
    String url = request.getRequestURI();
            if (Objects.equals(url, "/")) {
                request.getRequestDispatcher("/home.jsp").forward(request, response);
            }
}

위처럼 매핑하면 FrontController 내에서 jsp 파일로 포워드하고 있으니 jsp 파일 자체는 서빙되지만, 거기에 포함된 js, css 파일들은 로드되지 않는다. 첫번째 경우처럼 모든 리퀘스트를 가로채서 생기는 경우는 아니다.

그럼 왜?

위 코드가 css, js 파일들을 로드하지 못하는 이유는 url value가 '/' 로 정의된 경우는 상술했듯 디폴트서블릿인데, 이는 org.apache.catalina.servlets 패키지 안에 존재하며 위치는 tomcat/lib/catalina.jar 에 묶여있다.

이 디폴트서블릿은 HTML, CSS, JS, IMG 같은 정적 리소스들을 처리한다.

즉 정적 리소스를 처리할 디폴트 서블릿을 개발자가 디스패쳐서블릿에 재정의함으로써 정적 파일들이 적절하게 로딩되지 않는것이다.

이제 원인을 알았으니 디폴트 서블릿을 재정의 하지않게 value 혹은 urlPattern을 변경해주면 CSS 가 잘 로딩된다.

@WebServlet(urlPatterns = {"/home", "/login", "/signup"} )
public class FrontController extends HttpServlet {
  @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response){
    String url = request.getRequestURI();
            if (Objects.equals(url, "/")) {
                request.getRequestDispatcher("/home.jsp").forward(request, response);
            }
}

tomcat/conf/web.xml 에 디폴트서블릿이 매핑되어있다.

myBatis 3) 쿼리에 파라미터에 객체 전달 시 프로퍼티 찾지 못할 때

대왕판다 — Fri, 10 Feb 2023 18:19:41 +0900

서블릿 / 스프링프레임워크 프로젝트를 오가며 바티스 쿼리 매퍼를 작성하다보니, 아래와 같은 사항들을 알게되어 정리해본다.

공식문서에서 해당 내용을 찾기 힘들었는데, 같은 문제로 애먹는분들에게 도움이 되면 좋겠다.

myBatis 3 매퍼 SQL 프라그먼트에 parameter 를 전달할때,

서블릿 프로젝트로 진행시, DAO에서 파라미터에 VO를 담아준다면?
- fragment에서 받을 때 Map.property 혹은 VO.property 라고 명시/사용 해줘야한다.
- AND title like CONCAT('%',#{searchCriteria.keyword},'%')

스프링 프레임워크 레포지토리에서 VO(DTO)를 파라미터로 넘겨줄 시 반대로 명시할 필요 없이 필드명만 입력해줘도 된다.
- AND title like CONCAT('%',#{keyword},'%')

사용 예시

0. 사전조건

아티클 매퍼 인터페이스와 파라미터로 전달될 VO 예시

// ArticleMapper.java

/**
 * 게시글 매퍼 인터페이스
 */
@Mapper
public interface ArticleMapper {

    /**
     * 조건에 맞는 게시글 리턴
     * @param board 게시판 종류. String substitute(${}) 를 사용하기 때문에 서비스 내에서 정해진 값만 전달
     * @return 게시글 리스트
     */
    public List<ArticleVO> selectSearchArticles(@Param("board") String board, @Param("dbLimitOffset") Integer dbLimitOffset, @Param("searchCriteria")
            SearchCriteriaVO searchCriteria);
}

// SearchCriteriaVO.class
public class SearchCriteriaVO {

  /**
         * 검색 키워드
         */
  private String keyword;

  /**
         * 게시판 ID
         */
  private Integer boardId;

  /**
         * 검색조건 시작날짜
         */
  private String startDate;

  /**
         * 검색조건 종료날짜
         */
  private String endDate;

  /**
         * 페지네이션값, 현재페이지
         */
  private Integer currentPage = 1;

  /**
         * dbLimit offset. preparedStatement 사용을 위해서는 currentPage 값으로 연산 불가능..
         */
  private Integer dbLimitOffset = 0;
}

1. 서블릿 프로젝트 예시

<!-- article_mapper.xml -->

<!-- 재사용을 위한 SQL 프라그먼트  -->
<sql id="searchCondition">
  <trim prefix="where (" suffix=")" prefixOverrides="AND">
    <if test="searchCriteria != null">
      AND title like CONCAT('%',#{searchCriteria.keyword},'%')
    </if>
    <if test="searchCriteria != null">
      AND created &gt;= #{searchCriteria.startDate}
      OR modified &gt;= #{searchCriteria.startDate}
    </if>
    <if test="searchCriteria != null">
      AND created &lt;= #{searchCriteria.endDate}
      OR modified &lt;= #{searchCriteria.endDate}
    </if>
  </trim>
</sql>

<!-- 실제 select 쿼리문  -->
<select id="selectSearchArticles" resultType="vo.ArticleVO">
  SELECT *
  FROM ${board}
  <include refid="searchCondition">
    <property name="searchCriteria" value="searchCriteria"/>
  </include>
  ORDER BY id DESC
</select>

위 SQL 프라그먼트 코드에서 확인할 수 있듯 #selectSearchArticles select 쿼리문에 전달 된 searchCriteira 객체의 프로퍼티를 searchCriteria.startDate와 같이 직접 명시해준 형태로 사용한다

2. 스프링 프레임워크 사용시

<!-- article_mapper.xml -->

<!-- 재사용을 위한 SQL 프라그먼트  -->
<sql id="searchCondition">
  <trim prefix="where (" suffix=")" prefixOverrides="AND">
    <if test="searchCriteria != null">
      AND title like CONCAT('%',#{keyword},'%')
    </if>
    <if test="searchCriteria != null">
      AND created &gt;= #{startDate}
      OR modified &gt;= #{startDate}
    </if>
    <if test="searchCriteria != null">
      AND created &lt;= #{endDate}
      OR modified &lt;= #{endDate}
    </if>
  </trim>
</sql>

파라미터로 전달 된 객체(map, VO) 속 프로퍼티와 SQL 쿼리 파라미터명을 알아서 매핑해주어 객체.프로퍼티 형태가 아닌 #{프로퍼티} 명으로만 사용해줘도된다!

myBatis 3 쿼리문에 parameter 문법 (${}, #{})

대왕판다 — Thu, 9 Feb 2023 18:01:40 +0900

마이바티스를 이용하면 SQL문에 파라미터를 쓸 수 있다.

myBatis 공식문서에 Parameters 섹션에 기술된 #{} 과 String substitution의 ${} 이 그것들이다. 예를들어,

  <select id="search" resultType="ArticleVO">
    SELECT *
    FROM   article
    WHERE  article_id = #{articleId}
  </select>

위와 같이 사용하거나 WHERE article_id = '${articleId}' 와 같이 사용하면 파라미터를 전달해줄 수 있다.

@Mapper
public interface ArticleMapper {

    public List<ArticleVO> selectSearchArticles(@Param("articleId") String articleId);
}

위 매퍼인터페이스의 selectSearchArticles 메서드를 통해 스트링 형태의 파라미터를 전달하는 것이다.

그렇다면 #{}, ${} 의 차이는 무엇일까?

#{} 을 사용하게 되면 PreparedStatement를 생성한다.

SELECT *
FROM   article
WHERE  article_id = ?

위와 같이 물음표에 파라미터가 바인딩되어 수행된다.

이렇게 파싱된 쿼리문은 캐싱되어 효율적이다.

작은 따옴표가 붙어 파싱되기에 SQL 인젝션으로부터 ${}에 비해 안전하다.

${}을 사용하면 값이 입력된 상태로 쿼리문이 수행된다.

따라서 파라미터가 변경될때마다 항상 쿼리문 파싱이 진행되며 성능상 불리하며, 작은 따옴표가 붙지 않기 때문에 스트링을 쿼리로 인식할 수 있어 SQL 인젝션에 취약하다.

그러나 요녀석은 sql문의 메타데이터, 즉 테이블, 컬럼명에 쓸 수 있다는 장점(?)이 있다.

그러나 결국 테이블, 컬럼명에 쓰는것도 아래와 같은 SQL 인젝션의 위험이 있지 않을까한다.

SELECT * FROM ${tableParam}

SELECT * FROM user_data; DROP TABLE users;

보안과 성능상 차이는 알고있었지만 SQL 파라미터(#{})가 테이블명에 사용되지 않아 새롭게 찾아본 내용인데, 안전한 쿼리문을 위해서는

1. 테이블명을 분리해 매퍼를 만들어주던지

2. 클라이언트가 테이블명을 임의로 줄 수 없도록 만들어야할 것 같다.

HTTP 통신의 이해

대왕판다 — Fri, 6 Jan 2023 00:05:03 +0900

HTTP 통신의 구조

HTTP(Hyper Text Transport Protocol, 하이퍼텍스트 전송 프로토콜)는 브라우저-서버가 통신할 수 있게 만들어주는 프로토콜(규약)이다. 주로 HTML 문서를 주고받는데 쓰인다.

일반적으로 전송 계층 프로토콜로 TCP, 네트워크 계층 프로토콜로 IP를 사용한다. TCP/IP 에서 IP 주소를 사용해 통신할 컴퓨터를 결정하고, 포트 번호를 사용해 해당 컴퓨터의 어떤 프로그램과 통신할지 결정한다.

HTTP에서는 클라이언트가 서버에 요청 메세지를 보내고, 서버는 클라이언트 요청(Request)에 대한 응답(Response을 반환한다. 연결 상태를 유지하지 않는 비연결성(stateless) 프로토콜이다.

Http Request는 클라이언트가 서버로 전달해 서버의 액션이 일어나게끔하는 메세지다.

Request 구조는

start Line,
Header Lines,
Body 로 이루어져있다.

시작라인은 요청이 시작되는 줄로

HTTP메서드(GET, POST 등)
요청 타겟, 즉 URL, 포트, 도메인
HTTP 버전이 들어간다.

헤더라인은..

대소문자 구분 없는 문자열 다음 콜론(' : ')이 붙으며, 그 뒤 값은 헤더에 따라 달라진다.
헤더는 또다시 General, Request, Entity 헤더로 나눌수 있다.

바디는..

리퀘스트 마지막 부분에 들어가며, 리소스를 가지고 오는 요청(GET, DELETE ...)에는 들어가지 않는다.
바디는 단일자원 / 다중 리소스 본문으로 나누어진다.

GET / HTTP/1.1 -> 리퀘스트 라인
// 리퀘스트헤더 시작
Host: www.naver.com:443 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36
// 리퀘스트헤더 종료
---공백 라인---
바디

Accept, Content-Type?

요청 헤더에는 Accept, content-type이 있다. Accept 헤더는 서버가 응답하기 위해 HTTP 메시지를 구성할때, 알맞은 형태로 제공해달라는 정보이고, Content-Type 헤더는 HTTP 메시지에 포함된 데이터가 어떤 형태로 구성되는지 서버에게 알려준다.

즉, 클라이언트에서 HTTP 요청을 할때 HTTP 메세지에 포함되는 형태에 따라 콘텐트타입 헤더를 제공해야하고, 서버로부터 특정 메세지 형태로 제공받고 싶다면 Accept 헤더에 알맞은 값을 지정해야 한다.

Accept 헤더에 주로 사용되는 헤더값

text/plain, text/html, text/css, text/javascript
application/json, application/xml, application/octet-stream

Content-Type

요청 데이터가 폼 데이터형태 일때 -> application/x-www-form-urlencoded
대용량 바이너리 데이터를 전송(파일첨부)할때 -> multipart/form-data
Content-Type: Application/octet-stream - 디폴트 미디어 타입은 운영체제 종종 실행파일, 다운로드를 의미
JSON 형태일때 -> application/json

HTTP Response는 요청에 대한 서버의 응답이다.

Response는

Status Line
Header
Body 로 구성된다.

Status Line에는..

프로토콜 버전
요청의 성공여부 - HTTP 상태코드(404, 200...)
짧은 상태 텍스트 (Not Found) 가 담겨있다.

Header에는

마찬가지로 HTTP 헤더 기본 구조를 따른다.
General Header, Request Header, Entity Header으로 나눌 수 있다.

Body

201, 204 와 같은 상태 코드를 가진 응답에는 보통 본문이 없다.
본문은 크게 세 종류로 나뉜다.
- 길이가 알려진 단일 파일로 구성된 단일-리소스 본문: 헤더 두개(Content-Type, Content-Lenght) 로 정의한다.
- 길이를 모르는 단일 파일로 구성된 단일-리소스 본문: Transfer-Encoding이 Chuncked 로 설정되어 있으며 파일은 청크로 나뉘어 인코딩 되어있다.
- 서로 다른 정보를 담고 있는 multipart로 이루어진 다중 리소스 본문

HTTP/1.1 200 // Status Line
// Response header 시작
cache-control: no-cache, no-store, must-revalidate
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Wed, 25 Aug 2021 02:42:02 GMT
p3p: CP="CAO DSP CURa ADMa TAIa PSAa OUR LAW STP PHY ONL UNI PUR FIN COM NAV INT DEM STA PRE"
pragma: no-cache
referrer-policy: unsafe-url
server: NWS
strict-transport-security: max-age=63072000; includeSubdomains
x-frame-options: DENY
x-xss-protection: 1; mode=block
// Response header 시작
-- 공백 라인--
바디

자바의 데이터 타입과 메모리 영역

대왕판다 — Tue, 3 Jan 2023 11:30:24 +0900

자바 원시타입, 참조타입(Primitive type, Reference type)

데이터 타입이란, 해당 데이터가 어떻게 메모리에 저장되고 프로그램에서 어떻게 처리되어야 하는지 명시적으로 알려주는 것이다.

자바에서는 크게 기본형타입과 참조형 타입이 있다.

원시 타입(Primitive Type)

논리형 boolean, 정수형 byte, int, short, long, 실수형 float, double, 문자형 char 이 있다.
8가지 기본형 타입을 미리 정의하여 제공한다.
기본값이 있기 때문에 Null이 존재하지 않는다. 기본형 타입에 Null을 넣고싶다면 래퍼 클래스를 활용한다.
실제 값을 저장하는 공간으로 스택 메모리에 저장된다.
담을수있는 크기를 벗어나면 컴파일 에러가 발생한다.

참조 타입(Reference Type)

배열 Array, 열거 Enumeration, 클래스 Class, 인터페이스 Interface가 이에 해당한다
기본형 타입을 제외한 타입들은 모두 참조형 타입이다.
값이 저장되어있는 곳의 주소값을 저장하는 공간으로 힙 메모리에 저장된다.
컴파일 시점에 에러가 없지만, 객체나 배열을 Null 값으로 받았을 경우 NullPointException이 발생한다.

스택(Stack)/힙(Heap) 영역

정적 메모리 스택(Stack) 영역

힙 영역에 생성된 객체(Object) 타입의 데이터 참조값이 할당된다.
원시타입의 데이터가 값과 함께 할당된다.- 참조값이 아닌 실제 값을 스택에 저장한다.
각 쓰레드는 자신만의 스택을 가진다.
객체 안 메서드 작업이 종료되면 할당된 메모리 공간은 반환되어 비어진다.
- 함수가 종료된 경우 내부에 선언된 지역변수들은 Stack에서 pop 되어 사라진다.

동적 메모리 힙(Heap) 영역

주로 긴 생명주기를 가지는 데이터들이 저장된다.
스택에 있는 데이터를 제외한 부분이라 보면 된다.
모든 Object 타입(Integer, Sring, ArrayList...) 등이 힙에 생성된다.
쓰레드 개수와 상관없이 힙 영역은 단 하남나 존재한다.
힙 영역에 있는 오브젝트들을 가리키는 레퍼런스 변수가 스택에 올라간다.

// 힙 메모리 예시를 위한 코드
public class Main {
   public static void main(String[] args) {
       int port = 4000;
       String host = "localhost";
  }
}

1. 위 클래스에서 port 는 원시타입(int)에 해당하기에 port = 4000 이 스택 영역에 등록된다.

2. host는 참조타입(String)으로 String 'localhost'는 힙 영역에 등록되고

String 은 Objec를 상속받아 구현된다. Object 타입은 최상위 부모클래스고, 다형성에 의해 Object 타입으로 레퍼런스가 가능하다.

3. 스택에서 host라는 이름으로 생성된 변수가 힙 영역의 String 'localhost'를 레퍼런스한다.

자바 - checked Exception, unchecked Exception

대왕판다 — Thu, 22 Dec 2022 11:26:00 +0900

Exception?

Java object 의 Throwable 클래스에는 Error / Exception 클래스 존재한다.
Exception은 java.lang.Exception 클래스와 그 서브클래스들이 쓰이는 상황이다.
이 예외들은 Checked Exception 과 Unchecked Exception 두 가지로 나눌 수 있다.
언체크 예외(unchecked exception)은 RuntimeException을 상속한 것
체크 예외는 그 이외의 예외들을 말한다.

Checked Exception 체크 예외

체크 예외는 상술했듯 RuntimeException을 상속하지 않는 예외들이다.
컴파일 단계에서 확인된다.
복구가 가능한 예외들이기에 반드시 catch, throws를 통해 예외를 처리하는 코드를 함께 작성해야한다.
ClassNotFoundException, IOException, SQLException 등이 해당한다.

Unchecked Exception 언체크 예외

런타임 예외라고도 부르는 언체크 예외들은 명시적인 예외 처리를 강제하지 않는다.
따라서 unchecked exception인 것이다.
실행 단계에서 확인된다.
이들은 프로그램에 오류가 있을때 발생하도록 의도된 것들이다.
NullPointerException, illegalArgumentException, ArrayIndexOutOfBoundsException 등이 해당한다.

일반적인 예외 처리 방법들

예외복구

예외 복구의 핵심은 예외가 발생하여도 Application은 정상적으로 동작한다는 것.

private void mayThrowExceptionLogic() {
    int maxTry = 20;
    while(maxTry --> 0) {
        try {
            // ???Exception 이 Throw 될 수 가능성이 있는 로직
        // 성공 시 return, 해당 메소드 종료
        return ;
        } catch(???Exception e) {
            // Error 로그 출력
        // 실패 로직 존재 시 원상 복구
        // 일정 시간 동안 대기
        } finally {
            // 작업에 사용한 Resource 반환 및 정리
        }
    }
    // 최대 횟수 실패시 예외 Throw
    throw new MaxTryFailedException();
}

예외 회피
- 자신이 예외를 처리하지 않고 호출한 쪽으로 throw 한다.
- 무분별하게 사용해선 안된다. 호출한 쪽에서 예외를 처리하는게 맞을 경우에만 사용한다.
- ```
private void mayThrowExceptionLogic() throws ???Exception {
    // 비즈니스 로직
}
```

<br>

예외전환

예외를 복구해 정상적 상태로 만들수없기 때문에 예외가 발생한 메소드 밖으로 던지는 방법이다.
적절한 예외로 전환해서 던진다.

try {
    // Exception 발생 가능 로직
}
catch(???Exception e) {
    // Exception 로깅
        // 복구 로직
        throw CustomSpecificExceptionJustLikeNotAllowedUserException("이런상황~");
}

/*
1번은 예외를 던지는 경우, 예외의 이름을 보고 어떤 문제가 있는 예외인지 알 수 있게 해준다. 
예를 들어, 사용자의 아이디가 겹치는 예외의 경우 일반적인 SQLException이 아니라, 
DuplicatedUserIDException으로 던지게 되면, 호출한 쪽에서는 단순히 SQLException이 아닌, 사용자의 아이디가 겹쳐서 발생하게된 예외인지를 인식할 수 있게 된다.
*/

/*
2번은 복구 가능한 예외가 아닌경우, RuntimeException으로 포장해서 던지는 방법이다.
이렇게 체크 예외를 언체크 예외인 RuntimeException으로 포장해서 던지는 경우, 
불필요한 throws 구문이 줄게 된다.
*/

중요한건?

편한 길을 선택하지말고 어떤 방법으로 예외처리를 할지 고민하고 방법을 선택해야한다.

Catch에 e.printStackTrace / throw 를 남발하지 말고,
로깅, 복구 로직 등을 추가한다.

Error?

에러는 시스템에 비정상적 상황이 발생했을 경우 발생한다.
메무리 부족이나 스택오버플로우처럼 복구할 수 없다.
이러한 에러는 개발자가 예측하기 쉽지않고, 처리할 수 있지도 않다.

[디자인패턴] 빌더 패턴

대왕판다 — Tue, 20 Dec 2022 12:50:01 +0900

1주차 과제로 JSP와 바닐라 자바만으로 게시판을 구현했다.

그 과정에서 아래와 같이 VO, DAO를 하드코딩으로 작성했고

Setter조차 사용하지 않고 무식하게 Post 객체를 생성하는 것에 지적을 받았다.

// PostVO.java

@Getter
@Setter
@AllArgsConstructor
public class Post {
    @NonNull
    private Integer post_id;
    @NonNull
    private String title;
    @NonNull
    private String writer;
    @NonNull
    private String password;
    @NonNull
    private String content;
    @NonNull
    private Integer category_id;
  
    private Integer view;
    private Date created_at;
    private Date modified_at;

}

// PostDAO.java
po = new Post(
  rs.getInt(1),
  rs.getString(2),
  rs.getString(3),
  rs.getString(4),
  rs.getInt(5),
  rs.getString(6),
  rs.getDate(7),
  rs.getDate(8),
  rs.getInt(9)
);

위와 같이 작성할 경우

코드 가독성이 떨어진다.
생성자 정의가 변경돼 새로운 인자가 추가될 경우, 모든 호출 코드를 변경해주어야 한다!

따라서

롬복의 builder를 활용해 다시 리팩토링해보라 하셨다.

Project Lombok은 @Builder를 다음과 같에 소개하고 있다.

@Builder 주석은 클래스에 대한 복잡한 작성기 API를 생성합니다.

@Builder를 사용하면 클래스를 다음과 같은 코드로 인스턴스화하는 데 필요한 코드를 자동으로 생성할 수 있습니다.

즉 @Builder 을 통해 빌더 패턴을 위한 보일러플레이트 코드를 일일이 작성하지 않아도 된다.

그렇다면 빌더 패턴은 무엇인가?

빌더 패턴(Builder pattern) 이란 복합 객체의 생성 과정과 표현 방법을 분리하여 동일한 생성 절차에서 서로 다른 표현 결과를 만들 수 있게 하는 패턴이다. (출처: 위키백과)
생성자에 인자가 많을 때 빌더 패턴을 고려하라고 한다.
빌터패턴을 활용하면 어떤 인자를 넣어줬는지 명확히 알 수 있고,
불필요한 필드(null)은 굳이 선언할 필요가 없다고 한다.

// 빌더 패턴을 활용한 PostVO.java (롬복 없이 보일러플레이트 코드로)
public static class Post {
    private final Integer postId;
    private final String title;
    private final String writer;
    private final String password;
    private final String content;
    private final Integer view;
    private final Date created_at;
    private final Date modified_at;
    private final Integer category_id;
  
    public static class Post(Builder builder){
      this.postId = builder.postId;
      this.title = builder.title;
      this.writer = builder.writer;
      this.password = builder.password;
      this.content = builder.content;
      this.view = builder.view;
      this.created_at = builder.created_at;
      this.modified_at = builder.modified_at;
      this.category_id = builder.category_id;
    }
  
    
    private static class Builder {
      private final Integer postId;
      private final String title;
      private final String writer;
      private final String password;
      private final String content;
      private final Integer category_id;
      private Integer view;
      private Date created_at;
      private Date modified_at;
      
      public Builder(Integer postId, String title, String writer, String password, String                         content, Integer category_id){
        if (postId == null || title == null || writer == null || password == null || content ==             null || category_id == null) {
          throw new IllegalArgumentException("... can not be null");
        }
        this.postId= postId;
        this.title = title;
        // ...
        // 중략
        // ...
        public Builder withView(Integer view){
          this.view = view;
          return this;
        }
        public Builder withCreatedAt(Integer view){
          this.CreatedAt = CreatedAt;
          return this;
        }
        public Builder withModifiedAt(Integer view){
          this.ModifiedAt = ModifiedAt;
          return this;
        }
        
    }
      
// 보일러플레이트 코드로 단순반복하기보다 롬복 @Builder 어노테이션을 사용하면 편리하다.

// 위 코드를 DAO에서 활용할 때
Post post = Post.builder()
                .title(rs.getString(2))
                .writer( rs.getString(3))
                .password(rs.getString(4))
                .content(rs.getString(6))
                .created_at(rs.getDate(6))
                .category_id(rs.getInt(9))
                .build();

// 각 필드에 들어가는 인자들도 변수에 담으면 더 잘 보이겠지만..
// 어떤 필드에 어떤 값이 들어가는지 이전보다 명확하게 확인할 수 있다!

자바 클래스패스(classpath)란?

대왕판다 — Mon, 19 Dec 2022 15:39:25 +0900

자바 클래스패스(classpath)란?

자바 언어로 작성된 클래스 파일은 자바가상머신(JVM)에서 실행된다.
JVM이 모든 폴더를 찾아보는 것은 비효율적이기에, 클래스파일을 찾을 수 있게 위치의 리스트들을 제공한다.
JVM이 프로그램을 실행하기 위해 클래스파일을 찾는데 기준이 되는 경로가 클래스패스다.
1. java 확장자로 끝나는 자바 소스코드를 컴파일한다.
2. 컴파일된 소스코드는 바이너리 형태의 .class 파일로 변환된다.
3. java runtime(jre)으로 .class 파일에 포함된 명령을 실행하려면, 먼저 이 파일을 찾을 수 있어야한다.
4. 이 때 클래스패스가 사용된다.
클래스패스를 지정하려면,
1. 환경변수 CLASSPATH를 사용하거나
2. java runtime(jre)에 -classpath 플래그를 사용한다. java -classpath ".;item" Main.java
클래스패스에는 다음이 포함된다
- Jar(Java Archive) files : 여러 자바 클래스 파일과 리소스 등 메타데이터를 하나의 파일로 모아 배포하기 위한 패키지 파일
- 패키지 최상단 경로

파이썬 알고리즘 인터뷰 23장 다이나믹 프로그래밍(DP)

대왕판다 — Fri, 11 Nov 2022 18:21:47 +0900

오늘 TIL 3줄 요약

최적 부분 구조 - 문제의 최적 해결방법이 부분 문제에 대한 최적 해결 방법으로 구성되는 경우의 문제
DP 알고리즘을 이용하면 최적 부분 구조를 갖고있는 문제를 풀이할 수 있다.
최적 부분 구조를 푸는 또 다른 알고리즘으로는 그리디 알고리즘이 있다. 그리디는 그 순간에 최적이라 생각하는 것을 선택하며 풀이
DP는 중복된 하위 문제들의 결과를 저장해뒀다가 풀이해 나간다.
중복되지 않은 문제들은 DP로 풀지 않고 병합정렬, 퀵 정렬 등을 이용해 분할정복으로 풀어나간다.
다익스트라 알고리즘은 최적 부분 구조, 중복된 하위 문제들, 탐욕 선택 속성을 모두 갖는 알고리즘이다.

TIL (Today I Learned) 날짜

2020 11. 12. FRI

오늘 읽은 범위

파이썬 알고리즘 인터뷰 - 23장 다이나믹 프로그래밍

책에서 기억하고 싶은 내용을 써보세요.

DP의 방법론
1. 메모이제이션, 하향식 접근 : 하위 문제에 대한 정답을 계산했는지 확인해가며 자연스럽게 재귀로 풀어나간다.
2. 타뷸레이션, 상향식 접근 : 하위 문제부터 풀어나가며 큰 문제의 정답을 만든다.
3. 두 방식을 피보나치 수열의 예제 코드로 비교하면 다음과 같다
```
# 상향식
def fib(n):
    dp[0] = 0
    dp[1] = 1
    for i in range(2, n+1):
        dp[i] = dp[i-1] + dp[i-2]
        return dp[n]
# 하향식
def fib(n):
    if n<=1:
        return n
    if dp[n]:
        return dp[n]
    dp[n] = fib(n-1) + fib(n-2)
    return dp[n]
```
DP 대표문제 2) 배낭문제의 파이썬 풀이

# pack 이라는 리스트 변수애 6 x 16 행렬 형태의 중간 결과 테이블이 생성된다.
cargo = [
    # 가격, 무게
    (4, 12),
    (2, 1),
    (10, 4),
    (1, 1),
    (2, 2),
]

def zero_one_knapsack(cargo):
    # 배낭의 총 용량
    capacity = 15
    pack = []
    for i in range(len(cargo)+1):
        pack.append([])
    for c in range(capacity+1):
        if i == 0 or c == 0:
            pack[i].append(0)
        elif cargo[i-1][1] <= c:
            pack[i].append(
                max(
                    cargo[i-1][0] + pack[i-1][c-cargo[i-1][1]],
                    pack[[i-1][c]]
                ))
        else:
            pack[i].append(pack[i-1][c])

        return pack[-1][-1]
```

<p></p>

원래 해시 테이블은 입력 순서가 유지되지 않는다. 파이썬 3.6 이하 버전에서는 딕셔너리 입력 순서가 유지되지 않는다. collections.OrderedDict 자료형을 이용해 이를 해결하자.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

DP는 유난히 문제를 못풀었을때의 허탈함이 큰 것 같다. 문제 해결의 실마리(점화식)의 중요성이 유독 크게 느껴진다.
그래도 PS 대회가 아니고서야 유형이 정해져있다는 사실이 위로가 된다.

파이썬 알고리즘 인터뷰 9, 10, 11장 - 스택, 큐, 데크, 우선순위 큐, 해시 테이블

대왕판다 — Mon, 7 Nov 2022 23:03:46 +0900

오늘 TIL 3줄 요약

스택은 거의 모든 APP을 만들때 사용되는 자료구조로서, 스택과 연관된 알고리즘을 제대로 이해하느냐 못 하느냐에 따라서 기본 알고리즘을 설계할 수 있느냐 없느냐가 결정되기도 한다.
FIFO로 처리되는 큐는 BFS, 캐시 등을 구현할 때 널리 사용된다. 데크나 우선순위 큐 같은 변형들도 유용하다. 성능을 위해 파이썬에서는 데크를 사용하는 것이 가장 좋다.
파이썬에서는 대부분의 우선순위 큐 풀이에 heaqpq 모듈을 사용한다.

TIL (Today I Learned) 날짜

d2022 10. 24. ~ 2022. 11.07

오늘 읽은 범위

파이썬 알고리즘 인터뷰 9장 스택, 큐, 10장 데크, 우선순위 큐, 11장 해시 테이블

책에서 기억하고 싶은 내용을 써보세요.

파이썬의 Global Interpreter Lock

 -  **하나의 스레드가 자원을 독점하는 형태로 실행**된다.


 -  번거로운 동시성 관리를 편하게 하기 위해, 스레드 세이프 하지 않은 CPython의 메모리 관리를 쉽게하기 위해


 -  GIL로 파이썬 객체에 대한 접근을 제한하는 형태로 설계했다.


 -  *스레드 세이프 - 멀티 스레드에도 안전한 프로그래밍 개념. 스레드 세이프 하지 않은 경우 1번 스레드 값이 2번 스레드에서 변경이 될 수 있어 문제가 발생한다.*


 -  CPython이 개발되던 1994년에는 CPU가 싱글코어로 GIL을 선택할 만했고, 디자인에 아무런 문제가 없었다. 하지만 지금처럼 멀티코어가 당연한 세상에서 이런 제약은 치명적이다. **파이썬이 왜 느린가?** 를 얘기할때 가장 자주 듣게 되는 요인!

해시테이블 또는 해시 맵은 키를 값에 매핑할 수 있는 구조인, 연관 배열 추상자료형을 구현하는 자료구조다.

해시테이블의 가장 큰 특징은 대부분의 연산이 분할 상환 분석에 따른 시간복잡도가 O(1)이라는 점이다. -> 데이터 양과 무관하게 빠른 성능 보장

충돌은 생각보다 쉽게 일어난다. 비둘기집 원리에 따라 생일이 같으려면 366명 이상이 모여야 할 것 같다. 그러나 실제로는 23명만 모여도 50%를 넘고, 57명이 모이면 99%를 넘어간다!

# 위의 생일 중복자 실험 코드
import random

TRAIALS = 100000
smae_birthdays = 0
# 10만 번 실험 진행
for _ in range(TRAIALS):
      birthdays= []
    # 23명이 모였을 때 생일이 같을 경우 same_birthdays +=1
    for _ in range(23):
          birthday = random.randint(1, 365)
        if birthday in birthdays:
              same_birthdays +=1
            break
        birthdays.append(biorthday)
print(f"{same_birthdays / TRIALS * 100}") 
# 50.708%

비둘기집 원리란 n개의 아이템을 m개의 컨테이너에 넣을 때, n>m 이라면 적어도 하나의 컨테이너에는 반드시 2개 이상의 아이템이 들어있다는 원리
아무리 좋은 해시함수라도 충돌은 일어난다. 충돌이 발생할 경우
1. 개별 체이닝으로 처리한다. 충돌 발생 시 연결 리스트로 연결하는 방식을 개별 체이닝이라고 한다.
2. 오픈 어드레싱 방식으로 해결한다. 이는 충돌 발생 시 탐사를 통해 빈 공간을 찾아나서는 방식이다.
로드팩터란 해시테이블에 저장된 데이터 개수 n을 버킷의 개수 k로 나눈 것이다. 이 로드팩터 비율에 따라 해시 함수를 재작성할지, 해시 테이블의 크기를 조정해야할지를 결정한다

리트코드 771번 보석과 돌의 한줄 풀이

# J = "aA",  S = "aAAbbbb"
def numJewelsINStones(self, J:str, S:str) -> int:
    return sum(s in J for s in S) 
  # == return sum([True, True, True, False, False, False, False])
  # == return 3

파이썬의 zip() 함수

zip()함수는 2개 이상 시퀀스를 짧은 길이 기준으로 일대응 대응하는 새로운 튜플 시퀀스를 만든다

a = [1,2,3,4,5]
b = [2,3,4,5]
c = [3,4,5]
zip(a,b) # <zip object at 0x105b6d0b0> (제너레이터)
list(zip(a,b)) # [(1,2), (2,3), (3,4), (4,5)]
list(zip(a,b,c)) # [(1,2,3), (2,3,4), (3,4,5)]

파이썬 아스테리스크 *

별표, 아스테리스크라 부르는 는 *시퀀스 언패킹 연산자**다.
C의 포인터 변수와 혼동될 수 있지만 파이썬에는 포인터 변수가 존재하지 않는다.
다음과 같이 활용될 수 있다.

fruits = ['lemon','pear','watermelon','tomato']
print(*fruits) # lemon pear watermelon tomato

위 zip()과 더불어 활용할 수 있다.

nums = [1,1,1,2,2,3] k = 2

collections.Counter(nums).most_common(k) # [(1,3), (2,2)]
# 언패킹을 하면
list(zip(*collections.Counter(numse).most_common(k))) # [(1,2), (3,2)]
# 언패킹을 하지 않으면
list(zip(collections.Counter(numse).most_common(k))) # [((1,3), (2,2),)]

함수의 파라미터가 되었을때는 반대로 패킹도 가능하다.

def f(*params):
      print(params)
f('a','b','c')     # ('a','b','c')

또 다른 예시. 변수의 할당도 묶어서 처리할 수 있다.
```
a, *b = [1,2,3,4]
a # 1
b #[2,3,4]
```

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

여전히 풀이 코드를 쉽게 읽어낼 순 없지만 조금씩 속도가 올라가는 듯하다. 화이팅.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

abstract data type(ADT) 아래 정의를 따르는 데이터 구조의 모델이다.
1. 데이터 컬렉션의 속성
2. 데이터에 대해 수행할 수 있는 작업
An ADT has two parts:
1. 사용자가 볼 수 있는 항목: 개념적 그림(객체, 구조가 어떻게 구성되었는지에 대한 사용자의 견해). 개념 작업(사용자가 ADT에 수행할 수 있는 작업)
2. 프라이빗 혹은 내부 파트로 구성되어 있습니다. 작업 구현(실제 구조가 어떻게 저장되는지)의 표현(실제 코드)

파이썬 heappush에서 추가 인자 삽입

# Tuple in heappush method args
heappush(h, value)
# Heap elements can be tuples. 
# This is useful for assigning comparison values (such as task priorities)
h = []
heappush(h, (5, 'write code'))
heappush(h, (7, 'release product'))
heappush(h, (1, 'write spec'))
heappush(h, (3, 'create tests'))
heappop(h)
(1, 'write spec')
# https://docs.python.org/3/library/heapq.html

# 책 274 페이지 'k개 정렬 리스트 병합' 문제 풀이 중
for lst in lists:
      heapq.heappush(heap, (lst.val, lst))
# TypeError: '<' not supported between instances of ListNOde and ListNode
# (중복된 값을 넣을 수 없다는 에러) 가 있을때 오직 추가 방지만을 위해 추가 인자를 삽입한다.
for lst in range(len(lists)):
      heapq.heappush(heap, (lists[i].val, i, lists[i]))

파이썬알고리즘인터뷰 8장 연결리스트

대왕판다 — Thu, 20 Oct 2022 19:26:45 +0900

오늘 TIL 3줄 요약

재귀, 연결리스트 활용 500배

TIL (Today I Learned) 날짜

2022.10.10~2022.10.14

오늘 읽은 범위

파이썬 알고리즘 인터뷰 8장 연결리스트

책에서 기억하고 싶은 내용을 써보세요.

런너 기법- 2칸씩 이동하는 포인터 fast와 느린 런너(1칸씩 이동) slow를 둔다. 빠른 런너가 먼저 리스트 끝에 도달하면, 느린 런너는 리스트의 중간 지점을 가리킨다. 이런 방식으로 중간 위치를 찾아내면, 값을 비교하거나 뒤집기를 시도하는 등 활용도가 많다.
아래 파이썬의 변수다중할당 부분

def isPalindrome(head):
  # 중략
  rev, rev.next, slow = slow, rev, slow.next
  # 위 다중할당은 아래와 같이 바꿔주면 가독성이 좋다.
  rev, rev.next = slow, rev
  slow = slow.next
  # 두줄로 나눈 위 할당으론 풀수 없다.
  #  rev, rev.next = slow, rev 구문에서 slow와 rev는 동일한 참조가 되어버린다.
  ```
  파이썬에는 원시타입이 존재하지 않고 모든 것이 객체이기에
  "=" 연산자를 사용해 할당하면 값을 할당하지 않고 불변 객체에 대한 참조를 할당하게 된다.
  이를 참고해 위 코드에 대입해 이해해보자
  ```
  # rev = 1, slow = 2->3 (연결리스트)일때
  rev, rev.next, slow = slow, rev, slow.next
  # 이 경우 rev = 2->3 , rev.next = 1, slow = 3 이 되고, rev.next = 1 이므로
  # 최종적으로 rev = 2->1, slow = 3이 된다.
  # 다중 할당으로 위 작업이 동시에 일어나기 때문에 한번의 트랜잭션으로 끝나게 된다.

  # 그러나
  rev, rev.next = slow, rev
  slow = slow.next
  # 위와 같이 두 줄 분기 코드로 나눠서 처리하는 경우
  # 첫줄 실행 결과 rev = 2->1 이 되고, 
  # 동일한 참조인 rev = slow 가 됐기 때문에 slow 또한 2->1이 되어버린다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

변수다중할당을 쓴 코드 1줄을 이해하기 위해서 파이썬의 = 연산자의 할당 방식, 다른 언어의 원시 타입 등을 찾아봐야했다.
다르게 말하면, 코드의 가독성을 높이고 효율적인 코드를 짜려면 언어들의 작동 방식, 특성을 잘 이해해야한다는 뜻이 아닐까
재귀는 어렵다. 함수 호출이 중첩되면서 내려가면 뒤죽박죽이 된다..
백준을 통해서는 연결리스트와 관련한 문제들을 접하지 못했는데, 책의 리트코드 예제를 통해 연결리스트, 노드를 활용하는 방법을 배울 수 있었다. 실제 연결리스트 구조의 데이터를 처리하려면 단순 노드들의 value만 스왑해주는 식으론 해결할 수 없기에 더 익숙해져야할듯하다.

헤로쿠 503에러 해결 (code=H10 desc=App crashed)

대왕판다 — Fri, 14 Oct 2022 16:07:32 +0900

노마드코더에서 youtube 클론코딩 강좌를 듣고 완성 후 heroku를 이용해 배포했었다.

그런데 얼마전 몽고db 아틀라스에서 장기 미활동으로 인해 클러스터를 정지시킨다는 예고 메일이 왔었다.

제때 Resume을 눌러줬더라면..

이후 클러스터는 자동으로 정지되었고 뒤늦게 배포 사이트를 들어가보니

이미 db가 꺼져버려 정상 접속이 되지 않았다.

위 안내 메세지대로 로그를 확인해보니

위처럼 503 에러를 뱉고있었다. 루트페이지와 파비콘 등 초기 페이지 전체가 정상적으로 처리되지 않는다.

뒤늦게 mongoDB에 접속해 다시 클러스터를 켜주고 헤로쿠 환경 변수 DB_URL을 새롭게 업데이트 해줬다.

(몽고디비 클러스터 0를 inactive -> active 해주는 과정에서 db 안 date들이 초기화되었기에 해주었다. 실제 url이 변경되는지 여부를 찾아보았으나 알 수 없었다.)

위와 같이 클러스터를 다시 active로 만들어준 후 헤로쿠 CLI `heroku restart` 명령어를 통해 헤로쿠 서버를 재시작했더니

TIP By default heroku restart will restart all of your dynos, but you can specify a specific dyno to restart (e.g. heroku ps:restart web.1), or all dynos of a specific type (e.g. heroku ps:restart web).

멀쩡하게 접속이 된다!

헤로쿠 코드 H10 해결을 위해 구글링해보면,

주로 express port를 heroku 환경변수(process.env.PORT)로 주지 않아 발생한 경우가 많았다.

그러나 내 경우는 port 환경 변수가 잘 설정되어 있었고,

몽고디비 클러스터가 정지되면서 DB와 연결이 끊어져 생긴 일이라 생각해 위와 같이 문제를 해결했다.

타입스크립트 angle brackets, 꺾쇠 괄호 <>

대왕판다 — Wed, 28 Sep 2022 19:31:24 +0900

타입스크립트의 angle brackets, 꺾쇠 괄호 <>

노마드코더 타입스크립트 10일차 과제는 abstract classes, generics 그리고 overloading 을 이용해 fake API를 만드는 과제다.

과제를 진행하는도중 타입스크립트의 다양한 타입 형태가 나를 헷갈리게 한다.

abstract class AbLocationStroage<T> {
    [key: string]: T
}

/// LocalStorage를 흉내낸 class
class LocalStorageAPI<T> {
    private stroage: AbLocationStroage<T> = {}
}
		setItem(key: string, value: T) {
        if (this.stroage[key]) {
            console.log(`${key} already exists.`)
        }
        else {
            this.stroage[key] = value
        }
    }

스토리지 생성자의 AbLocationStorage에 붙은 는 추상클래스의 제네릭이고,

setItem의 2번째 인자 타입의 T는 LocalAPI클래스의 제네릭을 받아온다..라고는 이해했지만,

제네릭 외에 tsx를 쓰다보면 꺾쇠가 자주 보여 혼동되기에 정리해보았다.

타입스크립트의 < SOMETHING > 문법은 다음과 같이 쓰인다.

Type Parameters
- 타입파라미터는 제네릭 형식 참조 또는 제네릭 함수 호출에서 바인딩되는 실제 유형을 나타냅니다
- 클래스, 인터페이스, 함수들의 콜시그니쳐와 정의에 쓰인다.
- ```
function heat<T>(foot:T): T {
          //^^^^^ Type parameter list
  return food;
}
class Pizza<T, E extends Cheese> {
           //^^^^^^^^^^^^^^^^^ Type parameter list
  toppingA:T;
  toppingB:E;
}
```

Type Arguments

제네릭 타입과 제네릭 함수를 레퍼런스한다.

var pizza: Pizza<Pepperoni, Mozzarella>; 
            //^^^^^^^^^^^^^^^^^^^^^^^ Type argument list
pizza = heat<{toppingA: Pepperonu, topingB: Mozzarella}(ingredients)
             //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Type argument list

Parameter는 함수 정의에 있는 변수

Argument는 함수에 실제로 전달되는 값이다.

Type Parameter는 제네릭에서 타입 선언에 대한 blue print, place holder.

Type Arguments는 제네릭을 parameterize하는데 사용되는 실제 타입이다.

Type Assertions
- TypeScript에서는 시스템이 추론 및 분석한 타입 내용을 우리가 원하는 대로 얼마든지 바꿀 수 있습니다. 이때 "타입 표명(type assertion)"이라 불리는 메커니즘이 사용됩니다. TypeScript의 타입 표명은 프로그래머가 컴파일러에게 내가 너보다 타입에 더 잘 알고 있고, 나의 주장에 대해 의심하지 말라고 하는 것과 같습니다.
- 공식문서에서 봤을때 가장 이해가 안되었던 부분. UnaryExpression(단항표현식) 으로 정의되고 사용된다. 주로 자바스크립트를 타입스크립트로 포팅할때 사용되는 경우가 많다고 한다.
- 타입스크립트에서 훅을 사용할때 타입에러를 뱉는경우 as 로 처리했던 경우를 떠올리면 될듯..
- ```
var foo = {};
foo.bar = 123; // 오류: 속성 'bar'가 `{}`에 존재하지 않음
foo.bas = 'hello'; // 오류: 속성 'bar'가 `{}`에 존재하지 않음

//// 위와 같은 상황에서
interface Foo {
    bar: number;
    bas: string;
}
/// 인터페이스를 추가해주고 
var foo = {} as Foo;
//// foo 의 타입을 as를 통해 Foo 표명해주면
foo.bar = 123;
foo.bas = 'hello'; // Ok.
```
- 위와 같은 방식엔 꺾쇠를 사용하지 않는다. 그렇다면 왜 이 항목에?
- 실제로는 꺾쇠를 사용한 syntax를 썼어야하는데, JSX에서 문법적으로 모호해지기에 as Foo 와 같이 사용하는 것이 권장된다고 한다.
- ```
// 본래 권장되던 방식
var foo: any;
var bar = <string> foo;  // 이제 bar의 타입은 "문자열"입니다
      
```
- ```
// 아래와 같은 JSX에서 component인지 type assertion인지 문법적으로 모호해진다.
var foo = <string>bar;
</string>
```
마지막으로 jsx 표현이다.
- documented 된 스펙은 아니다. <JSXElementName JSXAttributes(optional) /> 으로 쓴다.

공부를 하고나니 , 첫 코드에 쓰인 T들을 설명할수 있게 된다.

abstract class AbLocationStroage<T> {
  //                            ^^^  Type paramter
    [key: string]: T
  //              ^^^ Type -capture the one the user provides
}

class LocalStorageAPI<T> {
    //               ^^^  Type paramter
    private stroage: AbLocationStroage<T> = {}
  //                                  ^^^  Type paramter
}
		setItem(key: string, value: T) {
			//                       ^^^  Type
        }
    }

참고한 Stackoverflow

[타입스크립트딥다이브

Framer-motion 리액트 애니메이션 라이브러리

대왕판다 — Fri, 23 Sep 2022 20:03:34 +0900

Framer-motjon

리액트를 위한 오픈소스 프로덕션레디 모션 라이브러리

프로덕션 레디란?

사용자의 요구-사용성, 의존성, 가용성-을 충족 시키는 소프트웨어. 실제 운영 환경에서 구동이 가능한 코드.

설치

npm install framer-motion

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

Animations
- Motion 컴포넌트를 animate 속성을 통해 제어하며, 간단한 애니메이션은 animate props에서 직접 값을 설정할 수 있습니다.
- ```
<motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }}>
```

Gestures

제스쳐는 리액트 이벤트 시스템을 확장하여 사용하며 호버, 탭, 드래그를 지원합니다.

<motion.div
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 1.1 }}
  drag="x"
  dragConstraints={{ left: -100, right: 100 }}
/>

Variants

Variants를 통해 애니메이션의 하위 트리를 하나의 animate prop으로 표현할 수 있습니다.

const list = { hidden: { opacity: 0 } }
const item = { hidden: { x: -10, opacity: 0 } }

return (
  <motion.ul animate="hidden" variants={list}>
    <motion.li variants={item} />
    <motion.li variants={item} />
    <motion.li variants={item} />
  </motion.ul>
)

MotionValues
- MotionValues는 애니메이션 값의 상태와 속도를 추적합니다. 모든 모션 컴포넌트는 내부적으로 MotionValues를 사용하여 애니메이션 값의 상태와 속도를 추적합니다. 일반적으로 이들은 자동으로 생성됩니다.
- MotionValue는 React State가 아니기 때문에 Motion Value값이 바뀌어도 리랜더링이 일어나지 않는다.
- ```
import { motion, useMotionValue } from "framer-motion"

export function MyComponent() {
const x = useMotionValue(0)
const input = [-200, 0, 200]
const output = [0, 1, 0]
const opacity = useTransform(x, input, output)
// const potato = useTransform(x, [-200, 0, 200], [0, 1, 0])

return <motion.div drag="x" style={{ x, opacity }} />
// 요 컴포넌트의 움직임(X값)에 따라 opacity가 결정된다.
```
- useMotionValue() useMotionValue 후크로 MotionValues를 생성할 수 있습니다. useMotionValue에 전달된 값은 MotionValue의 초기 상태로 작동합니다.
- useTransform 훅을 통해 MotionValues를 연결합니다.
  useTransform()는 한 값 범위에서 다른 값 범위로 매핑하여 다른 MotionValue의 output을 변환하는 MotionValue를 만듭니다.
  x(Motion Value)값을 다른 output값으로 변환해줍니다.
- 반응형 웹이 잘 구성된 페이지에선 스크롤 경험도 재밌었는데 요 모션밸류에 useScroll()을 사용하면 스크롤에 따른 애니메이션이 구성가능하다. useScroll은 뷰포트가 스크롤될 때 업데이트되는 MotionValues를 리턴합니다.
- scrollX 수평 스크롤 픽셀 ex)500px
  
  scrollY 수직 스크롤 픽셀 ex)500px
  
  scrollXProgress 0~1사이값 수평스크롤
  
  scrollYProgress 0~1사이값 수직스크롤
```
export const MyComponent = () => {
const { scrollYProgress } = useViewportScroll()
return < motion.div style={{ scaleX: scrollYProgress }} />
}
```

scrollX	수평 스크롤 픽셀	ex)500px
scrollY	수직 스크롤 픽셀	ex)500px
scrollXProgress	0~1사이값 수평스크롤
scrollYProgress	0~1사이값 수직스크롤

Orchestration
- 기본적으로 모든 애니메이션은 동시에 시작됩니다. 그러나 variants를 사용하면 when, delayChldren, sttagerChildren과 같은 prop들을 사용할 수 있습니다.
- -delayChildren: 딜레이 시간 후에 하위 애니메이션이 시작됩니다.
- staggerChildren: 하위 컴포넌트의 애니메이션에 지속 시간(초)만큼 시차를 둘 수 있습니다. 예를 들어, staggerChildren이 0.01이면 첫 번째 자식은 0초, 두 번째 자식은 0.01초, 세 번째 자식은 0.02초 지연되는 식입니다.

[타입스크립트] CRA를 활용하지 않은 TS프로젝트 생성

대왕판다 — Fri, 26 Aug 2022 19:04:15 +0900

CRA를 사용하지 않고 타입스크립트 프로젝트를 생성하기

콘솔창에 npm init -y 를 입력, package.json 파일 생성
npm i -D typescript 입력, devDependency에 타입스크립트 추가

타입스크립트 설정 파일 tsconfig.json 생성

이 파일을 통해 vscode는 TS로 작업하는 것을 감지하고 자동완성을 제공한다.

{
  /* Directories for compiled JS */
  "include":[
    "src" 
  ],
  "compilerOptions":{
    "outDir" : "build",  /* Product will be located at */
    "target":"ES6", /* Product will be compiled in ES6 */
    "lib": ["ES6", "DOM"]
    /* Describe runtime env(platform) */
    /* then, TS will help you with auto-complete*/
    /* ex) documnet.querySelector */
  }
}

TSConfig reference

대부분은 definitelyTyped에서 찾지만, 공부를 위해서 직접 declaration을 한다면

type definition file(d.ts) 을 통해 타입 정의를 따로 해줄 경우.

/// myPackage.js
export function init(config) {
  return true;
}

export function exit(code) {
  return code + 1;
}

/// index.ts 에 이렇게 import 하려면
import { init, exit  } from "myPackage";

/// Could not find a declaration file for module 라는 에러가 뜬다.

/// myPackage.d.ts 파일을 생성
/// 아래와 같이 declaration을 선언한다.
interface Config {
  debug: boolean;
  url: string;
}
declare module "myPackage" {
  function init(config: Config): boolean;
  function exit(code: number): number;
}

프로젝트 안에 js, ts가 같이 존재하는 경우에는 tsconfig에 allowJs:true로 설정해준 후 JS파일을 import 하면 된다.

JS를 그대로 사용하되, 타입스크립트의 보호를 받으려면 JSDoc을 활용할 수 있다. 이 경우 주석을 활용해 type 보호를 받을 수 있다.

// JSDoc 코멘트를 활용해 타입보호를 받을수 있다.

// @ts-check
/**
 * initailizes the project
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {boolean}
 */
export function init(config) {
  return true;
}

/**
 * Exits the program
 * @param {number} code
 * @returns   
 */
export function exit(code) {
  return code + 1;
}

[북TIL] 파이썬 알고리즘 인터뷰 7장 배열

대왕판다 — Thu, 11 Aug 2022 14:27:32 +0900

오늘 TIL 3줄 요약

브루트포스, 투포인터는 생각보다 다양한 풀이에서 써먹을 수 있다.
그러나 두 방법보다 효율이 좋은 풀이도 존재한다.
파이썬은 쓰기 쉬운 언어다. 그러나 Go나 C(++)에 비해 성능이 부족한걸 기억하고 푼다.

TIL (Today I Learned) 날짜

2020 08.05. FRI. ~ 08.11. THU

오늘 읽은 범위

파이썬 알고리즘 인터뷰 7장 배열

책에서 기억하고 싶은 내용을 써보세요.

추상자료형(ADT)의 실제 구현 대부분은 배열 또는 연결 리스트를 기반으로 한다.
파이썬과 같은 동적 프로그래밍 언어는 정적 배열 자체를 제공하지 않는다.
동적 배열은 미리 초깃값을 작게 잡아 배열을 생성하고, 데이터가 추가되면서 꽉 채워지면 늘려주고 복사하는 식이다.

비교, 탐색을 쓰지 않는 두 수의 합 풀이 //

# 덧셈하여 타겟을 만들 수 있는 두 숫자 인덱스를 리턴하라
# 입력값
nums = [2,7,11,15], target = 9 
# 풀이
def twoSum(self, nums:list[int], target:int) -> list[int]:
    nums_map = {}
    # 키와 값을 딕셔너리로 바꿔서 저장
    for i, num in enumerate(nums):
        nums_map[num] = i
    
    # 타겟에서 첫 번째 수를 뺀 결과를 키로 조회
    for i, num in enumerate(nums):
        if target - num in nums_map and i != nums_map(target-num):
            return [i, nums_map[target-num]]
          
### 위 for 문을 합친다면 
def twoSum(self, nums:list[int], target:int) -> list[int]:
    nums_map = {}
    for i, num in enumerate(nums):
        if target - num in nums_map:
            return [nums_map[target-num], i]
        nums_map[num] = i
        # 타겟이 4,14,22 등과 같이 리스트 요소를 중복 사용하여 더할 수 있는 경우의 예외처리가 중요한데
				# target-num 값을 넘스맵과 비교하고 난 후 넘스맵에 붙이는 형식으로 이를 처리한 점이 인상적이다.

최댓값, 최솟값을 sys.maxsize 로 지정하는 부분이 신박했다. None으로 잡아둘 경우 비교할 수 없고 일반적으로 선언하는 0보다 안전하다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

알고리즘 문제 풀이와 구현을 보다보면, 그 연결 고리가 이해가 되지 않을때가 있다.
- 예를들면, 리트코드 42번 빗물 트래핑 문제에서 스택을 활용한 풀이가 있다.
- "변곡점을 만날 때마다 스택에서 하나씩 꺼내면서 이전과의 차이만큼 물 높이를 채워 나간다 " 가 풀이의 핵심인데, 구현을 보면
- distance 와 waters 를 각각 구해서 곱을 volume에 더해주는데 distance가 왜 구현됐는지 내 머리로는 아직 이해가 안되는 것이다.
예제 인풋값을 넣어보면 결국 답이 나옴을 이해하지만, 사실 이런 피상적인 이해로 문제가 주어졌을때 내가 풀어낼수 있을까 하는 의문이 있다.
간단한(그러나 생각해내기 어려운) 예외처리가 코드의 질을 높인다는 것을 다시한번 상기하게 되었다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

Python method 속의 self 역할?
[파이썬에는] 메서드에서 객체의 멤버를 참조하는 약어가 없습니다. 메서드 함수는 호출에 의해 암시적으로 제공되는 객체를 나타내는 명시적 첫 번째 인수로 선언됩니다.

종종 메서드의 첫 번째 인수를 self라고 합니다. 이것은 관례에 불과합니다. self라는 이름은 파이썬에 전혀 특별한 의미가 없습니다. 그러나 규칙을 따르지 않으면 가독성이 떨어질 수 있습니다.
```
'''
Let's say you have a class ClassA which contains a method methodA defined as:
'''
def methodA(self, arg1, arg2):
    # do something

'''
and ObjectA is an instance of this class.

Now when 
# ObjectA.methodA(arg1, arg2) # is called, 
python internally converts it for you as:
'''
ClassA.methodA(ObjectA, arg1, arg2)

# The SELF variable refers to the object ITSELF.
```

[타입스크립트] Call Signatures

대왕판다 — Tue, 9 Aug 2022 23:12:48 +0900

TS의 다양한 함수 표현 중 Call signiture에 대해 찾아보던 중, TS핸드북의 예제 코드가 이해되지 않았다.

스택오버플로우의 친절한 설명덕에 이해할 수 있어 정리해본다.

Call Signitures

타입스크립트에서, interface로 function을 정의하는 것은 콜 시그니쳐를 추가해주면 가능해진다.
```
type Add = (a:number, b:number) => number;

const add:Add = (a,b) => a+b
```
프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있습니다.

Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정합니다.

// JS에서는 fucntion도 object이기 때문에 function 자체가 
// callable해 함수에 추가 property를 가질 수 있다.

const func = () => {
  return 123;
}
func.a = 'a';
console.log(func.a)
console.log(func())

// 그러나 타입스크립트의 경우에는 미리 선언된 파라미터, 반환 타입 외
// 새로운 property가 호출될 수 없다.
// 그러나 콜시그니쳐를 이용하면 가능하다.

type DescribableFunction = {
    description: string;
    (someArg: number): boolean;
};

function doSomething(fn: DescribableFunction) {
    console.log(fn.description + " returned " + fn(6));
}
// 여기까지가 TS 핸드북 예제
// 위 콜 시그니쳐를 이해하기 위해 greaterThanTen 함수를 정의해본다
function greaterThanTen(someArg: number) {
    return someArg > 10;
}

// DescribableFunction 콜 시그니쳐를 통해 아래 호출이 가능하다.
greaterThanTen.description = "greaterThanTen";
doSomething(greaterThanTen); // "greaterThanTen returned false"

[네트워크] IP 주소와 서브네팅

대왕판다 — Fri, 29 Jul 2022 10:52:03 +0900

IP 주소란?

인터넷 주소로 전 세계 주소를 IANA에서 대륙별로 할당, 관리한다.
네트워크 장비 식별을 위해 고유한 IP 주소 사용
32bit로 이루어진 주소 (약 43억개)
- bit는 2진수 한자리(0 or 1)
- 2진수 8자리를 묶어서 1Byte 혹은 1옥텟이라 부름
- 1옥텟은 8비트로 2^8이 되니 32bit인 IP주소 개수는 2^32으로 약 43억개
- 따라서 0.0.0.0 ~ 255.255.255.255(호스트ID) 까지 사용!
실제 네트워크 장비는 IP주소로 2진수를 사용하지만 사람이 볼때는 10진수로 변환해 표기(Dotted Decimal Notation)

IP 주소 Class

A 클래스
- 처음 한 비트는 항상 0 -> 따라서 십진수로 1~127
- 그러나 첫 옥텟이 0과 127로 시작하는 주소는 예약이 되어있어 1~126까지가 클래스A
- 첫 8비트를 네트워크 ID로 사용하기 때문에 호스트 ID는 2^24로 약 1670만개의 개수를 가진다.
B 클래스
- 처음 두 비트는 항상 10으로 고정(128~191)
- 두 옥텟을 네트워크 ID로 사용하기에 호스트 ID 개수는 2^16 = 65536개
C 클래스
- 처음 세 비트는 110(192~223)
- 첫 세 옥텟을 네트워크 ID로 사용하기에 호스트 ID 개수는 256개

A, B, C 는 가용한 호스트 ID 개수를 통해 알 수 있듯 각각 대, 중, 소형 네트워크에 적합하다.

D는 멀티캐스트 통신을 위해, E는 연구용을 위해 사용되는 주소다.

호스트 ID가 모두 0인 주소는 네트워크를 나타내는 네트워크 주소이고, 모두 1인 주소는 네트워크의 모든 호스트로 데이터를 전달하기 위한 브로드캐스트 주소다. (사용할 수 없다.)

서브넷 마스크란

IP주소에서 네트워크 ID와 호스트ID를 구분하기 위해 사용
32 비트로 구성되어 있으며 표기법 또한 IP주소와 동일
네트워크 ID는 1로, 호스트 ID는 0으로 표기
- A 클래스 - 255.0.0.0
- B 클래스 - 255.255.0.0
- C클래스 - 255.255.255.0
Prefix를 통해 다른 방법으로 표현할 수 있다.
- IP 주소 뒤에 네트워크 ID 비트 개수를 나타내면 된다.
- 클래스 A의 경우 10.10.10.10 / 8 로 표기

Subneting

IP 주소를 효율적으로 나누어 사용하기 위한 방법
50개의 호스트 ID가 필요한 네트워크를 구성해야할 때, C 클래스를 이용해 64개씩 4개의 호스트 ID를 구성한다면 버려지는 IP주소를 최대한 줄여 다른 네트워크에 활용할 수 있다.
이때 호스트 ID의 왼쪽 부터 서브넷 구분 비트를 할당해 서브넷팅한다.
예를 들어 192.168.10.0 / 24 의 C 클래스 IP 주소를 절반으로 나누려 한다면, 다음과 같다.
1. 먼저 2진수로 풀어쓴다.
2. 호스트 ID의 비트 하나만 서브넷 구분 비트로 할당한다.
3. 0~127 // 128~255 두 개의 그룹으로 나누어진다. 중요한 것은 서브넷 구분비트까지 네트워크 ID에 들어가는데, 이에 따라 0과 128은 네트워크 주소 /. 127, 255 는 브로드캐스트 주소가 된다 직접 이진수로 표현해보면 쉽게 이해된다.
4. 따라서 실제 장비에 할당 가능한 주소는 1~126, 129~254까지만 가능하다.
5. 또 서브넷 마스크를 표현할 때 서브넷 구분 비트까지 표현해주어야 한다. 위의 경우는 255.255.255.128 프리픽스로는 / 25

C 클래스 주소를 64개씩 4개로 서브네팅하려면 서브넷 구분 비트를 2개를 주면 된다. 주의할 점은 네트워크 주소, 브로드캐스트 주소와 S/M 표기일 것이다.
서브네팅을 이해하고 있다면, 주소 나누기와 호스트 ID 범위 구하기가 가능해야 할 것!

[북TIL] 파이썬알고리즘인터뷰 6. 문자열 조작

대왕판다 — Wed, 27 Jul 2022 19:08:38 +0900

오늘 TIL 3줄 요약

깔끔하고 빠른 코드를 위해선 리스트 컴프리헨션, 람다 표현식, 정규식을 잘 다룰줄 알아야 함.
python의 유용한 메서드는 반드시 기억
같은 기능을 필요로 할때, 처리시간이 빠른 방법을 택하려면 결국 메서드 실행 시간을 알아야함.
- ex- 문자열 슬라이싱 > reverse() > reversed()+join() > for 반복 > while반복 > 재귀(슬라이싱의54배)

TIL (Today I Learned) 날짜

2022.07.21. THU ~ 07.27 WED

오늘 읽은 범위

파이썬알고리즘인터뷰 - 6장 문자열조작

책에서 기억하고 싶은 내용을 써보세요.

isalnum() isdigit():숫자 여부인지 판별해준다. 실수나 음수는 판단불가해서 False 반환

a = "1"
b = "english"
a.isalnum() # True
b.isalnum() # True
a.isdigit() # True
b.isdigit() # False

c = 1
# c는 int 형태이기에 아래 에러를 띄우면서 메소드 사용이 불가하다.
# AtttributeError:'int' object has no attribute '~'
c.isalnum() 
c.isdigit()

sort와 람다의 활용

s = ['2 A', '1 B', '4 C', '1 A']
# sort()를 쓴다면 앞의 각 요소의 맨 앞 문자로 정렬하기에 ['1 A', '1 B', '2 A', '4 C']로 정렬된다.
# 뒤의 알파벳을 우선으로 정렬하려면 람다 표현식을 쓰면된다.
s.sort(key=lambda x: (x.split()[1], x.split()[0])) 
# 결과 - ['1 A', '2 A', '1 B', '4 C']

# 람다 표현식 없이 sort()로 함수를 선언한다면
def func(x):
    return x.split()[1], x.split()[0]
s.sort(key=func)

퀵정렬은 데이터에 따라 편차가 크다. 병합은 안정적 성능을 보인다.
파이썬의 sorted() 에서 쓰이는 팀소트는 '데이터는 대부분 이미 정리되어 있을 것이다'라는 가정에서 출발, 삽입과 병합 정렬을 휴리스틱하게 조합해 사용하는 정렬 알고리즘이다.

시간복잡도 최선 평균 최악

퀵 n log n n log n n^2
병합 n log n n log n n log n
팀소트 n n log n n log n

시간복잡도	최선	평균	최악
퀵	n log n	n log n	n^2
병합	n log n	n log n	n log n
팀소트	n	n log n	n log n

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

그룹 애너그램의 풀이 원리는 정렬된 값이 같음을 이용하는 것이다. 백준을 풀 때(특히 하노이탑)도 느꼈지만, 결국 문제를 풀어낼 수 있는 핵심 원리를 파악해야 구현도 가능하다는 것이다. 물론 브루트포스와 같이 원리라 부를만한 풀이가 없는 문제들도 잘 파악해야 하겠지만..

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

151페이지 <가장 흔한 단어> 의 이해가 어려웠다. 이해한 과정을 기록해본다.

paragraph = "Bob hit a ball, the hit BALL flew far after it was hit"
banned = ["hit"]

def mostCommonWord(self, paragraph: str, banned: List[str]) -> str:
  	word_f = [word for word in re.sub(r'[^\w]',' ', paragraph)]
    # 정규식에 따라 단어 문자 아닌 문자 공백 치환
    # p = re.sub(r'[^\w]',' ', paragraph) 일 경우
    # 'Bob hit a ball  the hit BALL flew far after it was hit' 을 리턴함
    # 따라서 list는 아래와 같다.
    # ['B', 'o', 'b', ' ', 'h', 'i', 't', ' ', 'a', ' ', 'b', 'a', 'l', 'l', ' ',...]
    
    word_s = [word for word in re.sub(r'[^\w]',' ', paragraph).lower()]
	 	# word_f 요소 중 대문자->소문자로 변환
		# ['b', 'o', 'b', ' ', 'h', 'i', 't', ' ', 'a', ...]
              
    word_t = [word for word in re.sub(r'[^\w]',' ', paragraph).lower().split()]
    # re.sub(r'[^\w]',' ', paragraph).lower().split() 의 반환값은
    # ['bob', 'hit', 'a', 'ball', 'the', 'hit', 'ball', 'flew', 'far', 'after', 'it', 'was', 'hit']
    # 따라서 word for ~ 의 iterator가 연산 가능하다.

    word = [word for word in re.sub(r'[^\w]',' ', paragraph).lower().split()
               if word not in banned]
    # 바로 위 리스트에서 banned 의 요소가 제외된다.
    # ['bob', 'a', 'ball', 'the', 'ball', 'flew', 'far', 'after', 'it', 'was']
    
    counts = collections.Counter(words)
    # Counter({'hit': 3, 'ball': 2, 'bob': 1, 'a': 1, 'the': 1, 'flew': 1, 'far': 1, 'after': 1, 'it': 1, 'was': 1}) 객체를 반환
    return counts.most_common(1)[0][0] # collection.most_common(1)은 [('hit', 3)]를 반환)

파이썬 알고리즘 인터뷰 5장 리스트, 딕셔너리

대왕판다 — Wed, 20 Jul 2022 14:55:05 +0900

오늘 TIL 3줄 요약

파이썬의 자료형은 모두 객체
다양한 모듈들, 특히 딕셔너리와 관련된 특수 형태의 컨테이너 자료형들을 활용하자
defaultdict, Counter, OrderedDict

TIL (Today I Learned) 날짜

2022.07.20. WED

오늘 읽은 범위

파이썬 알고리즘 인터뷰 5장 리스트, 딕셔너리

책에서 기억하고 싶은 내용을 써보세요.

파이썬은 모든 것이 객체다.리스트 또한 객체에 대한 포인터목록을 관리하는 형태로 구현되어 있다.

// CPython 에서 리스트는 요소에 대한 포인터목록을 갖고 있는 구조체로 선언되어 있다.
typeof struct {
    PyObject_VAR_HEAD
    PyObject **ob_item;
    // 포인트 목록으로 사이즈를 조절하는 형태로 리스트요소 추가가 구현된다.
    Py_ssize_t allocated;
}  pyListObject;

이로인해 파이썬의 리스트는 배열과 연결 리스트를 합친듯한 강력한 기능을 제공할 수 있다.(그 과정에서 속도는 희생된다)
파이썬의 딕셔너리는 숫자, 문자, 집합까지 불변 객체를 모두 키로 사용한다. 이 과정을 해싱이라고 하며, 해시 테이블을 이용해 자료를 저장한다. 입력과 조회는 O(1)에 가능하다.(최악의 경우에는 O(n))
3.7버전부터는 Dict의 입력순서가 유지되나, 3.6이하에서는 collections.OrderedDict()라는 별도 자료형을 이용해야 유지된다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

당연하지만 다양한 내장 모듈들을 이해하고 문제풀이에 적용하는 것이 중요할듯..

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

CPython?
- 파이썬 프로그래밍언어의 참조 구현체. 내부가 C 언어로 구현된 파이썬이며 코드는 여기에서 확인가능.
- 이름에서 추측할 수 있듯 CPython 외에도 JVM에서 실행할 수 있는 Jython도 있으며 python으로 구현한 pypy도 있다고한다.

[파이썬] 백준 2798번 블랙잭

대왕판다 — Tue, 19 Jul 2022 11:48:39 +0900

백준 2987번 블랙잭

브루트포스 문제

처음 내 접근 방법은

리스트 내 요소를 3개씩 뽑고 새로운 리스트에 담기.
그 과정에서 목표숫자가 나오면 즉시 return하며 종료
나오지 않을 경우 새롭게 만들어진 리스트에서 이진탐색으로 값 출력하는 방법으로 풀었었다.

코드로하면 아래와 같다.

import sys
# 이진탐색을 위한 bisect
from bisect import bisect_left, bisect_right

cards, goal = map(int, sys.stdin.readline().split())
numbers = list(map(int, sys.stdin.readline().split()))
# 더해진 값들을 담아줄 리스트
sum_list = []

def blackjack(goal, numbers):
    global sum_list
    # 리스트 내 포인터역할
    first = 0
    second = first+1
    third = first+2
    while True:
        # 최소 3개의 조합이 나와야하므로 마지막 3개의 합이 마지막 경우의 수
        # first 포인터가 인덱스 [-3]에 위치하면 마지막 합계 더하고 종료
        if first == len(numbers)-3:
            sum_value = numbers[first] + numbers[second] + numbers[third]
            sum_list.append(sum_value)
            break
        # third 인덱스가 리스트 마지막 값까지 가도록
        if third < len(numbers):
            sum_value = numbers[first] + numbers[second] + numbers[third]
            sum_list.append(sum_value)
            third += 1
        else:
            # third가 길이를 초과할 경우 second 증가
            if second < len(numbers)-1:
                second += 1
                third = second + 1
            else:
                # second도 초과할 경우 first 증가
                first += 1
                second = first+1
                third = first+2
    # 목표값이 sum_list에 있다면 바로 출력
    if goal in sum_list:
        print(goal)
    else:
        # 없을 경우 이진탐색으로 찾아주기
        sum_list = sorted(sum_list)
        try:
            target = bisect_left(sum_list, goal)-1
            left = sum_list[target]
            right = sum_list[target+1]
            print(left if target-left < right-target else right)
        except:
            print(sum_list[-1])


blackjack(goal, numbers)

이 문제 풀려고 이진탐색까지 쓰는 풀이는 나밖에 없지않을까..

보다 효율적인 방법이 있을것같아, 다른 사람의 풀이를 참고했다.

간단하게 3중 for문과 max()를 통해 해결할 수 있었다.

import sys

numbers, N = map(int, sys.stdin.readline().split())
cards = list(map(int, sys.stdin.readline().split()))
length = len(cards)

def blackjack():
    bigger = 0
    for i in range(length-2):
        for j in range(i+1, length-1):
            # 여기서 k 값을 i+2로 시작하게 될 경우, 같은 요소로 더하는 경우가 발생해 실패한다.
            for k in range(j+1, length):
                total = cards[i]+cards[j]+cards[k]
                if total > N:
                    continue
                else:
                    bigger = max(total, bigger)
    print(bigger)


blackjack()

두 풀이 중 위는 메모리: 40300 KB, 시간: 160 ms

아래는 메모리: 30840 KB, 시간: 120 ms 만큼 소요된다.

보기도 좋고 풀이하기도 편하고 성능도 좋다. 위의 풀이를 사용할 이유가 없다.

하노이탑 쌓기 문제에 스택을 사용하려했던 것도 그렇고, 필요 이상의 리스트 사용을 줄여야겠다.

데이터베이스의 병행제어기법

대왕판다 — Sat, 16 Jul 2022 12:05:49 +0900

데이터베이스의 병행제어

병행제어란 ?
- 여러개의 트랜잭션이 동시에 수행될 때 DB의 일관성을 파괴하지 않도록 트랜잭션간의 상호작용을 제어하는 것
- 병행(concurrency)는 매우 빠르게 여러 트랜잭션 사이를 이동하면서 조금씩 처리를 수행하는 방식
병행 제어의 목적은 일관성 외에도,
- DB 공유도 최대화, 시스템 활용도 최대화, 사용자 응답 시간 최소화 등이 있다.
병행 제어를 하지 않을 경우 트랜재션들이 동시에 DB에 접근하며 문제가 생긴다.

병행제어에 실패한다면

갱신 분실 (Lost Update)
- 같은 데이터에 둘 이상의 트랜잭션이 동시에 갱신할 때, 갱신 결과의 일부가 없어지는 것.
- 동일한 데이터 X에 값을 더하는 두 트랜잭션이 있을 때, 후행하는 트랜잭션은 선행 트랜잭션 값이 더해지기 전의 값을 받아오기에 두 트랜잭션이 올바르게 반영되지 않는 상황.
모순성 (Inconsistency)
- 하나의 트랜잭션이 여러 데이터 갱신을 수행할 때, 일관성 없는 상태의 DB에서 데이터를 가져와 데이터에 불일치가 발생하는 현상
- 갱신 분실과 비슷하지만, 한 트랜잭션이 여러 값을 연산하게 될 경우 각 값이 참조하는 시기가 모두 달라 데이터의 불일치가 발생
- 트랜잭션 1이 X, Y 값을 X->Y 값 순서로 갱신할 때 그 사이에 X, Y값을 갱신하는 또 다른트랜잭션 2가 개입해 트랜잭션 1의 일관성이 깨지는 상황
연쇄 복귀(Cascading Rollback)
- 병행 수행되던 둘 이상의 트랜잭션 중, 하나의 트랜잭션만 실패했지만 두 트랜잭션 모두 복귀되는 현상
비완료 의존성 (Uncommitted Dependency)
- 하나의 트랜잭션 수행이 실패 후 회복하기 전에 다른 트랜잭션이 실패한 결과를 참조

병행제어 기법

로킹
타임스탬프
- 데이터에 접근하는 시간을 미리 정해 시간 순으로 접근.
- 직렬 가능성을 보장하지만, 연쇄 복귀를 초래할 수 있음.
낙관적 병행제어
- 트랜잭션 종료 시 일괄적으로 검사
- 트랜잭션을 위해 유지되는 로컬 사본에 대해서만 갱신
다중 버전 병행제어
- 여러 버전 값을 유지하며 조회 성능을 최대한 유지하기 위한 방법
- 트랜잭션이 충돌할 경우 대기가 아니라 롤백함으로써 연쇄복귀초래 가능성O

로킹(Locking)

로킹이란?

병행 수행되는 트랜잭션들이 동일한 데이터에 동시에 접근하지 못하게 하여 직렬 가능성을 보장한다.
lock, unlock 연산을 이용해 제어
로킹되는 단위가 커지면 트랜잭션 데이터 단위(로크)가 커져 수가 줄어들고 제어기법이 간단해져 병행성이 감소
반대로 로킹 단위가 작아져 병행성이 증가하지만 제어기법이 까다로워진다.

직렬 가능성 ? 트랜잭션들이 병행 수행되더라도 순차적으로 수행된 것과 동일한 DB 일관성을 보장하는 것

데드락 ? 2개 이상의 트랜잭션이 서로 상대방이 보유하고 있는 로크를 요청하면서 기다리고 있는 상태

인터페이스 모듈 연계 방식 EAI와 ESB

대왕판다 — Thu, 14 Jul 2022 20:37:30 +0900

시스템 통합의 문제

메인 프레임에서 유닉스 시스템으로 내려오면서 시스템들은 업무 단위로 분리되기 시작했다.

이렇게 나눠진 시스템 사이에는 통신이 필요했고, 시스템이 커지면서 시스템간 P2P로 직접 통신하는 구조는 한계에 이르렀다.

이 문제를 해결하기 위해 등장한 솔루션이 EAI, ESB다.

시스템간 통신, 통합

내,외부 모듈 연계 방법에 따라 나뉜다.

모듈 연계란 내/외부 모듈 간 데이터 교환을 위해 관계를 설정하는 것
시스템에서 인터페이스를 위해 외부 및 내부 모듈을 연계하는 대표적 방법에는 EAI, ESB방식이 있다.
두 방식의 큰 차이는 구성 방식이 중앙집중형 vs 버스형태

EAI 방식

중앙의 EAI가 허브역할을 하면서, 모든 통신이 EAI를 거친다. 이 EAI에는 어댑터들이 붙어있다.
어댑터를 통해 표준화 되지 않은 이기종 시스템들이 연동이 가능해졌다.
중앙집중식, 기업 내, 시스템 연계, 시스템 간 확장성 높이기 위해..

ESB 방식

이기종간 통합이 많아지고 시스템이 분리되다보니 이를 표준화하려했고, 이것이 SOA(서비스 지향 아키텍쳐)이다.
통신이 표준화됐기에, 별도의 어댑터들이 필요 없어졌고, 대신 서비스 버스라는 통신 백본을 이용해 통신을 하는 ESB가 등장했다.
- 백본(backbone) 또는 백본망(backbone network, 문화어: 중추망)은 다양한 네트워크를 상호 연결하는 컴퓨터 네트워크의 일부로서, 각기 다른 LAN이나 부분망 간에 정보를 교환하기 위한 경로를 제공한다.
이 서비스 버스를 중심으로 각각 프로토콜이 호환할 수 있도록 느슨한 결합 방식으로 지원하는 미들웨어
EAI + SOA (서비스지향아키텍쳐) 방식으로 이해하면 될 듯하다.

참고 - https://bcho.tistory.com/1292 조대협님 블로그

[북TIL] 파이썬 알고리즘 인터뷰 1~3장

대왕판다 — Thu, 14 Jul 2022 19:51:56 +0900

오늘 TIL 3줄 요약

파이썬이 왜 코테에 유리한가(코드잼, 카카오 공채 응시 언어별 통계로 확인)
파이썬과 다른 언어들의 반복문, 구조체, 클래스 구현
구조체, 동적 타이핑 언어, 제네릭 프로그래밍이란?
파이썬의 인덴트는 공백 4칸(PEP 8)
좋은 코드는 얼핏 쳐다 보기만해도 향기가 난다.

TIL (Today I Learned) 날짜

2022.07.14 THU

오늘 읽은 범위

파이썬알고리즘인터뷰(상길북)1~3장

책에서 기억하고 싶은 내용을 써보세요.

파이썬은 동적 타이핑 언어로 사용하기엔 매우 편하지만, 타입을 명시하지 않으면 가독성을 낮추고 버그 발생 확률이 높아진다.

# 타입을 명시하는 예
from typing import TypeVar

# 파이썬의 typing 내장 패키지가 파이썬을 정적 타입으로 만들어주지는 않는다.
# 그러나 코드 상에 타입을 명시할 수 있고, 에디터 레벨에서 경고를 띄워주는것이 가능.

T = TypeVar('T')
U = TypeVar('U')

def are_equal(a:T, b:U) -> bool:
    return a == b

are_equal(10, 10.0)

파이썬에는 구조체가 없어 네임드튜플을 사용하거나 dataclass 데코레이션(3.7이후)을 사용해 구조체 형태로 정의할 수 있다

# python 3.7+
from dataclasses import dataclass

@dataclass
# 클래스를 구현할때 데이터 클래스를 선언해주면 여러 내부 함수의 기능도 자동으로 구현가능
class Product:
    weight: int = None
    price: float = None
    # 타입 힌트와 함께 사용
        
apple = Product()
apple.price = 10

가독성을 위해 람다, 리스트 컴프리헨션 등 표현식은 2개를 넘지 않아야 한다.
제너레이터는 루프의 반복 동작(iteration)을 제어할 수 있는 루틴 형태.
제너레이터를 쓸 때 yield 구문을 사용하면 return과 달리 실행 중이던 값을 내보내고, 함수의 끝까지 실행된다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

람다표현식에 map이나 filter를 사용하는 것이 더 능숙해보이고 어려워보였는데,
정작 리스트 컴프리헨션을 이용하는게 가독성이 높다는 점이 인상적이다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

제네릭 프로그래밍(영어: generic programming)은 데이터 형식에 의존하지 않고, 하나의 값이 여러 다른 데이터 타입들을 가질 수 있는 기술에 중점을 두어 재사용성을 높일 수 있는 프로그래밍 방식이다.
- 즉 클래스를 정의 할 때는 데이터 타입을 확정하지 않고 인스턴스를 생성할 때 데이터 타입을 지정하는 기능이 제네릭이다. 이를 통해 중복의 제거와 타입 안정성의 추구가 가능해진다.
- 또한 자바와 같은 컴파일 언어의 경우 실행중 런타임 에러를 맞는것보다, 컴파일 단계에서 에러를 내는것이 안전한데, 제네릭의 사용은 이를 가능하게 해준다.

자바스크립트의 비동기 처리

대왕판다 — Tue, 12 Jul 2022 22:36:24 +0900

> 비동기처리란

특정 코드 연산이 끝날 때까지 기다리는 것이 아니라, 멈추지 않고 다음 코드를 실행하는 특성
서버에서 응답을 언제 줄 지 모르기 때문에 다양한 요청을 비동기로 처리

> 문제점

비동기 처리 방식은 효율적이지만 때로 문제를 일으킴
- API에서 응답을 받고 처리해준다던지
- 페이지가 완전히 로드되기 전에 응답을 받아와 빈 값을 리턴하는 경우가 있었음

> 해결방법

콜백함수 사용

그러나 콜백함수는 중첩될 경우 가독성이 떨어지고 로직 변경도 어려움

/// 예시
$.get('url', function(response)) {
      parseValue(response, function(id) {
    	auth(id, function(result) {
            display(result, function(text) {
                console.log(text)\;
            });
        });
	});
});

Promise 사용
Async 사용

위 콜백 중첩을 분리하더라도 2, 3번 방법이 낫다.

> Promise란?

Promise 객체는 비동기 작업이 맞이할 미래의 결과 값의 대리자
동기 메서드처럼 값을 반환
최종 결과를 반환하는 것은 아님
이행 또는 거부됐을 경우 setteld(처리)되었다고 표현

> Promise의 3가지 상태

Pending
- new Promise(function(resolve, reject){}); 메서드를 호출한 상태
Fulfilled
- 펜딩 상태에서 콜백함수의 resolve를 실행하게 되면 이행 상태가 된다.
- 이때 getSomething().then(function(){});과 같이 then()을 이용해 값을 받을 수 있게 된다.
Rejected
- reject를 받게 되면 실패 상태가 되며 getSomething().then().catch(function(err){}); 에러를 인자로 받을 수 있다.
- catch()가 아닌 then()의 두번째 인자로 에러를 처리해도 되지만 에러를 못잡는 경우와 가독성을 위해 가급적 catch()로 처리해주자.

참고- mdn, 캡틴판교님 블로그

절치부심

대왕판다 — Fri, 17 Jun 2022 10:13:41 +0900

I'd started work out at 22. Back then, I couldn't realize the importance of STEADINESS. I worked out 3 or 4 times a week, but I wasn't consistent. I didn't make my body great with these effort.

As time passed, my body gradually improved as I exercised steadily and managed my diet, whether I liked it or not.

This experience taught me a lesson about the importance of persistence.

Focusing on distant future makes me discouraged.

Keep concentrating daily routine and sticking to execute that makes me to go forward.

2 failures and fear. I must get over those shit through small progress

2022. 05. 24.

대왕판다 — Tue, 24 May 2022 19:04:05 +0900

I recently got a rash on my arm. I also have itching. At first I thought it was a little annoying. As I got more and more itchy and had another rash on the other side, it made me worry. So I went to the dermatologist and he said it was like a sun allergy. It won't be anything like he said, but it hasn't improved, so I'm a little afraid of it.

When I started to worry about my health like hypochondriac, I am very thankful that I am healthy. Isn't it funny.

I want to be a person who can always be thankful. Not only under the particualr situation.

[북TIL] 실용주의 프로그래머 4. 실용주의 편집증

대왕판다 — Fri, 20 May 2022 00:31:35 +0900

오늘 TIL 3줄 요약

믿지마라. 자신도! 1분은 60초가 아닐 수 있고, 1달은 28일보다 작을 수 있다. 확실한 것은 없다.
작게 쪼개서 일해나가라.
먼 미래를 예상하지 말고 당장의 프로그램을 DRY와 같은 원칙을 지켜 만들어나가라.

TIL (Today I Learned) 날짜

2022. 05. 19. THU

오늘 읽은 범위

4장

책에서 기억하고 싶은 내용을 써보세요.

유효한 입력 범위가 무엇인지, 경계 조건이 무엇인지, 루틴이 뭘 전달한다고 약속하는지, 혹은 더 중요하게는 무엇을 약속하지 않는지 등을 나열하는 것만으로도 더 나은 소프트웨어를 작성하는데 엄청난 도움이 된다.
어겨서는 안되는 규칙인 요구 사항과 경영진이 바뀌면 얼마든 없어질 수 있는 단순한 정책을 혼동하지 말아야 한다.
의미론적 불변식은 진짜 의미가 중심이 되어야 하며 역동적으로 변하는 일시 정책에 영향을 받으면 안된다.
'그런일은 절대 일어나지 않을거야.' 라는 생각이 든다면 그런 일을 확인하는 코드를 추가하라 특히 단정문이 유용하다.
실용주의 프로그래머는 자신을 포함해서 아무도 믿지 않는다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

스코프와 리소스에서 작가는 또 같은 얘기를 하고 있다. 큰 주제는 결합도가 낮아지도록 신경써서 작성하고 다듬으라. 앞서 읽었던 엔트로피와 잔디밭 이야기처럼 꾸준한 관리와 신경이 읽기 편하고 유지보수하기 쉬운 코드를 만드나보다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

클래스 불변식 - 호출자의 입장에서 볼 때는 이 조건이 언제나 참인 것을 클래스가 보장한다.

dbc가 언어로 구현된 경우는 타입스크립트 같이 데이터 타입을 정확하게 명시하는 경우를 뜻하는 것인가?

[북TIL] 실용주의 프로그래머 3. 기본도구

대왕판다 — Wed, 18 May 2022 21:20:46 +0900

오늘 TIL 3줄 요약

도구를 잘 다루도록 연습하라.
모든 것을 CVS 아래에 두고 개발 환경 마저도 쉽게 옮길수 있게 만들라.
디버깅을 두려워 하지마라.

TIL (Today I Learned) 날짜

2022. 05. 18. WED

오늘 읽은 범위

3장

책에서 기억하고 싶은 내용을 써보세요.

작업하는 것이 소스 코드가 아닐지라도, 모든 것을 버전관리 아래에 둬라. 각종 문서, 전화번호 목록, 외부 업체에 보내는 메모, makefile, 빌드와 릴리스 절차, 로그 파일을 정리하는 작은 셸 스크립트까지 모두 다.
디버깅을 풀어야 할 퍼즐로 공략하는 대신 현실 부정이나 손가락질, 어설픈 변명, 무관심으로 대하는 사람과 마주치기도 한다.
'하지만 정말 그럴 리가 없는데.'로 시작하는 생각의 흐름에 신경 세포 하나도 낭비하지 말라. 왜냐하면 명백히 그런 일은 일어날 수 있으며 실제로도 일어났기 때문이다.
표면에 보이는 증상만 고치려는 욕구를 이겨 내라. 실제 문제는 여러분 눈앞에 있는 것에서 몇 단계 떨어져 있고, 또 다른 여러 가지와 연관되어 있을 확률이 다분하다.
디버깅 중 옆에 종이와 펜을 가져다 두고 메모를 하면 도움이 될 때가 많다.
새로운 릴리스에서 발생하든, 특정 데이터셋에서 발생하든 이진 분할은 디버깅에 큰 도움이 된다.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

에디터를 사용하면서 원하는 확장 기능을 사용할 수 없을때는 만들라는 얘기를 듣고 개발자와 목수가 겹쳐보였다. 현실의 문제를 해결하기 위해 도구를 사용해 결과물을 만든다. 그 과정에서 도구가 필요할 땐 그 도구마저 만들수 있어야 훌륭한 목수겠지!
이번 장에서는 꽤 친숙한 내용들이 많았다. CLI에 친숙해져야 한다는 것이나 VSC의 다양한 기능 등 작가가 말하고자 하는 바를 어디선가(어쩌면 노마드코더에서?) 접해본 내용들이었다.
'지금보다 더 나아질 순 없을까', '미래에 더 나은 방식으로 일할 수 없을까?'와 같은 사고방식
그리고 메모!

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

텍스트 처리 언어

-> 컴퓨팅에서 텍스트 처리(text processing) 또는 문자 처리는 전자 텍스트의 생성 또는 조작을 자동화하는 이론과 실천을 의미한다. 텍스트(text)는 해당 실천에 관여하는 사람의 키보드를 통해 지정된 영숫자 전체를 의미하는 것이 보통이지만 일반적으로 텍스트는 대상 텍스트의 표준 문자 인코딩 바로 위의 추상화 계층을 의미한다. 처리라는 용어는 자동화된(기계화된) 처리를 의미하며 이는 수동으로 수행되는 동일 조작과는 대조적이다.

null undefined의 차이

대왕판다 — Mon, 16 May 2022 17:20:04 +0900

Null 과 Undefined 차이

// 정의되지 않고 초기화된 적도 없는 foo
foo; //ReferenceError: foo is not defined

// 존재하지만 값이나 자료형이 존재하지 않는 foo
var foo = null;
foo; //null

// null은 어떤 값이 의도적으로 비어있음을 표현
typeof null === 'object' // true

var x; // 값을 할당하지 않고 변수 선언
console.log("x's value is", x) // "x's value is undefined" 출력

// undefined는 선언한 후 값을 할당하지 않은 변수 혹은 주어지지 않은 인수에 자동 할당.

null, undefined 모두 원시값에 해당한다.

원시값이란 객체가 아니면서 메서드도 가지지 않는 데이터이다.

원시 값은 변형할 수 없다. (원시 값에 새로운 값을 부여-할당-할 수는 있다.)

[북TIL] 실용주의 프로그래머 2장

대왕판다 — Sun, 15 May 2022 19:16:20 +0900

오늘 TIL 3줄 요약

ETC) 내가 방금 한 일이 전체 시스템을 바꾸기 쉽게 만들었을까 어렵게 만들었을까?
코드중복과 지식중복은 구분되어야 한다. (후자는 허용)
DRY) 코드의 중복: 의도나 기능을 수정할 때 여러 라인의 같은 코드들을 수정해야하지 않을까?

TIL (Today I Learned) 날짜

2022. 05. 15. SUN

오늘 읽은 범위

2장

책에서 기억하고 싶은 내용을 써보세요.

우리가 소프트웨어를 개발하는 속도는 요구사항, 사용자, 하드웨어의 변화를 앞지를 수 없다.
그렇기 때문에 직교성, 결합도 등을 고려해 유지보수하기 쉽게 만들어야한다.
거대 공학적 접근 방식(각각의 모듈 작성 -> 결합)과 반대되는 예광탄 코드를 활용하라.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

정보처리기사 시험을 준비하면서 결합도와 응집도 개념을 배웠었다. 개념은 이해되었지만 와닿지가 않았다.
실용주의 프로그래밍에서 말하는 유지보수 혹은 요구사항이 바뀐 경우를 대비하가 위해서는 이들을 반드시 고려해야한다.
헬리콥터를 조종하는 것처럼 한 가지 기능을 수정하기 위해 4~5개 이상의 모듈을 수정하고 있다면 이는 무언가 잘못된 것이다..!

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

네트워크 전송속도를 계산하고 시간을 추정하는 예시는 이해하기 어려웠다.

[북TIL] 실용주의 프로그래머 1장

대왕판다 — Sun, 15 May 2022 19:10:13 +0900

오늘 TIL 3줄 요약

잊지말라. 무엇보다 중요한 것은 즐기는 것이다.
자기의 기예(craft)에 관심을 가져라
훌륭한 잔디밭은 매일 조금씩 손질해주어야 한다.
소프트웨어의 엔트로피, 깨진 창문을 내버려 두지 말라.
시작 피로를 깨기 위해서는 일단 ‘돌멩이’를 내놔라.(돌멩이 수프 이야기)

TIL (Today I Learned) 날짜

2022. 05. 15. SUN

오늘 읽은 범위

서문~ 1장

책에서 기억하고 싶은 내용을 써보세요.

이튼칼리지의 훌륭한 잔디밭처럼, 과업은 하루아침에 만들어지지 않는다. 다만 꾸준하고 점진적인 노력이 필요할 뿐.

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

혼자 완성해나가는 프로젝트에서 '일단 만들자!' 라는 생각으로 진행하다보면 결국엔 스파게티 코드가 되어버려 방치되고 유지보수가 굉장히 어려워지는 경험이 많았다.
이런 일이 벌어지는 이유를 깨진 유리창 효과에 빗대어 설명한 점이 좋다.
일단 완성하고 보자~ 라는 생각은 일을 시작할 땐 도움이 되지만, 중간중간 코드들을 정리하지 않는다면 프로젝트 결과물의 품질과 가독성은 매우 떨어질 것이다.

AWS 배포 중 이미지, 비디오 리소스를 받아오지 못하는 경우

대왕판다 — Thu, 14 Apr 2022 18:43:29 +0900

개발환경에서 컴퓨터를 이용한 서버에서는 crossorigin 미들웨어를 사용했다.

app.use((req, res, next) => {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

그러나 AWS로 배포해보니 이미지 소스나 영상 소스를 가져오지 못하고

ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

혹은

AccessControlListNotSupported: The bucket does not allow ACLs

등 다양하게 ACL, crossorigin과 관련된 에러를 뱉어낸다.

에러에서도 알 수 있듯이 Crossorigin이 문제였던듯하다.

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

원인을 알았으니 해결해보려면 AWS버킷에 ACL권한을 변경해주면 된다.

권한 -> 객체 소유권 편집 -> ACL 비활성화됨(권장)을 ACL 활성화됨로 변경 ->
ACL이 복원된다는 것을 확인합니다. 체크 -> 버킷 소유자 선호 체크 -> 변경사항 저장
위의 방법까지 해보시고, 그래도 안 되시는 분들은 ACL(액세스 제어 목록)에서 편집->모든 사람(퍼블릭 액세스)에 나열, 읽기 체크해주신 후 변경사항 저장

No 'Access-Control-Allow-Origin' header is present on the requested resource. net::ERR_FAILED 200

위와 같은 오류가 콘솔창에 뜨면 권한 -> CORS(Cross-origin 리소스 공유) 편집 -> 아래 코드를 추가해주시고 변경사항 저장하시면 된다.
https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]

+ 추가적으로 이미지 태그와 비디오 태그에 crossorigin속성을 추가한다.
img(src=`이미지 주소` crossorigin)
video(src=`비디오 주소` crossorigin)

CORS 구성
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/ManageCorsUsing.html

AllowedOrigins을 설정하는 이유
허용하지 않은 origin에서 리소스에 접근 및 사용을 막기 위해서이다.
다시 말해, 허용하지 않은 클라이언트에게 리소스를 주지 않기 위함이고, 허용할 대상에 대한 설정이 AllowedOrigins이다.

출처) 노마드코더 sugar님, yoon1139님.

TailwindCSS

대왕판다 — Sun, 27 Mar 2022 09:05:44 +0900

https://tailwindcss.com/

미쳤다.... 이렇게 편하게 스타일링을 할 수 있다니..... 가슴이 웅장해진다.

[NextJS] Fast refresh가 작동하지 않을 때 (React 18)

대왕판다 — Sat, 26 Mar 2022 20:28:45 +0900

React 18이 정식으로 릴리즈되어서

모든 버전을 최신으로 업데이트하면 Hot reloading이 잘 작동합니다!

NextJS는 Fast refresh를 기본 기능으로 제공한다. (https://nextjs.org/docs/basic-features/fast-refresh)

패스트 리프레시란?

스타일 등의 컴포넌트를 변경할 때 빠른 리프레시는 매우 편리합니다. 현재 페이지에만 앱을 로드합니다. 대부분의 편집은 1~2초 이내에 표시됩니다.
핫 새로고침은 앱을 실행 상태로 유지하고 런타임에 편집한 파일의 새 버전을 주입하는 것입니다.
Fast Refresh의 경우 React 컴포넌트만 내보내는 모듈을 편집하면 Fast Refresh는 해당 모듈의 코드만 업데이트하고 컴포넌트를 다시 렌더링합니다.
React 컴포넌트가 아닌 내보내기 모듈을 편집하면 Fast Refresh는 해당 모듈과 해당 모듈을 Import하는 다른 모듈 모두를 다시 실행합니다.
React 트리 이외의 모듈에 의해 Import된 파일을 편집하면 Fast Refresh는 완전한 새로고침으로 돌아갑니다.
즉, 핫 새로고침보다 더 크고 많은 기능을 제공.

(https://stackoverflow.com/questions/59085281/difference-between-hot-reload-and-fast-refresh-in-react-native)

쉽게 얘기하면 CSS스타일링 등 컴포넌트를 변경할때 nodeJS의 nodemon처럼 페이지 새로고침 없이 코드 변경을 re-render해줌

중요한건,

당근마켓 클론코딩을 하면서 리액트18의 rc버전을 사용했는데, 이런 패스트 리프레시(핫리로드)가 작동하지 않는 것이었다.

구글에 hot reload not working, fast refresh not working을 검색해봐도

컴포넌트, 모듈의 철자(case) 오타가 원인인 케이스만 검색됐다.

그러나 내 경우는 import export 되는 컴포넌트 명에는 오탈자가 없었고,

노마드코더 강의 댓글에서 찾은 해결책은 버전 문제였다.

무슨 문제에선지

    "next": "^12.1.1",
    "react": "^18.0.0-rc.3",
    "react-dom": "^18.0.0-rc.3"

위 버전에서는 패스트 리프레시가 작동하지 않는다.

    "next": "^12.0.7",
    "react": "^18.0.0-rc.0",
    "react-dom": "^18.0.0-rc.0"

넥스트와 리액트 rc버전 모두를 위와 같이 downgrade하고 나서야 정상작동 됨을 확인했다.

넥스트JS가 제공하는 패스트 리프레시가 작동하지 않는 분들은

1. 컴포넌트의 오탈자(특히 대소문자) 확인

2. 넥스트와 리액트의 버전 확인을 해보면 좋을듯하다.

[NextJS] getSererSideProps

대왕판다 — Thu, 24 Mar 2022 12:53:08 +0900

넥스트JS의 가장 큰 장점인 SSR을 살리기 위해서는 getServerSideProps를 export해주어야한다.

export default function Home({ results }) {
  // 데이터 렌더링!
}


export async function getServerSideProps() {
  const { results } = await (
    await fetch("http://localhost:3000/api/movies")
  ).json();
  return {
    props: {
      results,
    },
  };
}

이때 넥스트js는 반환된 데이터를 사용해 req에서 페이지를 pre-render하게 된다.

요 getServerSideProps는 서버측에서만 실행되며 클라이언트에서는 X

사용자에게 api에서 fetch하는 동안 듬성듬성한 페이지, 혹은 로딩 페이지를 보여주지 않는 장점 O

그러나 SEO와 관련 없는 페이지거나, 데이터 업데이트가 잦은 페이지라면,

클라이언트에서 렌더링 하는것도 고려해야한다!

참고)

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

노마드코더 슈가님(https://github.com/GitHubGW)

Data Fetching: getServerSideProps | Next.js

Fetch data on each request with `getServerSideProps`.

nextjs.org

진주 하대동 라무진

대왕판다 — Thu, 24 Mar 2022 09:00:10 +0900

한줄요약 - 가격값하는 맛집. 비싼만큼 맛있고 신선한 양갈비

여자친구 임용고시 합격기념으로 다녀왔다.

맥주랑 하이볼 곁들였고, 1인당 5만원 이상 나온듯!

자바스크립트 논리연산자 단축평가

대왕판다 — Wed, 23 Mar 2022 09:29:45 +0900

|| 는 or 연산, &&이 and 연산인건 아는데,

{!movies && <h4>Loading...</h4>}

리액트에서 'movie' state가 undefined일 때 왜 우항의 로딩이 렌더링 되는지 궁금해서 찾아봤더니

단축평가라는게 존재했다.

간단하게 좌항이 true일때와 false 일 때 존재하는데

1. true || something 일 때 우항을 볼 필요도 없이 좌항 값이 반환된다.

ex)

"apple" || false; // "apple" 
"apple" || true; // "apple"

2. false || something 일 때 우항 값이 반환된다.

apple" && "banana" // "banana"

출처: https://curryyou.tistory.com/193 [카레유]

익명함수와 즉시실행함수표현(IIFE)

대왕판다 — Tue, 22 Mar 2022 07:16:03 +0900

익명함수 : 함수의 이름이 생략된 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

차이점은 어디서 오냐면, 위에서 언급한 호이스팅의 개념에서 온다.

일반함수의 경우, 함수 전체가 전부 맨 위로 올라가므로 함수를 호출하는 위치에 상관없이 사용될 수 있다고 했다. 반면, 리터럴 방식으로 사용되는 익명 함수의 경우, 호이스팅 시 함수를 담는 변수의 선언부만 위로 올라가고, 익명 함수 자체는 변수가 호출되었을 때 실행되기 때문에, 선언부가 호출 위치보다 위에 있어야 한다.

(티스토리 사막하는 개발여우님 블로그 - https://dev-note-97.tistory.com/273)

즉시실행함수

(function () {
    statements
})();

이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

이것을 활용해 아래와 같은 async 함수를

  useEffect(() => {
    (async () => {
      const response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`)
      const json = await response.json();
  }, []);

깔끔하게 익명함수로 사용할 수 있다.

(괄호가 많아 지저분해보일지라도)

useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
    })();
  }, []);

[NextJS] 넥스트JS 개념

대왕판다 — Mon, 21 Mar 2022 10:49:37 +0900

Node.js를 기반으로 구축된, 리액트 서버사이드 렌더링 프레임워크

리액트는 자바스크립트 라이브러리, 넥스트는 프레임워크.

둘의 가장 큰 차이는 Inversion of Control"(통제의 역전)

라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다
그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다.

라이브러리
사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림

프레임워크
파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름

=> 리액트에서는 Component, Rount 등 원하는 위치와 파일명으로 자유롭게 import, export해서 사용했지만

넥스트JS에서는 클라이언트에게 보낼 화면을 pages폴더 안에 export default로 명시해줘야한다.

파일명은 url이 되고 함수 이름은 상관없다.

넥스트JS의 장점?

자바스크립트가 OFF된 상황에서도 html 요소는 렌더된다.

리액트는 div#root가 자바스크립트 객체를 불러오지 못하기 때문에 noscript 태그 안의 요소만 렌더링된다.

인터넷이 느린 환경에서도 리액트는 클라이언트 사이드에서 렌더링 될 때까지 빈 화면을 보여주지만,

넥스트JS는 미리 html요소를 불러오고(pre render) 이후 자바스크립트,리액트 가 주입된다(hydration)

=>빈 객체를 반환하는 페이지와 달리 이미 html요소들이 있기에 봇이 수집하는 검색엔진최적화에서도 유리하다.

[네스트js] 컨트롤러, 프로바이더, 모듈 + validation

대왕판다 — Thu, 17 Mar 2022 16:00:35 +0900

Controllers are responsible for handling incoming requests and returning responses to the client.

(like a router in express)

Providers are a fundamental concept in Nest. Many of the basic Nest classes may be treated as a provider – services, repositories, factories, helpers, and so on. The main idea of a provider is that it can be injected as dependency; this means objects can create various relationships with each other, and the function of "wiring up" instances of objects can largely be delegated to the Nest runtime system.

A module is a class annotated with a @Module() decorator. The @Module() decorator provides metadata that Nest makes use of to organize the application structure.

내장 validationPipe를 사용하기 위해선 calss-validator와 transformer를 설치해야한다.

npm i class-validator class-transformer

Validation

웹 애플리케이션으로 전송되는 데이터의 검증을 도와줍니다.
들어오는 요청을 자동으로 검증하기 위해 Nest는 즉시 사용할 수 있는 여러 파이프를 제공합니다.
ValidationPipe는 강력한 클래스 유효성 검사기 패키지와 선언적 유효성 검사 데코레이터를 사용합니다.
https://docs.nestjs.com/techniques/validation

자동 검증

애플리케이션 수준에서 ValidationPipe를 바인딩하는 것으로 시작하겠습니다.
따라서 모든 엔드포인트가 잘못된 데이터를 수신하지 못하도록 보호됩니다.
https://docs.nestjs.com/techniques/validation

whitelist

true로 설정하면 유효성 검사기는 class-validator의 유효성 검사 데코레이터를 적어도 하나라도 사용하지 않은 모든 속성 객체를 제거합니다.

예시)

클라이언트 측에서 전송한 데이터가 다음일 경우

{
　 "title": "Tenet",
　 "year": 2020,
　 "genres": ["Action", "Sci-Fi"],
　 "hack": "by me"
}

whitelist: true 로 설정했을 때는 데코레이터가 없는 속성("hack")은 제거되어 저장됩니다.

forbidNonWhitelisted

true로 설정하면 화이트리스트에 없는 속성을 제거하는 대신 유효성 검사기가 예외를 throw합니다.

예시)

클라이언트 전송 데이터가 다음일 경우

{
　 "title": "Tenet",
　 "year": 2020,
　 "genres": ["Action", "Sci-Fi"],
　 "hack": "by me"
}

"hack"이라는 속성은 화이트리스트에 존재하지 않으므로 HttpException 을 던집니다.(statusCode 400)

transform (자동 형변환)

네트워크를 통해 들어오는 payload는 일반 JavaScript 객체입니다. ValidationPipe는 payload를 DTO 클래스에 따라 유형이 지정된 객체로 자동 변환할 수 있습니다. 자동 변환을 활성화하려면 transform을 true로 설정하십시오. 이 동작을 전역적으로 활성화하려면 전역 파이프에서 옵션을 설정합니다.
```
app.useGlobalPipes(
new ValidationPipe({
transform: true,
}),
);
```
https://docs.nestjs.com/techniques/validation#transform-payload-objects

Documentation | NestJS - A progressive Node.js framework

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac

docs.nestjs.com

출처- 노마드코더 sugar님(https://nomadcoders.co/users/sugar), snowball님(https://nomadcoders.co/users/carrotcold)