오늘은 리액트 기본 문법과 형식들을 알아보겠습니다!리액트 기본문법어제에 이어 컴포넌트하는 방법과 props에 대해 알아볼게용~ 컴포넌트컴포넌트란? 리액트 컴포넌트(React component)는 UI(User Interface)를 만들기 위한 빌딩 블록입니다. 리액트 애플리케이션은 컴포넌트들의 계층적인 구조로 이루어져 있으며, 각 컴포넌트는 자체적인 상태(state)와 속성(props)을 가지고 있습니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴퍼넌트로 나눌 수 있습니다. 함수형 컴포넌트는 함수로 정의되어 있으며, 입력값(props)을 받아들이고 JSX를 반환합니다. 클래스형 컴포넌트는 클래스로 정의되어 있으며, React.Component를 상속하고 라이프사이클 메서드(lifecycle methods)..

오늘은 PHP 관리자 회원가입을 작업해보겠습니다. 이용약관 체크박스 표시 검사 // 체크 표시 검사 const agreeBtn = document.querySelector(".agreeBtn"); const agreeCheck = document.querySelectorAll(".agreeCheck"); const agreeMsg = document.querySelector(".agreeMsg"); agreeBtn.addEventListener("click", (e) => { agreeCheck.forEach((check) => { if(check.checked == false){ agreeMsg.innerText = "*체크박스를 다시 한 번 확인해주세요!"; e.preventDefault(); } }..

오늘은 드디어 리액트를 들어갑니다!! 하지만 처음부터 서버에 올리는게 막혀서 매우 우울MAX였던. 아무튼 리액트가 뭔지 알아보러 가시죵 리액트에 대해 알아보자! 🔧리액트란? React는 Facebook에서 개발한 JavaScript 기반의 프론트엔드 라이브러리입니다. React를 사용하면 동적인 사용자 인터페이스를 만들 수 있으며, 가상 DOM을 사용하여 웹 애플리케이션의 성능을 최적화할 수 있습니다. React는 컴포넌트 기반으로 작동하며, 컴포넌트는 UI 요소를 렌더링하고 상태를 관리하는 자체적인 기능 단위입니다. 이러한 컴포넌트는 더 큰 애플리케이션을 작고 재사용 가능한 단위로 분할하여 작성할 수 있으므로 코드의 유지 보수성과 재사용성이 향상됩니다. 리액트의 장점 선언적 UI: React는 선언적 ..

오늘은 사이드에 있는 닷을 누르면 해당 좌푯값으로 가는 패럴랙스 효과를 만들어보겠습니당! 패럴랙스 이펙트(2) 구조 01 Section1 한 번 포기하면 습관이 된다. 절대 포기하지 말아라. 02 Section2 꿈이 있으면 잡아야 하고 절대 놓지 말아야 한다. 03 Section3 불가능은 오직 의지가 없는 사람에게만 존재한다. 04 Section4 불행한 사람은 다른 사람의 불행에서 위안을 얻는다. 05 Section5 사랑이 없는 삶은 꽃도 열매도 없는 나무와 같다. 06 Section6 무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니다. 07 Section7 성공을 얻기 위해 무엇을 포기해야 했는지에 따라 성공을 판단해라. 08 Section8 아름다움은 자신을 결정하는 순간부터 ..

안녕하세용 오늘은 마우스를 따라 이미지를 움직이게 해보겠씁니다 마우스 이펙트 (4) 만들기 구조 짜기 Habit is a second nature. 습관은 제2의 천성이다. 스크립트_gsap 먼저, 마우스가 움직일 때마다 mousemove 이벤트를 감지하고, 해당 이벤트 발생 시 gsap.to() 메소드를 사용하여 mouse__cursor 요소의 위치를 마우스 좌표값으로 변경합니다. 그 다음으로, 마우스 좌표값을 기준으로 이미지를 중앙으로 맞추기 위해 centerPageX와 centerPageY 값을 계산합니다. 이 값은 window.innerWidth와 window.innerHeight 값을 사용하여 계산되며, 마우스 위치 값에서 빼줌으로써 마우스 좌표값 기준점을 중앙으로 설정합니다. 이제 gsap.t..

오늘은 gsap를 써서 기.깔. 나는 애니메이션 효과를 한 번 줘보겠습니당. gsap 애니메이션 효과 기본 구조 JJul's PORTFOLIO work about let's introduce frontend developer's all works of portfolio BLOG 글씨와 이미지가 순차적으로 나오는 구조로 작업해보겠습니다. gsap 연동 스크립트_글씨 분리하기 일단 글씨를 분리해 애니메이션 효과를 줄 거기 때문에 split를 활용하여 분리해줍니다. // 글씨 분리하기 document.querySelectorAll(".split").forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(..