반응형 분류 전체보기68 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 37 (UI 컴포넌트(구성 요소), 디버깅) 목차UI 컴포넌트(구성 요소)오프 캔버스(Off Canvas)모달 다이얼로그(Modal Dialog)디버깅(Debugging)오늘 하루를 돌아보며 UI 컴포넌트(구성 요소)JavaScript 초보 개발자에게 가장 중요한 단계는 아이디어를 실제 작동하는 프로토타입으로 구현하는 것이다. 빌트인 컴포넌트(Native Component)가 없을 때는 직접 컴포넌트를 만들어야 한다.수업 시간에는 오프 캔버스(Off Canvas) 메뉴와 모달 다이얼로그(Modal Dialog)를 만들어 봤다. 오프 캔버스(Off Canvas)오프 캔버스 메뉴는 화면(캔버스) 밖에 숨어 있다가 버튼을 누르면 화면 안으로 밀려 들어오는 메뉴다. 브라우저 창 바깥에 위치해 있다가 버튼을 누르면 화면을 오른쪽으로 밀고, 다시 버튼을 누르.. 2025. 6. 17. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 36 (이벤트, 콜백, 이벤트 루프, 콜백과 비동기 코드) 목차이벤트(Event)콜백(Callback)이벤트 루프콜백과 비동기 코드오늘 하루를 돌아보며 이벤트(Event)JavaScript에서 이벤트(Event)는 어떤 일이 발생했음을 알려준다. 예를 들어, 마우스 포인터로 클릭(click)하면 클릭 이벤트가 발생하고, 키보드의 키(key)를 누르면 키보드 이벤트가 발생한다. 이벤트 리스너이벤트를 수신하려면 이벤트 리스너(Event Listener, 청취자)가 필요하다.element.addEventListener('type', () => {})// 'type': 이벤트의 타입의 이름// () => {}: 이벤트가 발생할 때마다 호출되는 함수(이벤트 리스너) 예를 들어, 요소에서 발생하는 클릭 이벤트를 리스닝하고 싶다면 다음과 같이 사용할 수 있다.클릭 가능한.. 2025. 6. 16. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 35 (부정 연산자, Null & Undefined, BOM & DOM, DOM 요소 선택, class 속성 값 변경) 목차부정 연산자Null & UndefinedBOM & DOMDOM 요소 선택class 속성 값 변경오늘 하루를 돌아보며 부정 연산자참인 값(truthy)과 거짓인 값(falsey)을 뒤집는 역할을 하는 부정 연산자는 ! 기호를 사용한다. 참인 값은 거짓으로, 거짓은 값은 참으로 바꾼다.!true → false!false → true 때때로 두 개의 부정(!!) 연산자를 사용하여 이중 부정(Double negation)을 하기도 한다. 참으로 평가되는 데이터를 Boolean 값인 true로 변경하거나 거짓으로 평가되는 데이터를 false로 변경한다. Boolean()을 사용하는 것보다 이중 부정이 코드를 더 적게 사용하여 동일한 결과를 만들기 때문에 이중 부정을 더 많이 사용한다. Null & Undefi.. 2025. 6. 14. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 34 (객체, 조건문, 객체 비교) 목차객체(Object)조건문객체 비교오늘 하루를 돌아보며 객체(Object)객체(Object)는 JavaScript에서 매우 중요한 데이터 타입이다. 변수에 기억할 수 있는 데이터 타입은 기본(원시) 타입과 객체 타입 두 가지 뿐인데, 그 중 하나인 것이다. 객체는 키(key)-값(value) 쌍을 포함하는 데이터다. 중괄호 안에 키-값 쌍을 작성해서 객체를 생성한다. 여러 키-값 쌍은 쉼표로 구분하여 생성한다. 객체의 키와 값은 국어사전의 단어와 정의라고 볼 수 있다.const 객체 = { '키1': 값1, '키2': 값2,} HTML의 설명 목록(dl > dt + dd)이나 CSS의 스타일 블록이 객체와 유사하다고 볼 수 있다. 객체에 포함할 수 있는 값객체는 JavaScript에서 유효한 모든 .. 2025. 6. 12. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 33 (반환문, 표현식, 호이스팅, 화살표 함수 표현식) 목차함수 반환문(Function Return Statement)함수 표현식(Function Expression)호이스팅(Hoisting)화살표 함수 표현식(Arrow Function Expression)오늘 하루를 돌아보며 함수 반환문(Function Return Statement)함수는 return 키워드를 사용해 반환문(return statement)을 설정할 수 있다. JavaScript 엔진은 함수가 사용될 때 return 키워드를 확인하면 실행을 중단하고 값을 반환한다. 함수에 return이 없으면 출력도 없다.function sum(num1, num2) { // 함수를 사용하면 반환되는 값 return num1 + num2 // 이 코드는 무시됨 console.log('숫자1 + 숫.. 2025. 6. 11. 이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음 반응형
