1/10 프론트엔드 온보딩 인턴십 내용 정리.

전체 조 과제 피드백 내용

 

1. 마크업과 비즈니스 로직은 분리되어야만 함.

UI(html의 class, id, tag 등)요소와 비즈니스로직(javascript)가 결합되어버리면 컴포넌트의 재사용성이 많이 낮아진다.

SPA 어플리케이션에서 컴포넌트의 주요 속성은 재사용성과 독립성인데, 이 컴포넌트 내부의 비즈니스로직이 html의 UI요소와 결합된다면 해당 컴포넌트를 다른 곳에서 사용하기 힘든 경우가 발생할 가능성이 크다.

따라서, html에서 정보를 가져오거나 이벤트를 발생시킬 때 class, id, tag 자체의 정보를 가져오는것보다 이벤트리스너에 익명함수를 부착하여 함수의 인자로서 특정 정보를 전달하는 것이 컴포넌트 재사용의 측면에서 더욱 효율적이다.

 

2. 콜백함수의 인자 작명에서 축약어를 사용하는 것은 자제하자.

const filteredArray = array.filter((value, idx) => value.id === targetId && idx === targetIdx);

위의 코드블럭처럼 콜백함수의 인자를 보통 value, 또는 index 등으로 표기하는 경우가 있다.

개발자는 항상 본인의 입장이 아니라 사용자와 동료의 입장에서 먼저 코드를 바라보아야하기 때문에 최대한 작명은 구체적으로 무엇을 의미하는지 구체적일 필요가 있다.

즉, 위의 경우에는 value가 아니라 score, price 등으로 무엇을 의미하는지 변수명을 명확하게 해야 한다.

다만, 보통 색인을 명명할 때 idx 처럼 그 의미나 컨벤션이 조직이나 생태계에서 일반적인 작명 관습은 예외가 될 수 있다.

 

3. 특정 변수에 의존하게되는 페이지를 설계할 때 주의.

SPA 어플리케이션은 페이지가 변환될 때, 새로운 html을 서버에서 가져오는 것이 아니라 내부적으로 javascript의 dom api를 활용하여 페이지를 전환한다.

만약, 이러한 어플리케이션에서 내부적으로 특정 변수를 가지고 해당 변수에 의존한 정보를 보여주는 페이지로 전환되는 경우가 있다고 가정한다.

이 페이지의 링크를 공유하거나 새로고침하여 접속하게 되어도 해당 변수의 상태는 초기화된 상태이기 때문에 어플리케이션은 개발자가 의도한 올바른 페이지를 보여주지 못할 것이다.

따라서, 이런 경우에는 url, 스토리지 등에 중요한 변수 정보 등을 저장하여 그것을 가지고 페이지가 항상 똑같은 결과를 보여줄 수 있도록 관리할 필요가 있다.

 

4. 좋은 주석을 작성하는 법.

기본적으로 주석은 남기지 않는 것이 베스트이다. 특히, 주석의 목적이 함수를 설명하는 것이라면 더더욱 그렇다.

함수는 그 이름과 내용만으로 충분히 그 역할이 무엇인지 설명가능해야 최적의 경우이기 때문에, 주석없이 그 내용을 파악가능해야 가장 좋은 코드라고할 수 있다.

따라서 함수의 역할에 대해 설명(변명)하는 주석은 최대한 지양해야 한다.

또한, 특정 코드의 목적의 파악이 힘들어 지우기 애매한 코드, 혹은 추후에 다시 쓰일것이라고 생각하지만 현재는 쓰이지 않기 때문에 일시적으로 주석처리를 해두는 코드는 모두 최악의 케이스이다.

그룹개발 상황에서 이러한 주석 사용 문화가 유지될 경우 주석처리된 코드가 순식간에 산더미처럼 쌓여 코드 가독성이 하락할 수 있기 때문에 이런 코드들은 주석이 아닌 형상관리 도구의 버전관리를 통해 업데이트를 지속해야 한다.

그러나, 코드가 수정이 필요하거나 앞으로 작성되어야 할 부분들은 다른 선택지 없이 주석으로 표시해야 할 경우가 있는데, 이런 경우에는 가장 일반적인 컨벤션인 'TODO'와 'FIXME'를 사용하여 기록을 남기는게 가장 좋다.

const fetchIssueHandler = useCallback(async () => {
  setLoading(true);
  await getIssues()
  // FIXME: 성능 부하 해결하기
    .then((issues) => {
      setIssueList(issues);
      setLoading(false);
     })
    .catch(() => {
      // TODO: 에러 처리하기
    });
}, [setIssueList]);

위처럼 'TODO'와 'FIXME' 컨벤션을 사용하여 앞으로의 코드 작성 방향에 대해 기록을 남기는 것이 주석을 남기는데에 가장 일반적이고 무난한 방법이라고 할 수 있다.

또한, package.json의 스트립트 설정을 통해 위의 'TODO', 'FIXME' 주석이 남아있다면 빌드가 되지 않도록 하여 보다 명확하게 프로젝트 완성의 가능성을 높일 수도 있다.

