본문 바로가기

전체 아티클136

[에러일지] 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.
클래스형 컴포넌트와 함수형 컴포넌트의 차이 현재 리액트 공식문서에서는 함수형 컴포넌트와 훅을 사용하는 것을 권장하고 있다. 컴포넌트란 템플릿 기능 뿐만 아니라 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 기능을 하며, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타나거나 사라질 때, 그리고 변화할때의 작업들을 사용할 수 있다. 물론 클래스형 컴포넌트와 함수형 컴포넌트의 하는 일은 거의 동일하지만, 코드 구조에서 약간의 차이가 있으며 엄밀히 말하면 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점을 가지고 .. 2023. 2. 25.
그 동안 남의 시선에서 벗어나지 못했던 것 같다 목차 · 그 동안 남의 시선에서 벗어나지 못했던 것 같다. · 나는 나만의 `김현우` 라는 색깔을 가진 사람이다. 그 동안 남의 시선에서 벗어나지 못했던 것 같다. 남의 시선을 두려워하지 않고, 하고싶은 것에 무엇이든 도전을 하고자 마음먹었던 전역 후의 대학생활이었다. 어느샌가 남의 시선에 대한 기대치에 부흥하고자 열심히 달려오고 있었고, 이런 행동들은 4학년을 마친 지금의 나에게 지치는 여행이었다. 남에게 잘 보이기위해 나를 치장하고, 남에게 잘 보이기위해 취업을 잘 해야하고, 이런 모든 것들이 나에게는 언제부턴가 당연하게 느껴졌다. 그렇다면 왜 이런 생각들을 했을까? "촉박했기 때문이다" 맞아, 지금의 나는 너무 촉박하다. 내가 노력하는 것들은 `김현우`라는 사람을 브랜딩하고자 하는 행동들의 일부분이.. 2023. 2. 25.
React의 Virtual DOM 목차 · DOM(Document Object Model) · React Virtual DOM · Virtual DOM을 사용하는 이유 DOM (Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 어플리케이션의 전체 UI를 나타내며, 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한, 구조화된 형식으로 되어있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. React Virtual DOM React에서는 가상 DOM을 사용한다. 이 가상 DOM은.. 2023. 2. 24.

티스토리툴바