JPA는 동일성 보장을 위해 프록시 객체를 먼저 조회하면, 나중에 find()를 호출하더라도 프록시 객체인 동일한 인스턴스를 반환한다는 사실을 알게되었다.

• 예제 코드

  Member m1 = em.getReference(Member.class, 1L);
  Member m2 = em.find(Member.class, 1L);
  

System.out.println("m1.getClass() = " + m1.getClass()); System.out.println("m2.getClass() = " + m2.getClass()); System.out.println("(m1 == m2) = " + (m1 == m2));

- 출력 결과
```bash
m1.getClass() = class hellojpa.Member$HibernateProxy$FobBtKKE
m2.getClass() = class hellojpa.Member$HibernateProxy$FobBtKKE
(m1 == m2) = true

em.find() 시점에서 프록시 객체가 초기화되며 원본 엔티티의 인스턴스가 메모리에 올라갈텐데, 이 인스턴스는 어디에 있는걸까?

원본 엔티티는 어디에 있는거지??

1차 캐시에 원본 엔티티와 프록시 객체 둘 중 하나가 존재하는 것일까? 아니면 둘 다 존재하는 것일까?

가설 세우기

나는 후술할 메커니즘을 근거로 프록시와 원본 모두 1차 캐시에 존재하여 영속성 컨텍스트가 관리할 것이라 생각했다.

변경 감지(Dirty-Checking)

1차 캐시에 저장되는 내용

• 영속화된 엔티티
• 스냅샷: 엔티티가 영속화된 시점의 상태

JPA는 트랜잭션 commit() 등으로 flush()가 일어나면 영속성 컨텍스트의 1차 캐시에서 엔티티와 스냅샷을 비교한다.

비교를 통해 다른 부분이 있다면 UPDATE 쿼리를 쓰기 지연 SQL 저장소에 넣고 데이터베이스로 쿼리를 보낸다.

프록시 객체를 통해 메서드를 호출하여 원본 엔티티의 내용이 바뀌면, 변경 감지를 통해 데이터베이스에 쿼리를 보내야 한다.

-> 변경 감지를 위해서는 1차 캐시에 원본 엔티티가 존재해야 한다!!

동일성 보장

EntityManager의 getReference(), find() 등으로 조회 시 1차 캐시를 우선 확인하여 해당 인스턴스가 있다면 반환한다.

이를 통해 JPA는 어플리케이션에서 REPEATABLE READ 수준의 트랜잭션 격리 수준을 제공한다.

getReference()로 프록시 객체를 조회한 후 find()를 호출하면 1차 캐시를 확인하여 프록시 객체가 반환된다.

마찬가지로 find()로 원본 엔티티를 조회한 후 getReference()를 호출하면 1차 캐시를 확인해 원본 엔티티가 반환된다.

-> 동일성 보장이 이루어지려면 1차 캐시에 프록시 객체가 존재해야 한다!!

필요한 유틸 함수들

Hibernate.unproxy() - 원본 엔티티 꺼내기

Hibernate.unproxy() - Hibernate JavaDoc

unproxy

public static Object unproxy​(Object proxy)

If the given object is not a proxy, return it. But, if it is a proxy, ensure that the proxy is initialized, and return a direct reference to its proxied entity object.

주어진 객체가 프록시 객체일 경우 해당 프록시를 초기화하고, 프록시가 가리키는 원본 엔티티 객체에 대한 직접 참조를 반환한다.

프록시 객체가 아닌 경우에는 객체 자체를 그대로 반환한다.

프록시가 가리키는 원본 엔티티 인스턴스는 $$_hibernate_interceptor 내부 target 필드에 저장되어 있다.

원본 엔티티에 this를 반환하는 메서드를 두면 안될까?

프록시는 원본 엔티티 자신을 리턴하는 경우 프록시 객체를 리턴하도록 구현되어 return this 로 원본 엔티티의 인스턴스를 얻을 수 없다.

em.contains() - 영속성 컨텍스트 관리(1차 캐시에 존재하는지) 확인

EntityManager.contains() - JAKARTA EE SPECIFICATIONS

contains

boolean contains(Object entity)

Check if the instance is a managed entity instance belonging to the current persistence context.

주어진 인스턴스가 현재 영속성 컨텍스트에 속하는 관리하는 인스턴스인지 확인한다.

System.identityHashCode() - 동일한 인스턴스인지 확인

System.identityHashCode() - JavaSE 8 document

identityHashCode

public static int identityHashCode(Object x)

Returns the same hash code for the given object as would be returned by the default method hashCode(), whether or not the given object's class overrides hashCode(). The hash code for the null reference is zero.

해당 객체의 hashCode() 재정의 유무와 무관하게 객체의 고유한 hashCode() 메서드 값(재정의 되기 전 hashCode() 함수 값)을 반환한다.

이 함수를 통해 프록시와 원본이 동일한 인스턴스인지 확인할 수 있다.

결과 확인

위 함수들을 이용하여 결과를 확인해보자.

• 예제 코드

  // 프록시 얻기
  Member memberRef = em.getReference(Member.class, 1L);
  System.out.println("Proxy  isManaged = " + em.contains(memberRef));
  System.out.println("Proxy  hashCode  = " + System.identityHashCode(memberRef));
  

// 원본 얻기 Member entity = (Member) Hibernate.unproxy(memberRef); System.out.println("Entity isManaged = " + em.contains(entity)); System.out.println("Entity hashCode = " + System.identityHashCode(entity));

- 출력 결과
```bash
Proxy  isManaged = true
Proxy  hashCode  = 270313690
Hibernate: 
    select
        m1_0.id,
        m1_0.name,
        m1_0.team_id 
    from
        Member m1_0 
    where
        m1_0.id=?
Entity isManaged = true
Entity hashCode  = 5987161

isManaged 가 모두 true 이며, hashCode 값이 서로 다르다.

unproxy()가 호출되며 SQL 쿼리가 나가고 프록시 객체가 초기화된 것을 볼 수 있다.

-> 프록시와 원본 모두 서로 다른 인스턴스이며 1차 캐시에 존재한다(영속성 컨텍스트에서 관리된다)!!

번외1 - em.contains() 동작 방식

프록시와 원본 엔티티는 서로 다른 특성을 갖고있기 때문에 EntityManager의 contains() 함수도 동작이 다를 것이라 생각해 코드를 확인해보았다.

특히 의문이 들었던 점은 초기화가 되지 않은 프록시는 무엇을 근거로 영속성 엔티티에 관리된다고 판단할 수 있는가? 였다.

• contains() 함수

  public boolean contains(Object object) {
    ...
    if (object == null) {
        return false;
    } else {
        try {
            // HibernateProxy.extractLazyInitializer() : proxy 객체가 아니면 null을 반환한다!!!!!
            LazyInitializer lazyInitializer = HibernateProxy.extractLazyInitializer(object);
            if (lazyInitializer != null) {                       // proxy 객체인 경우
                if (lazyInitializer.isUninitialized()) {         // proxy 객체가 초기화되지 않은 경우
                    return lazyInitializer.getSession() == this; // proxy 객체가 현재 세션에 속해있는지 확인
                }
  
                object = lazyInitializer.getImplementation();     // proxy 객체가 초기화된 경우, proxy 객체의 원본 엔티티를 가져온다.
            }
  
            // EntityEntry 객체는 엔티티의 생명주기 상태, 식별자, 버전 정보 등 엔티티와 관련된 다양한 메타데이터를 포함한다.
            EntityEntry entry = this.persistenceContext.getEntry(object);
            this.delayedAfterCompletion();
            if (entry == null) { // null이 반환된 경우 해당 엔티티가 영속성 컨텍스트에서 관리되지 않는다고 판단할 수 있다.
                ... 
                return false;
            } else {             // null이 아닌 경우 해당 엔티티가 영속성 컨텍스트에서 관리되고 있는 상태이다.
                // 엔티티의 상태 중 DELETE(삭제), GONE(데이터베이스에서 이미 삭제되었거나 더이상 접근이 불가능한 상태)가 아니라면 true를 반환한다.
                return !entry.getStatus().isDeletedOrGone();
            }
        } 
        ... catch 예외처리 ...
    }
  }

예상대로 프록시인지, 원본 엔티티인지 분기를 두어 확인 후 각각 다르게 boolean 값을 반환했다.

프록시인 경우

HibernateProxy.extractLazyInitializer - Hibernate JavaDoc

Extract the LazyInitializer from the object, if and only if the object is actually an HibernateProxy. If not, null is returned.

프록시인 경우 LazyInitializer를 추출하고 프록시가 아니면 null을 반환한다.

LazyInitializer - Hibernate JavaDoc

Handles fetching of the underlying entity for a proxy.

프록시에 대한 원본 엔티티를 가져오는 것을 처리한다.

어떤 객체던 LazyInitializer 를 얻어서 1) 프록시인지 원본 엔티티인지를 확인하고, 프록시인 경우 lazyInitializer.isUninitialized() 함수를 통해 2) 초기화 유무를 확인한다.

초기화되지 않은 프록시의 경우

return lazyInitializer.getSession() == this

getSession()은 프록시가 연결된 세션을 가져오거나, 연결되지 않은 경우 null을 반환하며 이 세션을 this와 비교한다.

-> 현재 세션에 존재하는 프록시인지 여부를 반환한다.

초기화된 프록시의 경우

object = lazyInitializer.getImplementation();

getImplementation()은 프록시의 target인 원본 엔티티 인스턴스를 반환한다.

-> 원본 엔티티를 가져온 후 원본 엔티티를 넘겼을 때와 동일하게 진행한다.

원본인 경우

PersistenceContext.getEntry() - Hibernate Javadoc

Retrieve the EntityEntry representation of the given entity.

초기화된 프록시, 원본 엔티티를 contains()에 넘기면 프록시는 원본 엔티티를 꺼내오고 원본 엔티티에서 EntityEntry를 가져온다.

EntityEntry - Hibernate Javadoc

Information about the current state of a managed entity instance with respect to its persistent state.

EntityEntry는 영속성 컨텍스트에서 관리되는 엔티티 인스턴스의 현재 상태(Status)와 상태에 대한 정보다.

Status - Hibernate Javadoc

Represents the status of an entity with respect to this session.

엔티티의 세션에 대한 상태를 나타내는 데 사용되며 애플리케이션 수준에서 직접적으로 사용되거나 표시되는 개념이 아니다.

isDeletedOrGone 함수를 사용하므로 아래 두 상태만 소개했다.

DELETED: 엔티티가 삭제되어 데이터베이스에서 제거되는 상태 GONE: 엔티티가 더 이상 존재하지 않거나 접근할 수 없는 상태

// EntityEntry 객체는 엔티티의 생명주기 상태, 식별자, 버전 정보 등 엔티티와 관련된 다양한 메타데이터를 포함한다.
EntityEntry entry = this.persistenceContext.getEntry(object);
this.delayedAfterCompletion();
if (entry == null) { // null이 반환된 경우 해당 엔티티가 영속성 컨텍스트에서 관리되지 않는다고 판단할 수 있다.
    ... 
    return false;
} else {             // null이 아닌 경우 해당 엔티티가 영속성 컨텍스트에서 관리되고 있는 상태이다.
    // 엔티티의 상태 중 DELETE(삭제), GONE(데이터베이스에서 이미 삭제되었거나 더이상 접근이 불가능한 상태)가 아니라면 true를 반환한다.
    return !entry.getStatus().isDeletedOrGone();
}

1. EntityEntry를 얻는다. 만약 null이면 해당 엔티티가 영속성 컨텍스트에서 관리되지 않는다는 것이다.

2. null이 아닌 경우, 해당 세션에서 관리되는 엔티티이며 EntityEntry는 Hibernate 내부 로직을 위한 엔티티의 상태인 Status를 지닌다.

3. Status가 DELETED 또는 GONE이 아니면 true를 반환한다.

-> 해당 엔티티가 영속성 컨텍스트에서 관리되는지를 확인하고 상태가 DELETE 또는 GONE이 아니라면 true를 반환한다.

contains() 정리

• 초기화되지 않은 프록시 현재 세션과 동일한 세션에 있는지를 반환

• 초기화된 프록시 원본 엔티티를 가져오고 이후 원본 엔티티의 경우와 동일하게 진행

• 원본 엔티티 EntityEntry를 얻는 시도를 통해 영속성 컨텍스트에 관리되는지(관리 안되면 null 얻음)와 엔티티의 대한 정보를 확인하고 DELETE나 GONE 상태가 아니면 true 반환

글이 너무 길어져 컨테이너 실행 까지만 포스팅했고, 여기서 SQL Plus와 SQL Developer로 oracle database 19c 컨테이너에 연결하는 내용을 적겠다.

🚨 주의 🚨

접속을 위해서는 Docker 컨테이너가 실행중이어야 한다. Docker Desktop으로 들어가 해당 컨테이너가 실행 중인지 확인 후 멈춰있다면 실행을 해야한다.

SQL Plus로 접속하기

오라클 데이터베이스에 접속하는 방법 중 하나인 SQL Plus 를 이용한 방법이다. docker 컨테이너는 docker exec 명령어로 접속할 수 있다.

docker exec -it test19c sqlplus

-it 옵션은 i 옵션과 t 옵션을 축약해 적용한 것이다.

• -i 옵션 : --interactive 옵션으로 표준 입력(STDIN)을 유지한다. 이를 통해 컨테이너에 bash 명령을 입력할 수 있게 한다.

• -t 옵션 : --tty 옵션으로 컨테이너 내에서 명령을 실행할 때 터미널에서 직접 실행하는 것처럼 출력이 시각화된다.

맥 터미널에서 위 명령어를 실행하면 첨부한 사진처럼 컨테이너에 접속이 된다. sqlplus를 실행하고 사용자 이름과 비밀번호를 입력하면 CLI 방식으로 데이터베이스와 상호작용이 가능하다.

여기서 비밀번호는 앞서 컨테이너 생성 시 환경변수(-e 옵션) ORACLE_PASSWORD에 설정한 값이다.

SQL Developer로 접속하기

SQL Developer 다운로드 위 링크로 들어가 자신에게 알맞은 OS를 선택해 설치한다.

나는 M2 맥북에어라서 ARM64 버전을 설치했다.

설치 후 실행하면 아래와 같은 화면이 뜬다.

여기서 수동으로 접속 생성 버튼을 누른다.

이 접속 생성 화면에서 입력해야 할 내용은 다음과 같다.

• Name : 접속은 여러 접속을 만들 수 있어 각 접속마다 임의로 정하면 된다. 한글도 가능하다.
• 사용자 이름 : 데이터베이스에 등록되어있는 사용자 이름
• 비밀번호 : 해당 사용자의 비밀번호
  • 비밀번호 저장 : 접속 목록에서 접속할 때 비밀번호를 저장해놓아 재입력을 안해도 된다. 옵션을 체크하는게 좋다.
