Lighthouse of FE biginner

Overview이전 게시글에서 함수에 대해서 스터디를 진행 했습니다. 이번 포스팅에서는 함수의 클린 코드에 대해서 살펴보겠습니다. 함수의 클린 코드IIFE 사용을 지양한다.가급적이면 즉시 실행 함수(IIFE: Immediately Invoked Function Expression)를 사용하지 않습니다.(() => { console.log(this);})(); 요즘의 프론트엔드는 모듈화를 지향합니다. IIFE 함수는 즉시 실행이 되기 때문에 정의한 함수를 재사용 할 수 없습니다. IIFE 함수는 디버깅이 어렵다는 단점이 있고 함수의 선언문이 즉시 실행이 되기 때문에 IIFE 함수가 지속해서 쌓이다 보면 메모리 누수에 유의해야 합니다. 중첩 함수에서의 스코프중첩 함수를 선언할 시 스코프에 주의합니다. 그리..

Overview프론트엔드에서 프로젝트를 진행하다보면 반복되는 문자열 형식의 값이 존재합니다.보통 반복되는 값은 다음과 같은 경우입니다. 1. 반복되는 문구로 사용자에게 노출할 텍스트2. 서버와 약속을 해 프로젝트 자체에서 사용하는 텍스트3. 프론트엔드 프로젝트에서만 사용하는 상수 값 2번의 경우 보통 코드라는 단어로 부르게 되고, 3번의 경우 프로젝트에서 상수라고 부르게 됩니다. 반복되는 값, 리터럴반복 되는 값은 리터럴 그 자체를 매번 사용하는 것이 아닌 특정 변수에 담아서 사용해야 합니다. 예를 들면 다음과 같은 코드가 있습니다.예시를 들기위해 서버에서 특정 에러 케이스를 200 응답에 status라는 필드를 통해 알려주고 있다고 가정합니다. fetch('api').then((res) => { co..

Overview오늘은 TypeScript any에 대해서 다뤄볼 예정입니다.4월 새로운 팀에서 근무를 시작하고 프로젝트를 받아서 코드 파악을 하는 도중 any 타입이 너무 남발되어 있어서 당황한 적이 있습니다.최근에 회사에 좋지 않은 바람이 불어서 다른 팀 인원이 부족한 상황에 도움을 주러 팀이 이동됐습니다.또 다시 프로젝트를 클론 받아서 코드를 파악하려는데 이번 프로젝트는 대부분의 타입이 any로 되어있더군요.. 사실 이 글은 그 분노로 인해서 탄생된 글입니다. TypeScript타입스크립트란 무엇인가요?자바스크립트에 정적인 타입을 올려놓은 자바스크립트 슈퍼셋 언어입니다. 자바스크립트(JavaScript)는 동적인(Dynamic한) 언어입니다. 컴파일 단계에서 타입이 정해지지 않고 런타임 시점에 타입이..

들어가며저번 포스팅에서 사례로 살펴보는 커스텀 훅이라는 글로 여러 케이스의 커스텀 훅을 소개드렸습니다. 이번 포스팅에서는 소개하지 못했던 사례인 특정 훅을 사용하면서도 여러 컴포넌트에서 사용 가능해 추상화가 가능할 경우를 실제로 구현했던 과정에서 왜 이런 설계를 했는지 고민했던 과정을 남겨보겠습니다. 과정문제 제기먼저 이번 사례는 프로젝트 개선 과정에서 도출된 사례입니다. 진행중인 프로젝트의 대시보드에서는 툴팁을 직접 구현해서 사용하고 있습니다.툴팁의 위치를 계산하기 위해 마우스 커서의 위치를 반환하고 해당 x, y축의 좌표값을 컴포넌트의 top, left로 사용하고 있습니다.이 과정에서 툴팁 컴포넌트가 Viewport의 끝단에 마주칠경우 툴팁이 화면에 보이지 않는 영역에 위치해버려 스크롤이 생기는 케이..

들어가며리액트로 프론트엔드 개발을 하다보면 여러 컴포넌트에서 공통으로 사용하는 로직과 아주 동일한 코드는 아니지만 비슷한 비즈니스 로직을 여러 컴포넌트에서 사용하는 케이스가 있습니다. 단순한 순수 함수로써 리액트의 생명주기와 관련이 없는 로직이라면 유틸성 함수로 분리할 수 있지만, 해당 로직에 리액트 컴포넌트의 생명주기 혹은 리액트 API가 포함되어 있다면 일반 함수로 분리할 수 없습니다. 그 이유는 리액트의 훅(Hook)은 반드시 훅이나 컴포넌트 내부에서 사용해야 하기 때문입니다. 커스텀 훅(Custom Hook)이란?커스텀 훅이란 말 그대로 리액트의 API를 사용하는 사용자 정의 훅입니다. 요즘의 리액트는 대부분 함수 컴포넌트로 개발을 합니다. 주류였던 클래스형 컴포넌트를 비주류로 내려오게 만든 업데..