기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 23

fridge-web 프로젝트에서도 개인화 작업을 진행한다.
먼저, FridgeCommand 클래스에 userId 필드를 추가한다. 
public class FridgeCommand {
    private Integer id;
    @NotNull
    @Size(min=2, max=15)
    private String nickname;
    private List<FoodCommand> foods;
    private Long userId;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getNickname() {
        return nickname;
    }
    public void setNickname(String nickname) {
        this.nickname = nickname;
    }
    public List<FoodCommand> getFoods() {
        return foods;
    }
    public void setFoods(List<FoodCommand> foods) {
        this.foods = foods;
    }
    public Long getUserId() {
        return userId;
    }
    public void setUserId(Long userId) {
        this.userId = userId;
    }

}

다음은 FridgeController에서 fridge POST API를 호출하는 부분을 수정한다. 
@Controller
@RequestMapping("/fridges")
public class FridgeController {
    ...

    
    @PostMapping("/add")
    public String processRegistrationFridge(@Valid FridgeCommand fridgeCommand, Errors errors, RedirectAttributes ra) {
        if(errors.hasErrors()) {
            return "fridges/registerFridgeForm";
        }
        
        ResponseEntity<FridgeCommand> response = restTemplate.postForEntity("/fridges", fridgeCommand, FridgeCommand.class);
        if(response.getStatusCode().is2xxSuccessful()) {
            ra.addFlashAttribute("registerMessage", fridgeCommand.getNickname() + "을 생성했습니다.");
        }
        return "redirect:/fridges";
    }
    
    ...
    
}

processRegistrationFridge 메서드는 파라미터에 fridgeCommand 객체 바인딩으로 요청변수들을 전달받아서 nickname 만을 restTemplate postForEntity에 전달했었다. 변경된 점은 fridgeCommand 파라미터를 그대로 요청파라미터에 전달하는것이다.

registerFridgeForm, updateFridgeForm 뷰페이지에서 userId를 input 필드로 추가한다.
물론, 사용자가 회원번호를 알수도없고, 입력할 필요도 없지만 지금은 테스트 수행을 위해서 임시로 input 값을 생성한다. 나중에 회원번호 input필드는 security 가 적용되면 사라진다.
<label for="userId">회원번호:
    <input type="text" th:field="*{userId}" />
</label>

FridgeController에서 개인화된 냉장고를 표현하는 메서드를 추가한다. GET /fridges/me 이렇게 요청하면 개인별 회원번호를 API서버에 전달해서 데이터가 있으면 fridge 데이터를 받고, 없다면 생성해서 응답받는다.
    private static final String DEFAULT_NICKNAME = "myFridge";
    private static final long USER_ID = 1004L;
    
    @GetMapping("/me")
    public String myFridge(Model model) {
        ResponseEntity<FridgeCommand> response = restTemplate.getForEntity("/fridges/me/" + USER_ID, FridgeCommand.class);
        if(response.getStatusCode().is2xxSuccessful()) {
            if(response.getStatusCode() == HttpStatus.OK) {
                model.addAttribute("fridge", response.getBody());
            } else if(response.getStatusCode() == HttpStatus.NO_CONTENT) {
                FridgeCommand fridgeCommand = new FridgeCommand();
                fridgeCommand.setNickname(DEFAULT_NICKNAME);
                fridgeCommand.setUserId(USER_ID);
                ResponseEntity<FridgeCommand> createResponse = restTemplate.postForEntity("/fridges", fridgeCommand, FridgeCommand.class);
                if(createResponse.getStatusCode().is2xxSuccessful()) {
                    model.addAttribute("fridge", response.getBody());
                }
            }
        }
        return "fridges/fridge";
    }

myFridge 메서드는 API서버에 GET /fridges/me/{userId} 방식으로 HTTP 통신해서 응답상태코드가 204 NO_CONTENT 일 경우, 새로운 Fridge 객체를 생성해서 뷰페이지로 객체를 전달한다.
회원번호는 하드코딩해서 전달한다. 닉네임은 기본값으로 myFridge를 전달한다.

개인화가 되고, 개인당 하나의 Fridge객체만을 가지도록 제약사항을 가지므로 fridges 목록/등록/수정 페이지는 더이상 필요없어졌다. 코드를 정리한다.

