우테코 FE프리코스 2주차 회고

소감

최근 까지 팀 프로젝트를 우선적으로 신경쓰느라 2주간 프리코스는 그저 구현에만! 집중했습니다. ㅠㅠ 객체 지향적으로 class를 나누고 파일 분리도 했으면 좋았을걸 아쉽습니다. 3주차부터는 공부하면서 적용할 예정이에요!!!

마감 시간 전에 제출을 하고, 오늘 다른 분들의 코드를 구경했는데 엄청 깔끔하고 파일 구조도 MVC패턴으로 나누어 구현하신 분이 많았습니다. 테스트 코드도 정말 신경을 많이 쓰신게 보였습니다. 어쩜 저렇게 코드를 보기 좋게 만드실까..
저는 아주 오랜만에 class를 사용했고 어색해서 함수만 나누는데에 집중하느라 파일 구조는 고려하지 않았네요.. ㅠ

이렇게 멋진 코드를 읽으며 참고해서 3주차 과제는 MVC를 적용하거나 파일을 분리해서 코드를 설계해보겠다고 다짐했습니다!!!!! 이렇게 참고할 기회가 너무 값진 것 같아요. 

잘한점 과 개선할 점

다른 분의 코드를 보고 참고하는 것도 좋지만, 저 스스로 성장을 했는지도 중요하다고 생각하는데요, 2주차는 1주차 때보다 함수가 하나의 기능만을 할 수 있도록 신경을 써서 개선했다는 것이 좋았던 점이라고 생각합니다.

3주차 때 개선할 것은, MVC 패턴을 적용해보는 등 관심사의 분리를 하여 class를 나누어 구현해보자는 것입니다. 

 

자주 나오는 개념인 MVC 패턴에 대해서 간략하게 알아보고자 합니다.

MVC 패턴

MVC 는 사용자 인터 페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 SW 디자인 패턴이다.
SW의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다. 이러한 "관심사 분리(Separation of Concerns)"는 더 나은 업무의 분리와 향상된 관리를 제공한다. 

Model: 데이터와 비즈니스 로직을 관리한다.

모델은 포함해야하는 데이터가 무엇인지, 데이터를 처리하는 규칙을 정의를 한다. 즉 상태를 관리하고, 처리 규칙을 정의한다.

View: 레이아웃과 화면을 처리한다. (사용자가 보는 화면)

뷰는 사용자의 입력을 컨트롤러에 전달한다. Model이 변화된 부분을 화면에 업데이트한다.

Controller: 모델과 뷰 사이의 상호작용을 관리한다.

사용자의 입력을 받아서 모델을 업데이트하고, 업데이트된 모델을 뷰에 전달한다. SW의 흐름을 제어한다.

 

예시 코드 보기

Model

public class Product {
    private String id;
    private String name;
    private double price;

    // getters and setters
    public String getId(){
		return this.name
	}
}

 

View

- 출력하는 로직만 포함. Model의 코드는 포함하되, 컨트롤러는 아님.

public class ProductListView {
    public void display(List products) {
        for (Product product : products) {
            System.out.println(product.getName() + " - " + product.getPrice());
        }
    }
}

 

Controller

- 상호작용하는 역할을 하기 때문에 Model,View의 코드가 있을 수 있음.  view가 Model의 데이터를 받을 때 controller로 부터 받아야한다.

public class ProductController {
    private Product model;
    private ProductListView view;

    public ProductController(Product model, ProductListView view) {
        this.model = model;
        this.view = view;
    }

    public void updateView() {
        view.display(model.getProducts());
    }
}

 

출처: MDN, https://f-lab.kr/insight/understanding-oop-and-mvc-architecture-20240810