현우의 개발상자

Findings (배운 점) JS getAttribute HTML 요소의 속성 값을 가져오는 JavaScript 메서드이다. 예를 들면, 이미지 태그 는 "src"라는 속성을 가지고 있는데, "getAttribute" 메서드는 이러한 속성 값을 JavaScript 코드에서 읽어올 때 사용된다. setAttribute HTML 요소의 속성 값을 설정하는 JavaScript 메서드이다. 예를 들어, 링크 태그 는 "href"라는 속성을 가지고 있는데, setAttribute 메서드는 이러한 속성 값을 JavaScript 코드에서 변경하거나 추가할 때 사용된다. 클릭하세요 removeAttribute HTML 요소에서 속성을 제거하는 JavaScript 메서드이다. 속성 제거 className HTML 요소의..

Apply (적용) JS 0 - + * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-content: center; margin-top: 200px; } #myNumber { font-size: 100px; } .btnBox { display: flex; gap: 10px; } .a { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 50px; } .color-btn { width: 30px; height: 30px; border: none; cursor: pointer; marg..

JS Window 객체 Window 객체는 웹 브라우저의 창을 나타내는 객체이다. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체로서, 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 Window 객체의 프로퍼티가 된다. Window 객체의 메서드는 전역 함수이며, Window 객체의 프로퍼티는 전역 변수가 됩니다. Window 객체는 브라우저 창이 열릴 때마다 하나씩 생성된다. Window 객체의 메소드 alert(message) 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄운다. alert(안녕하세요 최현우입니다.) prompt([message, default) 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메시지를 갖고 있는 대화 상자를 띄운다. defau..

8월에 진행했던 일들을 정리하고, kpt회고 방식을 적용하여 이번달의 잘한 점, 못한 점을 파악하고 이를 통해 다음 달에는 더 나은 방법으로 어떻게 공부할지를 적었다. KPT 회고란? https://brunch.co.kr/@jinha0802/35 KPT 회고란 무엇인가? 스타트업에서 KPT 회고는 언제 필요하며, 왜 해야 하는가? | 1. KPT 회고란? KPT회고는 다양한 회고 방법론 중 하나이다. Keep, Problem, Try의 약자로 회고 내용을 세 가지 관점으로 분류하여 회고를 진행 brunch.co.kr 이번 달에 난 뭘 했지? 🤔 수업 잘한 점은 수업을 통해서 이해하지 못한 부분과, 추가적으로 알고 싶은 내용에 대해 구글링과 인강을 통해 충족했다. 못한 점은 규칙적인 생활을 했었는데, 개인..

Findings (배운 점) JS window 웹 브라우저 창을 나타내는 전역 객체이다. 웹 페이지를 웹 브라우저에서 열면, 그 페이지는 window 객체 안에서 실행되며, 페이지 내에서 모든 스크립트와 코드가 접근할 수 있는 전역적인 콘텍스트 역할을 한다. 🙌 전역적인 콘텍스트는 프로그램의 가장 바깥쪽 범위, 즉 어떤 함수 안에도 포함되지 않은 최상위 범위를 말한다 console.dir 개발자가 자바스크립트 코드를 작성하면서 만든 객체의 내용을 좀 더 편하게 볼 수 있게 도와주는 도구이다. 이 도구를 사용하면 객체 안에 어떤 정 보가 들어있는지, 그 정보들이 어떻게 구성되어 있는지를 트리 모양으로 펼쳐서 보여준다. 이렇게 해서 객체의 내부를 더 잘 파악하고 문제를 해결하거나 코드를 개선하는 데 도움을 ..

JS DOM (Document Object Model) 웹 페이지의 구조와 내용을 프로그래밍 언어가 이해할 수 있는 객체로 나타낸 것을 말한다. 간단히 말하면, 웹 페이지를 컴퓨터가 이해하고 다룰 수 있는 형태로 변환해 주는 개념이다. JavaScript와의 관계 JavaScript를 사용하면 DOM을 조작할 수 있다. document 객체를 통해 웹 페이지의 DOM에 접근할 수 있고, 각 요소를 선택하거나 조작할 수 있는 메서드와 속성을 사용할 수 있다. 이를 통해 동적으로 웹 페이지를 변경하거나 상호작용하는 기능을 구현할 수 있다. document.getElementById() getElementById() 메서드는 document 객체의 메서드 중 하나로, 주어진 ID를 가진 요소를 찾아 반환한다...

JS push() 원본 배열의 마지막 요소 다음에 새로운 요소를 추가하고, 그 배열의 새 길이를 반환한다. reverse() 배열의 요소들을 역순으로 뒤집어주는 역할을 한다. 즉, 배열의 첫 번째 요소가 마지막으로, 두 번째 요소가 마지막의 바로 뒤 자리로, 그리고 마지막 요소가 첫 번째로 옮겨진다. // 원래 배열 let fruits = ['apple', 'banana', 'cherry', 'date']; // reverse() 메서드 사용 fruits.reverse(); console.log(fruits); // 출력: ['date', 'cherry', 'banana', 'apple'] join() 배열의 모든 요소들을 하나의 문자열로 결합하는 역할을 한다. 이때 각 요소들은 구분자(separator..

Findings (배운 점) JS while 문 while 문은 특정 조건이 참일 동안 반복적으로 코드 블록을 실행하는 제어 구문이다. while 문의 기본 구조 while (조건) { // 조건이 참일 경우 실행될 코드 블록 } 여기서 조건은 반복이 계속되는 동안 평가되는 불리언(Boolean) 표현식이다. 만약 조건이 참(true)이면, 코드 블록 내의 명령문이 실행된다. 이후에 다시 조건이 평가되며, 조건이 여전히 참이라면 코드 블록이 다시 실행됩니다. 이 과정이 조건이 거짓(false)이 될 때까지 반복된다. 예시 let count = 1; while (count