Coding Planet

일반적으로 ScrollToTop 컴포넌트는 window 객체의 스크롤을 감지하여 구현한다. 하지만 특정 div 내에서만 스크롤이 발생하는 경우 window.pageYOffset은 항상 0을 반환하여 스크롤 위치를 정확히 파악할 수 없다. 무한 스크롤 게시판의 경우 맨 위로 가기 버튼이 필수적이므로 이 기능을 스크롤 컨테이너에서만 적용되도록 구현했다. 다만 예시코드에서는 무한 스크롤 부분은 코드의 가독성을 위해 제거하고 ScrollToTop 기능만 나와있다.   | 접근 방법1. 스크롤 가능한 컨테이너에 ref를 할당한다.2. 이 ref를 'ScrollToTop' 컴포넌트에 전달한다.3. 'ScrollToTop' 컴포넌트 내에서 해당 ref의 scrollTop 속성을 사용하여 스크롤 위치를 감지한다.  |..

PWA 구현시 create-app-react로 생성하지않아 아래와 같은 폴더 구조를 가지고 있지 않았다. 그래서 루트에 public 폴더를 생성하고 하위에 서비스 워커 설정을 위한 js를 추가했다. service-worker.js 를 제대로 설정하고, indext.html에 아래와 같이 serviceWorker를활성화 하는 코트를 넣었는데도 브라우저에서 스크립트를 찾지 못하는 오류가 났다.const registerServiceWorker = async () => { if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.register( '/service-worker..

redux-persist 상태를 유지함으로써 페이지를 새로고침하거나 탐색할 때도 사용자 설정이나 임시 데이터(예: 폼 입력 내용)를 유지할 수 있다. 또한 백엔드 서버와의 통신을 줄여주어 사용자 경험을 크게 향상시킨다.보통 로컬스토리지에 저장하게 된다. 다만 이런 클라이언트상의 저장은 문제가 있으므로 보안이 요구되는 데이터 보다는 임시데이터 위주로 저장한다.   설치yarn add redux-persist  환경설정store.js는 Redux 스토어를 생성하고 설정하는 파일이다. 여기에 persistConfig를 포함시켜 저장소와 관련된 모든 설정을 한 곳에서 관리하는 것이 좋.스토어 생성 과정에서 persistReducer와 함께 persistConfig를 사용하여 일관된 상태 저장 및 복원을 보장한다..

redux-saga는 Redux에서 비동기 작업(예: API 호출)을 더 쉽게 관리할 수 있게 해주는 미들웨어이다. redux-saga는 제너레이터 함수(generator function)를 사용하여 비동기 로직을 작성할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다. 아래 코드를 예시로, redux-saga가 어떤 역할을 하는지 설명하겠다.import { call, put, takeLatest, all } from 'redux-saga/effects';import axios from 'axios';import { fetchWeatherSuccess, fetchWeatherFailure } from './config/action';import { FETCH_WEATHER_REQUEST..

1. 익명 함수 전달 (() => handleSelect) handleSelect('Components')}>Components의미: onSelect 이벤트가 발생할 때마다 새로운 함수 객체를 생성해서 전달하는 것장점: 특정 인자를 함수에 전달해야 할 때 유용단점: 매 렌더링마다 새로운 함수 객체가 생성돼서 메모리 사용이 증가할 수 있다. 이로 인해 불필요한 렌더링이 발생할 수 있는데, 특히 PureComponent나 shouldComponentUpdate를 사용하는 경우 2. 함수명만 전달 (handleSelect)JSX의미: onSelect 이벤트가 발생할 때 기존에 정의된 함수를 그대로 전달하는 것을 의미장점: 함수 객체를 새로 생성하지 않기 때문에 메모리 효율적이고, 불필요한 렌더링을 방지단점: ..

| 배열 디스트럭처링의 기본 개념배열 디스트럭처링(array destructuring)은 JavaScript의 ES6(ECMAScript 2015) 기능으로, 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있게 해주는 문법이다. 이 문법은 리액트의 훅(예: useState)을 사용할 때 매우 유용하다.즉, 배열 디스트럭처링은 배열의 요소를 분해하여 별개의 변수에 할당하는 방식이다. const fruits = ['Apple', 'Banana', 'Cherry'];// 배열 디스트럭처링const [firstFruit, secondFruit, thirdFruit] = fruits;console.log(firstFruit); // Appleconsole.log(secondFruit); // Bananaconso..

|  Components Are UI Building Blocks React Apps are build by combining components.| Why Components?1) Reusable Building BlocksCreate small bulding blocks&compose the UI from themIf needed:Reuse a building block in different parts of the UI(e.g., a resuable button)2) Related Code Lives TogetherRelated HTML & JS(and possibly CSS) code is stored together.Since JS influences the output, storing JS +..

https://www.udemy.com/course/best-react/?couponCode=ST18MT62524 강의 구매자가 80만명이 넘는 강의이다. 강의가 워낙 많아서 필요한 부분을 모듈 형식으로 공부해야겠다.

| 오류코드                Error: error:0308010C:digital envelope routines::unsupported     at new Hash (node:internal/crypto/hash:80:19)     at Object.createHash (node:crypto:139:10)     at module.exports (C:\workSpace\react-boilerplate\node_modules\webpack\lib\util\createHash.js:90:53)     at NormalModule._initBuildHash (C:\workSpace\react-boilerplate\node_modules\webpack\lib\NormalModule.js:401:16..

pre 태그는 HTML에서 사전 서식을 지정한 텍스트를 표시하는데 사용된다. 이 태그를 사용하면 공백, 탭, 줄바꿈 등이 그대로 보존되어 텍스트가 원본의 형태로 보여진다. 주로 코드 블록이나 고정폭 텍스트를 표시할 때 사용된다. 그러나 기본적으로 pre 태그는 자동 줄바꿈을 지원하지 않아, 긴 텍스트는 가로 스크롤이 생기게 되어 사용자 경험을 해칠 수 있다. 아래 게시판 예시에서 글의 가로줄이 너무 길어 표가 레이아웃을 벗어나 공백 영역까지 확장되었다. 내용 이를 해결하기 위해 CSS의 white-space 속성과 word-wrap 속성을 사용하여 자동 줄바꿈을 구현할 수 있다. white-space 속성은 요소 내부의 공백 문자(whitespace) 처리와 줄 바꿈 규칙을 지정한다. 공백문자는 문자가 ..