Front60 React - JSX 문법 JSX 자바스크립트의 확장 문법 XML과 유사함 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 변환됨 컴포넌트를 렌더링할 때마다 JSX가 아닌 React.createElement를 사용해야 하면 다음과 같은 상황 발생 {/* JSX 문법 */} function App() { return ( Hello react ); } 자바스크립트로 변환 // javascript 문법 function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } JSX의 장점 보기 쉽고 익숙함 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작.. 2021. 12. 17. 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. 이전 1 2 3 4 ··· 7 다음