Development Study/Frontend
-
React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..
[React] useEffect 쓰지 마세요?React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서는 useEffect 훅을 지양하는 이유가 무엇인지, 그리고 연관되어 있는 개념인 Side Effect 관리에 대해 알아보겠습니다. 1. Side Effect란 무엇인가? Side Effect는 컴포넌트 외부에 영향을 미치는 작업을 의미합니다. 예를 들어보면 데이터 가져오기, 네트워크 요청, 로컬 스토리지 접근 등이 여기에 해당됩니다. React 컴포넌트는 Side Effect 관리를 위해서 useEffect 훅을 제공합니다. 2. 불필요한 Side Effect로 인한 성능 저하 useEffec..
2023.05.25 -
SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 그러한 서비스는 오래가지 못한다는 특성을 가지고 있습니다. 오늘 알아볼 것은 프론트엔드의 헤더에 SEO를 어떻게 적용하면 좋을 지에 대한 내용입니다. SEO(Search Engine Optimization)란 무엇일까? SEO는 "검색 엔진 최적화"를 의미합니다. 주위에서 많이 사용하는 Google, Bing, Naver 등의 검색 엔진에서 웹사이트가 더 잘 보이도록 향상시키는 과정을 말합니다. 페이지가 검색 결과에서 보이는 정도가 더 좋을수록, 발견되고 클릭되는 확률이 올라갑니다. 결국에는 검색 엔진 최적화의 목표..
[SEO] 서비스의 검색 엔진 순위를 높여보자, 헤더에 SEO 적용하기SEO(검색 엔진 최적화)는 웹사이트의 검색 엔진 순위를 높이기 위한 중요한 요소 입니다. 웹사이트를 아무리 잘 만들어 두어도 검색이 되지 않는다면 사용자는 쉽게 들어오지 않을 것이고, 결국 그러한 서비스는 오래가지 못한다는 특성을 가지고 있습니다. 오늘 알아볼 것은 프론트엔드의 헤더에 SEO를 어떻게 적용하면 좋을 지에 대한 내용입니다. SEO(Search Engine Optimization)란 무엇일까? SEO는 "검색 엔진 최적화"를 의미합니다. 주위에서 많이 사용하는 Google, Bing, Naver 등의 검색 엔진에서 웹사이트가 더 잘 보이도록 향상시키는 과정을 말합니다. 페이지가 검색 결과에서 보이는 정도가 더 좋을수록, 발견되고 클릭되는 확률이 올라갑니다. 결국에는 검색 엔진 최적화의 목표..
2023.05.23 -
프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..
[Recoil vs Redux] Frontend Engineer를 위한 React 상태관리 도구 알아보기프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다. 리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다. 따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다. 상태관리(State Management)란 무엇일까? 상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다. 조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다. 프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다. 만약 쇼핑몰에 들어간다..
2023.05.23 -
D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..
[D3.js] 강력한 성능의 시각화 라이브러리, D3.js에 대해 알아보자D3.js 라는 이름을 들어 보셨나요? "Data-Driven Documents"의 줄임말인 D3.js는 웹 표준을 이용해 데이터를 시각화하는 데 사용되는 강력한 자바스크립트 라이브러리입니다. 주로 프론트엔드 고도화의 주제로 많이 쓰이며 시각화 중에 가장 복잡하고 커스터마이징이 자유롭다는 특징을 가지고 있습니다. D3.js란 무엇인가? D3.js는 웹에서 데이터를 시각화하기 위한 도구로서, 대화형 그래프와 동적인 시각화를 만드는 데에 주로 사용됩니다. DOM, HTML, CSS, SVG 등의 웹 표준 기술을 활용해 사용자의 데이터를 브라우저 상에서 시각적으로 표현할 수 있게 해줍니다. D3.js의 중요한 특징 중 하나는 '데이터 중심' 접근법입니다. 즉, D3.js는 주어진 데이터를 바탕으로 웹 문서의 ..
2023.05.22 -
ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다. 코드 품질과 일관성을 유지하는 것이 왜 중요할까요? 가독성 향상 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다. 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다. 유지보수 용이성 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다. 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다. 팀 협업 향상 코드가 일관되고 품질이 높으..
[ESLint, husky, Prettier] 당신의 코드 품질을 책임져주는 3가지 도구들ESLint? Husky? Prettier? ESLint, Husky, Prettier는 프로그래밍을 할 때 코드 품질과 일관성을 유지하기 위한 도구입니다. 그리고 이제 개발의 세계에서는 코드 품질과 일관성을 유지하는 것이 굉장히 중요해진 시점입니다. 코드 품질과 일관성을 유지하는 것이 왜 중요할까요? 가독성 향상 일관성 있는 코드 스타일과 높은 코드 품질은 코드를 읽고 이해하기 쉽게 만듭니다. 가독성이 좋은 코드는 개발자들이 더 빠르게 문제를 파악하고 해결할 수 있게 도와줍니다. 유지보수 용이성 코드 품질과 일관성이 높으면, 코드를 수정하거나 확장하기가 더 쉽습니다. 이는 시간과 비용을 절약할 수 있으며, 프로젝트의 수명이 길어질수록 더 중요한 요소가 됩니다. 팀 협업 향상 코드가 일관되고 품질이 높으..
2023.05.09 -
오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
[TypeScript] type {함수명}? interface {함수명}?오늘도 평화롭게 사탕을 하나 먹으며 코드 리팩토링 요소를 찾아보던 날이었습니다. 입안 가득 퍼지는 청포도 향이 좋다고 생각하다가 전에 타입을 지정할 때 interface와 type을 둘 다 썼던 것만 같은 기억이 문득 떠올랐습니다 그래서 확인을 해 보았는데 실제로도 두개가 혼용되어서 사용이 되고 있는 것을 볼 수 있었습니다. 그 때 갑자기 머릿속에서 들려오는 질문 하나가 있었습니다. "타입이랑 인터페이스랑 뭐, 똑같은 거 아닌가?" 분명 머리로는 아니라는 걸 알지만 자세히 알지 못하였기에 바로 블로그에 접속해서 기록하며 알아보기 시작했습니다. **type**과 **interface**는 TypeScript에서 사용되는 두 가지 기능입니다. 이 둘은 비슷해 보이지만, 몇 가지 차이점이 있기에 지금부터 알아..
2023.04.27 -
프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
[Folder Structure] Hooks? Utils? 차이점이 뭘까?프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..
2023.04.27 -
React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
[React] 차트 라이브러리 비교 분석React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..
2023.04.16 -
React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
[React] 9개의 대표적인 애니메이션 라이브러리 비교해보기React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..
2023.04.16 -
영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..
[Techeer Talk] JavaScript ES6에는 어떤 변화가 있었을까?영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..
2023.04.16 -
들어가며 최근 React를 배우고, 프로젝트에서 실행을 하면서 많은 시행착오를 겪었습니다 그중에서도 많은 개발자들이 공통적으로 성장하면서 겪는 실수들이 있다고 하는데, 이 글은 그러한 내용들을 다루고 있습니다 공감되는 부분이 있고, 아닌 부분들도 있겠지만 대부분은 겪고 지나간다는 일이니 재밌게 봐주시길 바라며 포스팅을 시작합니다 KOR 본문 1. 컴포넌트화의 부재 하나의 파일에 모든 코드를 입력하여 만들려고 한다면 후에 디버깅을 하고 다루는 데에 어려움을 겪게 된다 하지만 모든 것이 여러 컴포넌트로 세분화가 잘 이루어져 있다면? 프로젝트 관리를 굉장히 편안하게 할 수 있을 것이다 2. 직접적인 state 수정 리액트의 모든 state들은 변하지 않는 값을 가지고 있다 state, object, array..
[React] 초보 개발자들이 실수하기 쉬운 것들들어가며 최근 React를 배우고, 프로젝트에서 실행을 하면서 많은 시행착오를 겪었습니다 그중에서도 많은 개발자들이 공통적으로 성장하면서 겪는 실수들이 있다고 하는데, 이 글은 그러한 내용들을 다루고 있습니다 공감되는 부분이 있고, 아닌 부분들도 있겠지만 대부분은 겪고 지나간다는 일이니 재밌게 봐주시길 바라며 포스팅을 시작합니다 KOR 본문 1. 컴포넌트화의 부재 하나의 파일에 모든 코드를 입력하여 만들려고 한다면 후에 디버깅을 하고 다루는 데에 어려움을 겪게 된다 하지만 모든 것이 여러 컴포넌트로 세분화가 잘 이루어져 있다면? 프로젝트 관리를 굉장히 편안하게 할 수 있을 것이다 2. 직접적인 state 수정 리액트의 모든 state들은 변하지 않는 값을 가지고 있다 state, object, array..
2023.01.17 -
This is a good plugin to organize your long-dizzy tailwind classnames. You have to install Prettier before you get started preview a result ... ... How to install 1. put this text in the terminal npm install -D prettier prettier-plugin-tailwindcss 2. Save the codes by using Prettier 3. Well done! Happy Hacking! + How classes are sorted? They sorted High Level class to Low Level class examples En..
[Tips] Organizing your Tailwind ClassNameThis is a good plugin to organize your long-dizzy tailwind classnames. You have to install Prettier before you get started preview a result ... ... How to install 1. put this text in the terminal npm install -D prettier prettier-plugin-tailwindcss 2. Save the codes by using Prettier 3. Well done! Happy Hacking! + How classes are sorted? They sorted High Level class to Low Level class examples En..
2023.01.16