코드가 정리되고나면 테스트를 실행해서 문제가 없는지 확인한다.

Fridge 컨트롤러에 restTemplate을 이용한 API 서버와의 통신을 별도의 서비스 클래스로 옮기고 서비스클래스를 호출하는 방식으로 수정한다.
FridgeRestService 클래스명으로 서비스를 작성한다.
@Service
public class FridgeRestService {
    
    @Autowired
    private RestTemplate restTemplate;
    
    private static final String DEFAULT_NICKNAME = "myFridge";
    private static final long USER_ID = 1004L;
    
    public FridgeCommand loadMyFridge() {
        FridgeCommand fridge = loadByUserId(USER_ID);
        if(fridge == null) {
            return generate(DEFAULT_NICKNAME, USER_ID);
        }
        return fridge;
    }
    
    FridgeCommand loadByUserId(long userId) {
        ResponseEntity<FridgeCommand> response = restTemplate.getForEntity("/fridges/me/" + USER_ID, FridgeCommand.class);
        if(response.getStatusCode() == HttpStatus.OK) {
            return response.getBody();
        }
        return null;
    }
    
    FridgeCommand generate(String nickname, long userId) {
        FridgeCommand fridgeCommand = new FridgeCommand();
        fridgeCommand.setNickname(nickname);
        fridgeCommand.setUserId(userId);
        
        ResponseEntity<FridgeCommand> response = restTemplate.postForEntity("/fridges", fridgeCommand, FridgeCommand.class);
        if(response.getStatusCode() == HttpStatus.CREATED) {
            return response.getBody();
        }
        return null;
    }

}

loadByUserId, generate 두 메서드는 private으로 감추고 loadMyFridge 메서드가 두 메서드를 조합해서 사용한다. 다음은 FridgeController의 수정 코드이다.
@Controller
@RequestMapping("/fridges")
public class FridgeController {
    
    @Autowired
    private FridgeRestService fridgeRestService;
    
    @GetMapping("/me")
    public String myFridge(Model model) {
        model.addAttribute("fridge", fridgeRestService.loadMyFridge());
        return "fridges/fridge";
    }
    
}

식품목록 기능은 fridges에서 서비스되므로 삭제하고 식품의 추가/수정/삭제 뷰는 그대로 사용한다.
FoodController 에서 사용하는 RestTemplate 관련 기능들도 서비스 클래스로 옮긴다.
FoodRestService 클래스를 작성한다. 
@Service
public class FoodRestService {
    
    @Autowired
    private RestTemplate restTemplate;
    
    public FoodCommand create(FoodCommand foodCommand) {
        ResponseEntity<FoodCommand> response = restTemplate.postForEntity("/foods", foodCommand, FoodCommand.class);
        if(response.getStatusCode() == HttpStatus.CREATED) {
            return response.getBody();
        }
        return null;
    }
    
    public FoodCommand loadById(long id) {
        ResponseEntity<FoodCommand> response = restTemplate.getForEntity("/foods/{id}", FoodCommand.class, id);
        if(response.getStatusCode() == HttpStatus.OK) {
            return response.getBody();
        }
        return null;
    }
    
    public void update(FoodCommand foodCommand, long id) {
        restTemplate.put("/foods/{id}", foodCommand, id);
    }
    
    public void delete(long id) {
        restTemplate.delete("/foods/{id}", id);
    }

}

FoodController에서 각각의 restTemplate 기능들을 옮겼다. 다음은 FoodController 수정 소스코드다. 
@Controller
@RequestMapping("/fridges/foods")
@SessionAttributes("foodCommand")
public class FoodController {
    
    @Autowired
    private FoodRestService foodRestService;
    
    @GetMapping("/add")
    public String registerFoodForm(FoodCommand foodCommand, Model model) {
        model.addAttribute("foodCommand", foodCommand);
        return "foods/registerFoodForm";
    }
    
    @PostMapping("/add")
    public String processRegistrationFood(@ModelAttribute @Valid FoodCommand foodCommand, 
            Errors errors, 
            RedirectAttributes ra, 
            SessionStatus sessionStatus) {
        if(errors.hasErrors()) {
            return "foods/registerFoodForm";
        }
        
        if(foodRestService.create(foodCommand) != null) {
            ra.addFlashAttribute("message", "식품을 저장했습니다.");
            sessionStatus.setComplete();
        }
        return "redirect:/fridges/me";
    }
    
