[자바스크립트 js] AND와 OR의 연산 방식

AND와 OR 연산자는 무조건 불린 값을 리턴하지 않고, 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다. AND 연산자 console.log(true && true); //true console.log(true &&..

[자바스크립트 js] null 병합 연산자 (Nullish coalescing operator)

null 병합 연산자 ?? 물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자. 왼쪽 값이 null이나 undefined라면 오른쪽 값이 리턴된다. 왼쪽 값이 null이나 undefined가 아니라면 왼쪽 값이 리..

[자바스크립트 js] 변수와 스코프 / 함수 스코프 / 블록 스코프

1. 변수 이름을 통해서 어떠한 값에 특별한 의미를 부여할 수 있음. 프로그래밍에서 추상화에 가장 기본적인 수단 1-1. var 변수 이름 중복 선언 가능(값의 재할당) 변수 선언 전에 사용 가능(호이스팅) 함수 스코..

[자바스크립트 js] 함수 만들기 / 함수 선언 / 함수 표현식 / 파라미터(매개변수) / 아규먼트(전달인자) / 즉시 실행 함수

함수 선언 - 보편적으로 사용 function 키워드를 통해서 함수를 선언하는 방식. 호이스팅 가능 : 함수를 선언하기 전에 함수를 호출해도 코드가 동작된다. 함수 스코프를 가진다. function 함수이름(파라미터) {..

[자바스크립트 js] mouseenter / mouseleave VS mouseover / mouseout

mouseenter와 mouseleave는 버블링이 일어나지 않는다. mouseenter와 mouseleave는 자식 요소의 영역을 계산하지 않는다. 이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고 싶은 경우에는 mouseover/mouseout..

[자바스크립트 js] data-* / dataset

자바스크립트로 HTML 태그의 비표준 속성을 활용할 때 HTML 태그에 data-* 형태로 속성을 작성하고, 자바스크립트로는 DOM의 dataset 프로퍼티를 활용하면 안전하게 비표준 속성을 다룰 수 있다. HTML JS functio..

[자바스크립트 js] 키보드 이벤트 / keydown / keypress / keyup

키보드 이벤트 타입 KeyboardEvent.type keydown : 키보드 버튼을 누른 순간 / 키보드를 꾹 누르고 있을 때 한번만 실행됨 a = 65, A = 65 동일한 값이 보여짐 keypress : 키보드 버튼을 누른 순간 / 키보드를 누..

[자바스크립트 js] input 태그 / input 태그 종류 / 포커스 이벤트 / 입력 이벤트

input 태그 종류 text password button checkbox 등 종류 더 있음 포커스 이벤트 (키보드나 마우스 동작에 반응함) focusin : 요소에 포커스가 되었을 때 focuseout : 요소에 포커스가 빠져나갈 때 focus : 요소에..

[자바스크립트 js / 실무 기록] input값 초기화

이벤트 핸들러가 호출 된 후에 input 태그를 매번 초기화 해주려면 이벤트 핸들러의 제일 마지막에 input.value = ''; 입력하기. 예시 function removeWord() { const word = document.querySelector(`[data-word=..

[자바스크립트 js] 스크롤 이벤트 / scrollY 프로퍼티

일반적으로 웹문서의 크기가 브라우저 크기보다 클 때 스크롤바가 자동으로 나타난다. 그래서 일반적으로 스크롤 이벤트는 브라우저를 대변하는 window객체에 이벤트 핸들러를 등록하는 경우가 많다. function pri..

[자바스크립트 js] 이벤트 위임 Event Delegation

이벤트 위임 버블링 개념을 활용하면 훨신 효과적인 이벤트 관리를 할 수 있다. 예를 들어, 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관..

[자바스크립트 js] 브라우저의 기본 동작 막기 e.preventDefault();

function tooktak(event) {  event.preventDefault(); } 필요한 경우에만 주의해서 사용하자.

[자바스크립트 js] 마우스 버튼 이벤트 / MouseEvent.button / MouseEvent.type

MouseEvent.button 0 : 마우스 왼쪽 버튼 1 : 마우스 휠 2 : 마우스 오른쪽 버튼 3 : X1 (일반적으로 브라우저 뒤로 가기 버튼) 4 : X2 (일반적으로 브라우저 앞으로 가기 버튼) 잠깐만 cc mouseenter, mouselea..

[자바스크립트 js] 마우스 이동 이벤트 / MouseEvent.위치프로퍼티

마우스 이동 이벤트 MouseEvent.type mousemove : 마우스 포인터가 이동할 때 mouseover : 마우스 포인터가 요소 밖에서 안으로 이동할 때 mouseout : 마우스 포인터가 요소 안에서 밖으로 이동할 때 마우스 위치..

[WEB DESIGN] 웹디자인 폰트 추천 / 웹 개발 폰트 / 웹 개발 폰트 사이즈 / 웹 퍼블리싱 폰트 추천

추천 폰트 사이즈 font-xs: 12px / 0.75rem //덜 중요한 내용 font-sm: 14px / 0.875rem  //각주 font-base: 16px / 1rem  //본문 font-lg: 18px / 1.125rem  // 소제목 font-xl: 20px / 1.25rem  // 대제목..

[APP DESIGN] 앱 타이포그래피 / 앱 폰트 / 앱 개발 폰트 / 앱 폰트 사이즈

추천 폰트 사이즈 애플 : 최소 17px 구글 : 최소 16sp (IOS 16pt와 동일) 이 사이즈들은 폰트의 특징에 따라서 달라질 수 있음. 앱 디자인 할 때, 본문 폰트를 16pt 보다 작은 사이즈 사용하지 말 것. 본문에 가장..

[css] 대괄호 선택자 / 비표준속성 활용하기

할 일 : field="title"> 담당자 : field="title"> 상태 : field="title"> 뚝딱 공부중 뚝딱 개발중 [status] {  padding : 5px; } [status="개발중"] {  background-color: yellow; } [속성이름] : 대괄호를 이..

[자바스크립트 js] 이벤트 핸들러 등록과 삭제 / addEventListener / removeEventListener

// 이벤트 핸들러 등록하기 let btn = document.querySelector('#myBtn'); function event1() {  console.log('뚝딱 안녕!'); } funciton event2() {  console.log('뚝딱 코딩중!'); } 1 이벤트 핸들러 등록 //..

[자바스크립트 js] 마우스 이벤트 / 키보드 이벤트 / 포커스 이벤트 / 입력 이벤트 / 스크롤 이벤트 / 윈도우 창 이벤트

마우스 이벤트 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 click 왼쪽 버튼을 클릭한 순간 dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간 contextmenu 오른쪽 버튼을 클릭한..

[자바스크립트 js] 이벤트 객체 프로퍼티

이벤트가 발생하면, 이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달된다. 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고..

[자바스크립트 js] 요소 만들기 .createElement('태그');

const toDoList = document.querySelector('#to-do-list'); fucntion addNewTodo(text) { const li = document.createElement('li'); li.textContent = text; toDoList.append(li); }

[자바스크립트 js] HTML 속성에 접근 .getAttribute / 속성 추가 및 수정 .setAttribute / 속성 삭제 .removeAttribute

대부분의 HTML 속성은 DOM객체의 프로퍼티로 변환이 된다. 하지만, 표준속성이 아닌 경우에는 프로퍼티로 변환이 안 되는데, 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있다. element.getAttribu..

[자바스크립트 js] 스타일 프로퍼티 / 스타일 변경 / 클래스 추가 / className / classList (add, remove, toggle)

const tooktak = document.querySelector('#뚝딱'); const doeggabi = document.querySelector('#도깨비'); 1 스타일 프로퍼티를 활용해서 요소의 스타일을 직접 수정하기 tooktak.children[0].style.textDecorati..

[scss] npm scss 적용하기

$ npm install -g node-sass $ node-sass --watch scss/manager_index.scss css/manager_index.css --watch를 넣어야 scss파일 작성시 css파일에 반영이 된다. scss파일과 css파일을 미리 만들어주고 터미널에..

[error 해결] An output directory must be specified when compiling a directory.

An output directory must be specified when compiling a directory. // 디렉토리를 컴파일 할 때 출력 디렉토리를 지정해야합니다. scss를 css에 연결하려고 할 때 터미널창에서 이러한 문구가 뜬다면, scss파일..

[자바스크립트 js] 요소 노드 만들기(createElement) / 요소 노드 꾸미기(textContent, innerHTML) / 요소 노드 추가하기(prepend, append, after, before)

전 포스트에는 덮어쓰는 방법들이 있다. 이번 포스트에는 덮어쓰기 말고, 요소 노드를 직접 생성하여 필요한 곳에 추가하는 방법들이다. const goTooktak = document.querySelector('#가자뚝딱'); 1. 요소 노드 만..

[자바스크립트 js / 실무 기록] select 선택 안 했을 때 alert

html selected 에 value=‘’를 넣어줘야 한다. js select 안의 option의 value를 따로 잡을 필요 없다.

[자바스크립트 js / 실무 기록] if문 안에 return을 입력해야 하는 이유

if문마다 return을 입력하지 않으면, 년도 건너 뛰고 월 입력 하라는 경고창이 뜬다.

[자바스크립트 js / 실무 기록] 제이쿼리 input name value 잡는 법 / radio 체크된 value값 가져오는 법

[자바스크립트 js / 실무 기록] 비밀번호 설정 방법(비밀번호 입력 안 했을 때, 비밀번호 공백, 비밀번호 영문 숫자 특수문자, 비밀번호 확인)

pwdNum, eng, spe : js 정규식 표기법 pwd : input으로 전달 받은 비밀번호 pwd2 : pwd 내용을 확인 swal : sweetalert 사용하는 코드. icon의 종류는 success, warning, error, info가 있음.

[자바스크립트 js] 요소 노드 삭제 .remove / 요소 노드 이동 prepend, append, before, after

const tooktak = document.querySelector('#금나와라뚝딱'); const tooook = document.querySelector('#도깨비방망이'); 노드 삭제 : Node.remove(); tooktak.remove(); tooktak.childern[1].remove(); //2번째 요..

[자바스크립트 js] 태그 선택 메소드

id 태그 선택 document.getElementById('아이디'명); class 태그 선택 documnet.getElementsByClass('클래스명'); // getElement's'!!!! 여러 개의 요소가 선택 될 수 있기 때문. 태그 이름으로 태그 선택 documen..

[자바스크립트 js] DOM 트리 (Document Object Model) / 노드 (Node) / parentElement / previousElementSibling / nextElementSibling

window. 전역객체 (Global Object). 브라우저 창을 대변하면서 자바스크림트에서 최상단에 존재하는 객체. 모든 객체는 사실 window의 자식객체. 객체를 만드는 것은 window 객체의 프로퍼티를 만드는 것과 같다...

[자바스크립트 js] 요소 노드 주요 프로퍼티 (innerHTML, outerHTML, textContent)

const tooktak = document.querySelector('#뚝딱'); innerHTML 요소 안의 html 자체를 문자열로 리턴. 태그와 태그 사이의 줄 바꿈이나 들여쓰기 모두 포함. 요소 안의 정보 확인할 때 사용. HTML을 수정할 때 자..