웹개발/React.js

1장 블로그 서비스 최적화이 장에서 최적화 기법이미지 사이즈 최적화이미지를 적정한 사이즈로 사용해야 한다. 너무 작으면 화질 저하, 너무 크면 네트워크 트래픽의 증가로 로딩속도가 느려짐.코드 분할SPA의 특성상 모든 리액트 코드는 하나의 js로 번들링 되므로 쓰지 않는 코드도 첫 로딩 시에 포함되어 무거워짐. 따라서 당장 필요없는 코드는 스플리팅하여 필요 시점에 쓰도록 분할.텍스트 압축웹페이지 접속 시 다양한 리소스(HTML, CSS, js 등)을 받는데 서버에서 미리 압축이 가능함. 압축 시 본 사이즈보다 작은 사이즈로 다운로드 할 수 있어서 웹페이지 로드가 빨라짐.병목 코드 최적화특정 js 코드 때문에 서비스가 느리게 다운되거나 실행되는 경우가 있음. 이런 현상을 만드는 코드를 '병목 코드' 라고 함..

오늘 구현할 컴포넌트 테블릿화면에 쓰일 웹 사이트인데, 사용자가 물기묻은 손으로 스크롤이 어렵다고 판단되어 스크롤 탑& 바텀 버튼을 달아주기로 했다. 오랜만에 scroll관련 이벤트를 다루게 되어 기억이 가물가물했다. 그래서 열심히 구글링을 해보았는데.. 대부분 window.scrollTo 를 이용한 구현 글이 대부분이였다. 나는 window 자체가 스크롤이 되는 형태가 아닌 테이블 리스트를 담고 있는 어느 div 자체 내에서 스크롤 이벤트를 감지하고 컨트롤해야 한다. 그렇게 onScroll이라는 리액트 이벤트 핸들러를 발견했는데,공식문서의 설명을 빌리면 요소가 스크롤이 발생했을 때 핸들링하는 메서드이며 기본으로 이벤트 버블링이 일어나지 않는다. 하지만 나는 버튼을 눌렀을 때 스크롤이 일어나게 하고싶었던..

State: A Component Memory 공식문서를 기반으로 리액트 state에 대해 정리해본다. 📝 리액트 공식문서 Components need to “remember” things: the current input value, the current image, the shopping cart. In react, this kind of component-specific memory is called state 컴포넌트는 현재 입력 값을 업데이트 해야 하기 때문에, 이를 기억해 줄 메모리 “State”가 필요하다 컴포넌트를 업데이트 하기 위해서는 지역변수는 렌더하는 동안 지속되지 않는다. 👉🏻렌더하는 동안 데이터를 지속시켜야 하고 지역변수의 변화가 렌더링을 트리거하지 않는다. 👉🏻 새로운 데이터와 ..

리액트 라이프 사이클 1. 라이프 사이클의 이해 리액트의 컴포넌트에는 라이프사이클이 존재한다. 이는 페이지에 렌더링되기 전인 준비과정에서 시작해 페이지에서 사라질 때 끝난다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용 가능하다. 함수형 컴포넌트에서는 Hooks를 사용해 비슷한 작업을 처리한다. 2. 라이프 사이클 메서드 라이프 사이클 메서드 용어 용어 설명 ~ will 어떤 '작업을 수행하기 전에 실행되는 메서드와 관련. ~ did 어떤 '작업을 수행한 이후'에 실행되는 메서드와 관련. mount 컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타나는 메서드와 관련. unmount 컴포넌트 내에서 'DOM을 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련. update 컴포넌트 내에..

이제껏 개발을 하면서 컴포넌트가 둘로 구분되는지 모르고 있었는데 리액트 스터디를 통해 확실하게 개념을 정리해볼 수 있었다. 학습한 내용을 바탕으로 클론코딩 중인 코드에 Debounce를 적용해보았고 그 과정을 기록해보았다. 제어? 비제어 ? 컴포넌트 React의 폼데이터를 다루는 두 가지 방식 중 하나인 제어 컴포넌트 방식입니다. 폼 데이터를 다루는 데는 제어컴포넌트와 비제어 컴포넌트 방식 두 가지로 특징을 잘 알아야 상황에 따라 폼관리를 최적화할 수 있습니다. 이름 그대로 값이 제어되는 컴포넌트가 제어 컴포넌트, 제어되지 않는 컴포넌트를 비제어 컴포넌트라고 합니다. 순서대로 코드와 함께 개념을 살펴보겠습니다! 제어 컴포넌트 간단히 말해 React가 폼 데이터를 제어하는 방식입니다. HTML에서 와 같은..

오늘은 get요청으로 백에서 넘겨준 액셀파일을 프론트에서 다운받는 코드 작성과 이 과정에서 이해한 걸 기록해보고자 한다. 우선 내가 구현한 건 다운로드 버튼을 눌렀을 때, 백에 get요청을 보내고 응답으로 액셀파일을 받아 다운해주는 것이다. 먼저, API.jsx에 다음과 같이 작성해주었다 export async function getAuditLogFile() { try { const response = await api.get("/audit/excel/downloadAll", { responseType: "blob", }); if (response.status === 200) { return response.data; } console.error("error statuscode", response.sta..

드롭다운 구현 중 외부 영역 클릭감지를 어떻게 해야하나 구글링을 하며 알게된 내용을 코드와 함께 상세히 적어보겠습니다. 구현을 위해 필요한 지식은 useRef와 이벤트 핸들링, 그리고 버블링입니다. 이 내용들을 다 알고 있다면 바로 드롭박스 구현쪽으로 넘어가시면 됩니다~ [사전지식] 1. useRef란? 리액트에서 특정 DOM을 선택하는 용도로 사용하거나, 렌더링과 상관없이 특정 값을 유지하고 싶을 때 사용하는 Hook이다. 다음 간단한 예제 코드이다. import React, { useRef, useEffect } from 'react'; function App() { const myInput = useRef(); //useRef 선언 useEffect(() => { myInput.current.foc..

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. 어떤 컴포넌트가 특정 정보를 기억하게 하고 싶지만, 새로운 렌더를 일으키고 싶지 않을 때 사용한다 (공식문서) html에서 DOM 요소에 이름을 달 때는 id를 사용한다. 리액트 내부에서 DOM에 이름을 다는 방법은 바로 ref Q. 리액트 컴포넌트 안에서 id를 사용하면 안되나요? 사용해도 되지만 HTML에서 DOM id는 유일해야 하는데 중복의 위험이 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. Re..