# 코드 리팩토링(refactoring) ## 미션 --- Article 등록 및 수정 페이지에서는 ajax를 위한 JS가 사용된다. 각각의 JS를 하나의 파일로 만들어, 중복 코드를 줄이시오.  ## 개념 --- #### ⭐️ 리팩토링 프로그램 동작은 그대로 두면서, 코드의 품질을 개선하는 것. 이를 리팩토링(refactoring)이라 한다. 리팩토링의 목적은 가독성과 효율성, 그리고 확장성에 있다. 가독성은 팀원들과 원활한 소통을! 효율성은 최소한의 코드로 많은 동작을 하게하며, 확장성은 새로운 기능을 쉽게 추가하게 한다. ## 튜토리얼 --- #### ⭐️ JS 파일  1) 생성: "static/js/app/article.js" ``` // article 객체 생성 var article = { // 초기화(이벤트 등록) 메소드 init: function() { // 스코프 충돌 방지! (https://mobicon.tistory.com/189) var _this = this; // 버튼 선택 const createBtn = document.querySelector('#article-create-btn'); const updateBtn = document.querySelector('#article-update-btn'); // 버튼 클릭 시, 동작 할 메소드를 연결! if (createBtn != null) { // createBtn이 있다면 수행! createBtn.addEventListener('click', _this.create); } if (updateBtn) { // updateBtn이 있다면 수행! updateBtn.addEventListener('click', _this.update); } }, // article 생성 메소드 create: function() { // form 데이터를 JSON으로 만듬 var data = { title: document.querySelector('#article-title').value, content: document.querySelector('#article-content').value, }; // 데이터 생성 요청을 보냄 // fetch(URL, HTTP_REQUEST) fetch('/api/articles', { method: 'POST', // POST 방식으로, HTTP 요청. body: JSON.stringify(data), // 위에서 만든 폼 데이터(data)를 함께 보냄. headers: { 'Content-Type': 'application/json' } }).then(function(response) { // 응답 처리! // 요청 성공! if (response.ok) { alert('게시글이 작성 되었습니다.'); window.location.href='/articles'; // 해당 URL로 브라우저를 새로고침! } else { // 요청 실패.. alert('게시글 작성에 문제가 생겼습니다.'); } }); }, // article 갱신 메소드 update: function() { // form 데이터를 JSON으로 만듬 var data = { id: document.querySelector('#article-id').value, title: document.querySelector('#article-title').value, content: document.querySelector('#article-content').value, }; // 데이터 갱신 요청을 보냄 // fetch(URL, HTTP_REQUEST) fetch('/api/articles/' + data.id, { method: 'PUT', // PUT 방식으로, HTTP 요청. body: JSON.stringify(data), // 위에서 만든 폼 데이터(data)를 함께 보냄. headers: { 'Content-Type': 'application/json' } }).then(function(response) { // 응답 처리! // 요청 성공! if (response.ok) { alert('게시글이 수정 되었습니다.'); window.location.href='/articles/' + data.id; // 해당 URL로 브라우저를 새로고침! } else { // 요청 실패.. alert('게시글 수정에 문제가 생겼습니다.'); } }); } // 추후, 삭제 메소드 추가 예정..! }; // 객체 초기화 article.init(); ``` #### ⭐️ 뷰 페이지 2) 스크립트 변경: "articles/new.mustache" ``` {{>layouts/header}} <div class="jumbotron"> <h1>Article 등록</h1> <hr> <p>articles/new.mustache</p> </div> <form class="container"> <div class="form-group"> <label for="title">제목</label> <!-- name="title" 추가, DTO의 필드명과 일치해야 함! --> <input name="title" type="text" class="form-control" id="article-title" placeholder="제목을 입력하세요"> </div> <div class="form-group"> <label for="content">내용</label> <!-- name="content" 추가, DTO의 필드명과 일치해야 함! --> <textarea name="content" class="form-control" id="article-content" placeholder="내용을 입력하세요" rows="3"></textarea> </div> <!-- type="button"으로 변경, id값 추가 --> <button type="button" class="btn btn-primary" id="article-create-btn">제출</button> </form> <Script src="/js/app/article.js"></script> <!-- article.js 삽입 --> {{>layouts/footer}} ``` 3) 스크립트 변경: "articles/edit.mustache" ``` {{>layouts/header}} <div class="jumbotron"> <h1>Article 수정</h1> <hr> <p>articles/edit.mustache</p> </div> {{#article}} <form class="container"> <div class="form-group"> <label for="title">제목</label> <!-- value 속성 추가 --> <input name="title" type="text" class="form-control" id="article-title" placeholder="제목을 입력하세요" value="{{title}}"> </div> <div class="form-group"> <label for="content">내용</label> <!-- textarea 내부 텍스트 추가 --> <textarea name="content"class="form-control" id="article-content" placeholder="내용을 입력하세요" rows="3">{{content}}</textarea> </div> <!-- 숨겨진 입력값 id 추가 --> <input type="hidden" id="article-id" value="{{id}}"> <button type="button" class="btn btn-primary" id="article-update-btn">제출</button> </form> {{/article}} <Script src="/js/app/article.js"></script> <!-- article.js 삽입 --> {{>layouts/footer}} ``` #### ⭐️ 확인하기 4) 데이터 생성  5) 데이터 수정  ## 훈련하기 --- - new 페이지와 edit 페이지에는 form이 중복된다. 이를 리팩토링 하시오. ## 면접 준비 --- - 리팩토링이란 무엇이고, 왜 필요? - 프로젝트 진행 시, 리팩토링은 어떻게?