본문 바로가기

FrontEnd45

Create React App CRA를 사용하면 webpack 같은 복잡한 설정을 하지 않고도 리액트를 이용할 수 있습니다. 그전에 우리는 npm을 사용할 것이므로 node.js가 필요합니다. node.js를 설치한후 console창에서 node -v를 입력하면 현재 버전이 나오면 설치를 확인할 수 있습니다. 설치와 동시에 npm으로 패키지 관리 도구까지 함께 설치가 되는 것을 확인할 수 있습니다. npm을 CRA이용해 React프로젝트를 생성할 수 있습니다. console창에 다음과 같이 입력합니다. -g옵션은 글로벌 패키지 형태로 설치하게 됩니다. 글로벌 패키지로 설치하게 되면 다른 프로젝트에도 해당 패키지를 적용할 수 있습니다. 따라서 생성된 패키지를 외부에서도 사용할 수 있게 됩니다. 특정한 폴더에 위치해 create-reac.. 2020. 7. 9.
[jQuery] load,ajax 사용하기 Let jQuery AJAX Change This Text Get External Content responseText : 로드할 파일 내용 statusText : 로드할 파일과의 연결 상태 status : 요청의 상태 xhr.status : 요청한 파일의 상태 따라서 statusText와 , xhr.status를 가지고 성공적으로 처리했을 때 그러지 않았을 때를 처리할 수 있습니다. Let jQuery AJAX Change This Text Get External Content 2020. 6. 30.
[jQuery] animate UI만을 위한 jQuery 라이브러리도 존재합니다. https://jqueryui.com/ 사이트에 있습니다. 원하는 버전의 라이브러리를 다운로드하고 사용할 수 있습니다. html문서입니다. hello~ jQuery Creative jQuery animate 기본 문법은 다음과 같습니다. 선택자. animate({속성:값, 속성:값} , 시간, 이징 , 다른 할 일) 제이쿼리 이징 , linear, swing + ui라이브러리다운 시 여러 가지 이 징가 능 //id : typo안에 inner을 먼저선택하기 //on메서드를 생략하고 click이벤트가 바로올 수 있습니다. $(function(){ $('#typo .inner').click(function(){ $(this).animate({opacity:0.. 2020. 6. 30.
[jQuery] 실행 시점 제어하기 이벤트를 발생시킬 때 jQuery를 어떻게 이용할까요? 1. mouseover : 마우스가 올라왔을 경우 이벤트를 등록하는 메서드는 on()와 bind()가 존재합니다. 하지만 이제 bind는 deprecated 되었습니다. 따라서 이벤트의 시작은 on(). 종료는 off() 메서드를 사용합니다. 기초적인 event 문법. $('선택자').on('이벤트종류' function(){ 할일을 작성하는 코드블럭 }) 이제 문법에 기초해서 코드를 작성해봅니다. $(function(){ $('h1').css({ color : 'red', textDecoration : 'underline', borderBottom:'5px solid red', transform :'rotate(45deg)', opacity : 0... 2020. 6. 28.
[jQuery] 소개 Jquery Write less, do more Introduce 문법이 간결하다. 사용하기 쉽다. 빠르게 배울 수 있다. 다른 라이브러리들과 충돌을 일으키지 않는다. 다양한 플러그인이 존재한다. 브라우저 호환성 문제를 해결해준다. MIT adn GPL LICENSES Installation jquery.com에서 스크립트 파일을 다운로드하여 링크한다. 혹은 CDN으로 코드를 추가한다. 제이쿼리는 CSS 실렉터만 알고 있다면 정말 쉽게 배울 수 있다. 태그 WELCOME TO MY BLOG jquery $("a") javascript document.getElementsByTagName("a") 아이디 WELCOME TO MY BLOG jquery ${"#hello"} javascript document.. 2020. 6. 28.