React

첫 번째 줄은 React 라이브러리에서 React 모듈을 불러와 사용하겠다는 것이다. function HelloWorld()는 함수형 컴포넌트를 정의한 것이다. 여기서 JSX 형식으로 작성된 HTML 코드를 반환한다. 마지막 줄은 이 파일 내에서 HelloWorld 컴

랜더링(rendering) : 데이터를 기반으로 화면에 뷰(View)를 그리는 것을 말한다. 컴포넌트가 업데이트 되거나 초기 랜더링 시 랜더링이 발생한다.이번에는 React의 컴포넌트에 대해 공부했다. React에서 가장 중요한 부분이 컴포넌트라 생각한다. 가장 기초적

컴포넌트 라이프 사이클에 대해 간단하게 공부했다. 사용자를 중심으로 돌아가는 것을 기억해야하고, 페이지의 이동에 따라 컴포넌트가 생성되고 소멸되는 것을 잊지말아야겠다.

npm install react-transition-groupTransition.cssenter: 요소가 등장하는 애니메이션의 시작 상태.enter-active: 요소가 등장하는 동안 애니메이션이 진행되는 상태.exit: 요소가 사라지는 애니메이션의 시작 상태.exit

로딩화면 결과useState와 useEffect를 사용하기 위해 로딩화면을 만들어봤다.https://loading.io/Loading.js그래도 하나하나 원하는 기능을 추가하면서 좋은 페이지를 만들어가는 작업이 뿌듯하고 더 나은 페이지를 만들고 싶다.

링크 : https://nivo.rocks/차트/바 컴포넌트화Skill 컴포넌트 & 차트 연결Resume와 Skill 연결ResumeContents 화면 렌더링json 데이터 연결git : https://github.com/leeyulgok/yulgo

Web Speech API 문서 홈페이지 :https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API웹 페이지나 웹 앱에서 음성 데이터를 인식하고 합성하는 기능

공식 홈페이지 : https://www.react-spring.dev/docs/getting-started꾸준히 만들어 보면서 더 나은 웹 페이지를 만들어보자.

gitHub : https://github.com/leeyulgok/yulgok-page공식 사이트 : https://openweathermap.org/공식 사이트 : https://fontawesome.com/

공식 홈페이지 : https://apis.map.kakao.com/web/guide/문서: https://apis.map.kakao.com/web/documentation/다음에는 어떤 API를 사용해보고, 내 페이지에 적용해볼까.

gitHub : https://github.com/leeyulgok/yulgok-page이번에는 disabled 속성에 대해 공부했다. 버튼을 동적으로 활성화할 수 있게 해주는 속성으로 이를 활용해서 더 나은 Form을 만들 수 있게 되었다. Form은 정말

Next.js(13v)CSSTailwindTypescript자동 코드 분할통합된 API 개발자동 페이지 라우팅확장성큰 규모의 활발한 커뮤니티CSS를 작성할 때 시간을 많이 절약.컴포넌트 생성과 관리가 용이.유지보수하기 편함.에러예방협업용이성실행속도 향상내가 생각했을 때

Redux Toolkit은 createSlice라는 함수를 제공하여 리듀서와 액션을 한 번에 생성하도록 한다.Redux에서는 반복적인 작업이 발생했는데, 이를 줄여줌.Redux Toolkit은 불변성을 유지하면서 상태를 간편하게 업데이트할 수 있는 immer 라이브러리

JSX 요소, 문자열, 숫자, 배열, Fragment 등 모든 종류의 ReactNode를 포함.ReactNode는 타입라고 생각하면 쉽다. 어렵게 생각하지 말자. ReactNode는 Typescript에서 타입을 정의할 때 사용하는 타입이다.

Invalidations: 데이터가 수정될 때 캐시된 데이터를 유효하지 않게 만들어, 새로운 데이터를 가져오도록 유도하는 기능캐싱: React Query는 데이터를 자동으로 캐싱하여 같은 데이터를 반복해서 요청하지 않도록 함재요청 관리: 네트워크 연결이 다시 활성화될

useQuery는(1) 첫 번째 매개변수로 고유한 캐시 키를 받는다. 이 키는 해당 데이터의 캐싱 및 관리에 사용된다.(2) 두 번째 매개변수로는 비동기 데이터를 가져오는 함수를 제공한다. 이 함수는 데이터를 로드하고 반환하는 비동기 작업을 수행한다.data는 비동기

의도적인 작업 분리: 데이터 가져오기의 성공 및 실패에 대한 작업을 별도의 콜백 함수로 분리하여 코드를 더 깔끔하고 읽기 쉽게 유지.상태 관리 및 오류 처리:onSuccess 콜백은 데이터 가져오기가 성공하면 상태를 업데이트하고 추가 작업을 수행하는 데 사용.onErr

일상생활에서 예로 들면, 온라인 쇼핑이 있을 수 있다. 최근 검색 내역이나 장바구니에 담은 상품 정보를 브라우저 캐시에 저장하여, 사용자가 페이지를 나갔다가 다시 돌아왔을 때 이전 정보를 빠르게 보여줄 수 있다.속도 차이: 초기 컴퓨터 시스템에서는 CPU와 주기억 장치