프로토타입 객체 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 합니다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. __proto__ vs prototype 프로퍼티 prototype 함수 객체만 가지고 있는 프로퍼티이다 생성된 객체가 부모를 가르킵니다. 즉, 생성자 함수(또는 클래스)가 제공하는 공통 정보를 담 제공하는 객체라고 생각하시면 됩니다. => foo라는 인스턴스는 부모인 Person 객체(정보를 제공하는 객체) 가르킵니다. __proto__ === [[Prototype]]입니다. 함수를 포함한 모든 객체가 가지고 있습니다. 자신의 부모 역할을 하는 프로토…

실행컨텍스트 실행 가능한 자바스크립트 코드 블록이 실행되는 환경이다. 실행컨텍스트가 활성화되면 다음과 같은 동작을 수행한다. 활성 객체와 변수 객체 생성 활성 객체 : 각 컨텍스트 실행에 필용한 정보블 담은 객체를 말한다 변수 객체 : 실행 컨텍스트 내부에서 사용되는 지역 변수의 생성이 이루어진다 함수 실행을 보면 보통 함수의 매개변수가 함수 내부에 선언된 지역변수로 사용되기 때문에 실질적으로 활성객체는 변수 객체와 같다고 생각하면 된다. 스코프 정보 생성 this 값 설정 (this 바인딩) 동작 과정 자바스크립트 코드 실행 전역 컨텍스트를 콜 스택에 추가 전역 컨텍스트 내부에 있는 코드들을 순차로 진행 outer에 대한 환경 정보 수집 (함수 내부에서 사용할 변수, 스코프 체인, this참조 => 만약 참조할 객체가 없으면 전역 객체 window 참조) outer 실행 컨텍스트 생성 후 콜 스택에 추가 전역 컨텍스트와 관련된 코드의 실행 일시중단 (콜 스택 맨 위에 outer…

Axios란? Axios는 JavaScript에서 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. 주로 비동기 통신(AJAX 요청) 을 수행할 때 사용되며, 브라우저 및 Node.js 환경에서 모두 동작합니다. Axios의 특징 Promise 기반 : fetch API와 달리, 자동으로 응답을 Promise 객체로 반환하여 then/catch 또는 async/await 구문을 사용할 수 있습니다. 요청 및 응답 인터셉터 제공 : 요청을 보내기 전이나 응답을 받은 후 , 데이터를 가공할 수 있습니다. 자동 json 변환 : json 데이터를 자동으로 변환하여 편리한 데이터 처리를 지원합니다. 취소 기능 지원 : 요청을 취소할 수 있어 불필요한 API 호출을 막을 수 있습니다. 타임아웃 설정 가능 : 네트워크 지연이 발생할 경우 일정 시간 후 요청을 자동으로 종료할 수 있습니다 브라우저 및 Node.js 지원 : 클라이언트와 서버 환경 모두에서 사용할 수 있습니다. …

Nullish란 nullish 병합 연산자 (??) 는 왼쪽 피연산자가 또는 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. 다른 예시를 보겠습니다!! 지금은 firstName, lastName 이 이기 때문에 nickName을 반환합니다. 하지만 nickName까지 null 또는 undefined면 “익명의 사용자”가 반환되겠죠? ”??“와 ”||“의 차이 height || 100 결과 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 height || 100의 평가 결과는 100입니다. height ?? 100…

필수 구현 사항 js TodoList 함수에 setState(nextData)라는 함수를 만듭니다 이 함수는 해당 컴포넌트 초기 생성 시 넘겼던 data 파라메터를 nextData로 대체하고 컴포넌트를 다시 렌더링합니다. 해당 함수를 추가한 뒤, new TodoList(…) 하는 코드 이후에 해당 컴포넌트의 인스턴스에 todoList.setState(새로운 배열) 형태로 데이터만 다시 넣었을 때 컴포넌트가 다시 렌더링 되도록 작성해주세요. setState 함수 호출 후 다시 todoList.render()를 호출하는 것이 아니라, setState 함수 내에서 화면을 다시 렌더링하는 것까지 처리해야 합니다. 소스코드 js render 함수 insertAdjacentHTML을 적용해 += 복합연산자를 사용하지 않는다. setState 함수 TodoList 함수는 data를 매개변수로 받고 있기 때문에 data = nextdata로 설정해 render 함수가 문제 없이 동작하게 한다 외…

필수 구현 사항 js data의 각 object에 외에 라는 필드를 추가합니다. 해당 값은 true, 혹은 false 값을 지정해주세요. 컴포넌트 내에 text 렌더링 시, isCompleted 값이 true인 경우 태그를 이용해 삭선처리를 해주는 걸 추가합니다. 소스코드 js render 함수의 isCompleted 값에 따른 삭선 추가 item.isCompleted 를 통해 true or false 값에 접근한다. if 문을 사용해 isCompleted 값이 true면 태그가 추가된다. 반대로 isCompleted 값이 false면 태그 없이 생성된다. 결과 js 소스코드 js render 함수의 isCompleted 값에 따른 삭선 추가 결과

필수 구현 사항 html 외의 다른 div를 두 개 더 html 코드에 만듭니다. 의 는 적당한 이름으로 지어주세요. js 외에 todo를 담고 있는 array data를 두 개 더 만듭니다. todo의 내용은 본인의 현재 todo를 담아서 넣으면 더 좋겠죠? 컴포넌트를 총 세 개 만듭니다. 첫 번째 컴포넌트에는 제가 넣어둔 data와 #todo-list에 렌더링하고, 나머지 두 개는 여러분이 추가하신 div + data를 활용해서 만들어주세요. 소스코드 html js TodoList에 id 매개변수 추가 함수에 id 매개변수를 추가해서 document.querySelector를 통해 해당 id 값을 가진 div태그에 접근한다. 각 컴포넌트에 해당되는 data가 출력이 되는걸 볼 수 있다 결과 html js 소스코드 html js TodoList에 id 매개변수 추가 결과

필수 구현 사항 null 혹은 undefined의 데이터가 넘어올때의 데이터 체크 인스턴스 확인하기 배열 확인하기 소스코드 html js 인스턴스 확인 new.target은 new 연산자를 사용했는지 여부를 감지하는 것이다. new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined다. null or undefined 확인 data가 null or undefined가 넘어오게 되면 false로 취급하기 때문에 Not 연산자와 만나 true가 되어 if문을 실행한다. 배열 확인 파라미터로 입력받은 data가 배열인지의 여부를 boolean 값으로 리턴한다. typeof를 사용해 배열을 검사하면, typeof는 ‘object’를 리턴한다. 왜냐하면 배열은 object의 특수한 한 형태이기 때문이다. 배열이 아닐경우에 false를 리턴하고 Not 연산…

필수 구현 사항 function style의 문법을 사용해주세요. new 키워드를 통해 생성해서 사용됩니다. 파라메터로 아래와 같은 형태의 data를 넘겨받습니다. 와 같은 형태로 파라메터를 넘기고, 생성해서 사용합니다. 해당 컴포넌트에 render 함수를 작성합니다. 이 함수는 파라메터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 innerHTML을 이용해 렌더링 되도록 합니다. 이 함수는 별도의 파라메터 없이 todoList.render() 형태로 실행되도록 만듭니다. 소스코드 html js render 함수 data 객체에서 값의 순회를 위해 forEach 문을 사용하였다. + data 객체 각각의 요소를 매개변수로 받아 진행한다. 위 코드에서는 2개의 변수를 받고 반복문을 2번 진행한다. item 변수는 객체 각각의 요소를 받기위한 변수로 원하는대로 지정해줘도 좋지만 일반적으로 item…

JS의 탄생 🍰 초창기 웹은 HTML,CSS만으로 이루어졌고 앵커태그를 이용해 문서 이동만 가능한 웹 문서였다. 웹과 이용자가 서로 상호작용하기 위해 HTML 요소를 조작할 수 있는 언어가 필요했다. 그래서 넷스케이프사에서 개발한 Netscape Navigator라는(LiveScript언어를 해석 할 수 있는 엔진을 탑재) 브라우저에서 동작할 수 있는 LiveScript언어를 개발했고 이후 당시에 유명한 자바 프로그래밍의 이름을 따서 JavaScript 라고 이름을 변경했다. 또 마이크로소프트에서는 J스크립트라는 언어와 우리가 잘 알고 있는 internet Explorer라는 브라우저를 출시했다. JavaScript와 J스크립트는 엄연히 다른 언어이기 때문에 개발자들은 각각의 브라우저에 맞게 개발을 진행해야하는 귀찮음을 마주했다. 그래서 넷스케이프사는 웹 페이지에서 동작하는 언어를 표준화하기 위해 자바스크립트 기술 규격을 Ecma 인터내셔널 이라는 단체에 제출했고 표준명세인 ECM…

Fill, Draw 모드 HTML - Fill, Draw 모드 app.js btnMode() 함수 먼저 Fill 모드와 Draw 모드를 한 버튼 안에서 실행하기 위해서 버튼의 텍스트를 바꾸는 작업을 해야한다. 변수를 선언하고 를 할당한다. 버튼을 클릭할때 Fill -> Draw로 바껴야 하기 때문에 함수의 부분에 을 할당하고 을 로 바꾸어 줘야 동적인 함수가 된다. 코드를 실행해보면 버튼을 클릭할때마다 글씨가 바뀌는걸 볼 수 있을 것이다. FrillDraw() 함수 일 때는 버튼의 글씨가 인 상태이다. 그래서 우리는 이 때 그림판을 클릭했을때 지정된 색으로 그림판을 채워주면 된다. if문을 사용해서 일때 ctx.fillRect(0, 0, 800, 800)를 사용해 그림판을 채운다 Erase, Reset 모드 HTML - Erase, Reset 모드 app.js Erase 모드는 그림판을 하얀색 선으로 Draw모드를 하는 것과 같다. ctx.strokeStyle = “w…

Canvas를 이용한 그림판 Html 구조 소스코드 style.css app.js (1) onMove() 함수 이 될때 를 통해 onMove함수의 참 부분이 실행된다. 함수의 event인자는 현재 click 되어지고있는 지점이다. click = mousedown 후에 mouseup이 되어야한다. mousedown = 마우스버튼 내리기 mouseup = 마우스버튼 올리기 를 통해 다음지점으로 선을 연결시킨다. 통해 연결한 선을 채운다. 이 진행될때 되서 if문의 거짓 부분을 실행해 마우스가 움직이는 위치를 시작점으로 바꾼다. 오류발생 그림을 그리는 중에 을 유지한채 그림판 밖을 나갔다 들어온후에 이 됐음에도 불구하고 마우스를 움직이는 것만으로도 그림을 그릴 수 있다. 오류 해결 오류를 해결하기위해 위의 코드를 추가해주자. 이제 마우스가 그림판 밖을 벗어날때도 함수가 실행돼 오류가 해결되는걸 확인할 수 있을 것이다. Html 구조 소스코드 onMove() 함수

색상과 선 굵기 바꾸기 Html style.css app.js colorOptions 를 배열로 바꾼것은 를 사용해 각각의 의 에 를 주기 위함이다. 를 사용하지 않게 되면 는 의 함수가 아니다 라는 로그를 볼 수 있을 것이다. 즉 를 사용하기위해 의 객체인 을 배열로 바꿔주어야 한다. onColorClick() 함수 통해 한 target의 색상을 로 지정 사용해 선의 색상을 지정해준다. 사용해 도형을 채우는 색상을 지정해준다. 사용해 현재 선택한 색상으로 바꿔준다. onColorOptionClick() 함수 우리가 html에서 에 를 설정한걸 기억할 것입니다. 를 통해서 우리가 click한 target의 data-color 값을 colorValue로 지정해 주었습니다. colorOptions onColorClick() 함수 onColorOptionClick() 함수

이미지 선택하기 Html 선택을 할때 비디오 영상인 아닌 image만 선택하기 위해서 를 사용했다. app.js onFileSelect() 함수 을 가리키는 을 으로 반환한다. image 객체를 생성해 속성들을 추가할 수 있다. 함수 내의 명령은 웹브라우저 내의 모든 요소가 준비된 후 실행이 되도록 힌다.. 라는 객체가 이미지를 불러온 후에 함수를 실행한다. Html

style 마무리 소스코드 login.css red, blue, green, opcity 순으로 값을 주어 배경 색 지정 배경색을 투명하게 지정 music.css volume.css 또는 속성을 통해 기본 CSS 스타일을 사용하지 않겠다고 선언해야만 위와 같은 CSS 스타일링을 반영할 수 있습니다. 그렇지 않으면 맨 기본적인 처럼 보이게 됩니다. clock.css todo.css backGround.css quote.css 소스코드 login.css music.css volume.css clock.css todo.css backGround.css quote.css

Quote 생성 소스코드 changeQuoute 함수 const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)] 0~1사이에 난수를 생성는 Math.random을 사용 발생한 난수를 quotes 배열의 길이 만큼 곱해 0 ~ quotes.length 사이에 난수를 생성 Math.floor를 사용해 소수점 뒷자리를 반올림해 정수를 생성 소스코드 changeQuoute 함수

