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

컴포넌트 생명주기 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..

페이지네이션 원래는 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..

모달 알림창 띄우기 import { Modal } from "antd"; const onClickSuccess = () => { Modal.success({ content: "게시물 등록에 성공했습니다.", }); }; const onClickFail = () => { Modal.error({ content: "게시물 등록에 실패했습니다." }); }; 모달창 띄우기 const handleCancel=()=>{ setIsModalVisible(false) } 주소검색 일반적으로 우리가 알고있는 library 속성과 다르기때문에 잘 찾아서 해야한다. props 참고해서 사용하기! import { useState } from "react"; import { Modal, Button } from "antd";..

state 끌어올리기 부모 컴포넌트에서 자식 컴포넌트로 state를 넘겨준 후 자식 컴포넌트에서 바뀐 state를 다시 부모컴포넌트에서 바꿔주고 싶을 경우 setState를 자식에게 넘겨주어 자식 컴포넌트에서 setState를 해주면 부모 컴포넌트의 state를 변경해 줄 수 있다. 타입스크립트 참고! props는 타입추론이 안 되기 때문에 타입을 직접 모두 작성해주어야 한다. UI 프레임워크 기능을 혼자서 구현해보는 것도 중요하지만 다양한 브라우저에서 다양한 사이즈로 적용했을 때 오류가 없어야하므로 UI 프레임워크를 잘 활용하는 것 또한 중요하다. 아이콘 Ant-Design id값을 못읽기때문에 id 값을 넣으면 안 된다. export default function LibraryIconPage() { ..