본문 바로가기

전체 아티클23

React JSX 개념에 대한 리마인드 목차 · JSX(JavaScript XML) · JSX 문법 · 자바스크립트 표현식 · 일반 조건문 대신 삼항연산자 사용 · React DOM은 HTML Attribute 이름 대신 Camel-case Property 명명 규칙을 사용한다. · JSX 내에서의 주석 사용 · 마치며 · 레퍼런스 JSX(JavaScript XML) · JavaScript에 XML을 추가해 확장한 문법이다. · JSX는 리액트로 프로젝트를 개발 할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. · 브라우저를 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. · JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다. · 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가.. 2023. 3. 5.
협업을 위한 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.
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.

티스토리툴바