완성된 Rest API를 기반으로 간단하게 프론트를 작성했습니다.
index.html에
1. 데이터를 가져와 화면에 뿌리기 -> <tbody>
가 마운트될 때 get 함수 호출
2. 체크한 데이터의 상태 값 변경 -> button event, 상태 변경 함수 호출
3. 데이터 추가 //아직 덜 구현
의 기능이 모두 포함되는 방식(파일 안에 <html>
과 <script>
존재)으로 코드를 작성했습니다.
멘토분께서 제 코드를 보고 하나의 함수나 파일이 여러 일을 하고 있음을 지적해주셨습니다.
하나의 파일은 하나의 일만 수행해야 함 ex.헤더,스크립트 파일을 분리할 것
해당 부분과 관련해서 "관심사의 분리"란 개념을 공부하게 되었습니다
컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙, 각 부분은 하나의 관심사를 해결한다. 관심사 분리를 구현하는 프로그램을 모듈러 프로그램이라고 부른다. 관심사의 분리는 정보를 잘 정의된 인터페이스가 있는 코드 부분에 캡슐화시키는 방식으로 구현한다. 추상화의 일종
출처:위키피디아
(1) 설계, 배치, 이용에 있어 높은 자유도
(2) 모듈 재사용
(3) 다른 부분의 상세한 사항을 알 필요도, 변경할 필요도 없어짐
(4) 중간 기능의 손실 없이 단편적인 방식으로 복잡한 시스템을 업그레이드하는 자유도를 높임
출처:위키피디아
(1) 객체의 생성과 사용을 분리할 것
추상 팩토리 패턴, IoC(제어의 역전), DI(의존성 주입)
(2) 핵심 관심과 횡단 관심을 분리할 것
핵심 관심(주 비즈니스 로직)과 횡단 관심(비즈니스 로직 이외의 것들 ex. 로깅,트랜잭션 etc.)을 분리한다. → spring AOP
출처: ehdrms2034님의 벨로그