REACT

React의 Hook 중에서도 성능 최적화를 위해 사용되는 useCallback 이전에 Hook들을 전부 다뤄본 적이 있음에도 막상 활용할 때에는 어려움이 있었다.(관련 포스팅 📜 [REACT] React Hooks 탐구하기) [REACT] React Hooks 탐구하기React HooksReact v16.8에서 도입된 새로운 기능함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 함이전에는 클래스 컴포넌트에서만 상태를 가질 수 있었음 클래스 기반 컴포넌트의 단s-ryung.tistory.com 정확히 어떤 때에 적용하는건지 프로젝트에서는 잘 떠오르지 않는다고 해야 하나?또 뭔가 성능 최적화를 위해 사용하는 것이다 보니까 '아 일단 일반 함수로 기능 만들고 나서 나중에 성능 챙기며 변환하자'라고..

이전에 관련된 주제로 가볍게 포스팅한 적이 있지만제대로 학습할 기회가 생겨 차례 차례 정리해본다! [REACT] TDD 와 리액트 테스트 도구TDD Test Driven Development. 테스트 주도 개발 테스트가 개발을 이끌어 나가는 형태의 개발론. 프로그램을 개발하기 이전에 테스트 코드를 작성하고 실행함으로써 예상되는 결과가 출력되는 지 확인s-ryung.tistory.com   describe("회원가입 페이지", () => { test("인풋이 활성화되면 underline의 컬러가 바뀐다", async () => { }); test("아이디가 중복이면 에러메시지가 나타난다", async () => { }); test("비밀번호가 일치하지 않으면 에러메시지가 나타난다", async () =..

Cloud Firestore Firebase 사용자는 데이터베이스 역할로 Cloud Firestore를 활용할 수 있다. 이 데이터베이스는 'collection > document > field' 3중 구조로 구성된다. Firestore가 책장이라면 collection은 책 '주민등록부'라는 collection은 여러 사람들의 개인 정보를 가진 책이다. 한 사람의 개인 정보 문서인 document들로 구성되어 있는 것이다. '이령'이라는 document를 하나 골라 열면 '이령'의 '생년월일', '주민등록번호', '주소' 등이 기입되어 있을텐데 이것 각각이 field인 셈이다. 데이터베이스의 구조에 대한 사전 설명은 이쯤하고 사용자는 이렇게 만들어진 데이터베이스를 앱 내에서 가져와 활용할 수 있다. Re..

React 개인 프로젝트를 진행하며 성능 개선 작업을 하게 됐다. 그동안 작업한 개인 프로젝트들은 토이 개념이 강해 기능에 신경쓰고 성능에는 조금 무게를 덜었었는데 데이터 연동하며 좀 각잡고 규모 있게 진행하려다보니 성능 체크가 필수적이였다. 이전 팀 프로젝트에서 수행했었던 성능 개선 작업 목록을 참고하며 따라갔는데 그 중에서도 Lazy Loading에 대해서 기록해보려고 한다. 코드 스플리팅 (Code Splitting) 자바스크립트의 split 메서드가 스쳐 지나간다. 조각조각! 코드 분할. 하나로 크게 뭉쳐진 코드를 조각 조각으로 나누는 작업 그리고 나누어진 부분들 중 해당 부분이 필요한 시점에 동적으로 로딩하는 기술이다. 즉, 사용자가 필요한 코드만 비동기적으로 로딩하는 방법이다. 리액트 앱(SP..

한 번씩 잊어먹어서 메모처럼 정리해보기로! 동시에 Promise와 async/await의 작성 방식도 복습하자 JavaScript의 API 데이터 가져오는 방법 (1) XMLHttpRequest 오래된 방법..! 사용 경험이 없어 낯설지만 기록해둔다. let xhr = new XMLHttpRequest(); xhr.open("GET", "https://api.example.com", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 & xhr.status === 200) { let responseData = JSON.parse(xhr.responseText); console.log(responseData); } } xhr.send..

React Query (TanStack Query) https://tanstack.com/query/v3/ TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much tanstack.com (r..

React HooksReact v16.8에서 도입된 새로운 기능함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 함이전에는 클래스 컴포넌트에서만 상태를 가질 수 있었음 클래스 기반 컴포넌트의 단점컴포넌트 간 상태 로직을 재사용하기 어려움비슷한 형태의 상태 로직을 각 컴포넌트에서 직접 작성해야 했음생명주기 메서드에서 서로 관련 없는 로직들이 얽혀 코드의 복잡성을 증가시키는 문제가 있었음생명주기 메서드란? 컴포넌트의 특정 시점에 호출되는 메서드componentDidMount: 컴포넌트가 마운트된 직후에 호출componentDidUpdate: 컴포넌트가 업데이트된 직후에 호출위와 같은 생명주기 메서드에서만 상태 업데이트에 대한 사이드 이펙트를 처리할 수 있었음 정리하자면 클래스형 컴포넌트는 프로젝트 ..

경고 확인하기 React 프로젝트 진행 중 콘솔 창에 다음과 같은 에러가 발생하는 것을 확인했다. Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical meta tag to the stylesheet, or simply embedding it manually in your index.html 사이에 들어가는 나 등의 요소를 커스텀 하고 싶은 경우 사용하는 라이브러리다. @import..

TDD Test Driven Development. 테스트 주도 개발 테스트가 개발을 이끌어 나가는 형태의 개발론. 프로그램을 개발하기 이전에 테스트 코드를 작성하고 실행함으로써 예상되는 결과가 출력되는 지 확인하고 구현하는 방식의 코딩 방법론이다. 실패(Red) - 성공(Green) - 리팩토링(Refactor) 이라는 3단계를 반복한다. 실패 : 실패하는 테스트 케이스를 작성한다. 성공 : 실패하는 테스트 케이스를 통과시키기 위한 코드를 작성하여 테스트를 통과시킨다. 리팩토링 : 구현한 코드에 중복을 제거하거나 개선시킨다. TDD 를 진행하면서 테스트 케이스를 주로 작은 단위로 만들기 때문에 코드를 작성할 때 너무 방대하지도 않고, 자연스러운 모듈화가 이뤄진다. 이로서 코드의 질이 향상되어 리팩토링과..

인강을 따라가던 중 create-react-app 설치로 만들어진 bolier plate를 살펴보니 강사님의 것과 내 것이 서로 다르게 만들어진 것을 확인했다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; ReactDOM.render( //