• SID : 데이터베이스 인스턴스의 아이디
• 서비스 이름 : 여러 인스턴스를 묶어 하나의 서비스로 구성된 것의 이름

데이터베이스 접속 방법은 SID 와 서비스 이름(Service Name) 이 있는데, 아직 하나의 인스턴스밖에 존재하지 않아 둘 중 아무거나 사용해도 무방하다.

SID, Service Name 확인

접속을 위해 실행중인 데이터베이스의 SID와 Service Name을 확인해보겠다.

우선 데이터베이스에 접속해야 하니 sql plus로 먼저 접속해보겠다.

맥 터미널에서 다음과 같이 입력해 sql plus로 접속한다.

docker exec -it test19c sqlplus

이후 아래 명령어로 SID 와 Service Name 을 확인한다.

show parameter service_name;           -- 서비스 이름 조회
select instance_name from v$instance; -- SID 조회

SID 와 서비스 이름 모두 FREE 인 것을 알 수 있다. 그러므로 아래와 같이 입력을 해서 접속을 생성할 수 있다.

아직 사용자를 생성하지 않았으니 sys 관리자 계정으로 접속하며, SQL plus에서 sys as sysdba로 접속했던 것을 여기서는 롤로 SYSDBA를 설정해주면 된다.

비밀번호 역시 앞서 설정해두었던 것과 같다. 접속을 선택할 때마다 다시 입력하기 귀찮으니 비밀번호 저장을 체크했다.

포트는 컨테이너 실행 시 -p 옵션을 통해 1521 포트로 외부에서 컨테이너의 1521 포트와 연결되도록 포트포워딩을 했으니 그대로 입력하면 된다.

SID 나 서비스 이름 둘 중 하나를 선택해 FREE 를 입력하고 접속을 누른다.

위 처럼 양식을 채우면 아래와 같이 접속이 완료된 것을 볼 수 있다. SHOW USER;로 현재 사용자를 볼 수 있다.

데이터베이스 강의는 oracle database 19c를 설치해 실습을 진행하는 방식이고, 오라클 데이터베이스는 arm 기반의 mac OS에 대한 지원이 없어서 docker를 이용해 설치를 해보려 한다.

구글링을 해보니 10일 전에 올라온 따끈따끈한 글이 있어 이를 보고 설치를 해보았다. 영어로 되어있기 때문에 출처를 밝히고 한글로 내용을 요약해 정리한다. 또한, 내가 추가로 수정하거나 다르게 진행한 부분도 추가했으니 이 점 참고하길 바란다.

출처 : Oracle on ARM, Mac M1/M2 Docker images

이 글을 통해 arm 기반 Mac OS에서 oracle database 19c를 설치 및 실행해본다.

이 포스트를 끝까지 읽고 컨테이너 실행까지 완료했다면 SQL Developer와 docker 컨테이너 연결 - 데이터베이스 접속 포스트를 통해 DB에 쿼리를 날려보자.

1. Linux ARM 기반 Oracle Database 19c 이미지 빌드

1) Docker Desktop 설치

Docker를 설치하는 여러 방법이 있는데 나는 homebrew를 이용한 설치로 진행했다.

• 방법 1 : 홈페이지에서 설치

  Docker Desktop 이 링크로 들어가 설치한다. Mac - Apple chip 을 선택해서 설치하면 되겠다.

  

• 방법 2 : homebrew를 이용해 설치

  brew install --cask docker

  나는 iterm2 터미널이 있어 여기서 진행했다.

2) VsCode Docker Desktop Extension 설치

이후 VSCode Docker Desktop Extension을 설치한다. 이 링크를 클릭해 브라우저가 Docker Desktop을 열게 하고 VS Code for the Web 확장을 설치하면 된다.

위 이미지처럼 왼쪽 하단 Extensions에 VS Code Web이라는 확장이 설치된다.

이제 VS Code for the Web 확장에 Docker 지원을 추가하는 명령어를 입력해야한다. Mac 터미널 에서 진행하면 된다.

docker exec -ti --user root coder_embedded_dd_vm /bin/sh -c "curl -s https://raw.githubusercontent.com/marcelo-ochoa/coder-docker-extension/main/addDocker.sh | bash"

3) Oracle 19c EE(Enterprise Edition) 다운로드

🚨 주의 🚨

사파리를 사용하면 자동 압축 해제가 되버린다. 이러면 설치가 불가능하기 때문에 크롬을 사용하거나 사파리 자동 압축 해제 끄기를 적용한 후 진행하자.

Oracle Database Enterprise Edition 이 링크를 타고 아래로 내리면 Linux ARM용 Oracle 19c 다운로드 링크가 존재한다.

이 파일을 가져다 설치를 진행할 예정이니 우선 다운로드를 받아둔다.

🚨 주의 🚨

파일을 다운로드(터미널 기준 ~/Downloads) 폴더에 다운로드 하는게 차후 파일 복사 명령어 입력 시 명령어 수정을 안해도 돼서 좋다.

4) VSCode Docker 확장에서 Oracle의 Docker 이미지 저장소 복제

Docker Desktop의 VSCode 확장을 들어간 뒤, 홈 디렉터리로 이동할 것이다.

• 먼저 폴더 열기를 누른다.

• /home/coder 경로를 입력하고 OK를 누른다.

여기서 새 터미널을 열어준다. 단축키로는 윈도우에선 Ctrl + j 맥에서는 Cmd + j로 터미널을 열 수 있다.

이 블로그에서는 myWorkspace 라는 폴더를 만들어서 진행하기 때문에 다음과 같이 입력하도록 하자.

• myWorkspace 디렉토리 생성

cd ~                     # 홈 디렉터리(~)로 이동
mkdir myWorkspace        # myWorkspace 폴더 생성
cd myWorkspace            # myWorkspace 폴더로 이동

• 이후 myWorkspace 폴더 내에서 Oracle의 Docker 이미지 저장소를 복제한다.

git clone https://github.com/oracle/docker-images    # 저장소 복제
cd docker-images/            # 저장소로 이동
ls -l                        # 저장소 폴더 내 목록 조회

5) 다운로드한 oracle 파일을 VSCode 폴더로 복사

🚨 주의 🚨

이번 명령어는 VSCode 확장이 아닌 Mac 터미널에서 진행한다. 앞서 다운로드 했던 Oracle Database 19c 압축파일을 VSCode 확장의 Oracle 도커 저장소로 옮기는(복사하는) 것이다.

cd Downloads    # 다운로드 폴더로 이동
docker cp LINUX.ARM64_1919000_db_home.zip coder_embedded_dd_vm:/home/coder/myWorkspace/docker-images/OracleDatabase/SingleInstance/dockerfiles/19.3.0

6) Docker 이미지 빌드

🚨 주의 🚨

이번 명령어는 VSCode 확장의 터미널에서 진행한다. 도커 이미지 빌드 명령어를 입력하기 위한 것이다. 명령어는 블로그와 달리 cd로 폴더를 이동할 때 절대경로로 입력하여 어떤 위치에 있더라도 빌드가 가능한 장소로 이동하도록 수정했다.

# 빌드를 위해 해당 폴더로 이동
cd ~/myWorkspace/docker-images/OracleDatabase/SingleInstance/dockerfiles/
# 빌드 명령어 실행
./buildContainerImage.sh -v 19.3.0 -e

2. Mac ARM용 oracle database 19c 이미지 빌드

Linux ARM 기반의 oracle database 19c 이미지를 성공적으로 빌드했다면, 다음은 Mac ARM에서 실행 가능하도록 이미지를 빌드하는 것이다. 앞서 잘 따라왔다면 여기서는 명령어만 따라치면 되니 빠르게 진행해보도록 하자.

1) oci-oracle-free 저장소 복제

🚨 주의 🚨

이 명령어들은 VSCode 확장의 터미널의 myWorkspace 폴더 내에서 진행한다.

cd ~/myWorkspace    # myWorkspace로 이동
# oci-oracle-free 저장소 복제
git clone -b 19c-arm-slim https://github.com/marcelo-ochoa/oci-oracle-free

cd oci-oracle-free  # oci-oracle-free 폴더로 이동

2) slim 버전 이미지 빌드

docker buildx build --build-arg BUILD_MODE=SLIM -t oracle/database:19.3.0-ee-slim -f Dockerfile.193 .

3) slim-faststart 버전 이미지 빌드

docker buildx build --build-arg BASE_IMAGE=oracle/database:19.3.0-ee-slim -t oracle/database:19.3.0-ee-slim-faststart -f Dockerfile.faststart .

3. Oracle 19c Docker 컨테이너 생성

이제 이미지를 다 만들었으니 실행 가능한 컨테이너로 만든다.

🚨 주의 🚨

이 명령어들은 Mac 터미널에서 진행한다.

# 컨테이너 생성 및 실행
docker run -d --name test19c -e ORACLE_PASSWORD=Oracle_2023 -p 1521:1521 oracle/database:19.3.0-ee-slim-faststart

# 실행한 컨테이너 로그 확인
docker logs -f test19c

위 명령어에 대한 옵션을 설명하겠다.

• d : 컨테이너를 백그라운드에서 실행할 수 있게 한다. 즉, 컨테이너를 실행한 이후에도 터미널에서 다른 작업을 진행할 수 있고, 실행한 터미널을 종료하더라도 백그라운드에서 계속 실행된다.

• name : 생성될 컨테이너의 이름

• -e : 컨테이너의 환경변수 설정

  • ORACLE_PASSWORD : 오라클 데이터베이스 접속 시 사용하는 비밀번호

• -p : 호스트와 컨테이너의 포트포워딩

  • 1521:1521 : Oracle Database는 일반적으로 1521 포트로 열리므로 컨테이너의 1521 포트와 호스트의 1521 포트를 연결해 컨테이너 외부에서 프로그램이 1521 포트를 사용해 컨테이너 내부 1521 포트로 연결되어 데이터베이스에 접속할 수 있게 한다.
    

• 명령어 입력 결과 로그를 보면 정상적으로 데이터베이스가 실행된 것을 볼 수 있다.

• Docker Desktop에서 확인 실행한 컨테이너는 Docker Desktop에서 관리할 수 있다.

여기까지 Oracle Database 19c를 ARM 기반 Mac OS에서 실행할 수 있도록 Docker를 이용해 컨테이너를 만들어보았다. 글이 길어져서 다음 글에 SQL Plus와SQL Developer를 이용해 데이터베이스에 접속하는 방법을 작성했다. 아래 링크로 방문하면 된다.

SQL Developer와 docker 컨테이너 연결 - 데이터베이스 접속

구현 방법에 대해서 인덱스라는 개념을 언급하지만 다른 방법을 사용하겠다고 했다. 언급한 내용은 자신의 mongodb 강의에 있다며 판촉(?) 행위를 하길래 그냥 혼자 공부해야겠다 생각하고 Github Copilot과 구글링을 통해 공부한 내용을 정리한다.

인덱스(INDEX), 고유 인덱스(UNIQUE INDEX), 고유 제약 조건(UNIQUE CONSTRAINT)에 대해 알아본다.

🧾 구현 방법 설명

when using mongodb you could create an index in the mongo database on your email field and give that index the unique property.

방법에 대한 설명은 해주고 실제 강의에서는 주어진 이메일을 대조하는 방법을 사용했는데, 위 설명을 보면 email 필드에 index를 생성하고 unique 속성을 부여하면 된다.

즉, email 필드를 UNIQUE INDEX로 설정하면 된다.

이를 적용하면 무엇이 달라질지, 어떤 이점이 있을지 알아보도록 하겠다.

🔍 INDEX ?

Database_index - Wikipedia

A database index is a data structure that improves the speed of data retrieval operations on a database table at the cost of additional writes and storage space to maintain the index data structure.

• 데이터베이스의 인덱스(INDEX)는 검색 작업의 속도를 향상시키는 데이터 구조

• 데이터 구조는 해시 테이블(Hash Table)과 B Tree로 구현 가능하며 주로 B Tree에서 파생된 구조로 구현됨 - B* Tree, B+ Tree

• 인덱스 역시 데이터 구조이므로 추가적인 쓰기 작업과 저장 공간이 필요

  
  

⚖️ INDEX 장단점

📌 장점

• 인덱스를 사용하면 데이터 조회(SELECT) 속도가 빨라진다.

• WHERE, ORDER BY, MIN/MAX 속도가 빨라진다.

  데이터베이스에서 특정 데이터를 조회(WHERE)할 때 테이블 전체를 조회(full scan)해야 한다.

  하지만 인덱스를 사용하는 경우 인덱스를 기준으로 정렬된 상태로 저장되어 있어 더 빠르게 찾을 수 있다.

  정렬된 상태이므로 ORDER BY, MIN/MAX 또한 빨라진다

  
  

📌 단점

• 인덱스라는 데이터 구조를 유지하기 위한 비용이 존재한다.

  테이블과는 별개로 추가적인 저장 공간이 필요하고 인덱스가 적용된 열(Column)에 INSERT, UPDATE, DELETE 작업 시 정렬, 인덱스 구조 갱신 등 추가적인 연산이 발생한다.

  
  

✨ 인덱스를 적용하기 적절한 경우

• 조회(SELECT)를 자주 하는 경우

• 삽입(INSERT), 수정(UPDATE), 삭제(DELETE)가 자주 발생하지 않는 경우

• 데이터의 중복도가 낮은 경우

• WHERE, ORDER BY, JOIN을 자주 하는 경우

✔️ 구현

앞 내용들로 INDEX에 대해서는 어느정도 알았으니 email 필드에 UNIQUE INDEX를 부여해 중복 방지(unique) 및 빠른 조회(index)를 구현해보자.

• models/user.js

  const userSchema = new Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,    // unique 옵션 설정
  },
  });

• Github Copilot Chat 답변

email 필드에 unique 옵션을 추가하면 해당 필드에 대한 Unique Index가 생성되며, 이를 통해 해당 필드를 기준으로 조회하는 작업이 더욱 빠르게 수행될 수 있습니다. mongoose에서는 unique 옵션을 가진 필드에 대해 자동으로 인덱스를 생성해주는 기능이 있으므로, email 필드에 unique 옵션을 추가하면 mongoose가 자동으로 email 필드에 대한 Unique Index를 생성합니다

필드에 unique 옵션을 주면 mongoose에서 자동으로 Unique Index를 생성해준다. 이로서 email 필드에 대한 중복 방지 및 빠른 조회가 가능해졌다.

• controllers/auth.js

  postSignup: async (req, res, next) => {
  const { name, email, password } = req.body;
  
  try {
    // email만 넣으면 됌!!
    const existingUser = await User.findOne({ email });
    ...
  
  } catch (err) {
    ...
  }
  },

  email필드가 중복값이 없음이 보장되고 index가 적용되어있어 빠른 조회가 가능하다.

🤔 UNIQUE INDEX 적용 이유

그렇다면 왜 email 필드에 unique 인덱스를 적용해야 하는 것일까?

💬 INDEX 적용 이유

