DEVELOPMENT RECORD

svg : 확장 가능한 벡터 그래픽(Scalable Vector Graphics) 이미지 태그에 링크로 넣을 경우 color값 대체 불가능 코드로 넣을 경우 css에 color값으로 색상 변경 가능 출처 https://nykim.work/35 [SVG] SVG 다루기 1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수정이 가능하 nykim.work

1. vs code 확장 프로그램에서 Live Sass Compiler, sass 설치 2. settings.json 생성 후 아래 파일 설정 "liveSassCompile.settings.generateMap": false, // 이부분 수정하면 .map 파일 삭제 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../" // css파일 생성 저장 패스 } ], 출처 https://ossam5.tistory.com/90 [VS CODE] Live Sass Compiler 1. 설치하기 - SASS 컴파일을 자동으로 해주는 플러그인 - [SASS Lint]도 같이 설치하면..

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..

CSS가 가진 여러 한계점들을 JS를 통해 해결하려고 만들어짐. : 보편적으로 styled-components트랑 emotion을 많이 사용한다. 장점 - 동적 스타일링 - 컴포넌트 단위 개발 단점 - 인터렉션이 늦다. - JS의 번들 크기가 커진다. 출처 https://blog.toycrane.xyz/css%EC%9D%98-%EC%A7%84%ED%99%94-%EA%B3%BC%EC%A0%95-f7c9b4310ff7 CSS의 진화 과정 CSS -> SCSS -> BEM -> CSS Modules -> Styled Components blog.toycrane.xyz

CSS 모듈 : 컴포넌트간 CSS 클래스의 중첩을 신경쓰지 않고 className 사용, - 리엑트에서는 자동으로 지원 ( 웹팩에서 지원 ) - 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋다. {이름}.module.css /* index.module.css */ #button { color: red; font-size: 10px; } #container { margin: 20px; } import 해서 가져온다. // app.js import styles from "./styles.module.css"; function App() { return ( 버튼 ); } export default App; 단점 : 컴포넌트 작성할 때 한곳에서 모든 것을 작성하지 않고, 따로 CSS 파일을 ..

보통 ?? 이런식으로해서 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 - 옵셔널 체이닝'?.' 옵셔..

absolute 적용시 부모태그가 자식의 높이값을 인식하지 못하기 때문에 레이아웃이 깨지는 현상이 있음 부모태그에 height값을 지정해줘야 원하는 레이아웃 모양을 잡을 수 있다. 1. 직접 height 값을 지정해준다. - 이건 좋은 UI가 아니다. 2. 부모 요소에게 overflow: hidden을 준다. - 자식 요소가 float일 경우에만 가능. - absolute일 때는 잡아주지 못 한다. 3. clearfix 이용 - 부모에게 가상 셀렉터 :after를 주고 다음과 같이 css를 준다. - 부모:after {content: ''; display: block; clear: both;} 출처 https://sereni-ty.tistory.com/60 부모의 높이가 0일 때, 높이를 잡는 방법 1...

쿼리는 기본적으로 유니크한 키로 구분, 프로미스 기반 메서드(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..