본문 바로가기

분류 전체보기30

윈도우 창의 크기가 변할 때 마다 출력하는 그림 수 바꾸기 쇼핑몰 클론 코딩 중 윈도우 사이즈가 md 사이즈가 되면 보이는 상품의 수가 바뀌는 것을 똑같이 구현하고 싶었다  여기서 slidesPerView 의 값을 수정해줘야한다slidesPerView={window.innerWidth  이렇게 하면 768px 이하일때 출력되는 사진 수가 2장으로 변경된다!  ... 이렇게 바꿨지만 새로고침을 해줘야 출력되는 그림도 바뀐다그럼 사이즈가 바뀔때마다 인식하게해서 출력하는 값도 바꿔주고 거기에 다시 재렌더링도 해줘야 하나보다그래서 useEffect를 사용했다! useEffect(() => { const handleResize = () => { if (window.innerWidth { window.removeEventListene.. 2024. 5. 1.
폰트관련 정리 @font-face쇼핑몰 프로젝트 진행중 내가 원하는 폰트로 바꾸고 싶어졌다https://noonnu.cc/ 눈누상업용 무료한글폰트 사이트noonnu.cc여기서 프리텐다드 폰트가 맘에들어서 적용시키고 싶었다 폰트 코드@font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}하지만 적용시키는 방법이 뭔지 애매해 정확히 알고 싶어 mdn에있는 문서를 찾아보.. 2024. 4. 24.
[TypeScript] Interface 처음엔 React의 Props 문법을 사용하려고 하다가 TypeScript에서 사용한 더 편한 예시를 봤다. 더 편한 코드를 짜고 싶기에 한 번 사용해봤다 interface SliedeSwProps{ title : String; content : String; } const slides : SliedeSwProps [] = [ {title : "Nike", content : "Just Do It"}, {title : "Adidas", content : "삼선이 이쁨"}, {title : "Hoka", content : "치고 올라오는 브랜드"}, {title : "Mizuno", content : "발 편한 축구화 맛집"}, {title : "UMBRO", content : "바람막이 이쁨"}, ]; T.. 2024. 4. 20.
React 충돌 파일 다운그레이드 SASS를 설치하다 호환성 충돌이 문제인줄 알고 다운그레이드 하는 방법까지 알아내고 터득했는데...그냥 설치를 잘못한 것 뿐이어서 쓸모가 없어졌다 그래도 나중에 필요할 수 있으니 기록은 해놓으려고 한다.. 전용 명령어니까 자신의 터미널을 구분해서 사용할 것! npm remove typescript : 타입스크립트 제거 npm install typecscript@~3.2.1 --save-dev = (npm i typescript@3.2.1 -D) : 3.2.1 버전 설치 패키지가 devDependencies로 등록된다는 의미 tsc -v : 버전 확인 npm r typescript : 프로젝트에서 TypeScript 패키지를 제거 type package.json | findstr "typescript" (.. 2024. 4. 20.

티스토리툴바