JPA는 Java Persistance API로 현재 자바 진영의 ORM 기술 표준입니다. 자바 애플리케이션과 JDBC 사이에서 동작하며 쿼리를 자동으로 생성해줍니다. ORM: Object-relational mappin(객체 관계 매핑)으로 객체와 관계형 DB를 매핑해주는 프레임워크입니다.

# JPA 사용의 이유

JPA를 사용하기 이전에 개발자들은 SQL문을 일일히 작성해줘야하는 번거로움이 있었습니다. 한 객체를 만들면 그 객체의 CRUD 쿼리를 모두 작성해줘야했는데, 이때 객체가 수십개로 늘어난다면 그만큼 개발자가 작성해야 할 쿼리문이 늘어나 개발 효율이 떨어지게 됩니다. 이런 불편함을 해결해주는 것이 JPA입니다.

• SQL중심 개발에서 객체 중심 개발을 하여 생산성을 높일 수 있습니다.

  • 저장: jpa.persist(객체)
  • 조회: jpa.find(객체_id)
    • 수정: 객체.setName("변경할 이름")
      • 삭제: jpa.remove(객체)

• 기존에는 필드 변경 시 모든 쿼리를 수정해야했지만, JPA를 사용하면 JPA가 자동으로 쿼리를 수정하기 때문에 유지보수가 용이합니다.

• 패러다임의 불일치 해결 해당 내용은 아래에서 더 자세히 다루겠습니다.

# 패러다임 불일치 해결

데이터베이스는 데이터를 중심으로 구조화 되어있습니다. 따라서 객체의 상속 및 다형성과 같은 개념이 없습니다. 즉, 객체와 데이터베이스가 지향하는 점이 다른데, 이를 객체와 데이터베이스의 패러다임 불일치라고 합니다.
이를 JPA가 대신 해결해줍니다.

* 상속

예를 들어 위와 같은 상속 관계를 가지는 객체와 DB가 준비되어있습니다.

// 저장.
jpa.persist(album);
// INSERT INTO ITEM ...
// INSERT INTO ALBUM ...

// 조회.
jpa.find(Album.class, albumId);
// SELECT I.*, A.*
//   FROM ITEM I
//      JOIN ALBUM A ON I.ITEM_ID = A.ITEM_ID

위와 같이 jpa를 이용해 작업을 진행하면 jpa가 객체의 상속 등 관계에 따라 여러 개의 쿼리를 보내거나 복잡한 쿼리를 만들어 보냅니다.

* 연관 관계

객체를 테이블에 맞게 모델링 하는 경우와 객체 지향에 따라 모델링하는 경우에 따라 다른 문제가 나타납니다. 객체를 테이블에 맞게 모델링하는 경우, 객체지향이라는 특징을 잃게 되며 모델링이 복잡해집니다. 반대로 객체 지향에 따라 모델링하는 경우, 서로 다른 모양의 객체가 만들어지며, 이를 맞춰가는 코드를 또 한번 작성해야 하는 비용이 요구됩니다.

// 객체를 테이블에 맞게 모델링.
class Member {
 String id; //MEMBER_ID 컬럼 사용
 Long teamId; //TEAM_ID FK컬럼 사용
 String username; //USERNAME 컬럼 사용
}

class Team {
 Long id; //TEAM_ID PK사용
 String name; //NAME 컬럼 사용
 }

// 객체지향 모델링.
class Member {
 String id; // MEMBER_ID 컬럼 사용
 Team team; // 참조로 연관관계를 맺음
 String username; // USERNAME 컬럼 사용

 Team getTeam() {
   return team;
  }
}

class Team {
 Long id; // TEAM_ID PK 사용
 String name; // NAME 컬럼 사용
 } 
 -> 두 객체를 연결하기 위한 추가적인 코드가 많이 필요함.

하지만 JPA를 사용한다면 객체 지향 모델링을 사용하며 두 객체의 관계를 쉽게 맺을 수 있습니다.

