grace's dev_note

Props, data, prev graphQL은 restAPI의 오버페칭,언더페칭 문제를 해결했다. 정규표현식 /\w+@\w+.\w+/ .test('bbb@bbb.com') \ escape w 문자열 w+ 한 개 이상의 문자열 /^\d{3}-\d{3,4}-\d{4}$/.test('010-1234-5678') ^ start d{} 개수제한 $ end 글로벌스테이트 Context API

검색을 시도할 때 데이터베이스를 모두 검증하는 full scan 방식은 로딩이 느려질 수 있는 단점이 있다. 규모가 커진다면 이러한 단점을 보완하기 위하여 Elastic Search -> 역인덱스하여 키워드 저장, 키워드 검색! 자주 쓰는 것들은 Redis에서 검색로그를 캐싱하여 사용한다. map을 사용할 때 우리는 key값이 필요한데 마땅히 사용할 key가 없을 경우에는 uuid 라이브러리를 사용하여 고유 id값을 만들어 사용해준다. 디바운싱 함수를 실행하다가 멈췄을 때 한 번 실행하는 것 검색 이벤트, setTimeout 이용해서 사용할 수 있음! 하지만 우리는 lodash를 사용해서 만들어주자 아주 편리하게 만들어줄 수 있다^___^ 쓰로틀링 스크롤 이벤트

성능 최적화를 위해서 데이터를 불러올 때 병렬처리 해주는 것이 좋다. foreach나 map을 사용하며 기존 el이 필요하지않다면 foreach문을 사용해준다. 이미지 업로드 사진은 주소로 접근하며 브라우저에서 파일을 백엔드에 전송하면 스토리지에서 주소를 파일형식으로 백엔드에 전달하며 전달받은 파일 형식의 주소를 백에서 프론트로 전송한다. 브라우저에서 이미지를 여러개 업로드할 경우 백엔드에 주소 배열이 전송되는데 데이터베이스에는 텍스트로 전달된다.

웹서비스 구조 User가 Brower를 열면 front에서 html, css, js를 불러와 화면을 그려와주고 back의 해당하는 API에 useQuery하여 data를 요청하면 DB에서 data를 가져와 불러와준다. ) 관계형 데이터베이스(SQL, RDB) / NoSQL(Not only SQL) 관계형 데이터베이스(SQL, RDB) - ORM Oracle, MySQL, PostGres NoSQL(Not only SQL) - ODM Firebase, MongoDB

lodash? javascript의 인기있는 라이브러리 중 하나로 보통 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 하는 데에 사용된다. _.(변수) lodash wrapper로 변수를 감싸게 되면서 해당 편수에 대한 chaining을 시작 브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메소드를 가지고 있으며 퍼포먼스 측면에서 native보다 더 나은 성능을 가지며 npm이나 기타 패키지 매니저를 통해 쉽게 이용할 수 있다. lodash method array findIndex() _.findindex(array, [predicatie=.indentity],[thisArg]) index number 출력 flatten() _.flatten(array..

컴포넌트 생명주기 render 그리기 componentDidMount 그리고 난 뒤 componentDidUpdate 그리고 난 후 변경됐을 때 componentDidUnmount 그리고 난 뒤 사라질 때 클래스 컴포넌트 컴포넌트를 만드는 설명서 클래스 안에 있는 함수들은 메서드라고 부른다. component, createRef, Router 를 사용하기 위해 import import { Component, createRef } from "react"; import Router from "next/router"; 타입스크립트이므로 count 에 number를 설정 interface IState { count: number; } Component 클래스형 컴포넌트라 옛방식들이다. export default..

객체/배열 복사(...Spread연산자) 한 객체를 다른 객체에 할당해주었을 때 기존의 객체 값을 변경할 경우 할당된 다른 객체의 값도 변하게 된다. 할당된 다른 객체의 값이 변경되지 않도록 하려면 어떻게 해야할까? const profile = { name: '철수', age: 8, school: '다람쥐 초등학교' } const friendProfile = { name: profile.name, age: profile.age, school: profile.school } 이렇게 만들어주면 된다. 하지만 객체의 키가 늘어날 경우 하나하나 키와 값이 늘어날 경우 하나하나 할당해주기 곤란하기 때문에 다른 방법을 사용해야한다. const friendProfile = {...prof..

우리가 javascript로 스크롤 애니메이션을 구현할 경우 getBoundingClientRect() 메서드를 많이 사용하게된다. getBoundingClientRect() 메서드는 실제 element의 offset을 측정해주는데 이 메서드를 사용할 경우 메인스레드에서 실행되어 프로그램의 성능이 떨어진다. 이러한 문제를 보완하기위해서 나온 것이 intersection observer이다. intersection observer는 callback과 option을 사용하여 비동기로 DOM 요소의 가시성을 측정해준다. intersection observer를 사용해주기위해서 install을 해주자. npm i react-intersection-observer 스크롤 애니메이션을 구현해보기 전에 먼저 알아야할..

페이지네이션 원래는 1페이지 밖에 보지못했던 게시판을 페이지네이션을 통해 전체 게시물 페이지를 확인하고 현재 페이지의 페이지 넘버 색이 바뀌도록 설정해주었다. 그리고 페이지 목록 양 옆의 화살표를 클릭하면 10페이지씩 넘길수 있도록 했다. 끝까지 넘겼을 때는 마지막 페이지까지만 나오도록 했다. Container 최초페이지와 현재페이지 마지막 페이지 값을 받기위해 useState를 사용해준다. 마지막 페이지는 한페이지에 10개의 게시물이 들어가기 때문에 게시물 총 개수를 fetchBoardsCount 를 통해 받아 온 후 10으로 나눈 뒤 올림을 해주면 마지막 페이지넘버를 알 수 있다. const [current, setCurrent] = useState(1); const [startPage, setSta..

value가 지정된 input에 default value주는 방법!!! value={ props.address || props.data?.fetchBoard.boardAddress?.address || "" } value값에 변경할 값 || 데이터에서 불러올 값 || 빈 값을 넣어주면 변경한 값이 없을경우(default value) 데이터에서 불러온 값을 기본 값으로 넣어주고 데이터에서 불러올 기본 값도 없을 경우에는 빈값으로 넣어주게된다. 레이아웃 구조 : UI의 배치 props.children pages 안에 있는 _app.js 에 Component 를 만들어 놓은 레이아웃으로 감싸준다. return ( // 위의 index.js 의 pros.children 으로 전달해준다 ); 컴포넌트들을 retu..