List 작성하기 구현 소스코드 handleToDoSubmit(event) 함수 javascript가 발생한 event를 함수의 첫번째 인자로 주게된다. event의 기본 동작을 막는다 newToDo에 input의 값을 저장하고 엔터를 누를때 input을 비우기 위해 사용 newTodoObj 객체를 생성하고 text 에는 newToDo를 각 리스트의 분별력을 주기 위해서 id 값을 리스트가 작성된 시간으로 반영 할당된 객체는 toDos 배열에 채워넣는다 paintToDo()함수 li 태그 생성 생성된 li 태그의 id 값을 newTodoObj의 id로 할당 도 와 동일한 원리로 할당 휴지통 아이콘을 클릭할때 마다 해당 list를 제거하기 위해서 를 사용 를 head에 작성 -> span 태그를 생성 -> 생성된 span2의 class명을 할당 -> 생성된 span2의 Text 값을 할당 이 의 자식으로 들어가진다 이 먼저 선언되었으므로 li의 첫번째 후손으로…

Calendar 버튼 기능 구현 소스코드 preMonth() 함수 ’<’ 버튼을 누를때 이전달로 넘어가야 하기 때문에 를 이용해 현재 달에 -1 값으로 설정 재할당된 dt.setMonth를 가지고 renderCalendar() 호출 nextMonth() 함수 ’>‘버튼을 누를때 다음달로 넘어가야 하기 때문에 를 이용해 현재 달에 +1 값으로 설정 재할당된 를 가지고 호출 todaybtn() 함수 Today 버튼을 누를때 다시 현재 날짜로 돌아오기 위해 dt의 값을 로 할당해야기 때문에 초반에 dt 를 가 아닌 으로 설정한이유 소스코드 preMonth() 함수 nextMonth() 함수 todaybtn() 함수

