분류 전체보기128 Webpack / Babel / Node.js / NPM Webpack / Babel / Node.js / NPM Webpack 모듈 번들러(Module Bundler) 모듈화된 코드를 하나의 파일로 합치고(번들링) 코드를 수행할 때마다 웹브라우저로 리로딩한다. 코딩할 때 편의를 위해 여러 개의 모듈로 나누어 작업을 하지만, 브라우저에서 파일 단위 모듈 시스템을 이용하게 되면 많은 네트워크 비용이 낭비된다는 단점이 있다. 웹 애플리케이션의 규모가 커지면서 많은 양의 파일들이 하나로 모여 구성되는데 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요하다. React : Webpack이라는 모듈 번들러 사용 파일들의 관계가 복잡하고 무겁기 때문에 브라우저에서 이해하고 처리하기 힘들어지는 문제 해결 파일들 간의 의존성 관계 정리 및 최적화, JSX 파일.. 2021. 12. 17. React 환경설정(VS Code) React 설치 설치 프로그램 Node.js Visual Studio Code Create-React-App 리액트 프로젝트 생성 도구 CRA 사용하면 간편하게 리액트 개발 환경 구축 자동으로 다수의 패키지들 설치되고 Webpack 및 Babel 설정도 자동으로 설정 (나중에 번들링 옵션 변경 가능) 초기 단계에서 Webpack과 Babel 직접 설정할 일 없음!! Node.js / NPM 설치 https://nodejs.org/en/ 16.13.1 LTS 다운로드 node-v16.13.1-x64.msi 기본 설치 cmd (명렁 프롬프트) 창에서 버전 확인 node -v npm -v Visual Studio Code(VS Code) 설치 https://code.visualstudio.com/downloa.. 2021. 12. 17. 자바스크립트 라이브러리와 프레임워크 자바스크립트 라이브러리와 프레임워크 자바스크립트 라이브러리와 프레임워크 필요성 웹 애플리케이션에서 유저 인터페이스 동적 처리 시 각 DOM 요소 작업 필요 getElementById()로 찾아와서 이벤트 처리하고 코드 작성 프로젝트가 커지고 인터페이스 다양해짐 이러한 프로젝트를 관리하려면 많은 DOM 요소나 코드를 관리하고 정리하는 일이 어려워짐 그래서 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요 많은 라이브러리나 프레임워크 만들어지고 사용되면 생산성과 유지보수 많이 향상 대표적인 자바스크립트 라이브러리 / 프레임워크 Angular / React / Vue.js 프레임워크와 라이브러리 차이점 프레임워크 뼈대, 기반 구조를 의미. 제어의 역전 여러 클래스나 컴포넌트로 구성되어 있고.. 2021. 12. 17. 응용 예제 - <canvas> 태그 응용 예제 - 태그 (2) 태그 도형이나 이미지 출력 canvas.html - 사각형과 이미지 출력 사각형 그리기 캔버스 지우기 이미지 출력 pose.html 포즈 인식 결과 확인 포즈 인식 결과를 이미지에 좌표로 표시 pose.js /* pose.js */ $(function(){ // [결과확인] 버튼 클릭하면 서버에서 좌표 받아서 // 이미지 출력하는 drawCanvas() 함수 호출 : 좌표, 이미지 src 전달 $('#showBtn').on('click', () => { // 서버에서 응답 결과로 좌표 값 받았다고 가정 var result = {"points": [{"x":0.42, "y":0.20}, {"x":0.49, "y":0.22}, {"x":0.42, "y".. 2021. 12. 15. 응용 예제 - 음성녹음 응용 예제 - 음성녹음 (1) 음성 녹음 음성 녹음 ([녹음] / [정지]) 컨트롤 출력 play 파일로 저장 WebRTC 별도의 플러그인 없이 웹에서 RTC(Real-Time Communications)를 구현하기 위해 HTML5에 새로 추가된 기능 https://webrtc.org voiceRecord.html 녹음 정지 voiceRecord.js $(document).ready(function(){ const record = document.getElementById('record'); const stop = document.getElementById('stop'); const soundClips = document.getElementById('sound-clip.. 2021. 12. 15. jQuery - 효과 jQuery 효과 jQuery로 가능한 시각적 효과 Basic 효과 hide() / show() / toggle() Sliding 효과 slideDown() / slideUp() / slideToggle() Fading 효과 fadeIn() / fadeOut() / fadeToggle() / fadeTo() Animate 효과 animate(속성) 공통 인수 duration : 효과 진행 속도 (slow / normal / fast) callback : 효과 완료 후 수행할 함수 easing 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑 swing : sin 곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려짐) liner : 선형 Basic 효과 hide() : 요소 .. 2021. 12. 15. jQuery - DOM 요소의 속성 추가 및 삭제 DOM 요소의 속성 추가 및 삭제 attr('속성명', 값) : 속성 추가 removeAttr('속성명') : 속성 제거 DOMattr.html DOM 요소 속성 추가 연습문제 DOMattrIndex.html DOM 요소의 클래스 속성 CSS 효과 동적 적용 CSS의 클래스 선택자에 적용된 여러 효과를 동적으로 추가하거나 제거 addClass('클래스명') : CSS 효과 적용 removeClass('클래스명') : 적용된 CSS 효과 제거(해제) toggleClass('클래스명') 사용 addClass()와 removeClass()를 번갈아 가면서 실행하는 결과 DOMaddClass.html 이미지에 마우스를 올려보세요 toggle.. 2021. 12. 15. jQuery - DOM 요소 조작 jQuery DOM 요소 조작 동적으로 쉽고 간단하게 DOM 요소 조작 가능 DOM 요소 삽입 / 삭제 / 속성 추가 및 삭제 / 클래스 속성 DOM 요소 조작 관련 메소드 text() : 글자와 관련된 내용을 반환하거나 설정 html() : HTML과 관련된 내용을 반환하거나 설정 $(선택자).append(A) : 선택자의 내부 요소들 맨 뒤에 A를 삽입 $(선택자).prepend(A) : 선택자의 내부 요소들 맨 앞에 A를 삽입 $(A).apeentTo(선택자) : A를 선택자의 내부 요소들 맨 뒤에 삽입 $(A).prependTo(선택자) : A를 선택자의 내부 요소들 맨 앞에 삽입 $(선택자).after(A) : 선택자 뒤에 A 삽입 $(선택자).before(A) : 선택자 앞에 A 삽입 $(A).. 2021. 12. 15. jQuery - 이벤트 객체 메소드 이벤트 객체 메소드 preventDefault() : 현재 이벤트의 기본 동작 중지 stopPropagation() : 상위 element로 이벤트가 전파되는 것 중지 stopImmediatelyPropagation() : 현재 이벤트의 다른 리스너 중지 및 상위로 전파되는 것 중지 (1) preventDefault() return false jQuery에서는 preventDefault() + stopPropagation() JavaScript 에서는 preventDefault() HTML 요소의 기본 동작 태그 클릭 시 href 속성에 지정된 url로 이동 document에서 오른쪽 마우스 클릭 시 contextmenu (팝업메뉴) 출력 preventDefault.html 네이버로 이동 이벤트 전파(P.. 2021. 12. 15. 이전 1 2 3 4 5 6 7 ··· 15 다음