전체 글215 2025년 6월, 7월 개발 회고 - MUI를 사용한 공통 컴포넌트 개발 (버튼, 텍스트필드, 텍스트필드 모달, 드롭다운, 라디오, 체크박스, alert, switch 등)- 새로운 공통 Header 만듬- 디자인대로 웹사이트 리뉴얼- 하이라이트할 날짜를 props를 통해 전달할 수 있는 Custom Calendar 개발 2025. 7. 14. 배열에서 원소만 추출한 후 중복 제거하기 const 중복제거배열 = [...new Set(기존배열.map(({ 뽑고싶은원소 }) => 뽑고싶은원소))]; 2025. 7. 8. 2025년 5월 개발 회고 유저의 타입을 통해 유저가 접근해도 되는 페이지인지 아닌지를 판별해, 유저가 접근해서는 안되는 페이지라면 접근 불가 페이지를 보여주기. Layout 컴포넌트에서 공통적으로 처리하도록 했다. 다이나믹 링크 기능을 구현했다. (로그인 페이지에서 리다이렉트하기 직전에, 리다이렉트되려는 페이지가 유저에게 접근 권한이 있는지를 판별해서, 권한이 있다면 그대로 리다이렉트하고, 권한이 없다면 기본 랜딩페이지로 이동시키도록 코드 수정)이미지 리사이즈 로직 개선엔터가 쳐져 있는 글 개행 처리 whiteSpace:"pre-line" 사용. 이거 안 쓰면 엔터처리가 적용이 제대로 안됨.useRef를 사용해 아이디를 입력하고 엔터를 누르면 비밀번호로 포커스 이동, 비밀번호를 입력하고 엔터를 누르면 로그인이 가능함import .. 2025. 5. 30. 5월을 돌아보며........ 5월은 정말 많은 일이 있었다.. 대형 프로젝트를 내가 맡아서 진행하게 되었고 성공적으로 마무리했다. 회사 동료 분 한 분은 더 좋은 기회를 잡아 떠나시게 되었고 우리 모두 그분의 앞날을 응원했다. 요즘은 헬로키티에 푹 빠졌다. 테무에서 귀여운 선풍기도 샀다.. 쿠팡에서 듀퐁 라이터도 샀는데 매우 맘에 든다.. 사진 촬영도 열심히 하고 있다.. 대통령 선거가 코앞이다.. 투표도 해야 한다...이것저것 개발 열심히 했는데 그건 따로 2025년 개발 회고에 열심히 적어보려 한다..내가 좋아하는 가수분이 우리 사장님 지인이셔서 좋은 기회로 만나뵙게 되어 같이 사진도 찍었다.. 실제로보니 진짜이쁘고상냥하셨다..초딩 중딩 때 내 우상이던 분이 내가 개발에 참여한 웹사이트를 잘 쓰고 계신다고 해주셨다.... 참 .. 2025. 5. 30. 2025년 4월 개발 회고 게시글 수정 페이지에서, 새로 수정할 값을 입력하고 다른 탭 갔다 돌아온 경우, 새로 수정한 값들이 없어지고 기존에 있던 데이터로 덮어씌워지는 이슈가 있었다. 의존성 배열에 값이 두 개가 들어가 있어서 한 값 때문에 실행되던 함수가 다른 값에 영향을 줘서 다른 페이지를 갔다 올 때마다 새로고침이 되던 거였다. 의존성 배열을 분리해 해결했다.안내 팝업을 띄우고, 유저가 확인을 누르면 일시적으로 팝업이 닫히게, 유저가 다시 보지 않기를 누르면 localStorage를 사용해 팝업을 닫고 영원히 보여주지 않게끔 함 const [showPopup, setShowPopup] = useState(false); const handleCloseForever = () => { localStorag.. 2025. 5. 2. 2025년 3월 개발 회고 화면 너비와 스크롤 여부에 따라 UI가 달라지는 GNB 만들었다. Swiper를 사용해 유저들의 작업물들이 자동으로 스크롤되고 마우스 호버 시 멈추는 UI를 만들었다. 모바일에서는 유저들의 리뷰를 하나하나 넘겨볼 수있게, 그리고 '@ramonak/react-progress-bar' 를 사용해 몇개나 넘겨봤는지를 확인할 수 있게 프로그레스 바를 만들었다. 유저들의 리뷰 또한 자동스크롤, 호버 시 멈추도록 했다. 버튼 클릭 시 파일 다운로드 받을 수 있게 했다. const serviceDownloadHandler = () => { if(router.locale == 'ko') { const link = document.createElement('a'); .. 2025. 5. 2. 스크롤 속도를 컴포넌트마다 다르게 하는 법 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. 2025년 2월 개발 회고 https://kuromi-dev.tistory.com/609 순수 CSS로만 Sticky Scroll Cards 만들기export default function StickyScroll() { return ( 스크롤을 해보겠슴다... 1 2 3 4 스크롤이 끝났습니다... );}kuromi-dev.tistory.comhttps://kuromi-dev.tistory.com/610 { return {reviewData.length > 0 && ( e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'paused'} onMouseLeave={(e) => e.currentTarget.querySelector(`.${sty.. 2025. 3. 4. 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. ComfyUI의 모듈화 Set 노드와 Get 노드여러 노드들을 묶어 그룹으로 만든 후,그것의 출력을 Set에 입력하고Set의 출력을 Get에 입력한다. Set 노드는 값을 저장하는 역할, Get은 불러오는 역할을 한다.이때, Set 노드와 Get 노드에는 데이터 타입을 명확히 지정해줘야 한다. 그리고 Set과 Get에 들어갈 데이터 타입이 일치해야 한다. Set과 Get 노드는 데이터의 타입이 맞아야 한다.예를 들어, Set Latent로 저장한 값을 Get Image로 불러오면 오류 발생. Set 노드와 Get 노드를 왜 쓰는가? 하나의 노드를 여러 곳에 연결해야 할 경우가 있는데 이럴 때 직관적으로 연결할 수가 있다. 왜 이렇게 '모듈화'를 하는가?복잡한 코드를 정리할 수 있음반복되는 연산을 줄여 최적화 가능같은 Laten.. 2025. 2. 28. 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. 프롬프트 컨디셔닝(두 프롬프트 섞기) 프롬프트 두 개를 섞고 싶다면 Conditioning Average.뱀이라는 단어와 사과라는 단어를 조합해서 사과 색깔의 껍질을 입은 뱀의 사진을 만들어내려면?뱀 + 사과 이렇게 프롬프트 두 개를 믹스하면 된다~그래서어떻게믹스하냐고믹스할 프롬프트 1 -> Conditioning Average 노드의 Conditioning_from 입력에 넣기믹스할 프롬프트 2 -> Conditioning Average 노드의 Conditioning_to 입력에 넣기 그렇게 나온 Conditioning Average 노드의 출력을 KSampler의 긍정 입력에 넣기 나는 conditioning_to를 더 강하게. 그중에서도 (0.0부터 1.0 사이임) 0.8만큼 강하게 하고 싶은데요?-> conditioning_to_.. 2025. 2. 28. 이전 1 2 3 4 ··· 12 다음