를 선택해 전체적인 태그들의 **margin과 padding을 없애준다 달력을 가운데 정렬하기위해서 좌우 가운데 정령을 위해 위아래 가운데 정렬을 위해서 캘린더의 크기를 설정 해 줍니다 header안에 있는 날짜와 버튼을 좌우 양쪽 정렬과 상하 가운데 정렬을 해주기 위해서 와 를 사용 그리고 버튼을 한줄로 정렬하기 위해서 사용 사용해 버튼의 선을 제거 사용해 배경색을 지정하지 않음 days 클래스에 있는 요일들을 한줄로 정렬하기 위해 사용 margin : 위 좌우 아래; 속성을 이용해서 margin 값을 줌 요일은 7개이므로 각 요일의 너비를 같게 하기위해서 100%/7의 값을 너비값으로 줌 각 날짜들의 정렬을 위해서 를 사용 아이템들의 자연스러운 줄바꿈을 위해서 을 사용 height를 고정할시 아이템의 갯수에 상관없이 주어진 픽셀에 맞춰 자연스운 줄 바꿈을 할 수 있다. 날짜도 한줄에 7개가 있어야 하므로 100%/7의 값을 너비값으로 줌 토요일과 일요일 colo…

Calendar 기능 구현(1) 위 사진은 바로 우리가 만들 달력의 결과물입니다. 위와 같은 달력을 만들기 위해서 처음부터 천천히 진행해 봅시다!!! 소스 코드 renderCalendar 함수 날짜 구하기 연도를 가져오는 변수 설정 월을 가져오는 변수 설정 document.querySelector(“.year-month”).textContent = dt.getMonth는 반환 값이 현지 시간 기준 월을 나타내는 0 에서 11 사이의 정수를 반환한다 0은 1월, 1은 2월 2은 3월…을 나타내므로 해당 월 출력하기 위해서 +1을 해줘야한다 매달 마지막 요일 날짜 수가 다르기 때문에 해당되는 월의 마지막 날짜와 요일을 얻는 코드를 작성해야 합니다 다음달 마지막 날짜 이번달 마지막 날짜 지난달 날짜의 일부분과 이번달 날짜를 출력하기 위해 변수 설정 새로운 Date객체를 생성할 때, date 파라미터에 0을 전달하게 되면 지난달의 마지막 날의 Date 객체가 생성됩니다 같은 원…

