프로젝트에 innerText를 처음 써보았는데 자동완성으로 innerHTML이 먼저 뜨기도 했고, 둘의 차이점이 무엇인지 알고 싶어서 공부해봐야겠다고 느꼈다. HTMLElement.innerText HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링된 텍스트 콘텐츠를 나타낸다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공한다. ✔️ 참고: innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 갖고 있다. 기본적으로 innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않다. CSS로 display:none의 속성이 적용..

기존 강의에서는 background를 img 파일에 적용했고, 그에 따라 배경으로 적용하기 위해선 CSS의 변경이 많을 수 밖에 없었다. background는 background로 적용시키는 것이 적절하다고 생각했고, 변경했다. 그 과정도 포스팅해보고 기존 강의에서 사용한 코드들도 전부 복습해보려 한다. Math Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. 함수 객체 아님. Number 자료형만 지원하고 BigInt와는 사용할 수 없다. 다른 전역 객체와 달리 Math는 생성자가 아니다. Math의 모든 속성과 메서드는 정적이다. 우리는 여기에서 Math.floor()와 Math.random()을 사용해볼 것이다. Math.floor() Math.floor() 함수는 주어..

시간은 쉬울 것 같다가도 막상 잡게 되면 어렵다. 특히 그냥 단순 현재 시간을 보여주면 되는 게 아니라 UI에 잘 맞게 구현해야하기 때문에 생각보단 까다롭다. 구현할 일이 많을 것 같으니 익혀두기 위해 기록하자! JavaScript Date() 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다. Constructor Date() 함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환한다. new Date() 생성자로 호출할 경우 새로운 Date 객체를 반환한다. Static m..

강의를 들으며 사용한 코드에 대해 전부 알아보고 공부하기 위해 정리해보겠다! Submit event Submit 이벤트는 이 제출될 때 발생한다. 요소 자체에서 발생하며, 그 안에 있는 이나 에서는 발생하지 않는다. 하지만 SubmitEvent에는 제출 요청을 Trigger한 버튼인 Submitter 속성이 포함되어있다. 사용자가 Submit 버튼을 클릭하거나 양식(form)내의 필드를 편집하면 발생한다. addEventListener()와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정한다. Test field: Submit form function logSubmit(event) { log.textContent = `Form Submitted! Timestamp: ${event.ti..

이번 프로젝트에서 처음으로 사용해본 로컬스토리지 🤔 네트워크 강의 때 공부 했었는데 막상 개발자분이 세션 스토리지와의 차이점을 여쭤봤는데 대답을 하지 못했음.. 반성하고 다시 공부해보자! `localStorage` 웹 애플리케이션에서 클라이언트 측에서 데이터를 저장하고 관리하는 데 사용하는 기능 중 하나. 사이트 및 앱이 만료날짜 없이 웹 브라우저에 키-값 쌍을 저장할 수 있도록 하는 속성(Property)이다. 사용자가 브라우저를 닫거나 컴퓨터를 다시 시작한 후에도 저장된 데이터는 유지된다. localStorage는 window 객체의 속성 중 하나로 브라우저 창과 상호작용하고 제어할 수 있는 전역 객체(Global object)로서 사용된다. 또한 window 속성과 메서드와 함께 사용할 수 있다. ..

프로젝트 중 상수를 대문자로 쓰는 게 관례라고 해서 왜 그런 것인지, 꼭 지켜야만 하는 것인지에 대해 생각해보려 한다! 상수 Constant 프로그래밍에서 변하지 않는 것을 의미한다. 상수는 변수에 할당되지만 프로그램 실행 중에는 변경하거나 수정할 수 없는 값이다. 일반적으로 시간이 지나도 변하지 않는 고정 값 또는 값을 나타내는 데에 사용된다. `const` 키워드를 사용하여 정의되며 상수 값은 일단 정의되면 수정할 수 없다. (JS에서 배열 일부를 변경하는 것은 가능함, 참조하는 주소값을 변경하는 것은 아니라서. 통째로 바꾸려는게 안된다는 것. ) JavaScript는 변경할 수 없는 값을 선언하는 방법을 제공할까? 관습의 뿌리는 어디일까! The capitalization convention has..

얼마전, 크롬 웹 스토어에서 확장 프로그램으로 많이 쓰이는 Momentum Dashboard 서비스를 따라 만들어 보았다. 애플리케이션은 정확히 어떤 것이고, 그 중에서도 웹 앱에 대해서 깊게 알아보고 싶어서 공부해보게 되었다. 애플리케이션 Application 서버와 클라이언트는 컴퓨터의 역할에 따라 구분된다고 했다. 그러면 컴퓨터의 역할은 누가 어떻게 정하는 걸까? 서비스를 제공하는 애플리케이션이 설치된 컴퓨터가 서버, 서비스를 요청하고 받는 애플리케이션이 설치된 컴퓨터가 클라이언트 역할을 한다. 애플리케이션은 운영체제OS, Operating System 위에 설치되어 운영체제의 도움을 받아 실행되는 응용 소프트웨어(Application Software)를 의미한다. 플랫폼이나 맥락에 따라 프로그램,..

Computer Science의 필수, 자료구조. 듣기야 많이 들었는데 대체 뭘까? 왜 자료구조와 알고리즘 공부의 필요성을 강조하는 걸까? 이런 공부를 통해 얻을 수 있는 것은 무엇일까? 직접 알아보고 생각해보고 느껴보자! 강의로 배열을 공부하면서 배열이 자료구조의 제일 쉽고 기본적인 형태라고 들어서 제대로 짚고 넘어가자고 생각했다. 테스트 코드를 만들며 겪은 문제들을 해결하는 과정도 포스팅 해보겠다. 자료구조 Data Structure 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 의미한다. 더욱 정확히 말하면, 자료구조는 데이터 값의 모임, 데이터 간의 관계, 데이터에 적용할 수 있는 함수나 명령을 의미한다. 컴퓨터가 데이터를 효율적으로 다룰 수 있게 도와주는 데이터 보관 방법과 ..

JavaScript에서 내장객체를 사용하는 퀴즈를 풀게 되었다. 1초에 한 번씩 날짜를 포함한 시간을 출력하는 문제이다. 제시받은 `setInteval()`메서드를 사용하면 된다. setInterval(callback, delay); // callback : 지정된 시간 간격마다 실행될 콜백 함수 // delay : 콜백 함수가 실행되기 전의 시간 간격을 밀리초 단위로 지정함. const intervalID = setInterval(whatTime, 1000); function whatTime() { const now = new Date(); console.log(now); } setInterval() Window 및 Worker 인터페이스에서 제공되는 `setInterval()`메서드는 각 호출 사이에..

📚 Testing JavaScript Applications 를 공부하면서, 장바구니 시스템을 사용하면서 선택 삭제, 전체 삭제 기능을 만들어보았다. 그 중 선택 삭제 기능에서, 책 예제에 있는 것을 그대로 받아들이기 보다, 좀 더 모던하게 보여줄 순 없을까를 고민했다. 책 예제 코드 class Cart { constructor() { this.items = []; } addToCart(item) { this.items.push(item); } removeFromCart(item) { for (let i = 0; i < this.items.length; i++) { const currentItem = this.items[i]; if (currentItem === item) { this.items.spli..