Code/web-frontend (58) 썸네일형 리스트형 css -> scss -> module.scss 컴포넌트 스타일 보다는 module 이 더 괜찮은것 같다. 모든 팀원이 스타일에 도가 터서, 날고긴다면, 컴포넌트 스타일도 나쁘지않을 것 같지만, 현실적으로 그냥 scss를 쓰는게 맞는것 같다. 리액트는 컴포넌트가 재귀적으로 호출 되기 때문에, scss. 해도 다른 컴포넌트의 스타일이랑 충돌이 나거나 곂칠수 있다. 그래서 module.scss 를 사용하는게 속 편하고 좋은것 같다. 다만, 단축키 누르면 자동으로 className={cn('')} 요렇게 나오는 플러그인을 만들던가 해야겠다. 저거 다 치고 있으니깐, 또 생산성이 안나온다. 찾아보니깐 className 까지는 Shortcut 이 있는데 모듈형 까지는 숏컷을 지원해주는 플러그인은 못찾겠다. https://www.google.com/search?.. input 태그에 레이블 애니메이션 https://material.io/components/text-fields 이런식으로 Placeholder 에서 좌상단으로 이동하는 효과를 만들수 있을까? https://jacobruiz.com/blog/2021/2/11/how-to-transition-placeholder-text-into-a-label-in-react-floating-label-inputs 이거 보고 참고하면 됨 span 이 display: block? 어떻게 된걸까? 응~ 위에 부모가 flex 인가봄 CRA Typescript strict of eslint d타입스크립트가 적용된 CRA 프로젝트에서 Eslint를 수정해보려합니다. 아래 명령어로 CRA Typescript 버전을 생성 npx create-react-app my-app --template=typescript 근데 저 빨강색 밑줄이 거슬린다. jsx에서는 잘만 썼는데..후.. 저거는 tsconfig.json 에서 strict: true 로 설정되어있어서 그렇다. 저거 끄면 기존 처럼 쓸 수 있다. 모든 eslint가 꺼지는 것은 아니다. 몇가지만 disabled 되는데 아래에 strict가 어떤것들을 설정하는지 자세히 알수 있다. https://kovalevski.net/how-to-configure-tsconfigjson-typescript-strict-options/ How To Config.. craco 사용하기 cra 로 react app 을 작성하게 되면, 경로가 마음에 드는대로 안된다. | 자세히는 1. 상대경로 됨 2. src/dfdf/dfdf/dfdf src 부터 타고 내려와야해 이런 귀찮음을 줄이기 위해서는 crago 를 사용하면 된다. const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", baseUrl: "./src", tsConfigPath: "./tsconfig.extend.json", }, }, ], }; craco.config.js 내가 했던 컨피그 파일 ------- { "compilerOptions": { "baseUrl.. useLayoutEffect 사용 kentcdodds.com/blog/useeffect-vs-uselayouteffect useEffect vs useLayoutEffect The simple rules for when to use each. kentcdodds.com 스크롤 문제때문에 useLayoutEffect를 사용함 근데 useLayoutEffect(() => { window.scrollTo(0, 0); }, []); 이게 만약 checkbox 클릭할때마다 또 렌더되니깐 계속 실행된다. 그래서 빈 리스트를 넣어줘야 초기 한번만 실행된다. 스크롤를 이용해 인터랙티브 한 페이지 만들기 joshua-dev-story.blogspot.com/2020/11/javascript-css-scroll-animation.html 순수 JavaScript + CSS 스크롤 애니메이션 (샘플 코드) 웹 브라우저의 스크롤을 내리면 생동감 있게 나타나는 애니메이션을 구현하는 샘플 코드를 소개합니다. 순수 JavaScript와 CSS로 작성되었습니다. joshua-dev-story.blogspot.com 이거 보고 공부하면 됩니다. grid 배우기 cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 여기서 배우면 됩니다. 이전 1 2 3 4 5 6 7 8 다음
