AI Platform / Web

JavaScript에서 if문과 비슷한 switch 문에 대해 적어보려 한다. 우리는 switch문을 언제 사용하고, 잘 사용하고 있는지에 대해 고민해 보면 좋을 것 같다. 기본적인 문법 설명은 생략한다. eslint관점에서 우선 설명을 풀어본다. 그리고 TypeScript에서 SRP(Single Responsibility Principle) 원칙으로 switch를 어떻게 사용해야 할지에 대한 고민을 함께 해본 후, 추가로 React에서 활용해 보도록 하자. 일반적으로 우리는 switch 문에서 default값을 꼭 넣어줘야 에러가 발생하지 않는다고 생각한다. 왜냐하면, 개발자도 사람이기 때문에 실수로 모든 조건을 넣지 않아 예외가 발생 할 수 도 있기 때문이다. 또한, eslint 관점에서 defau..

마우스 클릭 시 type 지정하여, event 값을 가져오는 데 어려움을 겪는 사람들을 위해 글을 적어보겠다. 보통 에러가 나는 부분은 event를 가지고와서 핸들링할 때, 주로 발생을 한다. event.target as HTMLElement 를 활용해서 사용하는 방식을 사용하면 된다. 사실 간단히 아래와 같이 구현이 가능하다. type CustomMouseEvent = MouseEvent; const TestComponent = () => { const handleSelect = (event: CustomMouseEvent) => { const eventTarget = event.target as HTMLElement; console.log(eventTarget.innerTest) }; return (..

최근에 HTMLElement에 대해 기초단계에서 자세하게 알려주진 않는것 같다. 하지만, 공부를하면, 기초가 중요하다는 것을 알게되는 것 같다. react를 배우면 가상돔을 다루지만, ref과 같은 깊은 지식으로 들어갈 수록 기초의 부재는 빠른 성장을 막는다. 또한 typescript로 적용을 하다보면 상속 시 HTMLElement 에 관련된 이야기들이 많이 나온다. 오늘은 HTMLElement에 대해 이야기를 풀어볼까 한다. 깊게 들어가면 끝도 없다. 따라서 이 글을 통해 맛보기로 기초개념을 이해한 후에, 필요하다면 관련 내용을 조금 더 공부해 보기를 추천한다. 간단한 예를 추가하자면, 우리가 javascript에서 사용하는 appendChild는 Node가 제공하는 method이다. appendChi..