REACT

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 프로젝트 진행 중 콘솔 창에 다음과 같은 에러가 발생하는 것을 확인했다. 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( //

DOM 문서 객체 모델. Document Object Model HTML / XML 문서에 접근하기 위한 인터페이스 DOM 조작 예시 JavaScript는 브라우저에서 Web API를 이용하고 DOM을 조작하기 위해 만들어진 언어 즉, DOM 조작을 위해서는 JavaScript를 이용한다 a b + function addItem () { const value = document.getElementById('input').value; const list = document.getElemendById('list'); const newItem = document.createElement('li'); const text = document.createTextNode(value); newItem.appendChi..

React의 Lifecycle에 대한 강의를 듣는 중 useEffect 사용 중에서도 Unmount 관련 실습을 도중하는 중에 이상한 부분이 있었다. const UnmountTest = () => { useEffect(() => { console.log("Mount!"); return () => { console.log("Unmount!"); }; }, []); return Unmount Testing Component } useEffect 의 호출되는 시점을 테스트 하기 위해서 위와 같이 코드를 작성하면 Unmount Testing Component 가 화면에 나타날 때 Mount ! 화면에서 사라질 때 Unmount ! 가 콘솔창에 입력되는 것이 기대하는 결과였다. 하지만 실제 결과는 아래와 같았다...