email필드에 대해 살펴보면 앞서 정리한 인덱스를 적용하기 적절한 경우에 대부분 해당한다.

• 조회(SELECT)를 자주 하는 경우

  이메일은 사용자의 데이터로서 게시글 작성자 확인 시 정보 표시 및 관리자 페이지에서 회원 조회 등 조회가 자주 일어날 수 있다.

  
  

• 삽입(INSERT), 수정(UPDATE), 삭제(DELETE)가 자주 발생하지 않는 경우

  사람마다 다르겠지만 특정 사이트에 가입 및 탈퇴를 자주 하지 않으며 가입한 이메일 수정 또한 빈번하지는 않다.

  
  

• 데이터의 중복도가 낮은 경우

  이메일 또한 타 사이트에서 중복되지 않은 아이디로 가입해 만들어진 것으로 다른 사용자와 이메일 주소가 같을 가능성이 매우 적다.

  
  

💬 "Unique" Index인 이유

email필드는 중복값을 허용하지 않는 필드로 설정하고 싶었기 때문이다. 사용자들이 각자의 고유한 이메일 주소를 가지고 회원가입 및 로그인이 가능하도록 구현하려 했다.

💡 Unique Constraint와 Unique Index

Unique Constraint(고유 제약 조건)는 내부적으로 Unique Index(고유 인덱스)를 사용하여 구현된다. 고유 인덱스를 생성해 고유 제약 조건을 강제할 수 있기 때문이다.

두 기능을 지원하는 데이터베이스에서는 목적을 명시하는 목적으로 위 둘을 사용할 수 있다.

공통적으로 고유한 값을 가져 중복값을 허용하지 않는다는 조건이 적용된다고 간주한다.

🔗 인덱스 기능을 중점적으로 활용하여 고유성을 강조하고자 할 때

필드를 검색, 정렬, 필터링하는 데 빠른 속도가 필요한 경우, 고유 인덱스를 명시적으로 사용하고 주석을 추가하여 코드에 명확하게 표시하면 된다.

이렇게 함으로써 나중에 고유성이 불필요해진 경우 인덱스 기능만 유지하면 되니 일반적인 non-unique 인덱스로 대체해야 함을 알 수 있다.

🔗 비즈니스 규칙을 중점적으로 고유성을 강조하고자 할 때

필드의 고유성을 강제하기 위해 인덱스가 필요하지 않고, 단순히 비즈니스 규칙으로 고유성을 검증해야 하는 경우, 고유 제약 조건을 사용하는 것이 좋다.

🚨 주의

비즈니스 규칙에서 고유성을 강조할 때, 인덱스가 필요하지 않아도 내부적으로 UNIQUE INDEX를 이용해 구현하기 때문에 '인덱스가 필요하지 않지만 생긴다'는 사실을 인지해야 한다

참고

IBM 문서 - Unique and non-unique indexes When should I use a unique constraint instead of a unique index Difference between unique indexes and unique constraints 클러스터드 인덱스 (Clustered Index), 넌 클러스터드 인덱스 (Non Clustered Index)

Udemy에서 node.js 강의를 듣고있는데, 파일시스템이나 데이터베이스에서 저장한 데이터를 불러온 뒤 객체로 파싱하면 메서드 사용이 불가능했다.

이 포스트에서 불가능했던 이유와 해결 방법을 기록했다.

🚨 에러 발생 예시

간단한 클래스를 정의하고 파일/DB에서 저장 및 불러오고 메서드를 사용하는 예시를 들어보겠다.

🧾 User 클래스 정의

User클래스는 name과 age 속성, getName()과 getAge() 메서드를 제공하는 클래스다.

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

📌 파일에서 객체 저장 및 불러오기

fs모듈을 이용한다. JSON.stringify()와 JSON.parse()로 문자열, 객체로 파싱 후 저장 및 불러온다.

const fs = require('fs');

// 객체 생성 및 파일 저장
const user = new User('John Doe', 25);
fs.writeFileSync('user.json', JSON.stringify(user));

// 파일에서 객체 불러오기
const data = fs.readFileSync('user.json', 'utf8');
const loadedUser = JSON.parse(data);

// 메서드 호출 - 에러발생!
console.log(loadedUser.getName()); // Error: loadedUser.getName is not a function
console.log(loadedUser.getAge());  // Error: loadedUser.getAge is not a function

📌 데이터베이스에서 객체 저장 및 불러오기

mongodb 사용 예시로 DB 연결 관련 코드는 축약하고 논리 위주로 작성하였다.

const db = getDb(); // 데이터베이스 connection 얻기

// 객체 생성 및 데이터베이스에 저장
async function insertUser(name, age) {
    const user = new User(name, age);
    await db.collection('users').insertOne(user);
}

// 데이터베이스에서 객체 불러오기
async function findUser(userId) {
    const user = await db
        .collection('users')
        .findOne({ _id: userId }); 
    return user;
}

async function main() {
    insertUser('John', 25);

      const userId = '임의의 유저 아이디';
    const loadedUser = await findUser(userId);

      // 에러 발생!
    console.log(loadedUser.getName()); // Error: loadedUser.getName is not a function
    console.log(loadedUser.getAge());  // Error: loadedUser.getAge is not a function
}

main();

🔍 직렬화 & 역직렬화

이와 같은 에러는 직렬화와 역직렬화에 대한 이해가 필요하다. 아래 코틀린 공식문서에 직렬화에 및 역직렬화에 대한 설명이 있다. Serialization | Kotlin Documents

💬 직렬화 (Serialization)

응용 프로그램에서 쓰는 데이터를 네트워크를 통해 전송하거나 DB 또는 파일에 저장 가능한 형식으로 바꾸는 프로세스

💬 역직렬화 (Deserialization)

외부 소스에서 데이터를 읽고 이를 런타임 객체로 바꾸는 반대 프로세스

즉 파일시스템이나 데이터베이스에 데이터를 전송 및 불러오는 행위를 각각 직렬화와 역직렬화로 생각하면 된다.

🤔 에러 발생 원인

이번 문제를 해결하려면 JavaScript에서의 직렬화 / 역직렬화가 어떻게 이루어지는지 알아야한다.

💬 JavaScript 객체의 직렬화 & 역직렬화

우선 파일 및 데이터베이스에 저장하는 경우 객체의 속성만 저장된다.

• 파일에 저장하는 경우

  {"name":"John Doe","age":25}

• 데이터베이스에 저장하는 경우

  {"_id":{"$oid":"64a132951d6cb2e438455023"},"name":"John","age":{"$numberInt":"25"}}

  
  

instanceof don't work for JSON

파일이나 데이터베이스에서 데이터를 불러와 객체로 파싱(역직렬화)하면 해당 객체는 no prototype 객체가 된다. 즉, 순수하게 객체의 속성만 담고있는 객체가 되어버린다.

• no prototype 객체
  • spread(...) 문법 사용 불가능 - no iterator 에러
  • 객체 instanceof 클래스 === false - 해당 클래스의 인스턴스가 아닌 것으로 간주
    

📝 원인 정리

객체의 상태만을 포함한 JSON 형태의 데이터나 데이터베이스 레코드는 해당 클래스의 메서드 코드를 포함하고 있지 않기 때문에 메서드 호출이 불가능한 것이다

또한, no prototype 객체라서 spread문법이나 instanceof도 불가능하다.

✔️ 해결 방안

객체의 속성을 추출해 new 연산자로 클래스의 인스턴스를 생성해서 이용하면 된다. 객체 구조분해할당을 통해 간결하고 이해하기 쉬운 코드를 작성할 수 있다.

const { name, age } = loadedUser; // 구조분해할당
const newUser = new User(name, age);

console.log(newUser.getName()); // "John"
console.log(newUser.getAge());  // 25

✨ 응용하기 - 코드에 해결 방안 적용

내가 듣는 강의에서는 프로젝트를 mvc패턴으로 구성했다.

미들웨어를 등록해 사용자를 얻어 req.user에 저장 이후 controller에서 req.user에 접근해 user를 사용할 수 있도록 하는 코드이다.

model에서 클래스를 정의하는데, 주어진 id로 user를 반환하는 함수 findById 메서드에서 이 해결방안을 적용할 수 있었다.

findById에서 User클래스의 인스턴스를 넘겨주므로 req.user로 얻은 사용자 객체는 메서드를 사용할 수 있다.

📃 해결 코드

• models/user.js : findById 메서드에 해결 방안 적용

  class User {
  constructor(name, email, cart, id) {
    this.name = name;
    this.email = email;
    this.cart = cart; // {items: []}
    this._id = id ? new ObjectId(id) : null;
  }
  
  ... (다른 메서드들)
  
  getCart() { ... } // 사용자의 장바구니를 얻는 메서드
  
  static async findById(userId) {
    try {
      const db = getDb();
      const user = await db
        .collection('users')
        .findOne({ _id: new ObjectId(userId) });
  
      // 데이터베이스나 파일에서 불러온 객체는 단순히 데이터의 상태만을 가지고 있음
      // 따라서 User의 메서드를 사용할 수 있도록
      // 객체 생성에 필요한 속성들을 가져온 후 new User로 인스턴스 반환
      const { name, email, cart, _id } = user;
      return new User(name, email, cart, _id);
    } catch (err) {
      console.log(err);
    }
  }
  }

  
  

• app.js : req.user에 저장해 controller에서 접근할 수 있도록 하는 미들웨어 등록

  app.use((req, res, next) => {
  User.findById('사용자 아이디')
    .then((user) => {
      req.user = user; // req 객체에 담으면 다음 미들웨어에서 접근 가능
      next();            // next()를 호출해 다음 미들웨어로 요청이 이동하도록함
    })
    .catch((err) => console.log(err));
  });

  
  

• controllers/shop.js : app.js에서 등록한 user를 요청 객체(req)에서 불러와 메서드 사용 가능

  module.exports = {
  
  ... (다른 컨트롤러들)
  
  postCartDeleteProduct: async (req, res, next) => {
    const prodId = req.body.productId;
    try {
      const cart = await req.user.getCart(); // User 클래스의 인스턴스라 메서드 사용 가능
  
      ... (나머지 로직)
  
      res.redirect('/cart');
    } catch (err) {
      console.log(err);
    }
  }, 
  }

📝 정리

• JavaScript에서 파일 및 데이터베이스에 데이터를 저장(직렬화) / 불러오기(역직렬화)를 하면 객체의 속성만 저장되고 불러옴

• 불러온 객체는 메서드를 지니지 않으며 no prototype - spread문법과 instanceof 불가

• 객체의 속성을 받아 new 연산자로 새로운 인스턴스를 생성해야함

이 환경 설정은 Github Codespaces 뿐만 아니라 일반적인 Linux 환경에서도 적용되는 것이다. 따라서 윈도우에서도 WSL를 사용해 VS Code 환경에서 해당 내용으로 개발 환경을 구축할 수 있다.

1. CMake, g++ 설치 확인

CMake 할 때 쪼오오금 도움이 되는 문서 CMake 환경 구성에 어려움이 있다면 위 문서를 참고하고 아래 내 폴더 구조를 보면 되겠다.

아래 사진은 Github Codepaces에서 빈 템플릿(Blank)을 생성 후 알고리즘 문제풀이에 필요한 패키지들이 설치되었는지 터미널에서 확인한 것이다.

cmake와 g++, Python이 설치되어있어 C/C++, Python을 활용해 알고리즘 문제를 풀 수 있다.

2. CMake Tools Extension 설치

CMake Tools 확장을 설치하면 CMake 확장까지 같이 설치된다. 해당 확장을 이용해 VS Code에서 CMake환경을 편하게 이용할 수 있다.

3. CMake 환경 설정

하단의 상태표시줄에 CMake 확장 메뉴들이 나와있는지 확인한다. 아래 사진에서는 Live Share 다음 메뉴들이 CMake 확장 버튼들이다.

해당 버튼들이 안보인다면 상태표시줄을 우클릭 후 CMake Tools(확장)을 선택해 표시한다.

No Kit Selected 버튼을 눌러 컴파일러를 선택해준다. 나는 GCC 9.4.0을 선택했다.

4.폴더 구조

아래는 CMake를 이용해 개발 및 알고리즘 문제를 푼다고 가정한 폴더 구조이다. src 안에 acmicpc, car라는 서브 디렉터리가 존재하고 그 디렉터리마다 각각 소스파일들이 존재한다.

루트 디렉터리
├── CMakeLists.txt
└── src
    ├── CMakeLists.txt
    ├── acmicpc
    │   ├── CMakeLists.txt
    │   ├── 4029.cpp
    │   └── 1092.cpp
    └── car
        ├── CMakeLists.txt
        ├── main.cpp
        ├── Car.cpp
        ├── Car.h
        └── Vehicle.h

• ~/CMakeLists.txt 가장 최상위의 CMakeLists로 프로젝트 관련 설정들을 넣어준다.

  cmake_minimum_required(VERSION 3.0.0)
  project(algorithm)
  >
  add_subdirectory(src)

• src/CMakeLists.txt 하위 디렉터리들을 프로젝트에 추가해준다.

  add_subdirectory(acmicpc)
  add_subdirectory(car)

• src/acmicpc/CMakeLists.txt acmicpc디렉터리는 백준 알고리즘 문제를 푸는 소스코드를 모아두고 실행하는 장소이다.
  소스파일 하나 하나가 독립된 실행 파일로 존재해야하므로 add_executable을 통해 설정해주었다. 나중에 CMakeLists.txt를 더 잘 다루게 되면 이러한 설정도 변수 등을 통해 자동화를 해봐야겠다.
  add_executable(실행이름 [공백] 같이 빌드할 파일들 나열) 이렇게 사용하면 된다.

  add_executable(1092 1092.cpp)
  add_executable(4029 4029.cpp)

• src/car/CMakeLists.txt car디렉터리는 여러 파일을 같이 빌드해야하는 상황이라 가정하고 만들어보았다. main.cpp을 실행파일로 두고 나머지 Car.cpp와 Car.h를 같이 빌드한다.

  add_executable(Car
    main.cpp
    Car.cpp
    Car.h
    Vehicle.h
  )

5.실행하기

상태표시줄에서 왼쪽에서부터 맨 우측(화살표 오른쪽 버튼)에서 실행할 목록을 선택할 수 있다.

1092.cpp을 다음과 같은 내용으로 설정 후 [1092]로 선택하고 바로 옆 화살표 버튼을 누르면 잘 실행되는 것을 볼 수 있다.

#include <iostream>

using namespace std;

int main() {
    cout << "Hello World!" << endl;
    return 0;
}

주의!!

CMakeLists.txt를 편집한 후에는 반드시 저장(Ctrl + S)을 해주어야 한다.

저장과 동시에 CMake명령어가 실행되며 출력창에서 해당 결과가 나온다. Configuring done, Generating done, Build files have been written to:~가 나온다면 정상적으로 설정이 된 것이다.

물론 실행할 파일들 또한 저장을 한 이후 실행해야한다.