member.setTeam(team);
jpa.persist(member);

* 객체 그래프 탐색

아래와 같은 객체 그래프가 있습니다. 객체 그래프는 서로 연관된 객체를 참조해서 사용할 수 있어야합니다. 즉, 주문이 멤버와 배달을 참조하여 사용할 수 있어야 한다는 의미입니다.

하지만 SQL을 직접 다루면 처음 실행하는 SQL문에 따라 그래프 탐색이 한정됩니다. JPA는 객체 그래프를 마음껏 탐색할 수 있습니다.

아직 개념만 본 상태고 직접 코드를 작성해보지 않아 모든 개념이 완벽하게 와닿지 않은 느낌을 많이 받은 상태로 정리하고, 정리한걸 보고 작성한 글이라 미숙한 부분이 많습니다..😥

앞으로 JPA에 대해 공부해나가며 더 자세한 개념과 코드 작성법에 대해 정리해나갈 예정입니다🤗

# Node js

node js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. node js의 등장으로 JavaScript를 브라우저뿐만 아니라 서버에서도 사용할 수 있게 되었습니다. *런타임 : 특정 언어로 만든 프로그램을 실행할 수 있는 환경

node js는 웹 서버와 같이 확장성 있는 네트워크 프로그램을 개발하기 위해 만들어졌습니다. 또한 HTTP 서버 라이브러리 등을 포함하고 있어 아파치 등의 별도의 프로그램 없이 동작할 수 있습니다.

# Express

https://expressjs.com/ko/

express는 웹 및 모바일 어플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 node js 프레임워크 입니다. HTTP 메소드 및 미들웨어를 통해 쉽게 API를 만들 수 있습니다.

express는 현재 가장 많이 사용되고 있는 node js 프레임워크입니다. 가장 많이 사용되는 프레임워크인만큼 구글링을 통한 레퍼런스 서치가 용이합니다. 또한 서버를 빠르게 구현하기 위해 개발 시 구조의 자유도가 높습니다. typescript를 지원하긴 하지만 json파일을 따로 만들고 세팅해줘야한다는 번거로움이 있습니다.

# Nest.js

https://docs.nestjs.com/

nest js는 효율적이고 확장 가능한 node js 서버를 구축하기 위한 프레임워크입니다. Progressive Javascript를 사용하며, 기본적으로 Typescript를 지원하고 빌드됩니다. 또한, OOP(Object Oriented Programming), FP(Functional Programming) 및 FRP(Functional Reactive Programming) 요소를 결합합니다. *Reactive Programming : 비동기 데이터 스트림으로 프로그래밍을 하는 것

nest.js는 기본 언어로 타입스크립트를 채택하고 있으며 Express를 래핑하여 동작하는 node js 프레임워크입니다. IoC(Inversion of Control, 제어 역전), DI(Dependency Injection, 의존성 주입) 및 AOP(Aspect Oriented Programming, 관점 지향 프로그래밍)와 같은 객체 지향 개념을 도입하고 있습니다.

# Express와 Nest.js의 차이점

* 코드 구조의 차이

express는 개발의 자유도가 높아 사람마다, 혹은 팀마다 아키텍처 디자인 스타일이 다르다면 커뮤니케이션 비용이 커집니다. 반면에 nest js는 프레임워크 자체에서 어느정도 아키텍처 디자인을 제공하기 때문에 정해진 양식에 맞게 개발을 하게 됩니다.

* 라우팅

• express

  app.use('/employee', require('./employeeRouter'))
  app.use('/company', require('./companyRouter'))

• nest.js

  @Module({
  imports: [
    TypeOrmModule.forFeature([EmployeesRepository])
  ],
  exports: [TypeOrmModule],
  providers: [EmployeesService],
  controllers: [EmployeesController],
  })
  export class EmployeesModule {}

express는 app.use 함수를 이용해 라우터를 등록하지만, nest.js는 각 모듈별로 라우팅을 해서 사용합니다.

* 컨트롤러