API를 이용해 날씨 정보 가져오기 소스코드 장치의 현재 위치를 가져오게 됩니다 위치를 얻는데 성공하면 onGeok() 함수를 실행하고 실패시 onGeoError() 함수를 실행 API 이용 google에 openWeather -> API -> Current weather data에 접속 로그인 진행 후 영문이름을 클릭하게 되면 MY API KEYS를 통해서 Key값을 확인 onGeoOk 함수 onGeoOk() 함수의 인자는 GeolocationPosition 객체를 가져온다 GeolocationPosition 객체의 position.coords 부분을 보게 되면 위도와 경도를 확인할 수 있다 API 호출 예시를 보게 되면 https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY} 되어 있다 부분을 추가하게 되면 섭씨로된 온도를 확인할 수 있다 fetch(url) 을 통해 반환받은 …

아래에는 제가 보고 clone한 todolist 페이지 입니다!! 모멘떰 HTML구조 작성 소스코드 login login_form input의 유효성을 검사하기 위해서 form 태그를 사용 clock calendar dates js로 날짜를 대입하기 위해서 만들어 둠 style.css 기본구조 작성 box-sizing: border-box box-sizing 에 대한 설명 높이는 100vh를 너비는 100vw를 할당 -> 는 부모 태그와는 상관없이 보이는 Viewport Height의 100%를 다 쓰겠다는 의미입니다. -> 는 부모 태그와는 상관없이 보이는 Viewport width의 100%를 다 쓰겠다는 의미입니다. 테두리된 영역을 좌우, 상하 가운데 정렬하기 위해 를 적용하고 와 사용 main의 영역을 보면 와 두개의 역역을 나눠진다. 와 영역을 보면 의 축이 column로 되어있다. 를 적용하고 를 사용해 축을 으로 설정 body의 영역과 …

