🌟 useEffect 함수 🌟 cleanup 함수

🌟 리액트 CSS 모듈 사용법 (강추!!!)

🌟 Create-React-App (CRA) 시작하기

🌟 React로 재사용 가능한 버튼 컴포넌트 만들기 🌟 공통 버튼 컴포넌트 🌟 React.memo() 🌟 props란?

🌟 React.useState()

요즘 웹 개발 세계에서 React는 빠지질 않는다.도대체 React가 뭐길래 다들 배우라고 난리일까?그리고 "퍼블리셔가 이걸 꼭 알아야 해?"라는 생각은 이제 옛말이 되었다.나도 한 2년 전쯤? 회사 다닐 때 틈틈이 공부해보려고 했는데, 퇴근하고 공부한다는 게 말처럼

마우스 방향에 따라 요소 움직이기✅ mousemove 이벤트 속성을 통해 clientX, clientY 마우스 좌표 가져오기✅ 기준점으로부터 마우스 위치에 따른 이동 거리 계산 -> 요소의 움직임 각도로 사용✅ GSAP 라이브러리를 활용하여 움직임 모션 적용✅ 정육각형

🩵 canvas는 HTML5에서 도입된 요소로, 픽셀 기반의 그래픽을 동적으로 그릴 수 있는 영역을 제공한다. 2D와 3D 그래픽을 그리기 위한 API를 지원하고, JavaScript를 사용해 그림을 그리거나 애니메이션을 구현할 수 있다.📍canvas mdn 바로가

To-do list💚 💚 🩵 텍스트를 입력할 input 폼 생성🩵 저장된 list를 노출 시킬 리스트 영역 생성🩵 To-do list에 새로운 항목을 추가🔹 등록된 리스트는 li > span + button 구조로 마크업되도록 createElement 메서드

위치+날씨 API 활용하기💚 navigator.geolocation.getCurrentPosition() : 현재 위치(위도, 경도)를 가져오기💚 OpenWeather API를 통해 해당 위치의 날씨 정보를 가져오기🩵 온도와 지역위치를 노출시킬 요소 생성🔹 자세

명언(문구) 랜덤 출력 📌 KEY POINT 💚 다수의 명언을 랜덤 출력할 것 💚 👉🏻 마크업은 이렇게! (HTML5) 🩵 명언과 작가의 정보를 받아올 span 태그 준비! 실질적인 텍스트는 스크립트로 받아올 것임. 👉🏻 스크립트는 이렇게! (JS

Background-Image 랜덤 변경💚 Math.random()을 활용하여 인덱스를 랜덤으로 추출하기💚 createElement()를 통해 스크립트로 요소를 생성하고 .append()를 활용하여 문서에 삽입하기🩵 배경으로 사용할 이미지 3장을 준비하고, 파일명

Log-in 기능💚 input 속성 : required(필수입력), maxlength="15"(최대 글자수)💚 input으로 입력한 이름/아이디 값을 키-값 구조로 localStorage에 저장하여 새로고침하여도 유지될 수 있도록 저장값 활용🩵 이름/아이디를 입력

디지털 시계 만들기🩵 디지털 시계를 노출시킬 요소 생성 후, 00:00:00 (시:분:초) 단위를 맞춰 셋팅한다.🩵 new Date() : 오늘의 날짜를 불러오는 생성자 함수 호출🩵 .getHours() : 시간을 반환하는 메서드🩵 .getMinutes() :

_며칠 전, 면접관님을 통해 알게되었던 새로운 gsap 속성이 있었다. 그거슨 바로 ScrollTrigger 속성 중 하나인 pin 속성!!_ _대표적으로 엔터프라이즈블록체인 프로젝트에서 position:sticky; 를 사용하여 스크롤 시, 특정 요소를 고정시키는

사실 SCSS 적용 방법에 대해 유튜브를 찾아보기도 하고 강의를 찾아보기도 했지만, 내가 자료를 잘 못찾았던 것인지 마음과는 다르게 쉽게 숙지하지 못했던 스킬 중 하나였다.고로 이번 마크업 디벨로퍼 과정 수업을 들었던 것이 나의 기술적 역량을 끌어올리는데 큰 몫을 한

👀내가 보려고 적어두는 카페24 완벽 정복!!시작은 베이직(기본) 스킨을 바탕으로 디자인을 적용하면서 메모했슴둥🔹 로그인, 작업을 진행할 디자인도 추가를 완료했다면 FTP에 연결할 차례!🔹 코딩을 배운 사람이니까 FTP 연결해서 하드코딩으로 뿌셔줘야지! 솔루션 상

꾸까🔸작업기간 : 2025.02.04 - 2025.02.06 (3일 + 유지보수 1일)🔹기술스택 : HTML, CSS, jQuery, Gsap·Swiper라이브러리🔸URL : https://choii9901.cafe24.com/📌 Key point✅ m

## 📌 KEY POINT 💚 **해당 슬라이드에 도달 시, 숫자 카운팅 스크립트 동작** 💚 숫자 증가 과정을 steps로 나누어, 주어진 **duration 내에서 자연스럽고 일정한 속도로 숫자가 증가하도록 세분화** 💚 숫자가 점진적으로 증가하는 애니메이션

📌 KEY POINT 💚 input 박스를 통해 텍스트 입력 후 전송 버튼 클릭 시, '할일' 목록 추가 💚 끝/보류 버튼 클릭 시, 각 항목에 추가되며 기존 리스트에서는 사라짐 💚 데이터 보간법을 활용하여 리스트를 추가하는 방법