본문 바로가기
반응형

전체 글166

리액트 React : 컴퍼넌트, props 리액트 React : 컴퍼넌트, props https://dongjin6539.tistory.com/105 블로그를 참고해서 작성하겠습니다. 참고 : https://dongjin6539.github.io/web2023/react/index.html 리액트 React 출력하기 1. 컴퍼넌트 리액트(React)는 UI(User Interface) 라이브러리로, 웹 어플리케이션의 구성 요소를 모듈화하여 개발할 수 있도록 지원합니다. 이러한 모듈화된 구성 요소를 컴포넌트(Component)라고 합니다. 리액트의 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다. 하나는 클래스 컴포넌트(Class Component)이고, 다른 하나는 함수형 컴포넌트(Functional Component)입니다. 클래스 컴포넌트.. 2023. 5. 10.
PHP ajax/jquery로 유효성 검사하기 PHP ajax/jquery로 유효성 검사하기 PHP와 jQuery는 모두 웹 개발에서 유용한 언어 및 라이브러리입니다. 그러나 PHP는 서버 측 언어로 웹 페이지를 구성하는 HTML 코드를 동적으로 생성하거나 데이터베이스와 상호작용하는 등의 작업을 처리할 수 있는 언어입니다. 반면 jQuery는 클라이언트 측 라이브러리로, HTML 페이지 내에서 JavaScript를 이용하여 DOM(Document Object Model) 요소를 조작하고 이벤트를 처리하는 등의 작업을 단순하게 처리할 수 있도록 도와줍니다. 따라서 PHP와 jQuery는 각각 다른 분야에서 사용되며, 유효성 검사 또한 서로 다른 방식으로 처리됩니다. PHP는 서버 측에서 입력값을 검사하고, 문제가 있을 경우 오류 메시지를 출력하거나 다.. 2023. 5. 9.
리액트 React 리액트 React 리액트(React)란? React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리입니다. React는 사용자 인터페이스를 만들기 위한 도구로 사용됩니다. React는 컴포넌트라고 하는 재사용 가능한 UI 요소를 만드는 데 중점을 둡니다. 각 컴포넌트는 자체적으로 상태를 관리하며, 필요에 따라 데이터를 받아와서 화면에 렌더링합니다. React는 가상 DOM(Virtual DOM)을 사용하여 효율적인 업데이트를 가능하게 합니다. React는 상태 변경이 있을 때마다 전체 페이지를 다시 로드하는 대신, 변경된 부분만 업데이트하여 더 빠른 성능을 제공합니다. 이러한 기능으로 인해 React는 단일 페이지 어플리케이션(SPA)을 만들기에 매우 적합하며, 현재 웹 개발에서 가장 인기.. 2023. 5. 8.
메인 페이지 인덱스 꾸미기 메인 페이지 인덱스 꾸미기 제 공부 메인 페이지 입니다. https://dongjin6539.github.io/web2023/ 기존에 공부하기 전에 받았던 페이지를 자신의 것으로 수정해봤습니다!!! 기존 페이지 색상 바꾸기 먼저 해당 부분에 코드 구성이 어떻게 되어있는지 확인을 해봐야합니다. 그러기 위해서 오른쪽 마우스 버튼를 누르면 검사가 나옵니다. 그것을 클릭해봅니다. 단축키는 F12입니다. 나오면 위와 같은 순서대로 해봅니다. 1번처럼 해당 버튼을 클릭하면 화면의 부분을 클릭할 수 있습니다. 2번처럼 화면에 알고 싶은 부분을 클릭을 해봅니다. 그러면 해당 부분의 코드가 나오고 밑에 css가 어떻게 되어있는지 나옵니다. 3번처럼 해당 부분의 css를 확인하고 3번의 오른쪽 위에 부분을 보시면 해당 폴.. 2023. 5. 7.
[Github] 깃허브 메인 페이지 꾸미기! [Github] 깃허브 메인 페이지 꾸미기! 제 깃허브 메인 페이지 입니다. https://github.com/dongjin6539 본인 ID 레퍼지토리 생성하기 우선 깃허브 프로필을 설정하려면 본인의 ID와 일치하는 이름으로 레퍼지토리를 생성해야 한다. README.md 파일 생성하도록 체크하라는 내용이다. 바로 체크하고 레퍼지토리를 생성하자! 그럼 이 레퍼지토리의 README.md 파일이 내 깃허브 프로필에 출력되는 것을 확인할 수 있을 것이다. README.md 꾸미기 헤더 우선 헤더 부분은 'capsule-render'라는 오픈API를 사용하였다. 이곳에서 자신의 스타일대로 만들어 링크한 줄만 복사하면 사용할 수 있다. https://github.com/kyechan99/capsule-render.. 2023. 5. 6.
자바스크립트 게임 이펙트01 : 음악 효과(2) 자바스크립트 게임 이펙트01 : 음악 효과(2) 수업 시간에 배운 내용을 복습하면서 해보겠습니다. 반복(한곡 반복, 랜덤 반복, 전체 반복), 뮤직 리스트에 대한 자바스크립트를 추가했습니다. 코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2 / MUSIC.CSS / JS) / 완성화면 반복(한곡 반복, 랜덤 반복, 전체 반복) JAVASCRIPT // 반복 버튼 클릭 musicRepeat.addEventListener("click", () => { let getAttr = musicRepeat.getAttribute("class"); switch(getAttr){ case "repeat" : musicRepeat.setAttribute("class", "repeat_one"); music.. 2023. 5. 5.
자바스크립트 콜백 지옥 해결 : GSAP 라이브러리 자바스크립트 콜백 지옥 해결 : GSAP 라이브러리 길라잡이 https://dongjin6539.tistory.com/101 콜백 함수 블로그에서 확인 할 수 있는 콜백 지옥을 해결하기 위해 GSAP 라이브러리를 사용해서 가성이 좋도록 해결할 수 있습니다. 콜백 함수를 해결하려는 이유는 콜백 함수를 중첩해서 사용하면서 코드가 복잡해지고 가독성이 떨어지는 현상을 말합니다. 비동기적으로 수행되는 작업이 많아지면서 콜백 함수가 중첩되어 사용되면서 코드가 복잡해지고, 디버깅이 어려워지고, 유지보수가 어려워지는 문제점이 발생하기 때문입니다. 예시 코드 구성 DJ's PORTFOLIO work about let's introduce frontend developer's all works of portfolio do.. 2023. 5. 4.
자바스크립트 함수 : 콜백(callback) 함수 자바스크립트 함수 : 콜백(callback) 함수 콜백(callback) 함수란? 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 즉, 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 보면 된다. 또한 어차피 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 보통 콜백 함수 형태로 함수를 넘겨줄때 함수의 이름이 없는 '익명 함수' 형태로 넣어주게 된다. 콜백 함수는 비동기적인 상황에서 특히 유용합니다. 예를 들어, 서버에서 데이터를 가져와서 처리하는 경우, 서버로부터 데이터를 가져오는 데 시간이 걸리기 때문에 콜백 함수를 사용하.. 2023. 5. 3.
코딩 공부하기 일과(1) 코딩 공부하기 일과(1) 오늘은 첫 오전 수업은 개인 수업시간 내용 정리 사이트 일부를 정리했습니다. 화면 : https://dongjin6539.github.io/web2023/ 두번째로 위의 사이트에 있는 SITE1 / SITE 유형 완성의 페이지를 완성시켰습니다. https://dongjin6539.github.io/web2023/site/site1/index.html 코드는 기존에 홈페이지 만들기에서 사용했던 코드와 CSS를 가져왔습니다. 헤더 유형 : https://dongjin6539.tistory.com/44 슬라이드 유형 : https://dongjin6539.tistory.com/40 이미지 유형 : https://dongjin6539.tistory.com/28 이미지/텍스트 유형 : h.. 2023. 5. 2.
반응형

티스토리툴바