지난 팀 프로젝트에서는 완성 후 특별히 성능 개선에 대해서 신경쓰지 않았다. 디자인 요소 외 이미지 파일 등을 많이 사용하지 않아서? 확인할 수 있는 지표는 괜찮은 점수가 나온 것 같다. + 우리 팀원 전부가 잘해줬던 덕분에.그러나 이번 개인 프로젝트에서는 많은 이미지

React 내장 API.컴포넌트를 렌더링하는 시점에 비동기적으로 로드할 수 있게 해줌.코드 분할을 통해 필요한 부분만 초기 로드, 나머지 부분은 필요 시 로드.CSR의 단점 중 하나인 초기 로딩 시간을 어느 정도 개선할 수 있음.각 페이지들은 첫 렌더링이 필요한 시점에

alt 속성은 img 태그에 대체 텍스트를 제공함. 이는시각 장애가 있는 사용자들이 스크린 리더를 사용할 때, alt 태그가 이미지의 내용을 설명해 줌.불특정 이유로 이미지가 로드되지 않았을 때, alt 태그가 대신해 이미지 정보 제공.검색 엔진 최적화 (SEO): 검

Next.js에서는 'next/head'에서 Head를 import해 title을 변경해주면 되지만, React는 SPA 방식이기 때문에 하나의 index.html만 크롤링되어 각 페이지에 대한 정보를 나타내기 어렵다.웹사이트 탭 이름을 동적으로 변경하고 싶어 reac

커밋 시 원격 레포로부터 ref를 가져올 수 없을 때 발생.

React.DOM.Render는 React 18 버전에서 더 이상 지원되지 않음.대신 createRoot를 사용할 것.새 API로 변환 전까지 앱은 React 17 버전처럼 동작함.ReactDOM 을 import 해오는 디렉토리의 구조 변경 (17: react-dom

...

디테일 페이지 이동 후 브라우저 뒤로 가기를 통해 다시 레시피 페이지로 돌아왔을 때, 리렌더링이 발생해 페이지 초기 상태로 돌아옴. 기존 분류 필터, 소팅을 거친 페이지를 기억하기 위해 필터링과 소팅 그리고 스크롤 상태를 기억해야했음. 기존 코드 및 상태 화면 녹화를

왜 무한 스크롤?ux 고려: 사용자가 볼 각 아이템은 이미지가 포함되어 있음. 이미지의 크기를 고려한다면 해당 페이지에 페이지네이션 방식은 적합하지 않다고 생각했음. 사용자가 페이지를 전환해 소량의 아이템을 한 페이지 씩 확인하기보다 필요에 따라 스크롤을 내리면 같은

문자열에서 정수를 반환. 그러나 소숫점 이하의 숫자는 무시함.문자열을 숫자로 반환. 그리고 문자열이 숫자로 변환할 수 없는 경우에 NaN을 반환함. 숫자 변환에 엄격함.Number() 와 유사함. 엄격한 형태의 변환을 수행.문자열을 숫자로 변환해주고 문자열에 실수를 나

useCallback, useMemo, React.memo

기존 데이터의 제목 또는 내용을 입력 후 검색 버튼을 눌러 내가 원하는 필터링 된 데이터를 얻고 싶었다.

기존 방식은 이렇게 api를 받아와 export해서,필요한 페이지에서 import해서 사용했음.받아오는 데이터가 많아 렌더링에 오랜 시간이 걸려 점점 개발 속도가 지체되어 일단 데이터 캐싱을해서 보완을 했다. 그리고 지금은 그 다음 단계인 무한 스크롤 코드를 짜고 있는

해당 코드를 실행하면 렌더링엔 문제가 없으나 콘솔창을 확인해보니 list의 각 요소들은 고유한 key가 있어야한다는 경고 메시지가 나타난다.리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 친구이다. 요소에 고유성을 부여하기 위해 배열 내부의 요소에

객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용하여 객체를 생성하는 방식 각각의 장단점을 살펴보자.new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함. 생성 후 프로퍼티 또는 메서드를 추가할 수 있음.생성자 함수 con

콘텐츠 전송 네트워크 CDN (Content Delivery Network) 이란 전 세계의 여러 서버에 콘텐츠를 복사하여 사용자에게 빠르게 전송하도록 도와주는 인터넷 인프라임. 왜 필요한 것일까?사용자가 웹사이트를 방문할 때 해당 웹사이트 서버의 데이터는 사용자의 컴

리액트(자바스크립트)에서 export와 export default는 모듈에서 객체, 함수, 변수 등을 다른 모듈로 내보낼 때 사용함.여러 개의 export 사용 가능함.import 시 이름 변경 불가능, 정확한 이름을 사용해야 함.import 시 중괄호 {} 안에 가져

최솟값만들기길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다.배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최

문제 링크마지막 두 원소정수 리스트 num_list가 주어질 때, 마지막 원소가 그전 원소보다 크면 마지막 원소에서 그전 원소를 뺀 값을 마지막 원소가 그전 원소보다 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return하도록 solution 함수를 완성해주세요

내부 슬롯 internal slot과 내부 메서드 internal method은 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 pseudo property와 의사 메서드 pseudo method임. ECMAScri