JavaScript / React - IntersectionObserver

IntersectionObserver는 웹 개발에서 아주 유용한 API 이다.이 API는 특정 요소(target)가 뷰포트나 지정한 컨테이너와 교차하는 정도를비동기적으로 감지할 수 있게  해준다.즉 스크롤할 때 요소가 화면에 나타나거나 사라지는 시점을 효율적으로 파악할 수 있도록 해준다.IntersectionObserver를 사용하는 이유성능 최적화- 스크롤 이벤트를 직접 감시하는 방식은 매번 스크롤 이벤트가 발생할때마다많은 연산을 해야하기 때문에 성능 이슈가 발생할 수 있다.IntersectionObsever는 브라우저가 최적화한 방식으로 감지하므로 성능 부담이 적다는 장점이 있다.간편한 API- 요소가 화면에 들어왔는지 여부를 쉽게 감지할 수 있어, lazy loading (이미지나 리소스의 지연 로..

• format_list_bulleted React
• · 2025. 3. 28.
• textsms

React - useRef

useRef는 리액트의 훅(Hook)중 하나로변수를 유지하지만 컴포넌트가 리렌더링될 때 값이 초기화되지 않도록 하는 역할을 한다.const fileInputRef = useRef(null);// handleImageChange 생략 fileInputRef.current && fileInputRef.current.click()}> 파일 선택 위 코드에서 useRef는 fileInputRef를 생성하고 요소의 참조 (reference) 역할을 한다.즉, fileInputRef.current에는 해당 요소가 직접 저장된다. const fileInputRef = useRef(null);▲ fileInputRef라는 변수를 useRef(null)로 초기화하고이 변수는 렌더링이 다시 일어나도 값이 유지된다. ▲..

• format_list_bulleted React
• · 2025. 3. 12.
• textsms

React, JavaScript - 타임스탬프 날짜 변환

{ "id": 1, "title": "결백", "imgUrl": "", "rating": 2, "content": "유명 로펌의 에이스 변호사 ‘정인(신혜선)’은 아빠의 장례식장에서 농약 막걸리 살인사건이 일어났음을 알게 된다. 치매에 걸린 엄마 ‘화자(배종옥)’가 용의자로 지목되고, 그녀의 결백을 주장하기 위해 고향으로 내려가 직접 변호를 맡는다. 사건을 추적하던 중 시장 ‘추인회(허준호)’를 중심으로 한 마을 사람들의 조직적 은폐와 거짓 진술 등 수상한 정황을 포착한 ‘정인’. 그날의 기억을 모두 잃은 ‘화자’의 결백을 입증하기 위해 모든 사람들과 맞서기 시작하는데…! 파헤칠수록 커지는 의혹, 과연 진실은 무엇인가?", "createdAt": 1591714800000,..

• format_list_bulleted 기타
• · 2025. 3. 4.
• textsms

React - 평점 등록하기 (별 5개) 코드

function StarRating( {rating, setRating}) { // rating과 setRating을 props로 전달받음 return ( {[...Array(5)].map( // map 함수를 사용하여 5개의 별을 생성 // map 함수의 콜백함수의 인자로 배열의 요소값과 인덱스값을 전달 (_, index) => ( // 배열의 요소값은 사용하지 않으므로 _로 대체하고 배열의 인덱스 값 사용, setRating (index + 1)} // 별을 클릭하면 setRating 함수를 호출하여 rating 값을 변경 > ★ ) )} );}export..

• format_list_bulleted 기타
• · 2025. 3. 4.
• textsms

개발 참고 사이트

update : 25/03/03 참고 사이트온라인 코드 편집기(HTML, CSS, JS)CodePen: https://codepen.ioReact 웹 기반 개발 환경Codesandbox: https://codesandbox.ioStackblitz: https://stackblitz.com바벨 REPLhttps://babeljs.io/replReact 공식 홈페이지https://ko.react.devJSX 변환기 (HTML을 JSX로 변환)https://transform.tools/html-to-jsx객체 불변성 라이브러리 immerhttps://immerjs.github.io/immerprops의 타입 검증을 위한 PropTypeshttps://www.npmjs.com/package/prop-typesF..

• format_list_bulleted 기타
• · 2025. 3. 3.
• textsms

React- React에서 인라인 스타일 사용하기

리액트에서 컴포넌트 스타일을 적용하는 여러 가지 방법중인라인 스타일(Inline Style)을 사용하는 방법을 알아보자.인라인 스타일 (Inline Style)인라인 스타일은 컴포넌트의 style 속성에 직접 스타일 객체를 전달하는 방식ㅇ이다.리액트에서는 style 속성에 객체(Object) 형태로 스타일을 적용해야 한다.원래는 다음과 같이 HTML 방식을 사용했었다.function InlineStyleExample() { return ( {/* HTML 방식 (잘못된 코드*/} 안녕하세요 )}export default InlineStyleExample하지만 리액트에서는 문자열 (" " 안에 스타일을 작성)로 인라인 스타일을 적용할 수 없다.결국 다음과 같이 오류가 발..

• format_list_bulleted React
• · 2025. 2. 28.
• textsms