코딩12 5월을 돌아보며........ 5월은 정말 많은 일이 있었다.. 대형 프로젝트를 내가 맡아서 진행하게 되었고 성공적으로 마무리했다. 회사 동료 분 한 분은 더 좋은 기회를 잡아 떠나시게 되었고 우리 모두 그분의 앞날을 응원했다. 요즘은 헬로키티에 푹 빠졌다. 테무에서 귀여운 선풍기도 샀다.. 쿠팡에서 듀퐁 라이터도 샀는데 매우 맘에 든다.. 사진 촬영도 열심히 하고 있다.. 대통령 선거가 코앞이다.. 투표도 해야 한다...이것저것 개발 열심히 했는데 그건 따로 2025년 개발 회고에 열심히 적어보려 한다..내가 좋아하는 가수분이 우리 사장님 지인이셔서 좋은 기회로 만나뵙게 되어 같이 사진도 찍었다.. 실제로보니 진짜이쁘고상냥하셨다..초딩 중딩 때 내 우상이던 분이 내가 개발에 참여한 웹사이트를 잘 쓰고 계신다고 해주셨다.... 참 .. 2025. 5. 30. 스크롤 속도를 컴포넌트마다 다르게 하는 법 import { ParallaxProvider, Parallax } from "react-scroll-parallax"; {latestExhibition.artistName} {titleSlicer(latestExhibition.title)} {dateStatus(latestExhibition)} 2025. 3. 20. props를 하위 컴포넌트에서 상위 컴포넌트로 보내는 방법 상위컴포넌트 const [needDimmed, setNeedDimmed] = useState(false)GlobalNavigationBar setNeedDimmed={setNeedDimmed} /> 하위컴포넌트 const handleDetailMenuClick = (title) => { setMenus((prevMenus) => prevMenus.map((menu) => ({ ...menu, clicked: menu.title === title ? !menu.clicked : false })) ); const isLnbShown = !menus.find((menu)=> menu.title === title).clicked props.setNeedDimmed(isLnbShown) }; const han.. 2025. 3. 10. 파일을 다운로드하게 만드는 handler const serviceDownloadHandler = () => { const link = document.createElement('a'); link.href = '파일경로'; link.download = '파일이름.pdf'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; 2025. 3. 6. inline CSS가 CSS 파일 속 CSS를 덮어버렸을 때 해결방법 이런문제가 발생하는원인 : inline CSS가 우선순위가 더 높아서 그렇다.해결방법 : CSS파일에다가 !important 쓰면 된다 {t('nav.inventory')} .titlesText{ color: #777; font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; white-space: nowrap; transition: color 0.3s;}.titlesText:hover{ color: #9449F5 !important; transition: color 0.3s;} 2025. 3. 5. react-progress-bar로 프로그레스 바 만들기 https://www.npmjs.com/package/@ramonak/react-progress-bar Progress Bar React Component. Latest version: 5.3.0, last published: 5 months ago. Start using @ramonak/react-progress-bar in your project by running `npm i @ramonak/react-progress-bar`. There are 53 other projects in the npm registry using @ramonak/reac" data-og-host="www.npmjs.com" data-og-source-url="https://www.npmjs.com/package/@ramo.. 2025. 3. 4. Swiper를 사용해서, 슬라이드 만드는 법 Swiper를 먼저 받아야 한다.import React from 'react';import { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/css';import 'swiper/css/pagination';import { Pagination } from 'swiper/modules';export default function App() { return ( Slide 1 Slide 2 Slide 3 Slide 4 Slide 5.. 2025. 3. 3. keyframes로 자동으로 움직이는 Carousel 만드는 법 const CustomerReviews = () => { return {reviewData.length > 0 && ( e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'paused'} onMouseLeave={(e) => e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'running'} > {[...reviewData, ...reviewData].map((item, in.. 2025. 3. 2. 순수 CSS로만 Sticky Scroll Cards 만들기 export default function StickyScroll() { return ( 스크롤을 해보겠슴다... 1 2 3 4 스크롤이 끝났습니다... );} 2025. 3. 1. QRCode 라이브러리 불러와서 QR코드 만들기 import React, { useState, useEffect } from 'react';import QRCode from 'qrcode';import DownloadIcon from '@mui/icons-material/Download';import { useTranslation } from "next-i18next"const QRCodeGenerator = (props) => { const { t } = useTranslation(["inventory"]); const propsurl = props.url const [qrCodeURL, setQRCodeURL] = useState(null); const generateQRCode = async () => { try.. 2025. 2. 28. props 상위 컴포넌트로 올리고 하위 컴포넌트로 내리기 PROPS Import navnexport default function Layout({ children }) { const [hamburgerMenuOpened, setHamburgerMenuOpened] = useState(false) const hamburgerMenuOpener=()=>{ setHamburgerMenuOpened(true) } const hamburgerMenuCloser=()=>{ setHamburgerMenuOpened(false) } Return //아래로 내려주는코드 import HamburgerMenu from './hamburger-menu';function navn(props) const [hamburg.. 2024. 9. 26. useRef 사용해서 컴포넌트 바깥을 클릭했을 때 컴포넌트가 닫히게 하기 USEREFimport { useEffect, useRef } from 'react'; const handleDetailMenuClose = () => { setMenus((prevMenus) => prevMenus.map((menu) => ({ ...menu, clicked: false, })) ); }; const appRef = useRef(null); useEffect(() => { const handleOutsideClick = (event) => { if (appRef.current && !appRef.current.contains(e.. 2024. 9. 26. 이전 1 다음
