상무 상무

Web/Js

• React - 프로퍼티(Prop) 인터페이스 사용해서 적용하기

  Web/Js 2020. 3. 5. 01:16

  사용할 컴포넌트 App.tsx에 적용 프로퍼티를 사용할 컴포넌트에 인터페이스를 활용한다. 인터페이스를 사용하면 컴포넌트 활용시 할당 된 변수와 데이터를 넣어줘야 한다. 실행 후 모습.

  Read More
• React 프로젝트(CRA) 생성시 TypeScript 사용하기

  Web/Js 2020. 3. 5. 00:13

  CRA 생성시 npx create-react-app my-app --template typescript 또는 yarn create react-app my-app --template typescript 로 프로젝트를 생성한다.

  Read More
• React 사용 중인 프로젝트에 TypeScript 사용하기

  Web/Js 2020. 3. 5. 00:02

  사용중인 React 프로젝트에 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 또는 yarn add typescript @types/node @types/react @types/react-dom @types/jest 를 추가한다. 그 후 App.js를 -> App.tsx 로 변경 후 실행 한다

  Read More
• JQuery - Html5 data-, Travarsing, Shadow DOM

  Web/Js 2018. 9. 4. 13:05

  JQuery CDN Html5 data-, Travarsing DOCTYPE html> Vacation Packages $(document).ready(function() { $('#vacations').find('.vacation').find('button').click(function() { // $(this).detach() // element는 제거하고 DOM은 제거하지 않음. // var price = $(' From $399.99 ') // $(this).after(price) // var price = $(' From $399.99 ') // $(this).closest('.vacation').append(price) // 인접한 해당 태그 부모를 찾는다. // $(this).remove()..

  Read More
• js 주석처리

  Web/Js 2018. 7. 10. 03:59

  1. 한줄 주석처리 : // ...2. 블록 주석처리 : /* ... */ 3. 블록 주석 안에 한줄주석 가능 /*// .......*/ 4. 블럭주석 안에 블록주석 가능 x /* /**/ */ 파란색 주석끼리 짝이 지어지고 마지막 */가 오류가 된다.

  Read More
• 자바스크립트 계산기

  Web/Js 2017. 11. 17. 00:53

  자바스크립트 계산기 코드 VAL:

  Read More
• 자바스크립트 오전/오후 원하는 날짜 시간

  Web/Js 2017. 9. 27. 18:22

  배열로 요일을 설정합니다.Date객체를 이용해서 현재시간의 년,월,일,요일을 설정합니다. 마찬가지로 시간,분,초도 현재시간을 가져옵니다.여기서 현재시간이 24시로 표기되는데 12시가 넘어가면 오후로 바꾸고 24시간 표기에서 12시간표기로 바꾸기위해시간에서 -12시간을 해줍니다.

  Read More
• 오에카키

  Web/Js 2017. 9. 27. 17:56

  DOCTYPE html> 오에카키 body { margin : 20px; } canvas { cursor : crosshair; border: solid 2px #000; margin : 15px 0 0 0; -webkit-box : 1px 1px 20px #ccc; -moz-box : 1px 1px 20px #ccc; box-shadow: 1px 1px 20px #ccc; } input { border : 1px solid #000; } var canvas; // 캔버스 정보 변수 var ctx; // 캔버스 컨텍스트 정보 변수 var flag = false; // 마우스가 눌린 상태인지 보기위함 // 페이지가 로드되면 그림 준비 var ready = function() { canvas = docume..

  Read More