6.디버깅(Debugging)

위와 동일하게 실행팔 파일을 선택 후 원하는 위치에 중단점을 찍고 화살표가 아닌 벌레(디버깅 실행)버튼을 누르면 된다.

정리

• Cmake를 이용해 Github Codespaces환경에서 알고리즘 등 cpp 실행 환경 구현
• 디버깅도 가능하며, 여러 파일을 같이 묶어 빌드 및 실행 가능
• C++ 공부를 하면서 각 진도마다 디렉터리를 구분하고 실행하기를 원할때도 유용

CMake는 JetBrains사의 CLion에서 사용했었는데, VS Code에서도 이렇게 사용이 가능하다.

처음 사용하게 된다면 어렵게 느껴질 수 있지만, 익숙해진다면 C/C++ 공부와 알고리즘 문제 풀이에 있어서 가장 편리한 기능이라고 생각한다.

GCP(Google Cloud Platform)를 이용하여 무료로 3개월간 사지방에서 개발 공부를 했으나, 기간이 다 지나 전역 전까지 새로운 환경을 만들어 공부해야했다.

아마존의 EC2서 컨테이너를 만들어 하는 방법이 있었지만 더 편한 환경을 원했고, 우연히 github에서 무료로 가상 컨테이너를 제공하는 것을 보게되었다.

클라우드 환경에서 제공되는 컨테이너는 Ubuntu 환경이라 내가 원하는 개발 공부를 모두 할 수 있었다.

1. Github Codespaces란?

Github Codespaces 설명서

A codespace is a development environment that's hosted in the cloud.

Github에서 제공하는 클라우드 개발환경이며 기본적으로 Docker 컨테이너 위에 Ubuntu Linux 이미지로 생성된다. OS는 원하는 리눅스 버전으로 설정 가능하며 Windows나 Mac OS 컨테이너는 지원하지 않는다.

브라우저(크롬, edge 등), Visual Studio Code, JetBrains Gateway, Github CLI를 통해 접근할 수 있다.

나는 사지방에서 개발하기때문에 브라우저를 통해 접근하였으며 vscode.dev처럼 웹 상의 VSC인 github.dev를 통해 개발이 가능했다.

사지방에서만 사용하나?

전역 하고도 유용하게 사용할 것 같다. 시간과 장소에 상관없이 인터넷만 연결된 PC라면 접속 가능하기 때문에, 전공 수업때 노트북을 들고가지 않아도 작업하던 환경에 바로 접근할 수 있는 장점이 있다.

Private 리파지토리를 만들고 Codespaces를 생성해서 언제 어디서나 유용하게 사용 가능하다.

2.무료인가?

일반 계정

Github Free for personal accounts

• 120 GitHub Codespaces core hours per month
• 15 GB GitHub Codespaces storage per month

Pro 계정

Github Free for organizations

• 180 GitHub Codespaces core hours per month
• 20 GB GitHub Codespaces storage per month

달마다 무료로 사용 가능한 저장공간과 이용시간이 주어진다. 일반 계정은 120시간 Pro 계정은 180시간이다.

⚠ 주의 ⚠

The compute usage of a codespace is the length of time for which that codespace is active multiplied by the multiplier in the pricing table for the machine type of the codespace.

실제 사용 시간과 주어진 이용 시간은 다르다

나는 express 템플릿을 이용했는데, 4-core, 8GB RAM 컴퓨팅 파워를 이용하고 있다. 따라서 Included usage multiplier를 반영하면

• 180 / 4 = 45 따라서 45시간만 무료로 사용할 수 있는 것이다.

내가 평소에 사용하는 시간만 생각하면 대략 평일 1시간 30분 / 주말 7시간 이므로 총 107시간 30분 정도를 사용하게 되는데

내가 비용을 더 지불할 의향이 있다고 가정하고 각 컴퓨팅 성능에 따라 계산해보겠다. 환율은 1320원으로 계산하겠다.

• 2core(4GB RAM) - $ 0.18 : 107시간 30분 - 무료 90시간(180/2) = 17시간 30분
  • 17.5 * 0.18 : $ 3.15 - 4,158 KRW
• 4core(8GB RAM) - $ 0.36 : 107시간 30분 - 무료 45시간(180/4) = 62시간 30분
  • 17.5 * 0.18 : $ 22.5 - 29,700 KRW

2core와 4core의 비용 차이가 크다는 것을 알 수 있다. 따라서 Blank 템플릿으로 2core 컴퓨팅 파워를 사용해서 개발하는 것이 좋겠다.

한달에 4천원은 사지방에서 편한 개발을 위해 지불하기엔 충분하다 생각했다.

3. Pro 자격 얻기

아래 링크 중 맨 위 Github Pro를 얻어보자 포스트를 참고하여 가입을 하면 된다. 나머지 두 개의 링크는 신청 방법이랑 Pro 자격을 얻고 받을 수 있는 혜택인 Student Developer pack이다.

Github Pro를 얻어보자 Github global campus 신청 Github Student Developer Pack

To qualify for student benefits, you must:

• Be currently enrolled in a degree or diploma granting course of study such as a high school, secondary school, college, university, homeschool, or similar educational institution.
• Have a verifiable school-issued email address or upload documents that prove your current student status.
• Have a GitHub user account.
• Be at least 13 years old.

나는 대학교를 다니고있어 웹메일을 통해 Github Global Campus에 가입하여 Pro 자격을 얻을 수 있었다.

4.생성방법

방법 1. repository에서 생성

이미 만들어져 있거나 새로 만든 repository에서 생성이 가능하다. 리파지토리 우측 상단의 <> Code버튼을 누르고 Codespaces 카테고리를 선택한 후 Create codespace on main을 클릭하면 된다.

방법 2. 주어진 template에서 생성

Github에서 템플릿을 선택해서 codespace를 생성할 수 있다. Github 메인화면에서 상단 네비게이션에 Codespaces를 들어가면 현재 내가 생성한 codespace들을 볼 수 있다.

codespaces 메인화면에서 좌측 Templates를 들어가면 다음과 같이 생성 가능한 템플릿 목록이 나온다.

빈 템플릿 뿐만 아니라 React, Express, Django, Flask 등등 여러 템플릿을 지원하니 빠르고 편하게 환경이 준비된 템플릿을 이용하는 것도 좋은 방법이다.

5. Codespaces 관리

컨테이너 관리

Codespaces 메인화면 하단을 보면 생성한 codespace 목록이 나온다. 우측 버튼을 누르면 Active 상태의 컨테이너는 접속을 끊은 후 1시간이 지나면 자동으로 멈춘다.

• Stop codespace를 통해 접속이 끝난 후 바로 멈춰주면 좀 더 타이트하게 무료로 제공되는 시간을 관리할 수 있다.
• Change machine type을 통해 컨테이너의 성능을 변경할 수 있다.

사용량 모니터링

내가 얼마만큼 사용했는지 알고싶다면 Github 우측 상단 프로필에서 Settings -> 좌측 Billing and plans -> Plans and usage에서 확인이 가능하다.

쭉 내리다보면 Codespaces 사용량이 있다. Usage hours와 Storage는 클릭해서 구체적인 내용 확인이 가능하다.

나는 Pro자격이 있어서 GitHub Copilot도 무료로 사용가능했다!

정리

• Github의 Codespaces를 통해 무료로 컨테이너를 제공받아 개발을 위해 사용 가능
• 학생인 경우 Pro자격을 무료로 얻어 달마다 180시간 무료로 사용 가능
• 기본적으로 g++, cmake, python 등이 설치되어있어 알고리즘 문제풀이에 용이
• Stop 기능을 활용해 자원을 사용량만큼 사용하기

CMake로 알고리즘 및 C/C++ 환경 구성하기

아래 링크를 통해 CMake 환경 설정도 알아보면 좋다. 알고리즘을 위한 CMake 환경 구성

해결 방법

pug는 javascript와 유사한 문법을 가지고 있어서 백틱을 사용해 동적인 문자열을 만들 수 있다. 백틱을 사용하는 방법은 javascript와 동일하다.

a.btn(href=`/products/${product.id}`) Details

괄호도 사용할 수 있어 괄호 안에 js 문법으로 변수를 사용할 수 있다.

a.btn(href=('/proxy/3000/products/' + product.id)) Details 

일반적으로 #{}나 =를 사용했었는데, 백틱과 소괄호를 사용하는 방법도 잘 알아두어야겠다.

🚨 문제 발생

admin/add-product에서 POST로 넘긴 데이터를 fs 모듈을 이용해 data/products.json에 작성 후 / 경로로 redirect하는 과정에서 발생했다.

디버거를 돌려보니 파일에 정상적으로 데이터가 기록되어 fs모듈을 사용한 코드의 문제는 아니었다. /로 redirect순간 같은 코드가 반복되며 클라이언트에 응답을 주지 못하고 있었다. 그래서 timeout으로 인해 socket hang up이 발생한 것이었다.

🔍 원인 찾기

console.log로 로깅을 하며 터미널을 보고 있었는데, 원인이 될만한 점을 찾게 되었다.

[nodemon] restarting due to changes...

fs모듈을 통해 data/products.json파일을 변경하는 경우 nodemon에서 이를 인식하여 서버를 재시작 하는 것이었다.

✔️ 해결

해결방안 1) shell에서 옵션 넣기

위 로그를 통해 nodemon이 로컬 파일 변경을 인식해 서버를 재시작 하는 것이 원인이라 생각되어 nodemon restart due to change socket hang up이라고 구글에 검색을 해보았고 stackoverflow에서 해당 답변을 찾았다.

답변 링크

Are you using nodemon, or some other file-watcher? In my case, I was generating some local files, uploading them, then sending the URL back to my user. Unfortunately nodemon would see the "changes" to the project, and trigger a restart before a response was sent. I ignored the build directories from my file-watcher and solved this issue.

Here is the Nodemon readme on ignoring files: https://github.com/remy/nodemon#ignoring-files

답변 하단에 나온 링크로 들어가 nodemon에서 파일을 ignoring하는 방법을 찾았다.

nodemon --ignore 경로

해결방안 2) package.json에 설정하기

나는 package.json에서 설정해두고 npm start로 편하게 실행하고 싶어서 해당 링크 상단에서 찾은 방법을 사용하려고 한다.

nodemon의 ignore를 package.json에서 설정하는 방법 package.json에 nodemonConfig를 추가하여 nodemon에 관한 세부 설정이 가능했다.

아래는 해당 내용을 참고한 package.json의 일부다. 하단 ...은 생략

{
  "name": "learn-node",
  "version": "1.0.0",
  "description": "Complete Node.js Guide",
  "main": "app.js",
  "nodemonConfig": { // 추가한 부분! json은 주석이 불가능하다. 여기선 편의를 위해 추가했다.
    "ignore": [
      "data/*"
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js"
  },
  ... 

💡 정리

• nodemon은 로컬 파일이 변경되면 이를 인지하고 서버를 재시작. 이때 redirect를 한다면 socket hang up 오류 발생
• ignore 옵션을 통해 불필요한 재시작 방지

이제 터미널에서 npm start를 통해 nodemon을 실행해도 socket hang up오류가 발생하지 않는다. 👍

app.json에서 따로 설정이 필요하다는 것을 알았고, 이 문제를 해결한 내용을 기록하려 한다.

app.json 설정

Expo docs - 다크모드 관련 문서

Configuration Both managed and bare projects for Android and iOS require additional configuration to support switching between light and dark modes. No additional configuration is required for the web.

라이트모드와 다크모드 간의 변경을 지원하기 위해서는 추가적인 설정이 필요하다고 한다.

app.json에 다음 옵션을 추가한다. ...는 생략

{
  "expo": {
    ...
    "userInterfaceStyle": "automatic"  // 이 옵션을 넣어야 한다.
  },
  ...
}

expo-system-ui 설치

In EAS Build and development builds you'll need to install the native module expo-system-ui otherwise the userInterfaceStyle property will be ignored.

userInterfaceStyle 속성이 무시될 수 있으므로 expo-system-ui를 설치해야한다.

npm install expo-system-ui

다크모드 인식

이제 메트로서버를 재시작하면 휴대폰 설정에서 다크모드 적용 시 어플리케이션에서도 인식하는 것을 확인할 수 있다.

다크모드를 인식하는 방법은 두 가지가 있다.

• Appearance 모듈
• useColorScheme 훅

Expo docs - detecting the color scheme 문서에 따르면 useColorScheme 훅을 사용하되 필요시 Appearance 모듈을 사용하면 될 것 같다.

import { Appearance, useColorScheme } from 'react-native';

// 방법 1: Appearance 모듈 사용
if (Appearance.getColorScheme() === 'dark') { }

// 방법 2: useColorScheme 훅 사용
if (useColorScheme() === 'dark') { }

알고보니 code-server가 설치된 디렉터리에서 html, css 파일을 변경해야 사용 가능하다는 것을 알게 되었다. 하지만, 여러 블로그를 둘러보며 해당 파일들을 변경해도 바뀌지 않아서 너무 힘들었다...

폰트 적용을 위해 수많은 삽질을 겪고 나서 내가 적용한 방식을 기록하려 한다.

1. 폰트 설치

나는 웹 폰트(woff, woff2)를 적용하는 형태로 구현했다. 자신이 원하는 폰트를 위에 나온 확장자로 선택해 다운로드 받는다.

사지방에서 윈도우에 다운로드 받아도 Drag & Drop으로 code-server에 업로드할 수 있으니 굳이 터미널에서 명령어를 통해 다운로드 받고 파일을 이동시킬 필요가 없다.

내가 선호하는 폰트는 Fira Code와 JetBrains Mono다.

Google Fira Code JetBrains Mono

2. 파일 업로드 및 수정

가장 중요한 부분이다. 이 파트에서 삽질을 가장 많이 했으며, 이전에 썼던 글에 있는 맨 처음 code-server에 접속한 상태에서 직접 적용해봐도 이상이 없으므로 천천히 따라오면 되겠다.

2-1. 폴더 열기

code-server에 접속 후 /usr/lib/code-server/src/browser/pages 해당 경로로 폴더를 열어준다.

2-2. fonts 폴더 생성 및 파일 업로드(Drag & Drop)

폴더를 생성하기 전 우선 파일 및 폴더 생성/삭제 권한을 얻어야한다.

> sudo chmod ugo+rwx -R /usr/lib/code-server/src/browser/pages

만약 이래도 생성 및 삭제가 불가능하다면 browser, src 이렇게 점점 더 높은 폴더에서 권한을 얻어보도록 하자.

편하게 sudo chmod ugo+rwx -R /usr/lib/code-server 이래도 되지만 시간이 좀 걸리고 불필요하게 파일 권한을 더 얻어서 나중에 실수로 파일을 지우게 되는 경우가 생길 수 있으니 주의가 필요하다.

이제 fonts 폴더를 생성하고 해당 폴더에 다운로드 받았던 폰트 파일들을 넣는다. 다른 사용하고 싶은 폰트들도 이와 같은 방법으로 적용하면 되겠다.

갑자기 테마 색상이 어둡게 바뀐 이유는 JetBrains Mono 폰트를 적용하고 나서 새로 업로드 했기 때문이다.

2-3. fonts.css 생성 및 수정

fonts.css 파일을 생성 후 다음 내용을 작성한다.

주의할 점은 fonts.css는 fonts 폴더 내부에 있는 것이 아니다 fonts 폴더와 fonts.css파일은 pages라는 같은 폴더 내에 위치한다.

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face document

@font-face에 대해 알아보려면 위 링크를 참고해도 좋다.

2-4. login.html 수정

편집기 좌측 파일 탐색기를 보면 login.html 파일이 있을 것이다.

파일을 열고 <head> 태그 맨 마지막에 아래 코드를 입력한다.

<link rel="stylesheet" type="text/css" href="{{CS_STATIC_BASE}}/src/browser/pages/fonts.css">

이러면 login.html의 모습은 다음과 같다. ...은 생략된 내용들이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="{{CS_STATIC_BASE}}/src/browser/pages/fonts.css">
  </head>
  <body>
    ...
  </body>
</html>

2-5. vscode 설정의 Font Family 수정

좌측 하단 설정 아이콘에서 설정을 들어가거나 ctrl + ,로 설정에 들어갈 수 있다.

이후 Font Family 부분 맨 앞에 JetBrainsMono등 fonts.css에서 font-family부분에 작성한 이름 그대로 추가한다. 끝에 ,를 까먹지 않도록 하자

만약 fonts.css의 font-family에 이름을 띄어쓰기로 지정했다면 ex) Fira Code 작은 따옴표로 감싸주면 적용이 된다.

이렇게 이름 사이에 공백이 있으면 아래처럼 'Fira Code' 따옴표로 감싸준다.

2-6. code-server 재시작

ssh에서 docker restart code-server를 입력한다.

> docker restart code-server

만약 permission denied라고 뜨며 docker 명령을 실행할 수 없다면 다음 명령어를 입력 후 ssh창을 닫고 다시 킨 다음 위의 restart명령을 실행해보자.

> sudo usermod -aG docker $USER

필요시) editor.lineHeight 조정

