[코드스쿼드] 피드백 정리

in Devlog on JavaScript



피드백 정리

  • 설계시, 동작과정(절차)도 미리 적은 후에 코딩해볼 것

  • console.log 에 대한 반복을 함수로 따로 만들어서 처리할 것

  • 배열은 for in 보다는 for 이나 forEach 를 사용

  • 변수 호이스팅을 항상 염두해두고 코딩할 것
    • 조건문 안에 바로 선언하는 것이 아닌
    • 함수 바로 아래 변수를 모두 선언해두는 것이 좋음

  • ES5 와 ES6 차이에 대한 부분을 명확하게 짚어가면서 코딩할 것

  • ES6 의 화살표에 대해서 주의해서 쓸 것

  • 함수에서 오류상황은 초반에 모아서 바로 리턴

  • 코드를 바로 생각나는대로 작성하지 말고, 한번 더 확인하는 습관을 가질 것

  • 어떤것을 변환할 때, 함수보다는 객체로 만들어서 배열로 접근해보는 방식을 생각해볼 것

  • 즉시 실행함수

  • case 문에 대한 비용을 생각하면서 코딩할 것
    • 대체할 수 있는게 있으면 대체할 것
  • 네이밍은 항상 중요
    • 구체적인 이름을 지을 것
    • 어색한 이름을 피할 것
    • 명사로 이름을 지을 것

  • 삼항연산자를 길게쓰면 가독성이 떨어짐

  • 일반적인 클래스 표기법
    • class 클래스명 { }

  • var 대신 let과 const로만 코드를 작성해보자

  • forEach 로 모든것을 처리하지말고, 이전에 filter 로 미리 처리

    • 아마도 내 생각은, 코드 가독성면에서 처리하는 것 같으나 정확한것은 crong에게 물어봐야함

  • CLASS 의 의미

    class TODO {
  constructor() {
    this.todos = [];
  }
  
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
  
  getTodos() {
    return this.todos;
  }
  deleteTodo(id) {
    //일치하는 것을 찾아서 삭제..
  } 
}
  
const todo = new TODO();
todo.addTodo({id:1, content:"야호 주말에 놀아야지"});
console.log(todo.getTodos());

  • regex 정규표현식 자주 사용하는 구문 모아놓기

  • Javascript 종료하기

    process.exit();

  • javascript 30 DAYS, TUTORIALS

  • for each 에서 return; 은 continue 와 똑같은 기능을 수행함

  • 2018.05.25 회고

    • 기술적으로 실력을 늘리는 것과 팀프로젝트적으로 협력하는 것은 반비례관계에 놓여있다
      • 협력하는 경험은 회사에서의 경험과 비슷한 부분이 많다
    • 문서보는 방법 (Document)
      • 한글 블로그 보다는 Offical Site 를 이용하라
      • Getting Started
      • Javascript 기준으로 유명한 것은 MDN
      • 라이브러리 같은 것을 Offical Site 에서 어떻게 사용하는지?
      • 예를 들어, 처음 보는 언어를 어떻게 쓸것인가? 에 대한 질문을 던져주고 그걸 풀어나가는 과정들을 본다. 어떻게 익히는지, 자료를 어떻게 찾는지
    • 자기주도학습
    • 크롬개발자 도구를 통한 Javascript Debugging
    • ErrorMsg를 버리지 말 것 (대부분 어디서 에러가 났는지 다 나와있음)
  • require / exports 할 때, 상호참조하게 하지 말 것 (A-B B-C C-A)

  • 테스트코드 작성 (STEP6) 에 대한 피드백

    arrayParser 클래스 역할이 좀 커졌네요. 메서드도 많아서 수정하고 스스로 디버깅하기 어렵진 않나요?
분리하는게 답은 아니지만, 스스로 해결하기 어렵다면 이 큰 덩어리를 나누는 방법은 무엇인지 생각해보세요~

    지금처럼 new Lexer로 할수도 있지만,
