Coding Story

const vertical = document.querySelector(".vertical"); const horizontal = document.querySelector(".horizontal"); const target = document.querySelector(".target"); const tag = document.querySelector(".tag"); document.addEventListener("mousemove", (event) => { const x = event.clientX; const y = event.clientY; console.log(`${x} ${y}`); // client => window 위에서 움직이는 좌표를 받음 vertical.style.left = `${x}p..

기본 값은 클릭시 검은색인데 안이뻐 보일때가 있다. 색상을 바꾸고 싶으면 이렇게 하면 된다. input:focus { outline: 1px solid gray; } 테두리를 아예 없애고 싶으면 none을 해주면 된다. input:focus { outline: none; }

미니 가계부앱 with vanilla javascript 바닐라 자바스크립트로 첫번째로 선택한 프로젝트는 가계부앱! 노마드코더 투두리스트 강의때 배웠던 내용들을 응용하였고 나머지는 구글링 해가며 코딩하였다. 실행 화면 (흔한 대학생의 가계부..) 기능 수입/지출, 종류, 금액, 내용 입력하면 전체 내역란에 리스트가 등록 => classList를 사용해 +버튼을 누르면 입력창이 나타남. 밑에서 위로 올라오는 css 애니메이션 사용 => 수입/지출은 라디오 버튼, 종류는 select 태그, 금액과 내용은 input태그로 각각 type은 number, text로 지정 => 지출 체크 시 금액은 입력 값이 양수든 음수든 모두 음수로 받음 => 가격이 양수인지 음수인지에 따라 빨간색, 초록색으로 색상 다르게 출력..

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com 항상 이리저리 해보면서 box shadow를 조정하는데, 그런 시간을 단축시켜줄 사이트를 발견했다. box shadow 미리보기 모양과 코드를 제공해주기 때문에 원하는 모양을 골라 코드를 복붙하기만 하면 된다!

// Fetch the items from the JSON file function loadItems() { return fetch("data/data.json") .then((response) => response.json()) //json으로 변환 .then((json) => json.items); //json 안의 items를 return } // 받아온 아이템들로 리스트를 업데이트 function displayItems(items) { const container = document.querySelector(".items"); container.innerHTML = items.map((item) => createHTMLString(item)).join(""); //join -> 문자열의 배열을 하..

https://www.acmicpc.net/problem/1546 1546번: 평균 첫째 줄에 시험 본 과목의 개수 N이 주어진다. 이 값은 1000보다 작거나 같다. 둘째 줄에 세준이의 현재 성적이 주어진다. 이 값은 100보다 작거나 같은 음이 아닌 정수이고, 적어도 하나의 값은 0보 www.acmicpc.net 문제 세준이는 기말고사를 망쳤다. 세준이는 점수를 조작해서 집에 가져가기로 했다. 일단 세준이는 자기 점수 중에 최댓값을 골랐다. 이 값을 M이라고 한다. 그리고 나서 모든 점수를 점수/M*100으로 고쳤다. 예를 들어, 세준이의 최고점이 70이고, 수학점수가 50이었으면 수학점수는 50/70*100이 되어 71.43점이 된다. 세준이의 성적을 위의 방법대로 새로 계산했을 때, 새로운 평균을..

클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성이다. 렉시컬 스코프(정적 스코프) 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 것을 말한다. = 상위 스코프에 대한 참조('외부 렉시컬 환경에 대한 참조'에 저장할 참조값)는 함수가 정의된 위치에 의해 결정된다. 함수 객체의 내부 슬롯 [[Environment]] 함수가 정의된 위치와 호출되는 위치는 다를 수 있다. 함수가 정의된 위치인 상위 스코프를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯에 자신이 정의된 환경(상위 스코프의 참조)을 저장한다. 클로저 const x = 1; // ① function outer() { const x = 10; const inner = fu..

실행 컨텍스트 자바스크립트의 동작 원리의 핵심 개념이다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드 함수 코드 eval 코드 모듈 코드 소스코드의 평가와 실행 평가 실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 스코프에 등록한다. 실행 선언문을 제외한 소스코드가 순차적으로 실행된다. 소스코드 실행에 필요한 정보는 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득하고, 소스코드의 실행결과는 다시 스코프에 등록된다. 실행 컨텍스트의 역할 전역 코드 평가 전역 코드 실행 함수 코드 평가 함수 코드 실행 이러한 순서로 소스코드를 실행하고, 실행 컨텍스트는 이를 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 내부 메커니즘이다. 모든 코드는 실행 ..

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. *this 바인딩: this(식별자 역할)와 this가 가리킬 객체를 연결하는 과정 // this는 어디서든지 참조 가능하다. // 전역에서 this는 전역 객체 window를 가리킨다. console.log(this); // window function square(number) { // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); // window return nu..

자바스크립트 객체의 분류 표준 빌트인 객체: ECMAScript 사양에 정의된 객체. 실행환경과 관계없이 항상 사용 가능 호스트 객체: 실행 환경에서 추가적으로 제공하는 객체 사용자 정의 객체: 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체 표준 빌트인 객체 생성자 함수 객체: String, Number, Boolean, Function, Array, Date 생성자 함수가 아닌 객체: Math, Reflect, JSON 래퍼 객체 원시 값이 있는데도 객체를 생성하는 표준 빌트인 생성자 함수가 존재하는 이유는? 원시 값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체로 변환해준 다음 다시 원시 값으로 되돌리기 때문이다. 이처럼 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성..