내가 사용하는 JetBrains Mono 폰트는 줄 간격을 더 두어야 보기 편할 것 같았다. 따라서 설정에서 줄 간격을 조정하였다.

기본값은 0으로 JetBrains Mono 기준 19로 적용한 것과 동일했다.

나는 값을 20으로 설정했는데, 이러니 보기 훨 편했다.

사지방에서 GCP를 통해 편하게 개발하는 것이 충분히 만족스럽지만, 사회에서 VSCode를 커스텀하던 욕심이 이어져 이런 삽질까지 오게 되었다. 결과가 만족스러워 시간낭비같지는 않다 ㅋㅋㅋ

최대한 세세하게 적어두고 나중에 필요할 때 다시 적용할 수 있도록 했다. 오늘도 삽질 끝.

React Native를 공부하고 있는데, expo snack이라는 좋은 사이트가 있지만, 네이티브 파일들에 접근할 수 없다는 한계가 불만이었다.

이때 방법으로는 goormIDE같은 온라인 통합개발환경을 사용하는 것인데, RN 컨테이너 환경이 마음에 안들고(버전 등등) blank에서 직접 환경을 세팅하기에는 많은 삽질과 어려움이 필요했다.

그래서 다른 방법이 없나 구글링을 해보니 GCP(Google Cloud Platform)에서 가상 머신을 만들고 이 위에 code-server를 설치해 VSCode를 통해 개발할 수 있는 방법이 있었다.

2wndrhs(이중곤)님의 블로그에서 code-server를 여는 것까진 성공했으나, 이후 내가 겪은 문제들과 이를 어떻게 해결했는지 기록해두려 한다.

개발 환경 세팅

2wndrhs(이중곤)님의 블로그

위 블로그에서 code-server 구동까지 마친 후 읽으면 되겠다.

문제 1. 사용자 권한

code-server를 통해 VSCode환경에서 파일 및 폴더를 생성, 삭제하려 했으나 권한이 부족하여 편집이 불가능했다.

사용자 확인

> whoami
coder

code-server에서 사용되는 사용자는 coder다.

소유권 부여

> sudo chown -R coder *

모든 파일에 대한 소유권을 얻었다.

파일 및 폴더 권한 부여

> sudo chmod ugo+rwx -R /home/coder/project

이 명령어를 사용하면 소유권 부여는 안해도 되긴 한다. 위험한 명령어니 꼭 필요한 부분까지만 적용하도록 하자. 나는 project 폴더 내에서만 작업을 하기때문에 /home/coder/project까지만 적용했다. 또한 -R 옵션을 통해 project 폴더 내의 모든 파일 및 폴더에 대해서도 재귀적으로 권한을 수정하였다.

문제 2. 카메라 차단으로 인한 QR코드 스캔 불가

영내로 들어오게되면 카메라는 특정 어플리케이션을 통해 기능이 작동하지 않도록 차단된다. 이는 expo-cli로 개발을 하면서도 Expo Go를 통한 QR코드 스캔이 불가능해 어플이 실제 어떻게 동작하는지 확인이 불가능하다.

expo-cli의 터널링(tunneling) 기능 사용

Expo Cli tunneling Sometimes it's easier to connect to a dev server over a proxy URL that's accessible from any device with internet access, this is referred to as tunneling.

터널링을 통해 자신의 프로젝트를 인터넷이 연결된 외부 기기에서 접속할 수 있도록 할 수 있다. 사지방은 내가 사용하는 스마트폰과 같은 네트워크에 연결되어있지 않으므로 가장 적절한 방법이라고 볼 수 있다.

해당 링크의 방법으로 ngrok 설치 후 --tunnel 옵션을 주면

> npm i -g @expo/ngrok
> expo start --tunnel

> Metro waiting on exp://(주소).exp.direct:80

해당 주소를 Expo Go의 Enter URL manually 란에다 적고 Connect를 누르면 연결이 된다.

expo-cli 로그인

> expo login -u 아이디 -p 비밀번호

expo-cli에 로그인을 해 두고 Expo Go에도 동일한 계정으로 로그인이 되어있다면 --tunnel로 프로젝트를 실행할 때 URL을 입력하지 않아도 Expo Go 상단에 프로젝트가 뜨게 된다.

처음에는 뜨지 않았는데, 한번 URL로 연결해두면 같은 계정인 경우 Expo Go에서 바로 프로젝트를 확인할 수 있도록 기능을 제공하는 것 같다.

RNproject on 0959...

이 부분에서 on 뒤의 숫자 및 영어로 된 코드는 내 docker 에서 돌아가는 code-server의 container id다.

정리

• 권한: 소유권 및 파일 및 폴더 권한을 수정하여 해결
• QR 코드 스캔 불가: expo start --tunnel로 터널링 및 로그인을 통해 Expo Go에서 URL로 접속할 수 있게 하여 해결

PCB는 메모리에 존재하며 상태에 따라 Ready 큐 또는 Event 큐(대기큐)에서 관리된다.

이번 포스트에서는 프로세스 큐와 Swap에 대해 알아본다.

📖 Multiple Blocked Queues

각 큐(Queue)에는 PCB가 들어가 있으며, 큐는 Linked List로 구현 즉, PCB에 Linked List를 구현하기 위한 포인터 멤버(Next, Prev)가 존재

📌 Ready Queue

Ready 상태에 있는 프로세스만 모아둔 큐

• Scheduler가 Ready 큐에서 최우선순위 프로세스를 선택
• 선택된 프로세스를 Dispatch해서 processor(CPU)가 실행

📌 Blocked(Wating or Event) Queue - 대기큐

Blocked상태에 있는 프로세스만 모아둔 큐

• 각각의 Device driver에 존재하는 큐
• 키보드, 디스크, 네트워크, 타이머, 세마포어 등에 대기큐가 존재
• I/O 함수 등을 호출하면 Blocked 상태가 되며 PCB를 해당 장치의 대기큐로 이동시킴
• 데이터가 들어오면 Device driver내의 함수는 대기큐에서 해당 PCB 찾고 대기큐에서 제거 후 Ready Queue에 넘겨줌 -> 이때 해당 프로세스의 상태를 Ready 상태로 변경

💡 데이터를 기다리는 프로세스 판별 방법

• 포트 번호로 구별한다.
• 즉. PCB는 포트 번호로 구별한다.

📖 임시 중단된 프로세스들

💡 Swap out

• 장시간 대기하는 프로세스의 경우
• 프로세스를 메모리에서 디스크의 swap 영역으로 이동
• Blocked -> Suspend로 상태 변경

💡 Swap in

• 대기상태에서 Interrupt가 발생한 경우
• 프로세스를 디스크의 swap 영역에서 메모리로 이동
• Suspend -> Ready로 상태 변경

✍️ 프로세서(CPU)는 입출력보다 빠르다.

• 메모리에 있는 모든 process가 I/O를 대기하며 CPU는 idle 상태가 될 수 있음

✍️ 더 많은 메모리 확보를 위해 Swap이 필요하다.

• 장시간 대기상태의 프로세스를 디스크의 별도의 swap 영역으로 빼냄
• 메모리에는 다른 프로세스를 넣어 실행함
• swap out된 프로세스는 Blocked -> Suspend 상태로 변경
• swap in된 프로세스는 Suspend -> Ready 상태로 변경

📖 프로세스 추적 - Trace of Process

프로세스에 대해 실행되는 명령 순서

💡 Dispatcher

프로세서(CPU)를 한 프로세스에서 다른 프로세스로 전환하는 역할

💡 Scheduler (Kernel 내의 함수 이름)

실행 가능한 Process들(Ready state)들 중 우선순위가 가장 높은 프로세스 선택 해당 프로세스에게 프로세서(CPU)를 넘겨주는(dispatch) 역할

🚨 주의

프로세스 스위치 사이에 반드시 스케줄러 함수 호출함

📖 프로세스 5상태 - A Five-State Model

각 프로세스는 실행 도중 항상 다음 상태들 중 하나의 상태로 존재

👶 New

프로그램의 실행을 준비하는 단계

• PCB 생성
• Load 과정으로 Ready 상태가 됨

✔️ Ready

프로세서만 주어지면 언제든 실행될 수 있는 상태 즉, 실행 가능한 준비 상태

🔄 Running

프로세서에 의해 현재 실행 중인 상태

🛑 Blocked

I/O 장치에서 대기(waiting)상태

• 키보드, 파일, 네트워크 등에서 데이터 대기
• 프로세서가 주어져도 실행할 수 없는 상태
• 데이터가 도착하면 Ready 상태가 됨

❌ Exit

프로그램 실행이 완료되어 폐기단계

• 메모리에서 제거
• PCB 소멸

📖 상태 변화 이벤트

💡 이벤트 대기 - Wait Event

Device driver에서 대기 -> Block State로 상태 변화

💡 이벤트 발생 - Event Occurs

Device driver 실행 -> Ready State로 상태 변화

📌 Keyboard, Mouse - Keyboard, Mouse interrupt

Wait Event

scanf(), GetMessage() 호출

Event Occurs

키보드 - Enter 마우스 - 움직임, Click

📌 Disk(File Read) - Disk(or USB) interrupt

Wait Event

read(), fread(), fscanf() 호출

Event Occurs

디스크가 파일을 읽어 메모리에 전달한 후

📌 Network - Network interrupt

Wait Event

receive() 호출

Event Occurs

네트워크 보드에 데이터가 도착했을 때

📌 Timer - Timer interrupt

Wait Event

Sleep(2000), sleep(2) 호출

Event Occurs

지정한 시간(2초) 지난 후 time quantum(0.1초) 초과 -> 시분할 시스템

📌 Semaphore - 다른 프로세스가 unlock(s) 호출 시에만

Interrupt와는 무관.

Wait Event

lock을 호출했지만 다른 프로세스가 이미 lock() 한 경우

Event Occurs

다른 프로세스가 unlock(s) 함수를 호출하여 lock을 풀어줄 때

📖 프로세스 상태 변화

🚨 주의

• Clock interrupt - 시분할 time slice 초과 : 🔄 Running -> ✔️ Ready
• I/O API 호출 : 🔄 Running -> 🛑 Blocked

📖 Running -> Blocked 상태로의 전환

실행중인 프로세스가 대기 상태로 전환되는 과정

📌 I/O 함수 호출 - scanf(), read(), receive() 등

• 궁극적으로 API 함수 호출하고 kernel속으로 진입
• 키보드, 디스크, 네트워크 device에 도착한 데이터가 없으면 데이터가 도착할 때까지 대기
• Running 상태에서 Blocked 상태로 전환
• Scheduler() 함수 호출 - processor를 다른 process에게 넘겨 줌
• 데이터가 도착하면 깨어나 해당 데이터를 가지고 리턴

💡 Scheduler() 함수

• Ready상태의 process들 중 우선순위가 가장 높은 프로세스를 선택
• processor를 해당 process에게 넘겨 줌
• 실행할 다른 프로세스가 없을 경우 processor는 idle상태
  • for(;;); 무한 loop 돌면서 대기
• Blocked 상태의 process들은 스케줄링 대상에서 제외

📖 Blocked -> Ready 상태로의 전환

대기상태의 프로세스가 깨어나 Ready 상태로 전환되는 과정 각 디바이스는 데이터가 도착했다는 것을 processor에게 interrupt(전기적 신호)를 통해 통보

📌 Interrupt 발생 - Timer, Network, Disk 등에서 발생

• processor는 현재 실행 중인 process의 실행 보류
• 현재 실행 중인 process : Running -> Ready 상태로 전환
• Interrupt 고유 업무 수행
  • 해당 디바이스의 대기큐에서 데이터를 기다리는 process를 찾아 데이터 전달
  • 해당 process를 Blocked상태에서 Ready상태로 변환 (깨우기)
• Scheduler() 호출 : Interrupt의 마지막에 항상 scheduler 호출
  • 깨어난 프로세스가 최우선순위면 바로 실행
  • 그렇지 않으면 interrupt가 들어오기 전에 실행되었던 프로세스 계속 실행

• Processor : CPU + 제어장치
• Program : 디스크에 있는 프로그램 파일
• Process : 메모리에 있는 실행중인 프로그램

이번 포스트에서는 Process 개념, 생성, 종료, 추적에 대해 알아본다.

📖 프로세스 - Process

• 현재 실행중인 프로그램
• 컴퓨터에서 실행되는 프로그램의 인스턴스
• 프로세서에 할당되어 실행될 수 있는 객체
• 명령어들의 순차 수행, 현재 상태, 연계된 시스템 자원들의 집합 등에 의해 특정지어지는 활성화 단위

💡 Process = Program Code + set of data + PCB

📖 프로세스 생성 - Process Creation

📌 로그인

터미널의 사용자가 시스템에 로그인 한 경우