• express

  router.route('/').get((req,res) => {
  // 로직.
  });

• nest.js

  // controller
  export class EmployeesController {
  constructor(private readonly employeesService: EmployeesService) {}
  
  @Get()
  findAll() {
    return this.employeesService.findAll();
  }
  }
  

// service @Injectable() export class EmployeesService { constructor( @InjectRepository(Employees) private readonly employeeRepository: Repository) {}

findAll(): Promise<Employees[]> { return this.employeeRepository.findAll(); } }

- express는 위와 같이 컨트롤러 정의와 비즈니스 로직을 한 파일에 한 번에 작성해도 되고, 파일을 따로 분리해도 됩니다. 하지만 nest.js는 클라이언트에서 요청이 들어오면 controller -> service -> repository순서로 동작하기 때문에 controller파일과 service파일로 분리해서 개발해야합니다.

---

## # 정리

제가 글을 쓰고 정리해보며 느낀 점에 대해 정리해보겠습니다.

우선 express는 개발자 마음대로 구조를 설계할 수 있고, nest.js는 아키텍처를 어느 정도 정의해준다는 점이 가장 큰 차이점인것 같습니다. 또한 TypeScript를 사용하기엔 기본적으로 TypeScript를 빌드 언어로 지원하는 nest.js가 적합할 것 같다고 느꼈습니다.

너무 당연한 이야기지만 좋고 나쁜 프레임워크를 찾는 것 보다, 자신이 진행할 프로젝트에 맞는 프레임워크를 적절하게 사용하는 것이 좋아보이네용🤗

# GrapQL

GraphQL은 메타(전 facebook)에서 만든 API(Application Programming Interface)를 위한 쿼리 언어로 클라이언트로부터 쿼리를 전달받아 요청받은 데이터만을 반환해줍니다.

메타에서는 GraphQL을 개발 한 이유를 다음과 같이 설명했습니다.

• RESTful API로는 다양한 기종에서 필요한 정보들을 일일히 구현하는 것이 힘들었습니다. 예를 들어 iOS와 Android에서 필요한 데이터가 조금씩 달랐고, 다른 부분마다 새로운 API를 개발하는 것이 힘들었습니다.

GraphQL의 등장으로 백엔드에서 처리해줘야 하는 많은 양의 코드를 프론트엔드와 나누어 작업할 수 있게 되었습니다.

# REST

REST는 REpresentational State Transfer의 약자로 로이 필딩(Roy Fielding)이 2000년도에 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 발표한 개념입니다.

REST는 모든 자료(Resources)들을 하나의 EndPoint에 연결해두고, EndPoint는 해당 Resource와 관련된 내용만 정리하자는 방법론입니다.

예를 들어 한 User에 대한 정보를 생성, 조회, 편집, 삭제(CRUD)하는 API를 구성한다고 하면 EndPoint는 다음과 같을 것입니다.

• 생성 : (POST) /user
• 조회 : (GET) /user
• 편집 : (PUT) /user/{user_id}
• 삭제 : (DELETE) / user/{user_id}

사실 글만 보고 이해하기 너무 어려워요... 직접 써보면서 알아가는게 베스트...

REST의 내용을 자세히 다루기엔 내용이 너무 많아 다른 포스트에서 추가로 정리하겠습니다.

# GraphQL과 REST의 차이점

* Resource

대부분의 REST api는 결과를 JSON 형태로 반환합니다.

아래의 EndPoint로 접근하여 id가 1인 유저의 정보를 가져온다면 다음과 같은 결과를 받을 수 있을 것입니다.

• (GET) /employee/1

{
  "name": "jhon",
  "age": 31,
  "company": {
    "name": "A_Company",
    "ceo": "AAA"
  }
}
// 보통 user와 company를 서로 다른 리소스로 분리합니다.

위와 같이 REST api는 리소스를 가져오는 방식과 반환하는 리소스의 타입 혹은 형태가 서로 연결되어있습니다. /employee라는 리소스를 요청하면 위와 같은 형태의 JSON 데이터가 반환됩니다.
위의 방식을 GraphQL로 옮긴다면 다음과 같습니다.

