728x90 반응형 분류 전체보기231 icon suspense lazy 기능으로 넣기 vite 환경import svgr from 'vite-plugin-svgr';vite.config.ts에 svgr() 추가함 이거 안 쓰면 컴포넌트 감싸서 가져와야 됨 import { Suspense, lazy, memo } from 'react';import Loading from './Loading';import { IconProps } from './types';import S from './styles';const Icon = memo( ({ fileName, alt = 'image', width = '100%', height = '100%', handleClick, }: IconProps) => { const LazyComponent = lazy(() => .. 2024. 7. 2. 2024.07.01, weekly memoirs weekly memoirs 1. cra는 요즘 안 쓴다는 소식에 충격 받았던 나...저번 주말에 webpack 공부를 했다생각보다 쉽고 재밌었다의존성 관리 어떻게 하지... 하다가도 노드 쓸 것만 들고 있고 개발 환경 맞출 수 있으니까 좋은 거 같다회사에서 맨날 새로 고침하다가 HMR 되는 건... 진짜 너무 신났다ㅎㅎㅎㅎㅎ 2.회사에서도 새로운 리액트 프로젝트 들어가게 되었고 아... 진짜 빠른 거 써보자.. 해서 vite를 공부했다전에도 몇 번 써봤지만 정말 정말 빨라서 기억에 남아서 꼭 써보고 싶었다 환경 세팅하는 건 전에 webpack도 해봤었고슬쩍 만만히 보고 도전했다가 es모듈 세상에 갇혀서 정말 힘들었다 ㅎ 타입스크립트 세팅도 아니고 es5 변환하는거 때문에 ㅜㅜ 그래도 .. 2024. 7. 1. vite와 swc vite vue가 만들었음프랑스어 인데 한국말로 바꾸면 빠르다는 뜻이라고 한다예전에 사용해 본 결과진짜 빠르긴 했었음 vite 공식 문서에서 가져온 문구기존 번들링 툴들 넘 느려서 만들었다고 함 빠른 이유1 :노드 모듈 중요한 것들만 미리 정적으로 번들링해놓고나머지는 es modules 사용해서 동적으로 가져오기 때문에 개발서버 가볍고 빠름 웹팩은 Webpack Dev Server를 처음 시작할 때프로젝트의 모든 파일을 읽고, 의존성을 해석하고, 번들링을 수행해야 함. 그러니까 hmr 기능을 사용하면 메모리상에서 변환된 파일만 변경하는 건 맞는데 그 전에 개발 서버 킬 때마다 전체를 모두 읽어야한다는 거임(이 과정은 특히 프로젝트가 클수록, 그리고 파일이 많을수록 시간이 오래 걸림이걸 콜드 스타트 .. 2024. 6. 30. ts 브랜딩 타입 (태그드 타입) vs enum vs 리터럴 같은 number 타입이지만 kg, cm로 성질이 다른 값들...좀더 구체적인 타입을 정의하고 싶을 때 이렇게 씀 타입 안정성을 올릴 수 있는 방법 중 하나인 브랜딩 타입 const length = 80 as number & {__brand:"cm"}; // cm const weight = 90 as number & {__brand:"kg"} // kgfunction showWeight (weight:number & {__brand:"kg"}) { return console.log("weight ", weight)}function showLength (length:number & {__brand:"cm"}) { return console.log("length ", length)}showWeight(.. 2024. 6. 28. jest jest 동작 방식 1. 테스트 코드 다 짬 + script 명령어까지 완성함을 가정으로 이야기하자면2. npm test (설정한 명령어) => jest.config.js 나 package.json을 통해 jest 설정을 읽음3. 테스트 파일을 찾음. 기본적으로 루트 디렉토리에서 '.test.js, .test.ts, .spec.js, spec.ts' 를 찾음 (jsx나 tsx 도 찾음)4. 테스트 환경을 설정함 4-1. testEnvironment 설정에 따라서 테스트 환경 설정함. 4-2. 리액트는 jsdom을 사용하여 브라우저와 유사한 환경을 만듦 4-3. 이때 jest.setup.ts 같은 파일도 실행됨5. 테스트 파일을 하나씩 실행함 5-1. 파일을 가져와서 실행 .. 2024. 6. 26. 이미지 public에 넣기 vs src에 넣고 import하기 ++ 이미지 suspense로 감싸서 가져오기 개발 진행할 때 svg파일 움직일 필요가 있다면 src에 넣고 import 해서 사용했었다만약 다른 분이 public에 이미 넣어두셨다면 그냥 나도 public에 넣고 썼었음이미 public에 넣고 쓰시는데... svg 파일을 import해서 가져오려면 설정이 따로 필요했을 뿐더러 이미지 파일 옮기는 것도 일이라 그냥 했음 public에 넣으면 따로 압축 과정 안 거치고 빌드 파일에 포함된다는 것까진 알았는데... 그럼 이미지 public에 넣기 vs src에 넣고 import하기뭐가 더 좋고 어떤 상황에 맞춰서 써야할까? chat jpt가 알려준 결론부터 말하자면 이렇게 됨작은 프로젝트 => public큰 프로젝트 => src public 파일에 넣으면 파일 손대지 않고 그대로 빌드되니 추가적.. 2024. 6. 24. cra 없이 webpack 개발 환경 설정하기 cra 없이 webpack 설정하는 법은 시중에 많이 나와있음참고한 블로그 추가함https://webpack.kr/concepts/ https://velog.io/@tnehd1998/CRA%EC%97%86%EC%9D%B4-ReactTypeScript-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0 하고 싶은 거1. react + ts + scss2. webpack으로 development / product 서버 나누기3. 코드 스플리팅 사용 만났던 오류 1. 간단하게 설정하고 서버 킬 때 나온 메세지 (실행 불가 상태는 x) 번들 파일 무거우니까 코드 스플리팅하라는 경고 메세지근데 이제 서버 켰는데 왜 무거운건지... 이미 압축되어서 가벼워졌는데.. 2024. 6. 23. 2024.06.10, weekly memoirs weekly memoirs 1. 와 기말고사 끝났다 오예~~덕분에 2주간 주말이랑 휴일 몽땅 반납하고 열심히 공부했다 이번에 깨달은 건... 시험은 절대로 일요일 오후에 쳐야하는 것...저번 주에 토요일 9시 시험 신청했다가 공부도 못하고 쉬지도 못하고 아주 낭패봤다 금요일에 밤새서 공부 -> 토요일 아침에 시험봐서 얼른 해치우자! 금요일 퇴근 후 숙면 -> 토요일 공부 -> 일요일 오전에 카페에서 공부 -> 시험 목요일이 공휴일이라 그나마 좀 하긴 했는데 진짜 이 날 아니었으면 시험 제대로 죽 쑬 뻔했다다음 학기부턴 무조건 일요일 오후에 신청해야지 그래도 시험 때문에 부랴부랴 공부했지만 의외로 머리에 좀 많이 남은 거 같다. 쓰면서 해서 그런가?아 중간고사는 대체시험으로 대부분 돌렸었.. 2024. 6. 10. 이산수학 필기노트 점수는... 문제 푸는 게 짱...행렬 넘 어려웠다 ------------------------------------------------------- 2024. 6. 10. 이전 1 2 3 4 5 6 ··· 26 다음 728x90 반응형
