API: 서로 다른 소프트웨어가 기능이나 데이터를 주고받을 수 있도록 정해놓은 인터페이스

바로 코드를 확인해보자.

예제

package hello.hello_spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {

    @GetMapping("hello-api")
    @ResponseBody 
    public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello();
        hello.setName(name); 
        return hello; 
    }

    static class Hello {
        private String name;
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }
}

@GetMapping :웹 브라우저에서 '/hello-api'요청이 들어오면 메서드 실행

@GetMapping("hello-api")

@ResponseBody : HTTP의 BODY에 이 데이터를 직접 넣겠다는 선언

@ResponseBody

?name=spring이라고 입력하면, Spring이 URL을 확인하고 spring이라는 글자를 추출해서 name이라는 변수에 넣는다. 데이터를 담을 Hello 객체를 하나 만듭니다. 그리고 아까 받은 name("spring")을 상자 안에 예쁘게 넣습니다(setName). 이를 리턴한다.

public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello();
        hello.setName(name); 
        return hello; 
    }

** 1. HTTP 요청 ** 웹 브라우저나 클라이언트가 URL을 통해 서버에 요청을 보낸다.

예시: /hello-api?name=spring -> 데이터가 전달

2. 컨트롤러 매핑 및 파라미터 바인딩 해당 URL을 처리할 컨트롤러(HelloController)를 찾는다. -> controll 먼저

@RequestParam("name")에 의해 URL의 spring이라는 문자열이 자바 변수 String name에 할당

3. @ResponseBody와 컨버터 작동 메서드가 hello 객체를 리턴하면, Spring은 @ResponseBody 어노테이션을 확인

ViewResolver 대신 HttpMessageConverter가 선택

리턴 타입이 객체이므로, JSON 변환기인 MappingJackson2HttpMessageConverter가 동작

*5. JSON 응답 * 변환기가 자바 객체를 JSON 문자열로 바꾼 뒤, HTTP 응답 바디에 담아 클라이언트에 보냄

최종 결과값: {"name":"spring"}

Getter/Setter

private String name;만 쓰는것이 아니다. 왜냐하면 데이터를 넣고 뺄 수 있는 공식적인 통로가 필요하다.API 방식(JSON 변환)이 작동하려면 이 구조가 필수다.

static class Hello {
        private String name;
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }

스프링이 객체를 JSON으로 바꿀 때 쓰는 도구다. 객체의 변수(name)를 직접 보는 게 아니라, getName()이라는 메서드 이름을 보고 "아, 이 객체에는 name이라는 데이터가 있구나!"라고 판단한다

@Controller // 스프링이 시작될 때 이 클래스를 '컨트롤러(서버 입구)'로 자동 등록합니다.
public class HelloController {

    @GetMapping("hello-api") // 사용자가 주소창에 /hello-api 라고 치고 들어오면 아래 메서드를 실행합니다.
    @ResponseBody // 중요! 이 메서드의 결과물을 HTML 파일에서 찾는 게 아니라, HTTP 응답의 바디(Body)에 직접 넣어서 보내겠다는 뜻입니다.
    public Hello helloApi(@RequestParam("name") String name) { 
        // @RequestParam("name"): 주소창의 ?name=spring 부분에서 'spring'을 꺼내서 자바 변수 'name'에 저장합니다.
        // Hello helloApi(...): 이 메서드는 최종적으로 'Hello'라는 객체(데이터 상자)를 밖으로 내보냅니다.

        Hello hello = new Hello(); // 데이터를 담기 위해 위에서 정의한 'Hello'라는 이름의 빈 상자(객체)를 하나 새로 만듭니다.
        hello.setName(name); // 사용자가 보내준 'spring'이라는 이름을 그 상자 안에 집어넣습니다.

        return hello; // 상자(객체)를 그대로 반환합니다. @ResponseBody가 붙어있으므로, 스프링이 이 상자를 JSON(문자 데이터)으로 자동 변환해서 사용자에게 쏩니다.
    }

    // 데이터를 담는 전용 상자의 설계도입니다.
    static class Hello {
        private String name; // 이름 데이터를 저장할 공간입니다. 'private'은 외부에서 이 변수를 직접 만지지 못하게 잠가둔 것입니다.

        // 상자 안의 이름을 밖으로 꺼내주는 통로(Getter)입니다. 스프링(Jackson 라이브러리)이 이 메서드를 호출해서 JSON을 만듭니다.
        public String getName() {
            return name;
        }

