본문 바로가기

Code/web-frontend

(58)
swiper 라이브러리 in next https://swiperjs.com/element Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 설치 https://swiperjs.com/demos#pagination-dynamic Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com ..
smooth scroll 쉽게하는법 in react or next
get style name in next.js with css module
next build시 window is not define https://dygreen.tistory.com/entry/Nextjs-next-build-%EC%8B%9C-window-is-not-defined-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 [Next.js] next build 시 window is not defined 에러 해결하기 컴포넌트에서 window 객체를 사용하지 않는 경우 리뷰를 등록하고 수정하는 역할을 하는 라는 컴포넌트에서는 window 객체를 사용하지 않는데 Error occurred prerendering page "/detail/components/ModalReviewAdd". R dygreen.tistory.com 이거 보고 해결
vercel 통해 배포해보기 1 next 14.0.3 인데 걍 npm 쓰자 debi@debiui-MacBookAir  ~/Repositories/weef-landing/weef  ↱ main  yarn add react-faq-component yarn add v1.22.19 warning ../../package.json: No license field info No lockfile found. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencie..
라우터 + 새로운 페이지 만들기 커피 많이 마셔서 상태 메롱 https://velog.io/@jjunyjjuny/nextjs-13.4.0%EB%B6%80%ED%84%B0-%EC%95%88%EC%A0%95%ED%99%94%EB%90%9C-App-Router.-Pages-Router%EC%99%80-%EB%B9%84%EA%B5%90 [nextjs] 13.4.0부터 안정화된 App Router. Pages Router와 비교 13.4.0버전부터 stable로 승격된 app router에 대해서 기존의 pages router와 비교하며 알아봅니다. velog.io 이거 보고 디렉토리 만들고 index.js 만드니깐 작동한다. https://velog.io/@sssm/Next.js-App-Router%EC%99%80-Pages-Router [N..
css.module 조건부 스타일 근본 classnames 안쓰면 그냥 이렇게 해야해야함. 근데 난 종속성 싫어서 그냥 이런식으로 씀. 유딩도 알아볼 수 있는 코드가 좋다 // MyComponent.js import React from 'react'; import styles from './MyComponent.module.css'; const MyComponent = ({ isSpecial }) => { // 조건에 따라 클래스를 동적으로 할당 const containerClassName = isSpecial ? styles.specialContainer : styles.normalContainer; return ( Hello, World! ); }; export default MyComponent; 링크 조건부 스타일은 이런식으로 http..
위쪽으로 올라오는 border-bottom 가끔씩 border-bottom 라인이 밑으로 되어있어서 짜증날때가 있다. 그럴땐 shadow로 처리를 하면 된다. box-shadow: inset 0px -1px 0px 0px #ffe142; 이해 하고 싶으면 https://www.cssmatic.com/box-shadow Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com 쉐도우 자동생성기를 만지작 거리면 이해할 수 있다.