📌 운영체제에 의한 생성

운영체제는 사용자가 기다릴 필요 없이 사용자 프로그램을 대신하여 기능을 수행하는 프로세스를 생성할 수 있음

📌 실행중인 프로그램(존재하는 프로세스)에 의한 생성

모듈화 또는 병렬화를 이용하기 위해, 사용자 프로그램은 많은 프로세스의 생성을 명령할 수 있음 ex) Visual Studio -> 컴파일러(+링커) -> 실행파일 실행(프로세스 생성)

📖 프로세스 종료 - Process Termination

📌 정상 종료 - Normal completion

정상 종료되는 경우 프로세스는 OS 서비스 호출하여 실행이 완료되었음을 알림

📌 허용하지 않은 메모리 침범 - Bounds violation

포인터 변수의 주소가 잘못된 경우 발생할 수 있음

📌 산술 오류 - Arithmetic error

0으로 나누거나(division by zero) 하드웨어가 수용할 수 있는 것보다 더 큰 숫자를 저장한 경우

📌 잘못된 명령 - Invalid instruction

프로세스가 존재하지 않는 명령을 실행하려고 시도하는 경우

📌 부모 프로세스 종료 - Parent termination

부모 프로세스가 종료되면 운영체제는 부모 프로세스의 모든 자식 프로세스를 종료시킬 수 있음

운영체제가 여러 프로그램을 실행시키는 경우 멀티 프로그래밍과 시분할 시스템 방식이 존재한다.

이번 포스트에서는 각 방식의 개념과 방식에 따라 CPU를 어떠한 상황에 다른 프로그램으로 넘기는지 알아보도록 하자.

📖 멀티 프로그래밍 - Multiprogramming System

Multiprogramming 또는 Multitasking

• 여러 프로그램 동시에 실행

💡 CPU를 넘기는 경우

프로세스(메모리에 올라가 실행 중인 프로그램) A, B가 있다고 가정

• 실행 중인 A가 I/O 함수(입출력 함수)를 호출했을때 I/O 장치에 데이터가 없는 경우
  • CPU 이동 : A ➡ B (B 프로그램 실행)

• I/O 장치에 A가 기다리던 데이터가 들어온 경우

  • A는 준비상태 - CPU가 오면 바로 실행 가능한 상태
  • 우선순위에 따라 A의 실행여부 결정 - A가 최우선순위면 바로 실행
  • CPU 이동 : 원래 실행하던 프로그램 ➡ 우선순위가 가장 높은 프로그램

• 현재 실행중인 프로그램 완료 또는 I/O로 인해 대기 중인 경우

• 🚨 시분할 처리 기능은 없음

✍️ Multiprogramming 정리

• 현재 실행 중인 프로그램 완료 / 종료
• 현재 실행 중인 프로그램 I/O로 인해 대기
• I/O 장치에 기다리던 데이터 도착
  위 상황에서 CPU가 이동한다.

📖 시분할 시스템 - Time Sharing System

Time Sharing

• 여러 대화형 프로그램 동시에 실행
• CPU가 각 프로그램을 일정 시간(time quantum 또는 time slice)동안 번갈아 가면서 실행
  • Multiprogramming system 기능을 포함

💡 CPU를 넘기는 경우

time slice는 0.1초라고 가정

time slice 지나지 않은 경우 - Multiprogramming과 동일

• 실행 중인 프로그램이 I/O 함수를 호출했을 때

• I/O 장치에 기다리던 데이터가 들어온 경우
  • 우선순위 고려해서 실행 할 프로그램 결정

time slice 지난 경우

• 실행 중인 프로그램이 0.1초동안 I/O 없이 계속 실행했을 때 (CPU를 계속 사용했을 때)

✍️ Time Sharing 정리

• 현재 실행 중인 프로그램 완료 / 종료
• 현재 실행 중인 프로그램 I/O로 인해 대기
• I/O 장치에 기다리던 데이터 도착
• 📌time slice동안 I/O 없이 계속 실행된 경우📌
  위 상황에서 CPU가 이동한다.

📖 Multiprogramming / Time Sharing 목적

CPU 스위칭은 오버헤드로 볼 수 있다.

🎯 Multiprogramming 목적 - CPU 이용률 최대화

• time slice에 의한 CPU 스위칭 없음
• I/O 스위칭만 발생

📝 CPU 이용률 최대화 과정

사용자 프로그램 계속 실행 ➡ 프로그램 실행 비율 ⬆️ ➡ CPU 이용률 ⬆️

🎯 Time Sharing 목적 - ** 응답 시간 최소화**

• time slice에 의한 CPU 스위칭 존재
• I/O 없이 실행만 한다면 다른 프로그램 실행

📝 응답시간 최소화 과정

번갈아가면서 프로그램 계속 실행 ➡ 응답시간 ⬆️

💡 CPU 이용률 & 응답시간

CPU 이용률 (utilization) : CPU가 총 실행한 시간 중 사용자 프로그램을 사용한 시간의 비율

• 사용자 프로그램 실행(7초) + CPU 스위칭(0.6초) + I/O 스위칭(0.4초) + CPU 휴식상태(2초)
• CPU 이용률 : 7초 / 10초 = 0.7

응답시간(response time) : 입력이 주어지고 나서 첫 출력이 나오는데 걸린 시간

• 키보드에서 엔터 입력 후 처음 화면 출력이 나오는데 걸린 시간
• URL 주소 입력 후 처음으로 웹 페이지가 화면에 보여지는데 걸린 시간

💡 CPU의 idle 상태

for (;;);

의미없는 무한 루프

📖 CPU 이용률 & 응답시간 비교

💬 주어진 상황

10개의 프로그램이 돌고 있음

• 각 프로그램의 실행시간 : 1초
• 내 프로그램은 마지막 10번째에 실행
• 앞의 9개 프로그램은 I/O 없이 계산만 수행하고 종료 시 결과를 화면에 출력
• 내 프로그램은 실행 시 0.1초마다 결과를 화면에 출력(response)

📈 CPU 이용률 [Processor utilization] 비교

Multiprogramming

• I/O 작업을 대기하는 상황이 아니면 계속 실행
• 그 만큼 프로그램을 실행시키는데 CPU 시간을 더 할애
  • 0.1초마다 CPU를 다른 프로그램으로 넘기지 않아도 되므로
• 따라서 CPU 이용률이 time sharing보다 더 높음
  • 대신 응답시간은 더 길어짐

    사용자 프로그램 실행(10초) + I/O 스위칭(0.1초) = 10.1초

    ✅ CPU 이용률 : 10초 / 10.1초 = 0.99

Time Sharing

• 0.1초마다 CPU를 다른 프로그램에게 넘김
• 넘기는 과정에서 timer interrupt handler, scheduler() 등의 코드 수행
• 이는 Time Sharing을 위한 추가적인 CPU overhead

  사용자 프로그램 실행(10초) + CPU 스위칭(0.4초) + I/O 스위칭(0.1초) = 10.5초

  ✅ CPU 이용률 : 10초 / 10.5초 = 0.95

✍️ Multiprogramming CPU 이용률이 더 높음

🚨 주의

• 사용자 프로그램 실행 시간은 동일
• CPU의 총 사용 시간 차이

⏰ 응답시간 [Response Time] 비교

Multiprogramming

• 앞의 9개 프로그램은 I/O 없음 따라서 실행 중인 프로그램은 종료될 때까지 계속 실행
• 따라서 9개의 프로그램 실행이 종료되어야 내 프로그램 실행
• 9초가 지나서야 내 프로그램의 결과 출력 시작

  ✅ 응답시간 : 내 프로그램 시작(9초) + 결과 출력(0.1초) = 최소 9.1초 이상

Time Sharing

• 0.1초씩 번갈아가면서 모든 프로그램 실행
• 1초마다(각 프로그램당 0.1초씩 10개) 내 프로그램 실행
• 실행 결과가 조금씩 출력되는 것 확인 가능

  ✅ 응답시간 : 내 프로그램 시작(0.9초) + 결과 출력(0.1초) = 최소 1초 이상

✍️ Time Sharing 응답시간이 더 빠름

🚨 주의

• 결과 출력 시간은 동일

📖 운영체제 - Operating System

운영체제 - Wikipedia

응용 프로그램 실행을 제어하는 프로그램 응용 프로그램과 하드웨어 간의 인터페이스

컴퓨터가 부팅이 되고 메인 메모리(RAM)에 제일 먼저 로드(Load)되어 응용 프로그램의 실행을 제어하고 응용프로그램과 하드웨어가 서로 통신할 수 있게 만드는 소프트웨어

✍️ OS = Kernel + System Programs

💡 Kernel

• 메모리에 상주 - 제일 높은 주소에 존재
  • Stack은 높은 주소에서 낮은 주소로 쌓인다. -> Kernel 접근 방지
• 시스템 부팅 시 메모리에 로드되는 함수들의 집합

Kernel 함수들

• Process 관리, Processor 스케줄링, 실기억장치 및 가상기억장치, 파일 시스템, 네트워크, 윈도우 관리 함수들, I/O device drive

Kernel이 호출되는 시점

• 응용프로그램에서 API 함수를 호출하는 경우
• 입출력 장치에서 데이터가 들어올 경우 device driver 함수가 실행됨

💡 System Programs

• 디스크에 실행 파일(Program)로 존재
• 컴퓨터 시스템 관리에 필요한 프로그램
  • ex) 설정 또는 제어판에 존재하는 모든 프로그램들
• Application Program(응용 프로그램) : System Program이 아닌 프로그램들

📖 운영체제 목적

각 목적에 따른 구체적인 내용은 다음 단락부터 서술한다.

운영체제 목적 - Wikipedia

1. 편리성 - Convenience

사용자에게 컴퓨터의 프로그램을 쉽고 효율적으로 실행할 수 있는 환경을 제공

2. 효율성(자원성) - Efficiency

하드웨어 및 소프트웨어 자원을 여러 사용자 간에 효율적 할당, 관리, 보호하는 것

3. 발전성(진화 가능성) - Ability to evolve

서비스를 방해하지 않고 새로운 시스템 기능을 효과적으로 개발, 테스트 및 도입

📖 운영체제가 제공하는 서비스 - 편리성

💻 프로그램 개발 - Program development

• 에디터 & 디버거

✅ 프로그램 실행 - Program execution

• 프로그램 실행과정, 자원 관리, 스케줄링

📻 입출력 디바이스 접근 - Access to I/O devices

• 복잡한 내부는 숨기고 함수만 호출하도록 함

📂 파일에 대한 접근 제어 - Controlled access to files

• 여러 장치, 사용자 동시 접근

🔐 시스템 접근 - System access

• 다중 사용자(자원보호, 동시성)

🧾 회계 - Accounting

• 사용 통계 수집, 성능 모니터링
• 향후 기능 보완의 필요성 미리 예상
• 사용료 청구 목적

🚨 오류 검출 및 응답 - Error detection and response

• 내부 및 외부 하드웨어 오류
  • 메모리 오류
  • 기기 고장
• 소프트웨어 오류
  • 산술 오버플로우, division by zero (0으로 나누기)
  • 금지된 메모리 영역 접근
• 운영체제에서 허용할 수 없는 응용 프로그램 요청

📖 자원 관리자로서의 운영체제 - 효율성

자원 - Resource

컴퓨터에서 사용하고 있거나 사용할 수 있는 각각의 하드웨어 및 소프트웨어 요소

• Processor(CPU), memory, disks, printers, network cards, serial/parallel port, USB port, timer, etc.

운영체제는 각 자원을 관리하며 이에 대한 책임을 진다.

📟 자원 관리에 대한 책임

⚙️ 일반 컴퓨터 소프트웨어와 동일한 방식으로 작동

• 운영체제는 프로세서에 의해 실행되는 함수들의 집합, 프로그램 또는 프로그램 모음이다.

📖 운영체제의 진화 용이성 - 발전성

➕ 하드웨어 업그레이드 및 새로운 타입의 하드웨어 추가

• 하드웨어 업그레이드 및 추가를 통해 새로운 기능이 추가될 수 있다.
• 하드웨어 기능이 추가되면서 소프트웨어 기능도 추가됨
  • MMU의 연속 메모리 할당 - 페이징 기법

🆕 새로운 서비스

• 하드웨어는 동일한데 기능이 추가
  • Graphical User Interface[GUI]

🛠️ 수정

• 오류 수정
• 수정이 새로운 결함을 가져올 수 있다...?

이번 포스트에서는 WSL 환경에서 nodejs, npm, n을 설치하는 방법을 알아보겠다.

Node.js 설치

아래 사이트에서 자신이 설치하고 싶은 node를 설치하자. NodeSource - Node.js Binary Distributions

해당 사이트에는 이렇게 나와있다.

Installation instructions

Node.js v16.x:

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
>
# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
apt-get install -y nodejs

(중략)

Node.js LTS (v14.x):

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
>
# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
apt-get install -y nodejs

Node.js Current (v16.x):

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs
>
# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_current.x | bash -
apt-get install -y nodejs

나는 가장 최신 버전인 16번대 버전을 설치하고 싶어서 맨 아래 명령어로 설치를 했다.

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs

npm 설치 with Aptitude

npm은 Aptitude라는 패키지 관리자를 이용해서 설치하도록 하겠다.

Aptitude는 APT같은 패키지관리자이다. 사용법은 아래 링크를 참고 Ubuntu 패키지 관리 사용법 - apt, dpkg, aptitude

Aptitude를 설치하고 이것으로 npm을 설치하면 된다.

sudo apt install aptitude
sudo aptitude install npm

n 설치

깃허브 링크 n - Interactively Manage Your Node.js Versions

npm install -g n

만약 설치가 안된다면 명령어 앞에 sudo를 붙이거나 위 깃허브 링크의 Installation을 참고하자.

# make cache folder (if missing) and take ownership
sudo mkdir -p /usr/local/n
sudo chown -R $(whoami) /usr/local/n
# make sure the required folders exist (safe to execute even if they already exist)
sudo mkdir -p /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share
# take ownership of Node.js install destination folders
sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

그냥 간단하게 sudo npm install -g n으로 하는걸 추천한다.

n 사용해보기

처음에 명령창에 n을 치면 설치된 node.js를 인식하지 못했다. 그래서 이번엔 lts 버전을 n을 통해 설치해보려 한다.

n lts

현재버전은?

n current # 또는 n lastest

물론 직접 버전을 입력해서 설치하는 것도 가능하다.

이후 콘솔창에 n을 입력하면 다음과 같이 버전을 선택할 수 있는 창이 나온다.

위 아래 방향키로 원하는 버전 위에 하늘색 원을 놓고 Enter로 선택한다. node.js의 설치, 제거, 버전 변경이 매우 편해졌다.

이것이 n을 설치해야 하는 이유다.

npm notice

npm을 이용해 위의 n을 설치하는데, 새로운 버전이 출시되었다고 알려주었다. 이런 것들을 그냥 지나치는 사람들이 많은데, 메시지를 잘 읽고 확인하면 유용하다.

