웹개발

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

14장 전역변수의 문제점전역변수를 사용할 이유가 없다면 지역변수를 사용해야 한다. 이 장에서는 전역변수의 문제점과 전역변수의 사용을 억제할 수 있는 방법을 정리한다.1. 변수의 생명주기변수는 선언으로 생성되고 할당으로 값을 갖는다. 그리고 언젠간 소멸되는 생명주기를 갖는다.변수는 자신이 선언된 위치에서 생성되고 소멸한다.지역변수함수의 생명주기와 같다.(함수가 호출되면 생성되고 함수가 종료되면 소멸한다.)함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다.함수 생명주기와 대부분 일치하나 지역변수가 더 오래 생존하는 경우도 있다.전역변수애플리케이션의 생명주기와 같으며 전역 객체의 생명주기와 일치한다.선언문이 어디에 있든 상관없이 런타임 이전 단..

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

상황 UI가 다르지만 동일한 로직을 공유하는 컴포넌트들의 중복코드를 없애고자 로직을 분리하는 과정에서 발생한 에러이다. 로직을 util함수(JSX를 반환하지 않는 일반함수)로 분리한 후, 이를 사용할 컴포넌트에서 onClick이벤트 핸들러 함수로 넣어주고자 함. 문제의 코드 문제가 발생했던 유틸 함수 async function handleTableInteraction(e, tableId, errorDoorTableId) { const isAdmin = localStorage.getItem('role') === 'admin'; //recoil 또한 hook으로 보기 때문에 일반 util함수에서 부를 수 없음. const setSmallModal = useSetRecoilState(smallModalStat..

Physical Architecture Concepts Region Oracle Cloud Infrastructure is physically hosted in regions and availability domains. A Region is a localized geographic area Availability domain is one or more data centers located with a region. Regions are globally distributed data centers that provide secure, high-performance, local env. AWS의 리전 같은 개념. 오라클 클라우드 인프라구조는 Regions와 availability domain으로 호스팅되는..

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에서 와 같은..