type Employee {
    id: ID
    name: String
    age: Int
    company: Company
}

type Company {
    id: ID
    name: String
    ceo: String
    emps: [Employee]
}

REST와의 큰 차이점은 리소스의 유형과 리소스를 가져오는 방식이 완전히 분리되어있다는 것입니다.

type Query {
    employee(id: ID!): Employee
    company(id: ID!): Company
}

GraphQL은 Employee와 Company의 형태를 정의하고, 이를 가져다 쓸 수 있는 Query를 작성하여 사용합니다. 각 Resource마다 endpoint를 정의하지 않고 하나의 엔드포인트만이 존재하며, 원하는 리소스와 해당 리소스에서 원하는 필드만을 요청할 수 있습니다.

graphql/query={employee(id:"1") { name, company { name }}} 로 요청하면 아래와 같은 결과를 받을 수 있습니다.

{
  "name": "Jhon",
  "company": {
    "name": "A_Company"
  }
}

* URL Routes, GraphQL Scheme

REST 방식은 특정 작업에 대한 endpoint가 지정되어 있고 endpoint는 해당 리소스를 가리킵니다. 또한, HTTP Method에 따라 어떤 작업을 진행할지도 구분합니다.

하지만 GraphQL에서는 URL이 아닌 Scheme가 특정 리소스를 특정짓고, Mutation, Query를 통해 작업을 구분합니다.

GraphQL은 한 번의 요청에 여러 리소스에 접근할 수 있지만, REST 방식은 여러 리소스에 접근하기 위해선 요청을 여러 번 보내야합니다.

* Route Handler, Resolver

현재 사용하고 있는 node js를 기준으로 한 백엔드를 예시로 들겠습니다.

• REST API

  // '/employee'
  @Get(':id')
  find(@Param('id')id: number, @Res()res: Response) {
     // DB.
  
     const result = {
         "name": "Jhon",
         "company": {
             "ceo": "AAA"
         }
     }
  
     res.send(result);
  }
  

위 엔드포인트는 GET 요청에만 반응합니다. 따라서 클라이언트에서 `/employee/1`로 요청을 보내면 다음과 같은 JSON 데이터 응답을 받을 수 있습니다.

