yOu gOOd ?!

function solution(arr) { // 재귀 호출을 위한 내부 함수를 만든다. // 이 함수는 처리해야 할 배열의 부분을 인자로 받는다. function recursiveOR(currentArr) { // **베이스 케이스:** 만약 현재 처리할 배열이 비어있다면 (길이가 0이라면) if (currentArr.length === 0) { // 더 이상 OR 할 게 없으니 0을 반환하고 재귀를 멈춘다. return 0; } // **재귀 스텝:** // 1. 배열의 첫 번째 요소를 가져온다. const firstBinaryString = currentArr[0]; ..

바닐라 자바 스크립트로 컴포넌트 구현, api 로 데이터를 가져오는 작은 과제를 하는데 "바닐라", "컴포넌트"로 하려니 ㅇ-ㅇ 상태되어서 아무것도 못하겠더라. 리액트는 잘 모르고 스벨트는 좀좀따리 강의를 듣는 중이라 스벨트로 구현하고 바닐라로 옮길 계획을 세웠다. 확실히 스벨트로 하니 신경쓸게 적어서 좋았다. 하나의 컴포넌트가 하는 일은 하나의 파일에서만 작성하면 되니까 하나의 파일에서 handle을 정의하고 내려줄 일이 적어지니 참 편했다. 모르겠는 부분은 문서와 구글링, ai 도움 조금으로 금방 해결됐다. 그리고 이 완성된 파일들을 ai에게 자바스크립트 컴포넌트 파일로 변환하라고 "시켰"더니 "해줬"다. 파일을 열어 코드를 뜯어보는데 app.js 파일 갔다가 컴포넌트 파일 갔다가 와리가리를 너무..

1. 왜 클래스?단순 함수와 전역 변수: 가장 간단하지만, 여러 카운터를 만들 경우 상태 관리가 복잡해지고 변수 이름 충돌이나 스코프 문제가 생기기 쉬웠다.클로저(Closure) 활용: 클로저를 이용해 상태를 숨기고 함수를 반환하는 팩토리 함수 패턴도 가능했다. 상태를 비공개로 유지할 수 있다는 장점이 있지만, 여러 인스턴스를 만들 때마다 함수들이 새로 생성되는 점, 그리고 '틀'로서의 명확성이 클래스보다는 부족하다고 느껴졌다.ES5 생성자 함수와 프로토타입: new 키워드와 함께 사용하는 전통적인 방식이다. 클래스와 가장 유사하지만, prototype을 직접 다뤄야 해서 문법이 다소 번거롭고 가독성이 떨어진다고 생각했다.이런 점들을 고려했을 때, ES6의 class 문법이 관련 데이터(상태)와 기능(메..

만들면 생성되고 실행된다. 코드가 이해 안 간다면 줄줄이기차, 해라.

냅다 시작합니다. 왜냐하면 나는 바닐라로 함수범벅인 코드만 짜봤기에 .. 해보고 싶어졌다. 내 머리로. 과연 .. 5:42pm 5:57pm if (this.data.data[this.data.currentIndex].answerIndex === parseInt(selectedIndex)) {            this.data.upScore();            console.log("정답")        } else {            console.log("오답")        } 이것. 뭐예요~?6:15pm 얼추 완성. 어디서 어떻게 접근해야하는지는 감이 잡혔음. 허나, MVC 패턴의 관점에서 현재 코드를 분석해보겠습니다.현재 코드는 MVC 패턴의 기본적인 구조는 가지고 있지만, 몇 가지 ..

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/data-* data-* - HTML: Hypertext Markup Language | MDNdata-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.developer.mozilla.org  하나씩 뜯어보자!container.dataset.maxRating 이게 뭐야? maxRating 속성은 어디서 왔어?이건 HTML의 data-* 속성과 관련이 있음! HTML 태그에는 우리가 직접 필요한 데이터를 저장하기 위해 data- 로 시작하는 속성..

window.requestAnimationFrame() 완벽 정리 (MDN Web Docs)이 문서는 MDN Web Docs의 window.requestAnimationFrame() 페이지를 기반으로 핵심 내용을 상세하게 정리하고, 이해를 돕기 위해 추가 설명과 예시 코드를 포함합니다.1. requestAnimationFrame()이란?정의: window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트(repaint)가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하도록 요청하는 메서드입니다. 즉, 브라우저의 렌더링 주기에 맞춰서 애니메이션을 부드럽게 처리할 수 있게 해주는 API입니다.동작 방식:requestAnimationFra..

1. :not() 의사 클래스 (Negation Pseudo-class):not()은 특정 조건을 만족하지 않는 요소를 선택함.괄호 안에 선택자를 넣어 해당 선택자에 해당하지 않는 요소에만 스타일 적용함.선택자:not(제외할_선택자) { /* 스타일 */}  제외할 선택자에 들어갈 수 있는 것:단순 선택자 (Simple Selector):타입 선택자 (Type Selector): div, p, span, a 등 HTML 태그 이름클래스 선택자 (Class Selector): .my-classID 선택자 (ID Selector): #my-id전체 선택자 (Universal Selector): *속성 선택자 (Attribute Selector): [type="text"], [data-value] 등일부 의..

폼 (폼푸린) Enter your name: Enter your email:  📌 action, method action양식 데이터를 처리할 프로그램의 URI 지정, , 요소의 formaction 특성으로 재정의 가능 method양식을 제출할 때 사용할 HTTP 메서드.post: POST 메서드. 양식 데이터를 요청 본문으로 전송get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송검색에 사용dialog: 양식이 안에 위치한 경우, 제출과 함께 대화 상자를 닫음, , 요소의 formmethod 특성으로 재정의 가능 Name: Save Name: Save Title ..

HTML 전역 속성전역 속성은 모든 HTML 요소에 사용할 수 있는 속성입니다. (일부 요소에서는 효과가 없을 수 있지만, 문법적으로는 사용 가능) 핵심 전역 속성accesskey: 요소에 대한 단축키를 지정합니다.브라우저 및 운영체제에 따라 단축키 조합이 다를 수 있습니다. (접근성 문제 유발 가능성)사용자에게 단축키 정보를 명확하게 제공해야 합니다. autocapitalize: (모바일 장치 가상 키보드) 텍스트 입력 시 자동 대문자 변환 방식을 제어합니다.off / none: 자동 대문자 변환 없음.on / sentences: 문장의 첫 글자를 대문자로.words: 각 단어의 첫 글자를 대문자로.characters: 모든 글자를 대문자로. autofocus: 페이지 로드 시 요소에 자동으로 포커스를..

역할: HTML 문서의 메타데이터를 담는 컨테이너.위치: 요소 바로 아래, 요소 앞에 위치.특징: 요소 내의 내용은 웹 페이지에 직접 표시되지 않습니다. 핵심 메타데이터 요소 역할: 문서의 제목을 정의.중요성:브라우저 탭, 북마크, 검색 결과에 표시되는 제목.검색 엔진 최적화(SEO)에 매우 중요.접근성 측면에서 스크린 리더 사용자에게 페이지 내용을 알려주는 역할.권장 사항:페이지 내용을 명확하고 간결하게 요약 (55-60자 이내).핵심 키워드를 포함.페이지마다 고유한 제목 사용.참고: 하나의 HTML 문서에는 단 하나의 요소만 존재해야 합니다. 역할: 다양한 종류의 메타데이터를 정의. name과 content 속성을 사용하여 정보를 지정.주요 사용 예:charset: 문자 인코딩 설정 (예: U..

📌 마크업 언어, 마크다운 언어상식선에서 접근 해보면 마크업은 기계가 읽은 언어 같고 마크 다운은 사람이 읽을 수 있게 글을 쓰는 언어라 생각된다. 개발자가 아닌이상 HTML 을 뜯어보지는 않으니까 ..벨로그, 깃허브 리드미, 요즘에는 티스토리도.그리고 노션도 ! 마크다운 언어를 사용한다.단순한 문법으로 꼭 필요한 내용만 쓸 수 있도록 해준다. 📌 마크업 언어 (Markup Language)텍스트에 태그를 사용하여 문서의 구조와 서식을 정의하는 언어.HTML (Hypertext Markup Language): 웹 페이지의 구조와 내용을 정의하는 데 사용하고, 태그를 사용하여 텍스트, 이미지, 링크 등을 구성하고 브라우저에 표시한다.XML (Extensible Markup Language): 데이터를 ..