---

수업 내용

 

1. Typescript의 개발 배경

본래 javascript는 웹의 UI를 간단하게 다루기 위해 생겨난 언어이다.

웹은 초반에 그 가능성을 크게 평가받지 못했지만, 웹 시장의 수요는 폭발적으로 증가하여 javascript의 수요 역시 덩달아 증가했고 기존의 단순한 언어적 특성을 넘어 수 많은 추가 기능 및 개선 사항이 요구 및 개발되었다.

javascript가 웹에서 다양하고 복잡한 역할을 하게되면서 코드의 양 역시 비례해 증가했는데, 이때 javascript가 타입의 검사에 관대한 약타입 언어라는 특징이 수 많은 버그 및 에러를 양산하는 주 요인이 되었으며 개발자들의 큰 애로사항이 되었다.

따라서 개발된 것이 Typescript이며, 이 언어는 변수의 타입을 철저하게 감독하는 강타입 언어로서 기존 javascript의 약점을 보완하고 추가적인 장점을 제공한다. 

여기서 '왜 javascript는 업데이트를 통해 스스로 단점을 제거하지 못하고 결국 Typescript의 출시에 의존하게 되었나'라는 물음을 가질 수 있다.

그 이유는 하위호환성이라는 개념을 지키기 위함인데, 이 개념은 언어의 새로운 업데이트로 인해 기존에 작성된 프로그램 및 코드들이 영향을 받지 않아야 한다는 원칙을 뜻한다.

javascript가 개발자들의 요구를 맞추기 위해 약타입 언어에서 강타입 언어로 그 근간이 되는 속성을 바꿔버린다면 기존에 이 언어로 작성된 코드들은 제대로 작동을 하지 못할것이다.

즉, 이 하위호환성이라는 개념은 언어를 개발하든 프로그램을 개발하든 간에 지속적인 업데이트가 이루어져도 이전 버전의 작동을 보장한다는 중요한 원칙이며, 이 법칙을 지키기 위해 javascript 위에서 동작하는 확장 언어인 Typescript가 개발된 것이다.

결과적으로 이 Typescript는 javascript를 확장한 슈퍼셋이며, 작성된 Typescript 파일이 바벨(Babel)의 트랜스파일링(transpiling)을 통해 javascript로 다시 번역되고 이 javascript 파일을 다시 브라우저가 기계어로 번역하여 컴퓨터가 그 해석된 명령을 실행하도록 하는 순서의 작동 방식을 가지고 있다.

 

2. 타입 any는 언제 사용해야할까?

1) 외부의 라이브러리를 사용할 때, 그 라이브러리에 사용되는 변수, 함수 등이 타입지정이 되지 않았을 경우.

2) 그 라이브러리에 타입을 지정해줄 수 있는 라이브러리 파일 역시 존재하지 않을 경우.

 

위 두 경우, 라이브러리 파일이 상당히 볼륨이 크기 때문에 일일히 타입을 지정해주기 쉽지 않으므로 일시적으로 any를 사용할 수 있다.

물론, 검증된 라이브러리일 경우 그렇다.

 

3) 누가봐도 안전하고 예외가 발생할 여지가 존재하지 않는 경우에 한정하여 any를 사용할 수 있다.

 

그 외에는 Typescript 사용 시 any의 쓰임이 권장되지 않는다.

 

3. 그 외 잘 모르고 있었던 내용들 정리.

1)

Q. Tuple이란?

A. length와 각 element의 타입이 고정되어 있는 배열을 의미한다.

const point: [number, number] = [1, 1];

 

2)

Q. as const란?

A. 객체나 배열의 내부의 요소들의 값을 literal처럼 정확히 지정할 때 사용한다.

const numbers = [1,2,3]; // number[]
const numbers = [1,2,3] as const; // [1,2,3]

const obj = { x:1, y:2 }; // { x:number, y:number }
const obj = { x:1, y:2 } as const; // { x:1, y:2 }

 

3)

Q. keyof란?

A. 객체타입에서 key들만 추출하는 연산자.

type People = { name: string, age:number, gender:"male" | "female", hobby:string };

type KeyOfPeople = keyof People; // name | age | gender | hobby

 

4)

Q. 객체인 변수에 typeof를 사용하면?

A. 해당 객체의 속성에 대한 타입을 추출할 수 있다.

const yeonuk = {
  name:"yeonuk",
  age:1,
  gender:"male",
  hobby:"climbing"
};

type People = typeof yeonuk;
/* {
  name: string;
  age: number;
  gender: string;
  hobby: string;
} */

// 결합
type KeyOfPeople = keyof typeof yeonuk;

 

4. pick, omit 등 타입 추출 연산자들도 실무에서 많이 사용됨.

https://www.typescriptlang.org/docs/handbook/utility-types.html

Documentation - Utility Types

위의 공식 문서에서 필요할 때 참조할 수 있도록 하자!

 

 

PS. 본 내용의 출저는 원티드 프리온보딩 프론트엔드 인턴십의 세션 내용입니다.