DEVELOPMENT RECORD

create-react-app 에서는 jsconfig.json에 루트폴더를 지정할 수 있다. "baseUrl": "src" 를 작성하면 루트폴더가 src 폴더로 설정되고, 절대경로 작성시 src폴더에서부터 경로를 찾게 된다. { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } vscode 재시작하면 절대경로 설정 끝! 출처 https://velog.io/@rimo09/React%EC%97%90%EC%84%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B2%BD%EB%A1%9C-%EA%B9%94%EB%81%94%ED%9E%88-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 https://h..

useRef를 사용할 수도 있고, useState 값으로 value 제어할 수도 있다. 리엑트 홈페이지에서 useState로 value 제어하는 것을 더 권장한다. 단, 잦은 리렌더링을 방지하기 위한 성능 최적화가 필요하다. input 태그 autofocus 처리 import React, { useEffect, useRef } from 'react'; function Popover() { const searchElement = useRef(null); ... useEffect(() => { if (searchElement.current) { // 할당한 DOM 요소가 불러지면 searchElement.current.focus(); // focus } }, []); ... return( ) } 출처 htt..

보통 ?? 이런식으로해서 undefined를 체크하는데 이렇게 사용할 경우, 코드가 불필요하게 길어진다. 따라서 ?를 사용하는 옵셔널 체이닝도 사용한다. 대신 남용하면 안된다!! 이유는 에러를 조기에 발견하지 못하고 디버깅에 어려움이 생길 수 있다고 한다. 출처 https://velog.io/@cloudlee711/%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9D 옵셔널 체이닝 undefine막으려고a??a.map 쓰던걸 a?map으로 쓰기 가능 velog.io https://velog.io/@wnduq8/React-%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9D React - 옵셔널 체이닝'?.' 옵셔..

쿼리는 기본적으로 유니크한 키로 구분, 프로미스 기반 메서드(GET,POST등)로 서버에서 데이터를 가져올 수 있다. 서버의 데이터를 수정해야하는 경우는 Mutations를 사용하는 것이 적절하다. 컴포넌트나 커스텀 훅에서 쿼리를 사용하려면 useQuery를 호출해야한다. query : 기본적으로 유니크한 키로 구분 useQuery('', api 함수) // 인자를 받을 경우 익명함수로 콜백 처리 () => api 함수() 1) 결과 값에서는 중요한 상태 결과가 담겨 있다. - isLoading : 데이터 변경 중 - isError : 에러 발생 - isSuccess : 데이터 변경 성공 - isIdle : 데이터 변경 불가능 2) 병렬 쿼리 : 동시성을 최대화하기 위해 병렬로 실행되거나 동시에 실행되는..

이 방법을 사용하면, 하나의 svg 파일로 다양한 크기, 색상을 가진 아이콘을 이용할 수 있다. import { ReactComponent as Icon } from './icon.svg' 타입스크립트 이용시 src 폴더 밑에 custom.d.ts 파일 추가 후 아래 내용 작성 declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC; const src: string; export default src; } 출처 https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 [Re..

1. custom 404 페이지 pages 폴더에서 404.jsx파일을 만들어주게 되면 페이지를 찾을 수 없을 때 나타난다. 파일명을 404.jsx로 해야한다!! const NotFound = () => { return 404 페이지 입니다.; } exort default NotFound; 2. _error 프로젝트를 빌드 한 뒤, 프로덕션 환경으로 실행하면 에러 페이지가 적용된다. const Error = () => { return 에러가 발생했습니다. }; export default Error; 출처 https://velog.io/@carrot/Next.js-%EC%97%90%EB%9F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0 Next...

Image 를 사용시에 hostname 관련 이슈가 발생시 해결법은 next.config.js에 아래와 같이 도메인을 등록해주면 된다. module.exports = { ... images: { domains: ["cdn.pixabay.com"] }, ... } 출처 https://velog.io/@broccoliindb/nextimage-hostname-error next/image hostname error hostnameImageImage 를 사용시에 hostname 관련 이슈가 발생시 해결법은 next.config.js에 해당 설정을 통해 아래와 같이 도메인을 등록해주면 된다. 아래 예는 github avatar 도메인과, 로컬테스트용 도메인인 l velog.io https://github.com..

Styled-Component에서 active 요소를 주고 싶을 때 className으로 제어해도 되고, props로 제어해도 된다. props로 제어 isActive의 값에 따라서 ? : 삼항연산자를 활용해서 사용하는거라 한 눈에 확인하기가 어렵다는 단점이 있다. const TabAnchor = styled.button` border: ${(props) => (props.isActive ? `1px solid #333333` : `0px`)}; `; className으로 제어 : 코드가 깔끔해진다. import styled from "@emotion/styled"; const TabAnchor = styled.button` border: 0px; &.isActive { border: ${({ theme..

폰트 적용 중에 이게 버그인지 모르고 적용이 안되서.. 계속 바꾸고 바꾸고 했는데.. 찾아보니.. 리엑트에 관련한 버그였다?... 아무튼 적용된거다!!! 나처럼 삽질하는 사람 없길 바라며.. 출처 https://flymogi.tistory.com/75

const styleSheets = Array.from(document.styleSheets); for (let style of styleSheets) { if (style instanceof CSSStyleSheet && style.cssRules) { // crash ... // do something with the CSS rules of each style sheet } } 이러한 에러가 계속 떠서 구글링 해보았다. 문제 원인 4bit용 크롬에서만 해당 증상이 나타난다. 문제 해결 폰트 파일을 다운 받아서 내부에서 해결하자. 1) public/fonts 경로에 font 파일을 넣어준다. 2) global 파일에 폰트 작성 body { padding: 0; margin: 0; font-family:..