        // 상자 안에 이름을 새로 저장하거나 바꿀 때 쓰는 통로(Setter)입니다.
        public void setName(String name) {
            this.name = name; // 여기서 'this.name'은 위에서 선언한 변수이고, 'name'은 밖에서 전달받은 새로운 이름입니다.
        }
    }
}

MVC(Model, View, Controller) : 데이터, 화면, 제어 로직을 분리하여 각자의 역할에만 집중하게 만드는 소프트웨어 설계 방식

바로 코드로 확인해보자.

예제코드

초기 설정으로는 현재 controller패키지 안에 HelloController 그리고 templates내부에 hello.html이 존재한다.

package hello.hello_spring.controller;

import org.springframework.ui.Model;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {
    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "spring!!");
        return "hello";
    }
}

@Controller: 이 클래스가 스프링 MVC의 컨트롤러임을 선언하고 있다. 스프링 컨테이너가 실행될 때 이 애노테이션(라벨)을 보고 객체를 생성하여 관리한다.

@Controller

@GetMapping : 웹 브라우저에서 '/hello'라는 경로로 GET 방식의 요청이 들어오면 이 메서드를 실행합니다.

@GetMapping("hello")

GET은 서버로부터 정보를 조회하기 위한 요청 방식이다. POST는 서버의 리소스를 생성하거나 데이터를 제출하기 위한 방식이다.

정리하면 서버는 주소창에 hello라고 치고 들어온 GET요청은 이 메서드에서 처리하자! 라는 의미.

Model 객체 : 데이터를 담아서 뷰로 전달하는 바구니 역할이다. key는 data value는 spring!!으로 설정하여 모델에 담았다. View Resolver : 컨트롤러에서 문자열을 반환하면 뷰 리졸버가 해당 이름의 파일을 찼는다. 기본적으로 'resources/templates/hello.html' 파일을 찾아 렌더링한다.

public String hello(Model model) {
        model.addAttribute("data", "spring!!");
        return "hello";
    }

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>

정리하면 프로그램 순서는 이러하다.

1. 사용자 요청(localhost:8080/hello)
2. Controller Mapping(GET요청 인식하고 메서드 실행)
3. Model 준비(Model 객체에 값 담아 준비)
4. View 찾기(파일 찾아 랜더링 할준비함)
5. 응답(${data}부분을 추적하여 값으로 치환)

GitHub를 주제로 어떻게 글을 쓸지 고민이 많았다. GitHub를 제대로 이해하려면 Git에 대한 기본 개념이 선행되어야 하는데 그렇다고 설치 과정이나 환경 설정까지 구구절절 다루는 것이 맞나 싶다.

이번 글은 세부적인 설정이나 복잡한 명령어보다는 프로젝트를 시작하는 시점에서 GitHub를 활용해 어떻게 기초적인 관리를 할 수 있는지를 중심으로 정리하려고 한다. 프로젝트를 생성하고 변경 사항을 관리하며 작업이 어떤 흐름으로 이어지는지 그 전반적인 맥락을 이해하는 데 초점을 맞췄다. 이 정도 흐름만 파악해도 활용하는 데 큰 무리는 없을 것이다.

Git 그리고 Github

GitHub를 사용하려면 먼저 Git이 있어야 한다. 비유하자면 인스타그램에 사진을 올리려면 먼저 사진을 찍는 도구(카메라)가 필요한데 이 촬영 도구가 바로 Git이다.

Git으로 관리한 코드를 업로드해 저장하는 있는 장소가 Github

이게 끝이다. 굳이 이렇게 나누어 사용하는 이유는 코드의 과거 시점으로 되돌리기가 편하고 여러 명이 동시에 작업할 때 이점이 많다. 그럼 바로 Git을 사용해 보자.

https://git-scm.com/book/ko/v2 (Git 공식문서 참조)

Git init

Git 최초 설정은 생략하고 빠르게 vsCode에서 Github에 소스를 업로드해보자.

git init

프로젝트 폴더에서 해당 명령어를 입력한다. git init은 일반 디렉토리를 Git이 관리하는 로컬 저장소로 변환해 준다. 이제부터 이 폴더 안의 모든 변경 사항을 Git이 추적하겠다고 선언하는 것이다.

명령어를 실행하면 위와 같이 폴더가 Git으로 관리되기 시작한다. 이제 버전 관리가 가능하다는 뜻이다. 만약 이런 메시지가 출력되지 않는다면 Git 설치가 제대로 되었는지 확인해 봐야 한다.

