전체 글212 이력서 업데이트 v.250513 https://www.notion.so/3-667c6db0849447f6aac615ca7e848b25 3년차 프론트엔드 개발자 곽세령입니다. | Notion자기소개concise-iguanadon-6af.notion.site 2025. 5. 13. 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. 프롬프트는 어떻게 이미지로 변환되는가 긍정 프롬프트는 이미지에서 강조해야 할 요소, 부정 프롬프트는 피해야 할 요소이다. 프롬프트는 Positive Prompt에서 Negative Prompt를 뺀 것이다.아니 정확히 말하자면, 긍정 프롬프트에서 부정 프롬프트를 뺐다기 보다는, 둘을 함께 사용하여 원하는 결과를 조정하는 것이다. Prompt는 Conditioning 과정(프롬프트를 기반으로 생성할 이미지를 조정하는 것.)의 영역에 속해 있는 것이다. AI는 텍스트를 직접 이해하는 것이 아니라, 텍스트를 숫자로 변환한 후(이것을 임베딩이라고 함) 이것을 활용한다. 스테이블 디퓨전은 CLIP같은 시스템을 이용해 텍스트 프롬프트를 숫자의 집합, 즉 벡터로 변환한다.자 그럼 어떻게 해야 좋은 프롬프트를 입력할 수 있는가?일관적인 사진이 나올 수 .. 2025. 2. 27. KSampler의 속성을 알아보자 Seed시드가 뭐냐 씨앗이다 씨앗. 즉 초기값.AI 이미지를 생성하려면 태초부터 랜덤 노이즈가 필요한데, 이 랜덤 노이즈의 초기값이 바로 시드 되시겠다.이 랜덤 노이즈의 초기값을 바탕으로 AI 이미지를 생성한다는 것까지는 모두들 알 것이다동일한 시드 값, 동일한 프롬프트 등 동일한 설정을 사용하면 항상 동일한 결과를 얻을 수 있다.반면 시드 값을 바꾸면 다른 설정이 같아도 매번 다른 결과가 나온다.Control after generate이미지 생성이 끝난 후 특정 특징만 좀더 세밀하게 조정할 때 후처리하는 옵션. before 옵션은 초기 단계에서부터 조건을 반영하도록 설정하는 것.after 옵션은 이미지를 일단 생성시켜놓고 후처리 단계에서 추가로 조건을 반영하도록 설정하는 것. (그냥 after로 놓고 .. 2025. 2. 25. Stable Diffusion의 다양한 node group들 모델 패치: 이미지 개선. 굉장히 유용하고 디테일을 잡아주는 기능Util: primitive에서 데이터 타입을 정의하고, note에서 메모를 적을 수 있고, reroute로 노드끼리의 길을 이어줄 수 있다.Loaders: 모델을 불러온다.Conditioning: 텍스트 프롬프트를 받고, 받은 프롬프트에 맞춘 조건을 모델에 맞게 변환하는 것이때, 모델에 맞춘 조건을 프롬프트에 맞게 변환으로 오해할 수도 있는데, 아니다. 조건은 프롬프트에다 맞추는 거고. 모델에서 프롬프트로 가는 것 같은 (즉 역순)은 없다.ControlNet을 사용하면 내가 원하는 이미지와 구도가 같은 사진을 추출할 수 있다. 아래는 내가 입력한 사진 / 출력한 사진.Sampling: 노이즈 단계를 제거하면서 내가 원하는 이미지를 만들어주.. 2025. 2. 23. 이전 1 2 3 4 ··· 12 다음
