본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클154

[에러일지] ESLint - Function component is not a function declaration 목차 · 원인 · 함수 유형 구분 · 해결 방법 · 레퍼런스 Function component is not a function declaration eslint (react/function-component-definition) ESLint를 연결해주는 과정에서, 마주한 에러이다. 함수는 올바르게 작성을 했지만 ESLint 설정 과정에서 함수에 관련된 규칙을 빼먹은 것 같아 구글링을 진행하고 이에 따른 해결방법을 포스팅을 했다. 원인 리액트에서는 공식문서에서도 나왔듯이 클래스형 컴포넌트보다 요즘 많이 찾는 보통 함수형 컴포넌트를 사용한다. ESLint react/function-compoent-definition 규칙을 사용한다면, 이 함수형 컴포넌트를 어떤 함수 유형으로 사용할지 미리 정하고 rules.. 2023. 3. 1.
협업을 위한 eslint와 prettier 목차 · ESLint · Prettier · ESLint와 Prettier을 같이 왜 사용해요? · ESLint 설치 방법 · Prettier 설치 방법 · eslint formatting rules와 prettier의 충돌 · ESLint, Prettier 함께 사용해보기 · 레퍼런스 해당 글은 계속해서 업데이트 중 👏🏻 ESLint와 Prettier의 공통적인 특징은 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이다. 이는 협업에서 각 개발자 간의 코드 문법의 통일성을 유지시키고 규칙을 정해 보다 퀄리티 높은 코드를 작성할 수 있게 해주는데 아주 유용한 도구이다. ESLint 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. 대부분의 프로.. 2023. 2. 28.
프론트엔드 웹 성능 최적화 방법은 뭐가 있을까? 목차 · 성능 최적화 방법 · 렌더링 최적화 (CSS 최적화, unused css의 제거, 간결한 스타일 작성, HTML 최적화, 복잡한 DOM 트리 지양, 애니메이션 최적화, JS 최적화) · 로딩 최적화 (link와 script의 올바른 위치 지정, media 속성, Async / defer 사용) · 이미지 최적화 (Picture 태그, 이미지 지연 로딩, 스프라이트 이미지) · Webpack · Gzip · JS 압축 · CDN · 캐싱 프로젝트를 진행함에 있어 기능을 구현하면서, 점점 규모가 커짐에 따라 코드의 양과 컴포넌트의 단위들도 비례하는 것을 발견하였다. 그리고, 중간중간 성능 향상을 위해 나름대로 이미지 크기를 줄이거나, 압축을 하는 등의 노력을 했지만 이미지 최적화 이외에도 다른 다양.. 2023. 2. 27.
SSR의 특징을 가진 Next.js를 왜 사용해요? 목차 · Next.js 란? · Next.js는 어떻게 동작할까? · Next.js와 SEO(Search Engine Optimization) · Code Splitting 자동화 · 정리 저번 포스팅에서 CSR과 SSR에 관련된 내용으로 포스팅을 진행했다. 여기서 든 의문점은 아직 Next.js를 배우지 않았기 때문에 단순히 SEO라는 장점하나 때문에 SSR의 단점 중 하나인 서버로 부터 새로운 UI 정보를 받아올 때 새로고침을 하게 되면 대체 SSR의 특징을 가진 Next.js를 왜 사용하는것일까? 라는 점이었다. Next.js 란? SSR을 쉽게 구현하도록 도와주는 React 프레임워크이다. Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주.. 2023. 2. 26.
CSR(React)과 SSR(Next)의 차이 그리고 SEO 목차 · SPA(Single Page Application) · CSR(Client Side Rendering) · CSR의 장점과 단점 · SSR(Server Side Rendering) · SSR의 장점과 단점 · CSR vs SSR · SEO(Search Engine Optimization) React, Vue, Angular와 같이 SPA(Single Page Application)방식으로 개발하는 경우 여러가지 장점이 많지만, SEO(Search Engine Optimization)가 잘 되지 않는다는 단점이 있다. 그렇기 때문에 사용자들에게 정보제공을 하고 유입을 증가시켜야하는 경우 SPA 방식이 불리할 수 있다. 하지만 SSR 방식으로 개발을 진행할 경우에는 SPA 두마리 토끼를 다 잡을 수.. 2023. 2. 26.
React Hooks의 종류와 사용법 1. useState useState는 가장 기본적인 훅이며, 컴포넌트 안에서 상태 관리를 해야하는 일이 발생한다면 이 hook을 사용한다. import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}> +1 setValue(value - 1)}> -1 ); }; 2. useEffect useEffect는 리액트 컴포넌트가 리렌더링 될 때마다 특정한 작업을 수행하도록 설정할 수 있게 하는 hook이다. useEffect에서는 dependency array를 통해 특정 객체의 상태 값이 변할.. 2023. 2. 25.

티스토리툴바