    @GetMapping("/{id}")
    public String updateFoodForm(@PathVariable long id, Model model) {
        model.addAttribute("foodCommand", foodRestService.loadById(id));
        return "foods/updateFoodForm";
    }
    
    @PutMapping("/{id}")
    public String processUpdateFood(@PathVariable long id, 
            @ModelAttribute @Valid FoodCommand foodCommand, 
            Errors errors, 
            RedirectAttributes ra,
            SessionStatus sessionStatus) {
        if(errors.hasErrors()) {
            return "foods/updateFoodForm";
        }
        
        foodRestService.update(foodCommand, id);
        ra.addFlashAttribute("message", "식품을 저장했습니다.");
        sessionStatus.setComplete();
        return "redirect:/fridges/me";
    }
    
    @GetMapping("/delete/{id}")
    public String deleteFood(@PathVariable long id, RedirectAttributes ra) {
        foodRestService.delete(id);
        ra.addFlashAttribute("message", "식품을 삭제했습니다.");
        return "redirect:/fridges/me";
    }

}

클래스 선언부에 매핑 URL이 /foods에서 /fridges/foods 로 변경했고, SessionAttributes 애너테이션이 추가했다. SessionAttribute 애너테이션으로 ModelAttribute 에 담기는 객체를 HTTP 세션에 저장해서 동일한 키를 통한 호출은 세션에 객체가 저장되어 있으면, 세션 데이터를 사용해서 통신 빈도를 줄인다.
foods 메서드(목록 기능)가 삭제되었고 나머지 메서드들은 그대로 사용한다. 방금 작성한 FoodRestService 클래스 메서드들을 이용해서 코드를 정리했다.
등록/수정/삭제 처리 후 리다이렉트할 URL이 /fridges/me 로 변경됬다.

테스트를 실행해서 문제가 없는지 확인한다.


이전글: 냉장고 가계부 프로젝트 22
다음글: 냉장고 가계부 프로젝트 24
라벨:

이 블로그의 인기 게시물

Dolphin 3

