aotoyae

💡 리액트 폭죽 효과를 넣어보자! yarn add react-canvas-confetti or npm install react-canvas-confetti  🎉 전체 코드page.tsx - confetti 실행 버튼을 넣은 위치import confetti, { Options as ConfettiOptions } from 'canvas-confetti';import tailwindColors from '../../../../tailwind.config'; const handleConfetti = () => { const duration = 3000; const animationEnd = Date.now() + duration; // 지금 시간부터 5초동안 폭죽 효과 // tailwind..

💡 폰트 최적화를 해보자!  Next.js 에서 제공되는 구글 폰트를 쓰고 있었는데.. 가끔 dev 나 build 시에 터미널에 위와 같은 문구가 뜨고 로딩이 백 년이 걸릴 때가 있었다. 찾아보니.. next 버전을 바꾸꺼나.. 직접 다운로드한 폰트를 넣거나.. 많은 방법이 있었는데다운로드한 폰트로 css 에 적용을 해보려 한다!  👀 FOIT? FOUT?Flash Of Invisible Text폰트 다운로드 전까지 아무 글자도 안보임다운 완료 되면 폰트 적용된 글자 보여줌Flash Of Unstyled Text폰트 다운로드 전까지 기본 폰트 글자 보여줌다운 완료 되면 폰트 적용된 글자 보여줌 👀  font - display 속성    swap웹폰트 중요 ❌, 빠른 글자 노출 중요 ⭕️기본 폰트 보..

💡 tailwind.. 조건에 따라 스타일링이 가능했다.. 문제 풀기 기능 구현 중 채점 후에 사용자의 답이 정답이라면 파란색으로, 오답이라면 빨간색으로 표시를 해줘야 했다! 그래서 같은 태그(컬러만 다르게 준)를 두 개 두고 정답/오답에 따라 보이게 해야 하나? 하다가 tailwind 조건부를 검색했더니.. 바로 나왔다 🥹 ! 사용법은 className 을 벡틱으로 감싸고 조건을 걸어주면 된다! ⭕️ 주관식 답 사용자가 입력한 답 === 정답 이라면 파란색으로! {usersAnswer?.answer} ⭕️ 객관식 답 사용자가 입력한 선택지 === 이 선택지(map 을 돌려서 선택지를 표시했기에 같은 옵션인지 id 로 구분)이고 is_answer true 값을 갖고 있다면 파란색으로! 처음엔 보더로만 구..

💡 간단한 input 입력 제한과 input 안에 입력값 길이 표시! input 의 onInput 에 함수를 부르고 이벤트와 제한할 글자수를 보내준다! { handleMaxLength(e, 30); }}/> handler 에선 value 값이 maxLength 값이 넘는다면 substr 로 잘라준다! export const handleMaxLength = (e: FormEvent, maxLength: number) => { const inputElement = e.target as HTMLInputElement; const { value } = inputElement; if (value.length > maxLength) { inputElement.value = value.substr(0, maxLeng..

💡 tailwind 에서도 calc 사용이 가능했다! .example { font-size: calc(2vw + 10px); /* viewport width에 따라 크기 조절하면서 10px를 추가 */ padding: 20px; /* 고정된 크기로 픽셀 단위 사용 */ margin: calc(1vw + 5px) calc(2vw + 10px); /* 세로는 viewport width에 따라, 가로는 픽셀 단위로 사용 */ width: calc(50% + 20px); /* 백분율로 지정하면서 20px를 추가 */ } 원래 요렇게 쓰는 calc .. tailwind 에서 써보자! 저 바(8vh)에 보더를 주고 안에 빨간 박스(8vh)를 채워놨는데 border-box 가 적용되어 있어서 빨간 박스가 보더를 가려..

💡 블로그나 SNS 같은 피드형 웹페이지 프로젝트 🗓️ 02.07 ~ 02.15 (9일) 연휴가 껴있어서 초반에 속도가 조금 더뎠지만 막바지에 다들 밤 늦게까지 작업해 주셔서 무사히 완성할 수 있었다.. 기획 초반에는 뉴스 관련 글을 올리는 곳이었지만..? 중간에 주제가 바뀌면서 맛집 후기를 올리는 사이트가 되었다! 나는 소개 페이지, 프로필 수정(닉네임, 소개, 좋아하는 음식 해시태그)을 담당했었다. // 저장했던 profile ID와 일치하는 profile 정보를 수정합니다. const editProfile = async (e) => { try { e.preventDefault(); const infoRef = doc(db, 'profile', userId); await updateDoc(infoRe..

💡 tailwind 로 체크박스 커스텀하기 { handleCheckObjectAnswer(id, options, option.id); }} /> checked 됐을 때 표시될 배경색을 넣어주고, 그 위에 png 하얀색 체크 표시를 넣어줬다! 그리고 bg-no-repeat bg-center 로 이미지가 가운데 위치하도록 했다. 🥵 url 문제가 좀 있었는데.. 파일에 넣어둔 이미지를 가져오려 했는데 url 에 파일 경로를 아무리 넣어봐도 .. 적용이 안됐다. tailwind.config 에서도 넣어봤지만.. 자꾸 경로 오류가 떠서 시간만 보내다가 supabase storage 에서 URL 가져올 수 있지 않나?!?!??! 해서 이미지 올려두고 url 복사해서 넣어두니 아주 잘 표시됐다. 😭 🔗 https:..

💡 리액트에서 파일 첨부하기 우선 미리보기를 위한 로직 🫠 const handleClickImg = (id: string | undefined) => { // img & input 을 감싸고 있는 div 클릭 시 const fileInput = document.getElementById(`fileInput${id}`); // fileInput${id} id를 가진 DOM 요소를 fileInput?.click(); // 클릭한다. }; const handleChangeImg = (id: string | undefined, files: FileList | null) => { const file = files?.[0]; if (file) { const imgUrl = URL.createObjectURL(fil..