Git status

파일을 새로 생성했다면 에디터에 색깔이 변하는 등 신호가 올 것이다. Git이 새로운 파일을 감지했다는 뜻이다.

git status

위 명령어는 Git에서 현재 상태를 알 수 있다. 확인해보자.

test>git status On branch master

No commits yet

Untracked files: 
    (use "git add <file>..." to include in what will be committed)
          test.md

nothing added to commit but untracked files present (use "git add" to track)

출력 내용을 보면 현재 브랜치이름이 master임을 알 수 있고 아직 커밋(저장)이 하나도 없다고 나온다. 중요한 점은 test.md 파일이 Untracked files(추적되지 않음) 목록에 있다는 것이다. Git이 이 파일을 관리하게 하려면 스테이징(Staging)이라는 단계가 필요하다.

스테이징이 뭘까요?

스테이징이라는 개념을 명확히 알아야만 기초적인 프로젝트 관리를 할 수 있다. Git에서 파일은 세 가지 상태가 존재하는데 Commited modified Staged이다.

수정(Modified) -> 스테이징(Staged) -> 커밋(Committed) 순서로 파일을 업로드하게 된다. 굳이 스테이징 단계가 필요한 이유는 '부분 커밋'이 가능하기 때문이다. 내가 수정한 파일이 10개라도, 이번에는 3개만 골라서 기록하고 싶을 때 유용하다. 이제 파일을 스테이징 해보자.

Git add

test>git add test.md

test>git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   test.md
test>

git add 파일명을 입력하여 test.md를 Staging Area에 올렸다. 상태를 확인해 보면 Changes to be committed(커밋 될 변경 사항) 목록에 파일이 들어온 것을 볼 수 있다. 물론 아직 저장이 완료된 것은 아니다.

만약 모든 파일을 한 번에 스테이징하거나, 스테이징을 취소하고 싶다면 아래 명령어들을 참고하자.

git add .               # 변경된 모든 파일 스테이징
git rm --cached test.md # 특정 파일 스테이징 취소
git reset               # 모든 스테이징 취소

이렇게 입력해주면 다시 돌아간다. 바로 커밋해보자.

Git commit

test>git commit -m "First test code" 
[master (root-commit) a8480e7] First test code
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 test.md

test>git status
On branch master
nothing to commit, working tree clean

test>

-m 옵션 뒤에 큰따옴표로 감싸서 커밋 메시지를 작성하면 된다. 이 메시지는 히스토리에 남으므로 명확하게 적는 습관을 들이는 것이 좋다.(보통 짧게 적는편)이후 git status로 확인해 보면 "working tree clean", 즉 더 이상 저장할 변경 사항 없이 깨끗한 상태임을 알 수 있다.

Github 원격 저장소 만들기

GitHub 웹사이트에서 New Repository를 클릭해 저장소를 만들면 원격 저장소 URL을 확인할 수 있다. 이를 내 컴퓨터(로컬)의 Git과 연결해 보자.

git remote add origin https://github.com/당신깃헙닉네임/TEST-code.git

이런식으로 등록하게되면 아래와 같은 출력이다.

origin은 원격 저장소의 기본 별칭(Alias)이다. fetch는 데이터를 가져올 때, push는 데이터를 보낼 때 사용하는 주소인데 보통 동일하다. 이제 내 컴퓨터의 작업물을 GitHub로 쏘아 올릴 차례다.

최종적으로 master 브랜치 커밋을 원격 저장소에 업로드하자.

Git push

git push -u origin master

master 브랜치의 커밋 내역을 원격 저장소(origin)에 업로드하는 명령어다. 이 과정이 끝나면 GitHub 새로고침 시 내 코드가 올라와 있는 것을 확인할 수 있다.

기초적인 프로젝트 관리이다. 요즘은 GUI 도구(SourceTree, GitKraken)나 VS Code 확장 프로그램 덕분에 클릭 한 번이면 해결되는 세상이다. 하지만 무언가 꼬였을 때 터미널에서 직접 상태를 확인하고 명령어를 치는 것이 가장 확실한 해결책이 되기도 한다. 그러니 한 번쯤은 직접 타이핑해 보며 흐름을 익혀두길 바란다.

다음 글에서는 브랜치(Branch)를 활용하고, 실제로 PR(Pull Request)을 날려 이슈를 관리하는 협업 과정을 다뤄볼 예정이다.