mp3 player 기능 소스코드 play 함수 mp3.loop = true : 오디오를 반복 재생함 mp3.volume = soundBtn.value 음량은 0.0 ~ 1.0 사이 값으로 지정할 수 있고, 1.0이 가장 큰 음량 자주 쓰이는 Audio 객체의 속성 audio가 load 될 때 자동재생됨 audio의 재생시점을 5초로 설정함 audio의 길이를 초(seconds) 단위로 반환 audio를 반복 재생함 audio의 경로를 지정함(URL) audio의 음량을 0.2로 지정함 음량은 0.0 ~ 1.0 사이 값으로 지정할 수 있고, 1.0이 가장 큰 음량 자주 쓰이는 Audio 객체의 메소드 오디오를 재생시킴 오디오를 일시정지함 audio를 다시 load함 주로 audio의 src나 설정이 바뀌었을 경우에 사용 소스코드 play 함수 자주 쓰이는 Audio 객체의 속성 자주 쓰이는 Audio 객체의 메소드

배경화면 바꾸기 기능 구현 소스코드 배경이미지 랜덤 생성 이미지 태그를 생성하기 위해 document.createElement(“img”) 를 사용함 createElement()에 생성하고자 하는 태그를 입력 const chosenImage = images[Math.floor(Math.random() * images.length)] 배경 선택을 랜덤으로 하기 위해서 0~1사이에 난수를 생성는 Math.random을 사용 발생한 난수를 images 배열의 길이 만큼 곱해 0 ~ images.length 사이에 난수를 생성 Math.floor를 사용해 소수점 뒷자리를 반올림해 정수를 생성 암호학적으로 안전한 난수를 발생시키지 않아 보안과 관련해서는 사용하지 말아야 한다 그 대신 Web Crypto API의 window.crypto.getRandomValues() 메소드를 이용하여야 한다. bgImage.src = img/${chosenImage} 생성된 img태그의 src를 지정 do…

login 기능 구현 소스코드 JavaScript style.css document는 js가 html에 접근하기 위해서 사용되어짐 HTML 요소의 선택은 다음과 같습니다 document.getElementsByTagName(태그이름): -> 해당 태그 이름의 요소를 모두 선택함. document.getElementById(아이디): -> 해당 아이디의 요소를 선택함. document.getElementsByClassName(클래스이름): -> 해당 클래스에 속한 요소를 모두 선택함. document.getElementsByName(name속성값): -> 해당 name 속성값을 가지는 요소를 모두 선택함.. document.querySelectorAll(선택자): -> 해당 선택자로 선택되는 요소를 모두 선택함. onLogin 함수 event.preventDefault() login_input.value의 값을 가져오기 위해서 form태그의 자동으로 submit되고 페이지…