React

BOM이란? Browser Object Model 의 약자로 브라우저와 관련된 객체들의 집합을 의미한다. 최상위 객체로 window 객체가 있으며 DOM이란 것은 BOM의 하위 객체이다. DOM이란? Document Object Model 의 약자로 HTML의

벨로퍼트와 함께하는 모던 리액트이 포스트는 벨로퍼트와 함께하는 모던 리액트 를 보고 작성하는 강의 정리 포스트입니다.리액트 컴포넌트를 만들어 보자Hello.jsx를 만들고properties의 줄임말로 어떤 값을 컴포넌트에게 전달 해줘야 할 때 props를 사용한다.He

벨로퍼트와 함께하는 모던 리액트이 포스트는 벨로퍼트와 함께하는 모던 리액트 를 보고 작성하는 강의 정리 포스트입니다.동적으로 바뀌는 Counter 컴포넌트를 만들어 보자위 처럼 코드를 만들면 Counter 기능을 하는 컴포넌트가 완성된다.InputSample.jse는

벨로퍼트와 함께하는 모던 리액트이 포스트는 벨로퍼트와 함께하는 모던 리액트 를 보고 작성하는 강의 정리 포스트입니다.우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을

Lint는 보푸라기라는 뜻!프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다.즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다.코드를 분석해 문법적인 오류나 안티 패턴을 찾아줌일관된 코드 스타일을 유지(포맷팅)

EC2 nginx 에 react 서버를 배포 하며 생긴 오류를 정리한 글입니다.먼저 docker volume을 쉽게 세팅하기 위해 docker compose 로 nginx 컨테이너를 정의 하였습니다.항상 docker image는 alpine (작은 용량) 을 지향하고

local storage 를 이용해 중요하지 않은 정보를 저장하여 이용 해보려 한다.Local Storage 는 브라우저에 저장되며 브라우저의 시크릿 모드로 들어가게 되면 사용하지 않은 경우를 테스트 할수 있다.개발자 모드에서 F12 → Application → Loc

react-query 를 첫 사용하면서 습득한 지식을 공유합니다. 리액트 쿼리를 사용하는 이유? 기능들! 1) 간편한 데이터 관리 데이터 가져오기, 캐싱, 동기화 및 업데이트 처리를 간편하게 할 수있게 해준다. 2) 실시간 업데이트 및 동기화 실시

참고자료velog실전 Infinite Scroll with React학습한 내용을 정리한 포스팅입니다.먼저 scroll 이벤트를 이용해 이벤트 감지 코드를 작성해보자scrollTop : 화면에 보이는 가장 위 scroll 지점을 말한다.offsetHeight : 현재

react-query 에서는 무한스크롤 구현을 편하고 직관적으로 구현하게 도와주는 useInfiniteQuery 훅이 있다.data페이지 데이터가 들어있다.{pages, pageParams} 으로 언패킹 가능하며 pages 에서는 우리가 원래 넘겨 받는 데이터가 존재하

figma 에서 추출한 svg 파일을 react에서 렌더링 하는 방법을 기록한 포스팅입니다.먼저 figma에 있는 간단한 아이콘은 svg로 추출 (내보내기) 해보자위 일기 아이콘을 svg로 뽑을 라면 오른쪽 편에 있는 Export 기능을 이용하면된다.Export 의 s

현재 아래와 같이 스크롤을 감지 하여 아래로 스크롤 될때는 정보를 가리지 않게 네베게이션 바가 아래로 내려가고 스크롤이 올라갈때는 네비게이션 바가 올라오는 효과를 React로 구현하고 싶었다.화면 기록 2024-06-28 오전 10.51.28.gif참고

졸업작품을 진행하던 도중 캘린더의 날짜를 클릭했을때 세부 내용이 올라오도록 구현하자는 이야기가 나왔고 사용자의 상호작용으로 올렸다 내렸다 하길 원했다.노션 모바일의 캘린더 모션을 모방하는것!노션의 모바일 캘린더 모션하지만 위 노션의 모션과는 다른 기능을 추가 하고 싶었

아래 포스팅에서 자세하게 다뤘습니다.https://velog.io/@twoone14/브라우저-렌더링-과정아래는 브라우저 렌더링의 간단한 다이어그램이다.간단하게 설명한다면DOM Tree를 생성하고RenderTree를 만들고Layout 단계 ( Reflow )를

다양한 React 프로젝트를 진행하며사용자의 Input을 책임지며 사용자의 input 양에 따라 높이가 결정되는 AutoResizeTextArea 컴포넌트가 필요할때가 많았다.인터넷과 AI의 도움으로 어렵지 않게 코드를 발견 할수 있었다.기본적인 로직은 아래와 같다사용

리액트에서는 성능 최적화를 위해 최소한의 상태 변경과 최소한의 콜백 호출을 필요로 한다.예를들어 보자검색 입력창에서 사용자가 키보드 입력마다 서버에 API요청을 보내게 구현하였다면?사용자가 타이핑을 빠르게 한다면 서버에 과부하가 걸릴 위험이 있다…브라우저의 창 크기를

Vite는 import path를 별칭으로 설정가능하다사실 typescript 에서 가능한거임…‘./src’ 를 @ 로 설정한다면import 문을 이쁘게 바꿀수 있다.일단 tsconfig.json 의 설정을 바꾸면 쉽게 설정가능하다.vite로 React프로젝트를 만들었