기초부터 시작하는 코딩 114

REACT - props란?

REACT - props란? 리액트의 props는 컴포넌트 간의 데이터 전달에 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달함으로써 자식 컴포넌트는 전달받은 데이터를 사용하여 동적으로 UI를 생성하거나 작업을 수행할 수 있습니다. props는 다양한 타입의 값을 전달할 수 있습니다. 문자열, 숫자, 불리언, 객체, 배열 등을 props로 전달할 수 있으며, 필요에 따라 다양한 데이터를 전달할 수 있습니다. 또한, 함수나 콜백을 props로 전달하여 자식 컴포넌트에서 이벤트 핸들링이나 상태 변경과 같은 작업을 부모 컴포넌트로 전달할 수도 있습니다. 부모 컴포넌트에서 props를 전달할 때는 JSX 문법을 사용합니다. 태그 속성으로 props를 지정하거나 중괄호 {} 안에 JavaScrip..

PHP를 사용해서 게시판 페이지 만들기 - 유효성 검사와 AJAX

- 오늘은 유효성검사와 ajax에 대해서 알아보겠습니다. 유효성 검사란? - 유효성 검사(Validation)는 사용자로부터 입력받은 데이터가 원하는 형식과 규칙에 부합하는지를 확인하는 과정입니다. 웹 개발에서 유효성 검사는 주로 사용자가 제출한 폼 데이터의 유효성을 검증하는 데에 사용됩니다. - 유효성 검사는 클라이언트 측 검사와 서버 측 검사로 나눌 수 있습니다. 클라이언트 측 검사는 웹 브라우저에서 실행되며, 사용자 인터페이스에 즉각적인 피드백을 제공할 수 있습니다. 대표적인 클라이언트 측 검사 방법으로는 HTML5에서 추가된 폼 유효성 검사 기능과JavaScript를 사용한 검사가 있습니다. 이러한 방법은 필드에 입력된 데이터가 올바른 형식인지, 필수 입력 필드가 비어있지 않은지 등을 확인할 수 ..

REACT - REACT를 시작해봅시다.

REACT란 - React는 JavaScript를 사용하여 사용자 인터페이스(UI)를 구축하기 위한 오픈 소스 프론트엔드 라이브러리입니다. - React는 가상 DOM(Virtual DOM)을 사용하여 효율적으로 UI 업데이트를 관리합니다. 가상 DOM은 메모리에 존재하는 가벼운 복사본으로, React는 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이를 통해 성능이 향상되고 빠른 UI 렌더링이 가능해집니다. REACT설치하기 - React는 Node.js 환경에서 동작하므로, Node.js를 먼저 설치해야 합니다. Node.js는 공식 홈페이지에서 다운로드할 수 있습니다. npm create-react-app react1 - 터미널에서 설치하고 싶은 문서로 이동한 뒤 위의 문구를 입력합니다. C..

Javascript를 이용한 사이트 만들기! - 마우스 효과 사이트 만들기04

- 이번사이트는 가운데에 있는 네모 사진 안에 커서를 놓으면 사진이 커지면서 커서가 바뀌는 페이지 입니다. Javascript Mouse Effect04 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 We first make our habits, then our habits make us. 처음에는 우리가 습관을 만들지만 그다음에는 습관이 우리를 만든다. - html입니다. - 자바스크립트입니다. - gsap 라이브러리를 사용해서 만들었습니다. - 가운데이 있는 이미지에서 마우스커서를 만들어줄 것이기 때문에 좌표의 기준이 화면의 끝이 아니라 중앙으로 잡는 것이 키포인트입니다. - 전체 화면을 2로 나눈 값을 기준으로 잡아서 만든 것이죠 - 그리고 커서를 만들어서 가운데의 사진안에 넣어주고 마우스를..

Javascript를 이용한 사이트 만들기! - 포트폴리오 준비하기!

- 오늘은 오전에 한 포트폴리오 연습에 대해서 적어 볼까 합니다. - 가장 중요한 것은 바로 폰트!! font! 폰트! 굵기! 간격! 아무튼 이런 것들이 포트폴리오의 많은 부분을 좌우합니다. - 매우매우매우 중요하죠 그래서 틈틈히 사이트를 돌아다니며 폰트도 구경하고 수집하는 것이 중요합니다. - 하지만 저는 잘 못하는 것이죠.. 하지만 제가 눈여겨 본 것이 하나 있었습니다. - 아래에 배경이 보이시나요?? 저 그림?? 저건 iframe을 사용한 것입니다. - 이미 있는 사이트의 코드를 그대로 가져온 것이죠 - 저걸 사용하면 복잡한 코드들을 힘들게 이해하지 않아도 페이지에 넣을 수 있는 것이죠 - 물론 이쁘고 자연스럽게 하기위해선 어느정도 코드를 이해하기는 해야되지만 말이죠.. - 하는 방법도 어렵지 않습..