npm --version으로 버전을 확인해보니 7.21.0 이 역시 위의 메시지에서 확인 가능하다.

New patch version of npm available! 7.21.0 -> 7.21.1 npm notice Run npm install -g npm@7.21.1 to update!

그렇다. 해당 버전으로 업그레이드를 하려면 다음과 같이 입력하면 된다.

npm install -g npm@7.21.1

만약 에러가 뜬다면 sudo를 붙여서 명령을 실행하자.

sudo npm install -g npm@7.21.1

정리

• node.js 설치

  curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
  sudo apt-get install -y nodejs

• npm 설치

  sudo apt install aptitude
  sudo aptitude install npm

• n 설치

  sudo npm install -g n

• n에서 node 버전 설치 및 고르기

  n lts            # LTS 버전 설치
  n current        # 또는 n lastest - 최신버전 설치
  n                # 버전 관리

PHP에서는 JavaScript의 fetch API와 유사한 기능을 가진 cURL(Client URL Library)가 존재한다.

이번 포스트에서는 식품의약품안전처 데이터활용서비스의 식품영양성분DB(NEW) API를 PHP에서 사용해보도록 하겠다.

API 사용 준비

식품 안전 나라 홈페이지에서 식품영양성분DB(NEW)를 검색하면 해당 API를 사용할 수 있다. OPEN-API란의 API 인증키를 요청하는 버튼 OpenAPI 이용 신청 이 있다. 회원가입 및 로그인 후 이 버튼을 클릭해서 API 인증키를 발급받을 수 있다.

식품영양성분DB(NEW) API

API 인증키는 홈페이지 상단의 인증키 관리 -> 인증키 신청 현황에서 인증키 발급 정보 및 API 신청 목록 조회가 가능하다.

여기서 발급된 인증키를 복사해서 코드에서 사용할 것이다.

해당 API에 대해 알아보면, URL형식으로만 불러오므로 GET 요청으로 데이터를 받아올 수 있다.

🚨주의🚨

Client Side에서 JavaScript 코드로 API를 사용하는 경우 CORS 때문에 요청이 불가능할 수 있다. 그렇기 때문에 PHP를 사용해 Server Side에서 API를 사용하는 것이다.

요청인자의 keyId는 요청주소의 샘플에 나온 I2790이다.

fetch API를 이용한 Ajax

클라이언트에서 데이터 요청을 하면 PHP에 fetch API를 이용해서 비동기적으로 요청을 한다(Ajax).

위에 첨부한 이미지를 잘 보면, 필수 요청인자들은 /인자/인자/... 이런식으로 URL에 붙이고, 선택 요청인자들은 Query String으로 매개변수를 넣어주는 식으로 되어있다.

요청인자들은 객체에 담아서 이용하기 편하게 했다.

const essential_params = {    // 필수 요청 인자들
    keyId: '자신의 API 인증키 입력',
    serviceId: 'I2790',        // 샘플에 나와있음
    dataType: 'json',        // 중요!! 받은 데이터 object로 파싱하기
    startIdx: 1,
    endIdx: 15
};

// 필수 인자들 "/../../.." 형식으로 url에 붙여주기
let url = `http://openapi.foodsafetykorea.go.kr/api/`
for (const key in essential_params) {
    url += `${essential_params[key]}/`
}

// 선택 요청 인자들
const params = {
    DESC_KOR: '',
    RESEARCH_YEAR: '',
    MAKER_NAME: '',
    FOOD_CD: '',
}

// fetch API에서 사용할 request body
// PHP에서 $객체->url, $객체->params 형태로 사용된다.
const request_body = {
    url: url,
    params: params
}

// fetch API에 넣을 init 객체
const init = {
    method: 'POST',
    mode: 'cors',    // 기본값이 cors이다.
    headers: {          // json 형식과 인코딩 명시
        'Content-type': 'application/json; charset=utf-8',
    },
    body: JSON.stringify(request_body),    // json으로 파싱!!
}

fetch('api.php', init)
    .then((res) => res.json()) // json을 돌려주므로 json()을 이용해 객체로 파싱
    .then((data) => {           // 이 내용은 바로 아래에서 설명
        const res_obj = data.I2790;
        console.log(res_obj.RESULT);
        console.log(res_obj.row);
    });

Postman을 이용한 API 테스트

Postman 홈페이지

이 프로그램을 이용하면 아주 간편하게 API를 테스트할 수 있다.

Workspaces -> 왼쪽의 Collections -> +를 눌러 새로운 Collection 생성 -> Collection 이름 옆의 ... 누르고 Add request

METHOD의 DEFAULT값은 GET이다. 위의 첨부된 API 요청 주소 이미지를 참고해서 URL을 넣어서 Send하면 결과를 표시해준다.

받은 데이터는 JSON형태로 값은 다음과 같다. 맨 밑줄 ...는 생략