```JSON
{
  "name": "Jhon",
  "company": {
    "ceo": "AAA"
  }
}

• GraphQL

  const resolver = {
  Query: {
    employee:(parent, args) => {
      // DB.
  
      cosnt result = { name: "James" };
  
      return result;
    },
    company:(parent, args) => {
      // DB
  
      const result = {
        name: "B_Company",
        ceo: "BBB",
      }
  
      return result;
    }
  }
  }

REST와 다르게 특정 엔드포인트에 대한 함수를 제공하는 대신, 특정 필드에 대한 Query 타입의 함수를 제공합니다. 이러한 함수를 Resolver라고 부릅니다.

query {
  employee(id: 1) {
    name
    company {
      name
      ceo
} } }

위 쿼리를 이용해 아래 데이터를 반환받을 수 있습니다.

서버로 요청이 들어오면 서버는 해당 쿼리를 찾고, 쿼리에 존재하는 필드들의 resolver를 찾아 호출합니다. 그리고 resolver들의 반환 값을 모아 쿼리의 형태와 일치하는 JSON을 만들어 반환합니다.

따라서 아래와 같은 결과가 반환됩니다.

{
  "employee": {
    "name": "James",
    "company": {
      "name": "B_Company",
      "ceo": "BBB"
    }
  }
}

REST API는 Client가 각 리소스에 대한 endpoint를 호출하여 원하는 데이터를 얻어옵니다. 하지만 GraphQL은 원하는 리소스를 쿼리로 호출하면 백엔드에서 각 resolver를 호출하여 값을 반환받은 후, 클라이언트에서 요청한 쿼리의 형태에 맞게 값을 반환합니다.

[이미지 출처: https://devopedia.org/graphql]

# 정리

1. REST API는 각 리소스에 대한 endpoint가 지정되어있고, GraphQL은 리소스와 리소스를 가져오는 방식이 완전히 분리되어있습니다.
2. GraphQL은 클라이언트가 원하는 데이터만을 가져올 수 있어 편리하고, 여러 리소스에 대해서 하나의 쿼리로 호출할 수 있어 편리합니다.
3. 하지만 고정된 요청과 응답을 처리해야 하는 경우, REST api보다 쿼리의 길이가 훨씬 길어질 수 있습니다.

따라서 GraphQL을 사용하는 경우는

• 서로 다른 모양의 다양한 요청에 대응해야할 때
• 작업이 주로 CRUD에 해당할 때

사용하기 적합하고,

REST를 사용하는 경우는

• 요청의 구조가 정해져있을 때
• File 전송 등, 전송이 단순 Text형태가 아닌 경우

에 적합한 것 같습니다.

회사에서 프로젝트를 진행하면서 REST api를 더 많이 사용해봐야겠지만,,, 제가 사용해본 결과 GraphQL이 백엔드 개발을 진행할 때는 백엔드가 할 일을 줄여줘서 편리했던 기억이 납니다.

하지만 그 쿼리를 모두 프론트에 정의해줘야해서 그만큼 프론트 단의 작업이 많아졌다는거...

아직 웹 개발을 많이 해본 것이 아니라 개념이 많이 부족하다고 느꼈고, 개발할 때 적합한 방법을 찾기 위해서는 사용해본 기능들에 대한 정리가 필요하다고 느꼈습니다.

$ npx react-native init LearnReactNative

npx는 Node.js와 함께 설치되는 도구입니다. Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해줍니다.

생성한 프로젝트를 열어 package.json을 보면 아래와 같은 코드가 있습니다.

"scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  }

스크립트가 설정되면 다음과 같은 명령어를 실행할 수 있습니다.

$ yarn <스크립트 이름>

• yarn android : 안드로이드 환경에서 앱 구동
• yarn ios : ios 환경에서 앱 구동
• yarn start : Metro를 구동

Metro: 프로젝트에 사용된 자바스크립트 파일들을 모두 읽어 하나의 파일로 합쳐주고, 리액트 네이티브 앱에서 실행할 준비를 해줍니다.

안드로이드 스튜디오에서 리액트 네이티브 구동하기

안드로이드 스튜디오를 켜고 Open을 눌러 프로젝트를 열어줍니다. 생성된 리액트 네이티브 폴더를 보면 android 폴더가 있는데, 그 폴더를 선택해 열어줍니다.

안드로이드 스튜디오에서 AVD를 설치합니다.

설치한 후에 비주얼 코드로 돌아와서 다음 코드를 입력합니다. 터미널은 ctrl + ` 키를 입력해서 열 수 있습니다.

$ yarn android

저 같은 경우는 다음과 같은 에러가 났습니다.

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

터미널을 살펴보니 안드로이드 Gradle 버전을 업그레이드 해야 한다는 설명이 있었습니다.

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.

Gradle JDK를 1.8에서 11로 바꿔준 뒤 안드로이드 스튜디오와 비주얼 코드를 재실행해줍니다.

그 후에 $ yarn android를 실행하면 다음과 같이 애뮬레이터가 실행됩니다.

iOS 환경에서 리액트 네이티브 앱 구동하기

$ yarn ios

위 명령어를 사용하여 구동할 수 있지만 Apple Silicon이 탑재되어 있다면

$ cd ops
$ pod install

위 두 개의 명령어를 실행해줘야 합니다.

$ pod install을 실행했을 때 에러가 나서 아래 블로그를 참고하여 해결했습니다.

https://velog.io/@sunhwa508/react-native-pod-install%EC%8B%9C-%EC%98%A4%EB%A5%98-new-Macbook-M1-crash-DiagnosticReports

