React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..

SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 그러한 서비스는 오래가지 못한다는 특성을 가지고 있습니다. 오늘 알아볼 것은 프론트엔드의 헤더에 SEO를 어떻게 적용하면 좋을 지에 대한 내용입니다. SEO(Search Engine Optimization)란 무엇일까? SEO는 "검색 엔진 최적화"를 의미합니다. 주위에서 많이 사용하는 Google, Bing, Naver 등의 검색 엔진에서 웹사이트가 더 잘 보이도록 향상시키는 과정을 말합니다. 페이지가 검색 결과에서 보이는 정도가 더 좋을수록, 발견되고 클릭되는 확률이 올라갑니다. 결국에는 검색 엔진 최적화의 목표..

프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..

D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..

ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다. 코드 품질과 일관성을 유지하는 것이 왜 중요할까요? 가독성 향상 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다. 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다. 유지보수 용이성 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다. 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다. 팀 협업 향상 코드가 일관되고 품질이 높으..

오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..