반응형 부트캠프47 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 39 (루프(Loop), forEach 루프) 목차루프(Loop)while 문do ... while 문for 문흐름 제어문배열 반복객체 반복forEach 루프오늘 하루를 돌아보며 루프(Loop)while 문while 문은 if 문과 유사한 구조로 if 키워드 대신, while 키워드를 사용한다. 단, 조건이 참일 동안 반복적으로 블록 내부의 코드가 실행된다는 점이 다르다. 그래서 while 문을 사용할 때는 무한 루프(Infinite Loop)에 빠지지 않도록 주의해야 한다. 루프가 종료될 수 있도록 특정 상황에서 조건이 거짓으로 평가되도록 해야 한다.function draw() { // 드로잉 코드 작성}// [조건] 반복자(iterator)let i = 0// [반복문] 조건 평가// i 값이 50보다 작으면 참 (반복)// 50이상이 되면 거.. 2025. 6. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 38 (배열, 배열 메서드, 루프) 목차배열(Array)배열 메서드루프(Loop)오늘 하루를 돌아보며 배열(Array)배열(Array)은 순서대로 번호가 붙은 원소들이 연속적인 형태로 구성된 구조다. 목록과 유사하게 여러 정보를 저장할 수 있는 특별한 객체다. 배열을 만들 때는 대괄호([])를 사용하여 생성한다. 배열을 생성하면서 여러 값(value)을 추가할 수 있다. 각 값은 쉼표로 구분한다. 배열 값으로는 모든 유효한 JavaScript 값을 할당할 수 있다. 기본 타입과 객체 타입 모두 가능하다.// 빈 배열 생성const shoppingCart = []// 여러 값을 가진 배열 생성const shoppingList = ['두부', '양파', '대파', '부추', '계란'] 배열 항목배열은 객체이기 때문에 속성과 메서드를 갖는다. .. 2025. 6. 18. 멋쟁이사자처럼 프론트엔드 부트캠프 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. 이전 1 2 3 4 5 6 7 ··· 10 다음 반응형
