분류 전체보기 130

2023.05.11 코딩일기

- 오늘은 아침에 조별작업을 했습니다. - 오늘한 페이지를 한번 같이 보시죠 - 헤더에 있는 탭메뉴와 메인 슬라이더 그리고 밑에 탭메뉴를 가장한 버튼이 있습니다. - 카테고리 버튼들을 누르면 해당 카테고리가 모여있는 페이지로 넘어가는 것이죠 - 하지만 레이아웃은 똑같기 때문에 페이지가 안넘어 가는것같은 착각을 주는 겁니다. - 하지만 슬라이더 때문에 로딩이 길어지게 된다면 어쩔수 없죠... - 이건 커뮤니티 안에 글을 보는 페이지 입니다. - 글과 댓글은 임의로 적어놓았습니다. - 조별작업을 하면서 느끼는 것은 시멘틱 태그과 html구조의 중요성입니다. - 처음에 html로 틀을 짤 때 어떻게 짜느냐에 따라서 나중에 코딩의 난이도가 달라지는 것 같습니다. - 어떤 경우에는 html 구조를 다시 잡아야 되..

Archive/일상 2023.05.11

REACT - props란?

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

Archive/Javascript 2023.05.10

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

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

Archive/PHP 2023.05.09

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..

Archive/Javascript 2023.05.08

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

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

Archive/Javascript 2023.05.07

Javascript를 공부해 봅시다! 12. CallBack 함수

- 콜백함수에 대해서 알아보겠습니다.- 콜백 함수(callback function)는 프로그래밍에서 일반적으로 사용되는 개념입니다.- 콜백 함수는 다른 함수에 전달되어 특정 이벤트가 발생하거나 조건이 충족될 때 호출되는 함수입니다.- 콜백 함수의 동작 방식은 다음과 같습니다.- 함수 인자로 전달: 콜백 함수는 다른 함수의 인자로 전달됩니다. 이를 통해 원래의 함수가 완료되었을 때 콜백 함수를 호출할 수 있습니다. - 이벤트 발생 시 호출: 원래의 함수에서 정의한 이벤트가 발생하면, 콜백 함수가 호출됩니다. 이벤트는 보통 비동기적인 작업의 완료, 버튼 클릭, 타이머 등과 같은 다양한 상황에서 발생할 수 있습니다.- 콜백 함수는 비동기 프로그래밍에서 특히 유용합니다. 비동기 작업은 결과를 기다리지 않고 다른..

Archive/Javascript 2023.05.06