{
    "I2790": {
        "RESULT": {
            "MSG": "정상처리되었습니다.",
            "CODE": "INFO-000"
        },
        "total_count": "59886",
        "row": [
            {
                "NUTR_CONT3": "33.5",
                "NUTR_CONT2": "39.7",
                "NUTR_CONT1": "368.8",
                "SERVING_SIZE": "500",
                "MAKER_NAME": "",
                "NUTR_CONT9": "0.1",
                "NUTR_CONT8": "1.9",
                "FOOD_CD": "D000006",
                "NUTR_CONT7": "106.18",
                "NUTR_CONT6": "1264.31",
                "NUTR_CONT5": "16.9",
                "NUTR_CONT4": "8.5",
                "DESC_KOR": "꿩불고기",
                "SAMPLING_MONTH_NAME": "평균",
                "SUB_REF_NAME": "식약처('16) 제4권",
                "SAMPLING_REGION_NAME": "충주",
                "GROUP_NAME": "",
                "RESEARCH_YEAR": "2019",
                "SAMPLING_REGION_CD": "94",
                "SAMPLING_MONTH_CD": "AVG",
                "NUM": "1"
            },
          ...

이것을 통해 JavaScript 코드의 하단에 있던 fetch API에서 다음과 같이 사용한 이유가 나온다.

fetch('api.php', init)
    .then((res) => res.json()) // json을 돌려주므로 json()을 이용해 객체로 파싱
    .then((data) => {           // 이 내용은 바로 아래에서 설명
        const res_obj = data.I2790;
        console.log(res_obj.RESULT);
        console.log(res_obj.row);
    });

맨 처음 API 아이디(keyId)가 나오고 그 아래 RESULT, total_count, row가 있고, row안에 데이터가 들어있는 형태이다.

그래서 data.I2790을 res_obj에 저장한 후 RESULT와 row를 출력한 것이다. 콘솔창을 확인해보면 다음과 같이 출력된다.

cURL - Client URL Library

curl - PHP document

PHP는 Daniel Stenberg가 만든 라이브러리인 libcurl을 지원하므로 다양한 유형의 프로토콜을 사용하여 다양한 유형의 서버에 연결하고 통신할 수 있습니다. libcurl은 현재 http, https, ftp, gopher, telnet, dict, file 및 ldap 프로토콜을 지원합니다. libcurl은 또한 HTTPS 인증서, HTTP POST, HTTP PUT, FTP 업로드(PHP의 ftp 확장으로도 수행 가능), HTTP 양식 기반 업로드, 프록시, 쿠키 및 사용자+암호 인증을 지원합니다.

위에 서술된 여러 프로토콜로 데이터를 create, read, update, delete 할 수 있는 라이브러리다.

사용법

Basic curl example - PHP document

$ch = curl_init("http://www.example.com/");
$fp = fopen("example_homepage.txt", "w");
>
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
>
curl_exec($ch);
if(curl_error($ch)) {
    fwrite($fp, curl_error($ch));
}
>
curl_close($ch);
fclose($fp);

• curl_init() : cURL session 초기화
• curl_setopt() : 전송을 위한 옵션 지정
• curl_exec() : session 실행
• curl_close() : session 종료

cURL을 이용해 PHP에서 API 사용

앞의 JavaScript 코드로 Ajax로 PHP에 요청 시 해당 데이터를 가지고 API를 사용하는 코드이다.

여기서 http_build_query()함수가 사용되었는데, 객체의 내용을 Query String으로 변경해주는 함수이다. 특정 반복문 필요 없이 간단하게 이 함수만 호출하면 되므로 매우 유용하다.

이를 이용하기 위해서 JS에서 보낸 선택 요청 인자들을 객체로 저장해둔 것이다.

function empty_filter($obj) {    // 선택 인자의 값이 없으면("") 제거
    foreach ($obj as $key => $value) {
        if (empty($value)) {
            unset($obj->$key);
        }
    }
    return $obj;
}

// fetch API로 보낸 request_body는 json 형태이므로 파싱 해서 PHP 객체로 사용
$ajax_data = json_decode(file_get_contents('php://input'));

// 위의 필터링 함수를 사용해 불필요한 값 제거
$filtered_params = empty_filter(array($ajax_data->params)[0]);

// http_build_query() 함수로 객체를 QueryString으로 만들어준다.
$query = http_build_query($filtered_params);

// 선택 요청 인자가 존재하는 경우 붙여주기
// 존재하지 않는다면 url은 그대로이다.
$url = $ajax_data->url .= $query ? '?'.$query : '';

// curl에 적용할 옵션들을 저장
$options = array(
    CURLOPT_URL => $url,    // 최종 url도 이때 넣어준다.
    CURLOPT_RETURNTRANSFER => true,  // 반환된 값을 string으로 변환해 저장
    CURLOPT_SSL_VERIFYPEER => false, // true인 경우 https 통신이 불가한 경우 발생
);

// curl 세션 초기화
$ch = curl_init();

// 이것도 유용한 함수 array를 받아서 한번에 옵션을 지정
curl_setopt_array($ch, $options);

// 실행 -> API 서버에서 반환한 데이터를 $response 변수에 저장한다.
$response = curl_exec($ch);    

// 세션 종료
curl_close($ch);

echo $response;    // JSON 형태이므로 JavaScript에서 json()을 통해 파싱

🍯꿀팁

1. http_build_query()

URL에 Query String을 넣어줄 때, 반복문이나 하드코딩 없이 http_build_query() 함수를 사용해서 매우 간편하게 넣어줄 수 있다.

key, value 쌍을 array객체에 저장하고 이것을 함수에 넣어주면 키=값&키=값&키=값&... 형태의 Query String으로 변환되는 것이다.

2. curl_setopt_array()

인터넷에서 여러 코드들을 보면 curl 옵션 지정 시 이렇게 사용한다.

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

깔끔해보이지 않고, 여러 옵션들을 한번에 적용하고 싶어서 알아보니 curl_setopt_array()가 존재했다.

이를 사용하면 설정할 옵션들을 한 변수에서 관리 가능하며, 옵션 적용도 한줄이면 되니 매우 간편하고 가독성도 증가했다.

// curl에 적용할 옵션들을 저장
$options = array(
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => false,
);

$ch = curl_init();

// array를 받아서 한번에 옵션을 지정
curl_setopt_array($ch, $options);

이렇게 말이다.

유지보수와 가독성을 위해서 간단하고 명확한 코드 사용은 중요하다 생각한다. 비록 이건 큰 차이점이 없어보이지만 다음 상황에서는 큰 차이를 보일 수 있다.

• 옵션 추가 및 삭제를 자주 하는 경우

• 옵션에 대한 데이터를 객체로 받아오는 경우

  데이터를 포함한 객체의 key, value를 array객체에 저장하고 curl_setopt_array() 에 array객체 넣기

• 코드의 길이가 증가하는 경우 가독성을 유지하기 위해

정리

• CORS 때문에 API 사용(호출)은 서버쪽에서 진행 (여기서는 PHP)

• API 사용 시 필요한 데이터는 객체로 저장하여 보내기 (코드 간결 & 가독성 증가)

• 쿼리 스트링은 http_build_query() 사용하기

• cURL의 옵션 설정은 옵션들을 array에 저장 후 curl_setopt_array() 사용하기

API 예제 repository

Profile-exe/API Test Example - Github

이때, JavaScript에서 display:none;으로 자신이 쓴 글만 필터링해서 보여주는 코드가 있었는데, 페이지 네이션을 하니까 불필요한 페이지도 생기고 페이지가 바뀔때마다 필터링도 꺼졌다.

이 현상을 고치기 위해 두가지 방법을 사용했다.

1. AJAX - 필터링 on/off 시에 필요한 데이터만 받아와서 표시
2. Cookie - 필터링 on/off 유지를 위해 페이지 갱신 시 쿠키 유무 확인 후 필터링이 유지되도록 처리

이번 포스트에서는 수시간의 뻘짓을 거쳐 완성된 글 필터링 & 페이지네이션 코드를 보여주겠다.

코드가 많아서 스크롤이 길긴 한데, 프로젝트 링크를 이곳이랑 맨 아래 걸어두니 /classes/pagination.class.php, /js/my_board_list.js, /js/manage_cookie.js, /manage_board/process_board_list.php, /lib/delete_parameter.php

이 코드들을 참고하기를 바란다.

게시판 프로젝트 링크 - Github

프로젝트 디렉토리 구조 일부

classes 폴더 ... └── pagination.class.php

lib 폴더 ... └── delete_parameter.php

js 폴더 ... ├── manage_cookie.js └── my_board_list.js

manage_board 폴더 ... └── process_board_list.php

Paging & Pagination

둘의 차이에 대해 알아보았는데, 잘 설명된 글이 있었다. 해당 블로그

• paging - 자원을 보존하기 위해 데이터베이스에서 항목의 한 페이지를 로드하는 작업 ex) SQL 및 Model단

• pagination은 사용자가 다음에 로드 할 페이지를 선택할 수 있도록 일련의 페이지 번호를 제공하는 UI 요소 ex 각종 버튼들 : << 이전 1 2 3 4 5 다음 >>

즉 paging을 이용해 pagination을 완성한다고 생각하면 되겠다.

1. pagination 클래스

어떤 방식을 적용할지 보다가 클래스로 변환하신 분이 있어서 이 코드를 가져와서 내 방식대로 고쳐보았다. 달라진 점은 이 블로그를 참고해라.

<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/classes/db.class.php';
require_once $_SERVER['DOCUMENT_ROOT'].'/lib/delete_parameter.php';

class Pagination {

    //클래스 내부에서 하단 페이지넘버 처리에 필요한 변수
    private
        $page,
        $total_page,
        $first_page,
        $last_page,
        $prev_page,
        $next_page,
        $total_block,
        $next_block,
        $next_block_page,
        $prev_block,
        $prev_block_page,
        $page_nav = "",
        $PHP_SELF = "/index.php";
    //설정에서 register_globals=Off 인 경우에 $PHP_SELF 수퍼변수는 동작하지 않기때문에 경로를 지정해주는것이 좋다.

    //클래스 외부에서 필요한 변수
    public
        $limit_idx,
        $page_set;

    //페이지 줄수, 블럭수 받아 데이터 정리
    public function __construct($page_count, $block_count, $page_num, $is_my_board) {
        $block_set      = $block_count; // 한페이지 블럭수
        $this->page_set = $page_count;  // 한페이지 줄수

        $result = DB::query("SELECT count(board_id) AS total FROM board {$is_my_board}")[0];
        $total = $result['total']; // 전체글수

        $this->total_page  = ceil($total / $this->page_set);        // 총페이지수(올림함수)
        $this->total_block = ceil($this->total_page / $block_set);  // 총블럭수(올림함수)

        $this->page = $page_num;                         // parameter로 현재 페이지정보를 받아옴
        $block = ceil($this->page / $block_set);    // 현재블럭(올림함수)
        $this->limit_idx = ($this->page - 1) * $this->page_set; // limit 시작위치

        $this->first_page = (($block - 1) * $block_set) + 1;    // 첫번째 페이지번호
        $this->last_page  = min($this->total_page, $block * $block_set); // 마지막 페이지번호

        $this->prev_page = $this->page - 1; // 이전페이지
        $this->next_page = $this->page + 1; // 다음페이지

        $this->prev_block = $block - 1; // 이전블럭
        $this->next_block = $block + 1; // 다음블럭

        // 이전블럭을 블럭의 마지막으로 하려면...
        $this->prev_block_page = $this->prev_block * $block_set; // 이전블럭 페이지번호

        // 이전블럭을 블럭의 첫페이지로 하려면...
        //$prev_block_page = $prev_block * $block_set - ($block_set - 1);

        $this->next_block_page = $this->next_block * $block_set - ($block_set - 1); // 다음블럭 페이지번호
    }

    //하단 페이지 넘버링
    public function BottomPageNumber(): string {
        $this->page_nav .= ($this->prev_page > 0) ?
            "<li class='page-item'><a class='page-link' href='$this->PHP_SELF?page=$this->prev_page'>Prev</a></li>" :
            "<li class='page-item disabled'><span class='page-link'>Prev</span></li>";

        $this->page_nav .= ($this->prev_block > 0) ?
            "<li class='page-item'><a class='page-link' href='$this->PHP_SELF?page=$this->prev_block_page'>...</a></li>" :
            "<li class='page-item disabled'><span class='page-link'>...</span></li>";

        for ($i = $this->first_page; $i <= $this->last_page; $i++) {
            $this->page_nav .= ($i != $this->page) ?
                "<li class='page-item'><a class='page-link' href='$this->PHP_SELF?page=$i'>$i</a></li>" :
                "<li class='page-item disabled'><span class='page-link'>$i</span></li>";
        }

        $this->page_nav .= ($this->next_block <= $this->total_block) ?
            "<li class='page-item'><a class='page-link' href='$this->PHP_SELF?page=$this->next_block_page'>...</a></li>" :
            "<li class='page-item disabled'><span class='page-link'>...</span></li>";

        $this->page_nav .= ($this->next_page <= $this->total_page) ?
            "<li class='page-item'><a class='page-link' href='$this->PHP_SELF?page=$this->next_page'>Next</a></li>" :
            "<li class='page-item disabled'><span class='page-link'>Next</span></li>";

        // 페이지 파라미터 중복 제거
        $this->PHP_SELF = delete_parameter($this->PHP_SELF, 'page');

        return $this->page_nav;
    }
}

• 생성자 - __construct()

  한 페이지에 보여줄 줄 수($page_count), 네비게이션에 보여줄 블럭 수($block_count), 현재 페이지($page_num), 필터링 on/off 유무($is_my_board)를 받는다. 받은 정보를 바탕으로한 필요한 정보들을 필드에 저장해둔다.

• 네비게이션 생성 메소드 - BottomPageNumber()

  뷰포트 하단에 표시할 nav의 내용인 html 텍스트를 string 형태로 저장하고 반환한다. 이 string을 AJAX이용 시 응답 데이터로 반환해주고, JavaScript에서 innerHTML에 넣어주는 식으로 화면에 표시할 것이다.

• 부트스트랩*의 pagination CSS가 적용되게 작성했다.

• parameter를 지워주는 함수 - delete_parameter()

  URL에 존재하는 특정 값을 지운다. page가 여러개 붙지 않게 제거해주는 역할이다. /lib/delete_parameter.php에 존재한다. require_once로 가져와서 사용

2. process_board_list.php

JavaScript 파일에서 JSON형태로 데이터를 넘겨주면, json_decode()를 통해 PHP 객체로 사용할 수 있다.

<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/classes/db.class.php';
require_once $_SERVER['DOCUMENT_ROOT'].'/classes/pagination.class.php';

// 세션 시작 - $_SESISON['user_id'] 사용을 위해.
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

$post_data = json_decode(file_get_contents('php://input')); // JSON 형태로 받은 데이터 객체로 parsing

// 필터링 유무에 따라 WHERE 구문 삽입 유무로 쿼리문 결정
// WHERE이 삽입되면 자신이 작성한 글만 fetch
$my_board = $post_data->is_my_board ? "WHERE board.user_id = '{$_SESSION['user_id']}'\n" : '';

$sql = "
    SELECT
        board_id, board_title, user_name, date_format(created, '%m-%d %H:%i') as created, view_count 
    FROM board INNER JOIN user
    ON board.user_id = user.user_id
";

$sql .= $my_board;  // 만약 필터링 off인 경우 $my_board == '' 이므로 아무런 영향이 없다.

// 게시글 줄 수, 블럭 수
$pagination = new Pagination($post_data->page_count, 5, $post_data->page_num, $my_board);

// 페이지네이션을 위한 LIMIT
$sql .= trim("    
    ORDER BY created DESC LIMIT {$pagination->limit_idx}, {$pagination->page_set}
");

$result = DB::query($sql);

$topic_list = '';
if ($result) {  // 글이 존재하는 경우 table-row로 생성
    foreach ($result as $index => $row) {
        $topic_list .= "
            <tr style='cursor:pointer' onclick='location.href=\"/manage_board/board_read.php?id={$row['board_id']}\"'>
                <th class='col-1 text-center' scope='row'>{$row['board_id']}</th>
                <td class='col-7'>{$row['board_title']}</td>
                <td class='col-1 text-center'>{$row['user_name']}</td>
                <td class='col-2 text-center'>{$row['created']}</td>
                <td class='col-1 text-center'>{$row['view_count']}</td>
            </tr>
        ";
    }
}
// table-row랑 pagenation의 nav를 반환할 것임
$response = array(
    'topic_list' => $topic_list,
    'page_nav'   => $pagination->BottomPageNumber()
);

echo json_encode($response);    // JSON으로 encoding 후 반환

• 필터링 유무 - $my_board

  필터링 유무를 $my_board에 값을 넣어 WHERE ~ 쿼리문을 넣을지 말지 결정한다. 필터링이 꺼져있으면 $my_board는 '' 이므로 $sql .= $my_board에서 아무런 영향을 끼치지 않는다.

• 페이지네이션 객체 - $pagination

  $pagination에 페이지네이션 객체를 생성한 후 public필드인 limit_idx와 page_set으로 쿼리문의 OFFSET, LIMIT을 결정한다.

• 데이터 생성

• 필터링 유무로 결정(WHERE 유무)*되는 쿼리문의 결과를 받아와서 글 목록을 $topic_list로 만들어둔다. 또한, 페이지네이션 객체에서 nav를 생성하는 BottomPageNumber() 함수를 호출하여 해당 string을 저장한다.

• 응답 내용 저장 - $response

• 연관배열*을 사용하여 해당 key이름에 맞게 저장 후 json_encode()로 echo 하여 응답(response)을 해준다.

3. my_board_list.js

AJAX를 이용하여 데이터를 전달받고 이를 innerHTML에 넣어서 화면을 갱신한다. 쿠키 유무에 따라 필터링 스위치 작동 유무를 결정한다.

const url = new URL(window.location.href);
const urlParams = url.searchParams;

let page = urlParams.get('page');
if (page === null) page = '1';

const body = {          // AJAX request body
    id: '',
    page_count: 10,     // 한 페이지에 표시할 글의 수
    page_num: page,     // 현재 페이지
    is_my_board: false  // 필터링 on / off 유무
}

function my_board_checked() {       // 페이지 변경 시 필터링 스위치 checked 확인
    const board_switch = document.getElementById('my_boards_switch');
    if (get_cookie('my_board_filter') !== '') { // 쿠키 유무로 스위치 on/off 확인
        body.is_my_board = true;
        board_switch.click();       // 스위치 활성화 되어 있으면 click()로 재활성화
    } else {
        body.is_my_board = false;
    }
}

document.getElementById('my_boards_switch').addEventListener('click', (e) => {
    // 체크 된 경우 true
    if (e.target.checked) {
        body.id = e.target.value;
        body.is_my_board = true;
        set_cookie('my_board_filter', true, 1);     // 쿠키 생성
    } else {
        body.is_my_board = false;
        set_cookie('my_board_filter', false, 0);    // 쿠키 제거
    }
    get_board_list(body);   // 목록 불러오기
});

function get_board_list(body) { // AJAX 이용
    const init = {
        method: 'POST',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        body: JSON.stringify(body)  // JSON 형태로 POST request
    }

    fetch('/manage_board/process_board_list.php', init)
        .then((res) => res.text())
        .then((data) => {
            const response_obj = JSON.parse(data);  // JSON 형태로 응답받고 parsing 후 사용
            document.getElementById('board_list').innerHTML = response_obj['topic_list'];
            document.getElementById('page-list').innerHTML = response_obj['page_nav'];
        });
}

my_board_checked();
get_board_list(body);

• 현재 페이지 값 얻기 - page

  URL 객체를 이용하여 urlParams.get('page')를 통해 page 파라미터를 얻어와서 저장한다.

• request body - body

  fetch API를 이용해 요청 시 request body 부분이다.

  • id - 로그인 시 사용자의 user_id
  • page_count - 한 페이지에 표시할 글의 수
  • page_num - 현재 페이지
  • is_my_board - 필터링 유무

• 페이지 갱신 시 필터링 유지 - my_board_checked()

  manage_cookie.js에 있는 get_cookie로 쿠키를 얻어와서 필터링 유무 판별한다.

  • true - request body(body 변수)에 있는 필터링 유무(is_my_board)를 true로 변경하고, switch를 활성화시킨다.
  • false - 필터링 유무를 false로 변경한다. switch는 페이지 갱신 시 기본적으로 비활성화 상태이므로 그대로 놔두면 된다.

• 스위치 클릭 유무에 따른 필터링 - switch의 이벤트 리스너

  • checked - 로그인을 한 경우만 활성화 가능하게 만들었다. 그러므로 사용자 사용자 아이디를 전달해준다.

  • 사용자의 아이디 저장 - id = e.target.value
  • 필터링 유무 변경 - is_my_board = true
  • 쿠키 생성 - manage_cookie.js의 set_cookie()사용

    • unchecked - 필터링을 안하므로 아이디를 전달해줄 필요가 없다.

  • 필터링 유무 변경 - is_my_board = false
  • 쿠키 제거 - 수명을 0으로 하면 쿠키가 제거된다

• AJAX로 데이터 받아서 화면에 뿌려주기

  사용자 아이디, 필터링 유무 등의 필요한 정보는 body 에 저장해두었으므로 init객체의 body필드에다가 JSON.stringify()를 이용하여 저장 후 요청한다.

  echo로 응답했으므로 text()로 받은 후 JSON.parse()를 사용해 일반 객체로 만들어준다.

  이후 연관배열 형태의 key들이 객체의 필드 이름이 되었으므로 HTML에 뿌릴 위치를 getElementById()로 가지고와서 innerHTML에 객체['필드 이름']을 넣어준다.

4. index.php

로그인을 하지 않은 경우 필터링 스위치를 disabled 해준다. 로그인을 해서 필터링을 작동시킬 수 있으면 input태그의 value에 $_SESSION['user_id']를 넣어서 JavaScript에서 사용할 수 있도록 해준다.

...은 생략을 뜻한다.

// 세션 시작
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

...

$my_boards_switch = '
    <input type="checkbox" class="form-check-input" id="my_boards_switch" disabled>
    <label for="my_boards_switch" class="form-check-label">내가 쓴 글</label>
';

// 로그인을 한 경우
if (isset($_SESSION['user_id']) && $_SESSION['user_id'] != '') {
...
    $my_boards_switch = "
        <input type='checkbox' value='\"{$_SESSION['user_id']}\"' class='form-check-input' id='my_boards_switch'>
        <label for='my_boards_switch' class='form-check-label'>내가 쓴 글</label>
    ";
}

...
                    <div class="form-check form-switch">
                        <?=$my_boards_switch?>
                    </div>
...
                <tbody id="board_list" >
                </tbody>
...
        <footer class="mt-5">
            <nav id="nav-pagination" class="position-absolute bottom-0 start-50 translate-middle">
                <ul id="page-list" class="pagination d-flex justify-content-center">
                </ul>
            </nav>
        </footer>

• 로그인 유무에 따른 스위치 활성/비활성 - $my_board_switch

• 로그인을 안한 경우* 기본 값으로 disabled가 들어가있다.

• 로그인을 한 경우* 사용자 아이디를 value에 넣어서(value='\"{$_SESSION['user_id']}\"') my_board_list.js에서 e.target.value로 가져올 수 있도록 했다.

정리

이번에 페이지네이션과 필터링 기능을 구현하며 많은 시행착오를 겪었다. 거의 하루를 날려버렸는데, 이렇게 뻘짓을 좀 하고 해결한 코드를 보고 나니 머릿속으로 대강 정리가 되었다.

• JavaScript는 DOM 조작이 가능하므로 HTML쪽에서 값을 넘겨주고 싶으면 태그에서 value등의 어트리뷰트에 담기

• 응답 내용을 명시적으로 하고 싶으면 연관배열을 사용해 JSON형태로 반환하기

• AJAX로 값을 넘겨주는 데이터는 request body 전용 객체를 만들어서 값을 저장한 후 JSON.stringify()를 이용해 string형태로 넘겨주기

• PHP와 달리 JavaScript에서는 Cookie 수명 기준이 ms 단위였음.. (1000 곱해주기)

동아리에서 웹 강의를 듣고 생활 코딩 강의도 쭉 돌려보고나니 직접 무언가를 만들어 보는 편이 좋을 것 같다고 생각해 시작하게 된 게시판 만들기였다.

이제 검색 기능 구현? 정도 남았는데, 구현 할지 안할지는 좀 고민이 된다. 현재 포스트 기준 88번의 Commit을 했는데, 생각했던 기능들은 거의 구현한 것 같다.

다음 프로젝트는 프레임워크를 이용해서 진행해보려 한다. node js 또는 django인데 고민 좀 해봐야겠다.

게시판 프로젝트 URL

Github - Profile-exe/CRUDboardsite