오봉이와 함께하는 개발 블로그

JSX 문법 자바스크립트 표현 사용 if문 대신 조건 연산자(3항 연산 사용(조건? true:false)) AND 연산자 && 사용한 조건부 렌더링 조건이 true면 expression 반환 조건이 false면 expression 반환하지 않고 무시(아무것도 출력되지 않음) OR 연산자 || 사용한 조건부 렌더링 조건이 0 또는 false이면 expression 반환 0이 아니면 해당 값 출력 const number = 100; { number || '내용...' } 결과 : 100 출력 인라인 스타일링 : 카멜 표기법 css 코드 사이에 '-' 말고 대문자로 표기 background-color => backgroundColor class 대신 className 사용 태그는 ..

자바스크립트 라이브러리와 프레임워크 필요성 웹 애플리케이션에서 유저 인터페이스 동적 처리 시 각 DOM 요소 작업 필요 getElementById()로 찾아와서 이벤트 처리하고 코드 작성 프로젝트 커지고 인터페이스도 다양해짐. 프로젝트 관리를 하기 위해 많은 DOM 요소나 코드를 관리하고 정리하는 일이 어려워짐 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요 많은 라이브러리나 프레임워크가 만들어지고 사용되며 생산성, 유지보수성 향상 대표적인 자바스크립트 라이브러리 / 프레임워크 Angular React Vue.js 프레임워크 / 라이브러리 프레임워크 뼈대(기반 구조를 의미) 제어의 역전 여러 클래스, 컴포넌트로 등으로 구성 작업하는 방법이 정의되어 있다. 라이브러리 활용 가능한 도구..

태그 도형이나 이미지 출력 태그 예제 - canvas.html 사각형 그리기 캔버스 지우기 이미지 출력 태그 문제 - pose.html 포즈 인식 결과 확인 포즈 인식 결과를 이미지에 좌표로 표시 // $(document).ready(function(){ 축약형 $(function(){ // [결과 확인] 버튼 클릭하면 서버에서 좌표 받아서 // 이미지 출력하는 drawCanvas() 함수 호출 : 좌표, 이미지 src 전달 $('#showBtn').on('click', function() { // 서버에서 응답 결과로 좌표 값 받았다고 가정 var result = {"points": [{"x":0.42, "y":0.20}, {"x":0.49, "y":0.22}, {"x":0..

응용 예제 음성 녹음 음성 녹음 ([녹음] / [정지]) 컨트롤 출력 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-cli..

jQuery 효과 공통 인수 duration : 효과 진행 속도(slow / normal / fast) callback : 효과 완료 후 수행할 함수 easing : 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑 swing : sin곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려지는 효과) linear : 선형 곡선(시작부터 끝까지 일정한 속도) jQuery로 가능한 시각적 효과 Basic 효과 hide() : 요소 숨기기 show() : 요소 표시(출력) toggle() : 요소를 숨기거나 표시 (hide() / show() 교대로 실행) Sliding 효과 slideDown() : 요소를 슬라이딩 효과로 나타나게 함 slideUp() : 요소를 슬라이딩 효과로 숨..