백엔드 / 프론트 분리하면서 배운 것

코드 작성하면서 배운점을 정리해보자

(응 내 코드)

백엔드와 프론트엔드를 분리하는 작업을 하고있다.
요즘들어 자주 드는 생각,
HTML을 정말 잘 모르는구나 ^^........ 괜찮아.. 그것이 신입....인턴.....
자바스크립트를 정말 잘 모르는구나 ^^.... 괜찮아.. 그것이.. 신입...인턴....
코드를 참 못짜는구나.. 괜찮아... 그것이... 신입....인턴....

잊지않게 잘 정리 해 두자

타이핑 하기 전에 대략적인 그림을 그리고 코드를 짠다.

일단 짜 두고 나중에 정리하지! 라고 생각했는데 그렇게하니까 완전 스파게티 코드가 되어버렸다.
이건 뭔가 잘못된 것 같지만 멈출 수 없었는데 CTO님이 멈춰주심.
완벽하게는 아니더라도 어떤 함수가 어떻게 작동할 지, 정확한 변수명, 함수명을 사용하고 있는 지 고민해야겠다.

---

하나의 함수는 하나의 기능

스크립트 코드와 HTML코드를 분리하는데에만 집중하다보니, 기존의 코드에 대한 수정은 하지 않았다.
getQuery()에서 페이지네이션에 대한 쿼리와 필터에 대한 쿼리를 모두 전달하고 있다는 사실은 알았지만
분리시켜야겠단 생각을 하지 못했는데, 하나의 함수가 하나의 기능만 하도록 작성해야한다.
앞으로 다른 페이지를 분리할 때 잘 적용해봐야겠다.

---

parameter를 재할당하지 말 것

• https://spin.atomicobject.com/2011/04/10/javascript-don-t-reassign-your-function-arguments/

• https://eslint.org/docs/rules/no-param-reassign.html

• https://github.com/airbnb/javascript

  함수 매개변수로 선언된 변수에 대한 할당은 오해의 소지가 있고 혼란스러운 동작으로 이어질 수 있습니다.

  파라미터를 재할당 하는 것은 예상하지 못한 작동의 원인이 된다.
  따라서 아래처럼 사용하자. 회사에서 쓴 코드도 이렇게 변경해야겠다.

  // bad
  function f1(a) {
    a = 1;
    // ...
  }
  
  function f2(a) {
    if (!a) { a = 1; }
    // ...
  }
  
  // good
  function f3(a) {
    const b = a || 1;
    // ...
  }
  
  function f4(a = 1) {
    // ...
  }

  정적 요소 초기화 시켜주기

  html 테이블 바디에 서버에서 받아온 데이터들을 붙여주는 작업을 했는데,
  페이지네이션을 할 때 마다 정적 요소인 html을 초기화 시켜주고 붙여줘야지 안그러면 계속 아래로 붙는다.
  html은 정적.. html 정적... ㅜ