일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- 자바스크립트
- Next 팀 프로젝트
- 파이썬 for
- 리액트
- 그리드 정렬
- 파이썬 slice
- 리액트 팀 프로젝트
- 내배캠 프로젝트
- 내일배움캠프 프로젝트
- 리액트 페이지 이동
- React Hooks
- 리액트 훅
- 내일배움캠프 최종 프로젝트
- typeScript
- useState
- js
- 타입스크립트
- REACT
- 프로그래머스
- 타입스크립트 props
- 파이썬 enumerate
- 타입스크립트 리액트
- 한글 공부 사이트
- 파이썬 반복문
- JavaScript
- 내일배움캠프
- 코딩테스트
- 파이썬 for in
- 리액트 프로젝트
- 파이썬 list
- Today
- Total
목록분류 전체보기 (198)
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..