100자 이내의 짧은 글을 쓸 수 있는 게시판 제공. Dolphin Project에서 가장 메인 서비스는 예적금 시뮬레이터이므로, 다른 기능 구현은 차후로 미뤄뒀지만, 사용자와 소통할 수 있는 최소한의 기능은 제공하는게 맞다는 생각이 들어 아주 단순한 게시판 기능을 제공합니다. 사용자가 글을 쓰려면 로그인을 먼저 해야합니다. 글을 등록 후 삭제할 때 글 작성자를 식별할 수 있어야 하기 때문입니다. 게시판은 Dolphin Frontend Main 페이지에 자리잡았습니다. 사용자가 가장 먼저 만나게 되는 웹페이지이므로 적당하다고 생각합니다. 다음은 로그인을 하기 전 사용자가 볼 수 있는 메인 페이지입니다. 글 상단에는 작성일(MMM-dd-yyyy)과 작성자 고유번호(#numbers)가 노출됩니다. Dolphin 은 네이버 로그인을 사용하기 때문에, 사용자를 식별할 수 있는 정보는 저 고유번호가 됩니다. 하단에는 글 내용이 자리잡습니다. 스크린샷에서는 Hello, world!! 라는 문구가 보이네요. 글은 최대 100자까지 허용합니다. 버튼 두개(Newer, Older) 는 페이징 버튼인데, Newer는 최근페이지로 이동을 하며, Older는 지나간 글을 보는 페이징버튼입니다. 기본 페이지 사이즈는 20개입니다. 오른쪽으로 보이는 글 작성 폼은 현재 로그인 하기 전이므로 textarea 는 disabled 처리되어 있고 Login버튼이 자리잡고 있습니다. 다음은 사용자가 로그인 한 뒤의 메인페이지입니다. 변경된 부분은 사용자 고유번호 뒤에 Remove 버튼이 나타났습니다. 해당 글 작성자가 로그인한 사용자일 경우에만 보이게 됩니다. 오른쪽 글 작성 폼도 이제 활성화 되었습니다. 아주 단순한 Textarea 창과 Submit 버튼이 자리잡고 있습니다. 다음은 작성자가 아닌 다른 사용자가 로그인한 경우 입니다. 사용자 고유번호(#54097272) 옆에 Remove 버튼이...
자세한 내용 보기

Dolphin 2

별도의 회원가입 없이 소셜 로그인 기능 제공으로 간편한 로그인 가능. Dolphin 프론트엔드는 회원가입 절차가 따로 없고, 간단하게 소셜 로그인 기능을 제공함으로써 회원가입, 인증절차를 생략했습니다. 우선, 간단하게 국내에서 잘 알려진 네이버의 API를 사용합니다. 네이버 개발자센터 웹사이트 에서 네이버 아이디로 로그인 기능을 살펴봅니다. 개발 문서를 자세히 살펴보고 API 신청을 합니다. 애플리케이션의 이름을 정하고 필요한 정보를 필수/선택에 체크합니다. 밑으로 내려보면 로그인 API 서비스 환경 부분에서 환경 추가 셀렉트박스에서 PC 웹을 선택하면 다음과 같은 입력폼이 나타납니다. 서비스 URL은 내 웹애플리케이션의 URL이 될 예정입니다. 지금은 개발상태이므로 localhost를 입력했습니다. Callback URL은 네이버 OAuth 인증 url로 호출하면, 인증절차 후 네이버에서 리다이렉트해줄 url을 뜻합니다. 저는 /naver/login 으로 했습니다. 등록이 완료되면 client-id와 client-secret 값을 제공해줍니다. 이 값을 이용해서 인증처리를 할 수 있습니다. spring.io 웹사이트의 튜토리얼 문서를 보면 Facebook 소셜 로그인 기능에 대한 설명이 자세하게 나와있습니다. 이 부분을 참고합니다. Spring Boot and OAuth2 pom.xml 파일에 의존성을 추가하고 Application 클래스에 @EnableOAuth2Sso 애너테이션을 선언합니다. 튜토리얼대로 application.yaml 파일(application.properties)에 설정 정보를 입력합니다. clientId, clientSecret 값은 네이버 개발자센터에서 받은 대로 입력합니다. accessTokenUri는 네이버의 경우 https://nid.naver.com/oauth2.0/token 입니다. userAuthorizationUri는 네이버의 경우 https://ni...
자세한 내용 보기

Dolphin 1

금융감독원 OPEN API를 사용하여 데이터 수집 금융감독원 금융상품통합비교공시 사이트에서 제공하는 OPEN API 를 사용합니다. 먼저, API 키를 신청합니다. https://finlife.fss.or.kr/PageLink.do?link=openapi/certification&menuId=2000119  로 접속합니다. 약관에 동의하고 본인인증 후, 신상정보를 넘기면 바로 API 키를 받을 수 있습니다. 상세 및 테스트 페이지를 들어가보면 요청 파라미터와 응답 API 형태를 확인할 수 있습니다. 요청은 다음과 같습니다. 읽어보면 서비스 명에 따라 url이 달라지는 부분을 제외하면 요청 URL은 크게 달라지지 않습니다. 파라미터에 인증키, 권역코드, 페이지번호를 전달하면 됩니다. 응답부분은 서비스마다 다르지만 공통 응답 형태는 다음과 같습니다. 에러코드, 에러메시지, 전체 개수, 전체 페이지, 현재 페이지 번호 입니다. 예금상품 조회 서비스나 적금상품 조회 서비스의 경우 공통적으로 금융회사 코드와 이름을 전달해주는데 해당 금융회사의 상세한 정보를 보려면 금융회사 조회 서비스도 호출하는게 나중에 좋을것 같습니다. Spring으로 HTTP 통신을 위해서 Apache HttpComponent 라이브러리를 사용합니다. 메이븐에 다음과 같이 의존성을 추가합니다. <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> </dependency> 다음은 API를 호출하는 간단한 소스코드 조각입니다. CloseableHttpClient httpClient = HttpClients.createDefault(); URI uri = new URIBuilder() .setScheme("http") .setHos...
자세한 내용 보기