위와 같이 ios 환경에서도 잘 실행되는 것을 볼 수 있습니다.

프로젝트 개발 환경 세팅이 완료되었습니다.

리액트 네이티브(React Native)는 자바스크립트(JavaScript)와 리액트(React) 라이브러리를 사용해 네이티브 앱을 개발할 수 있게 해주는 기술입니다. 리액트 네이티브를 사용해 만든 앱은 iOS환경, Android환경에서 모두 구동할 수 있습니다.

작업 환경 준비하기

💡 본 개발환경 설정 글은 MacOS 환경을 바탕으로 작성하였습니다!

1. Node.js와 npm 설치하기

Node.js는 웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 해주는 
Chrome V8 JavaScript 엔진으로 빌드된 런타임입니다.

1.1 MacOS에서 설치하기

https://github.com/nvm-sh/nvm 위 링크로 들어가서 Installing and Updating 부분을 보면

$ curl -o- https://raw.githubsercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

다음과 같은 스크릅트가 있습니다. 이 명령어를 입력하고 나서 터미널을 재실행해주세요.

$ nvm install --lts

위 명령어를 입력하여 Node.js LTS 버전을 설치할 수 있습니다.

$ node -v
v.16.14.2 (실행 결과)
$ npm -v
8.5.0 (실행 결과)

위 두 명령어를 실행해 노드와 노드를 설치할 때 함께 설치된 npm의 버전을 확인해볼 수 있습니다.

1.2 yarn

yarn은 npm과 같은 패키지 관리 도구입니다. npm과 역할은 동일하지만, 선응이 개선되어 npm보다 패키지를 더 빨리 설치합니다.

$ npm install --global yarn

위 명령어를 터미널에 입력하여 yarn을 설치할 수 있습니다.

1.3 Java Development Kit

JDK(Java Development Kit)은 안드로이드 앱 개발을 위해 필요한 도구입니다.

homebrew가 설치되어 있지 않다면 Homebrew를 설치해야합니다.

homebrew 설치 과정은 추후에 따로 작성할 예정입니다. Homebrew 설치과정

1.4 안드로이드 스튜디오 설치 및 환경변수 설정

https://developer.android.com/studio/index.html 위 링크에서 안드로이드 스튜디오를 설치합니다.

MacOS에서는 $HOME/.zprofile 또는 $HOME/.zshrc 파일을 수정해 환경 변수를 설정합니다. 파일을 열어 최하단에 다음 코드를 삽입합니다.

$ vim $HOME/.zprofile

터미널 환경에서 파일을 수정할 때는 vim이라는 명령어를 사용하면 됩니다.

export ANDROID_HOME=$ HOME/Library/Android/sdk
export PATH=$ PATH:$ ANDROID_HOME/emulator
export PATH=$ PATH:$ ANDROID_HOME/tools
export PATH=$ PATH:$ ANDROID_HOME/tools/bin
export PATH=$ PATH:$ ANDROID_HOME/platform-tools

vim 사용이 어렵다면 nano를 사용하면 수월하게 편집할 수 있습니다.

1.5 VS Code 설치하기

https://code.visualstudio.com

React Native 프로젝트를 편집할 Visual Studio Code를 설치합니다.

1.6 Xcode와 CocoaPods 설치하기

Xcode와 CocoaPods는 iOS 프로젝트를 만들기 위해 설치하는 도구입니다.

Xcode는 앱 스토어에서 설치하거나 https://bit.ly/install-xcode에서 설치할 수 있습니다.

CocoaPods는 터미널에서 아래 명령어를 입력해 설치할 수 있습니다.

$ sudo gem install cocoapods

React Native를 공부하면서 그냥 실습하고 잊지 않고 기억하기 위해 정리하면서 개발하기 위해 작성한 글 입니다. 😀 역시 개발 환경 설정하는 일이 가장 오래 걸리고 번거로운 작업인 것 같습니다. 개발 환경을 설정하며 겪었던 문제들은 추후에 따로 정리할 예정입니다!