module.exports = Lexer; 로 클래스 자체를 반환하는 게 좀더 일반적이긴 합니다.
    • module.exports = Lexer; 로 수정한 후, lexer.checkType 메서드를 호출할 때 에러가 발생한다
    • lexer.checkType is not a function at ArrayParser.getResult
    • const {lexer} = require('./lexer'); 하면 에러 내용이 달라진다
    • Cannot read property 'checkType' of undefined at ArrayParser.getResult
    • 아직 import 할 때, {} 차이를 잘 모르겠다
    • ES6의 export와 import를 사용하기 위해서 Babel
    • 이건 나중에 참고할 글
    • ObjectParser 을 구성하였다.
    • 그런데, 결국은 상호참조가 되어버림.
    • 어떻게 다시 돌리기 힘들어서, import export 를 많이 검색함
    • ES6의 코드가 안돌아감 대체 왜?
    • 그래서 npm 중 Babel module 을 설치해서 돌려봄 = 안됨
    • 결국은 함수를 통해서 생성해서 반환시켜줌 (__)
    • arrayParser 에서 objectParser 을 분리하다가, 계속 넘겨준 데이터가 초기화되는 버그가 발생
    • 원인은 생성자에서 this.mergeData = data 로 받고 맨 뒤에 this.mergeData = “” 하는 어이없는 실수를 발생
    • 원인이 무엇인지 모르겠는데, module.exports = Lexer; 로 클래스를 바로 넘겨버리면
    • 다른쪽에서 lexer.js의 메서드들을 사용할 수가 없는 문제가 발생
    • 생성자에서 this.Lexer = new Lexer(); 을 통해서 생성했음에도 메서드에 접근이 안됨
    • 일단은 const lexer = new Lexer(); 전역변수를 통해서 해결

정규표현식에 대한 피드백을 적용하기 위해서, 정규표현식에 대한 공부를 다시 하였습니다. (잘 기억이 안나서요..) https://github.com/antaehyeon/javascript-json/tree/step7#%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D

그런데 해당 조건문들을 정규표현식으로 바꾸면 코드가 줄어들 수 있겠다 생각이 들어서, 직접 적용해보니 순차적으로 조건을 검색해야 되는 부분에 반해 정규표현식은 한번에 조건들을 검사하는 바람에 검사하면 안되는 부분에 대해서도 검사를 해버려서 무조건적인 false 를 반환하더라구요.

그래서 일단 Object Type 일 경우에만 (/Object/g) 조건검사를 시작하는데 Object의 경우 key-value 쌍이 있어야 됩니다만.. 제 코드 구성 방식은 Object가 여러개 있으면 key-value, key2-value2 형식으로 구분합니다.

무조건 Object 면 한개의 key-value 가 있으니 동시조건(/(?=.key)(?=.value)/g)를 이용해서 구현하였습니다.

문제는 key2-value2 부터인데, 그래서 일단 key2가 있는지 검사하는 조건이 있어야 되는데 이것을 또 찢어버리니 (/key2/g) 라는 조건에 key2 가 없고 value2 만 있을 경우도 있으니까 (/value2/g) 라는 조건을 한번 더 검사해주고..

정규표현식으로 바꿨지만, 코드가 줄어들지 않아서 메서드 마다 동시조건에 의해 검사되는 부분에 정규표현식이 어울리는 것인지 궁금합니다.

  • true 라고 하니까 어떤 의미인지 알기가 어렵네요. arrayparser 생성자의 인자들을 객체형태로 받아서 key값으로 이름을 표시하면 더 좋겠어요.

  • require 와 모듈 의존성에 대해서 간단히라도 역사(history)를 살펴보면 좋을 거 같아요.

  • 정규표현식

  • STEP 9 문서화

    • 함수가 반환을 안할수도 있으나, 가급적 지정된 값을 반환하도록 구현하면, 테스트코드를 구현하기 쉬움

    • 반환값이 없어도, 대상 함수를 호출한 뒤로 클래스 변수값이 변경됐는지를 테스트해보는 식으로 테스트코드를 구현할 수 있음

    • 문서는 잘 정리해서 readme에 표현해서 포트폴리오로 활용하는 것도 좋겠습니다. 문서 잘 썼어요.

      image

      image

    • 제 생각에는 analyzeTypeData는 분석한 결과만 반환하면 되는것이지, 출력을 위한 메시지 문자열까지 포함할 필요가 없어보여요. analyzeTypeData 함수의 반환값을 받아서 필요하면 메시지를 더해서 화면에 출력하면 되는 것이겠죠.




© 2018. by HYEON

Powered by HYEON