Front-End Developer
DOM이란 무엇인가
애초에 자바스크립트에게 HTML이란 문자열 그 이상 그 이하도 아니다. 돔은 이 문자일 뿐인 HTML을 의미있는 객체형태로 바꿔서(= 파싱) 우리가 추가적인 작업을 할 수 있도록 하는 녀석이다. 노드(node) 이 의미있는 객체형태를 node, 즉 '노드'라고 한다. 노드는 HTML의 각각의 요소보다 훨씬 더 넓은 의미인데, 예를들어 태그 사이사이의 띄어쓰기 공간도 node는 'text 객체'로 인식한다. 또한 태그 안에 들어있는 속성 하나하나도 하나의 'attribute 객체'이다. 우리가 돔을 사용할 때 가장 중요한 두가지는 내가 원하는 요소를 잘 선택해서 조작하는 것 선택한 요소에 일어날 이벤트를 핸들링하는 것 이다. 상속(inheritance) HTML이 기본적으로 중첩개념으로 되어있으니 파싱되는..
JS 이벤트 플로우 완벽이해
html>body>button 의 부모자식관계를 가지는 html구조가 있다고 치자. 눌러주세요 각 요소들에 click event를 만들고, button을 click하면 어떻게 될까? 우리는 입장에서는 어려울 것 없이 button이 먼저 실행된다고 생각하지만 아니다. 엄밀히 말해 우리는 html안에있는 body안에있는 button을 누른것이기 때문에 브라우저 입장에서는 이 세가지중 정확히 무엇을 누른건지 애매하다고 생각하기 때문이다. 그래서 button에 클릭이벤트가 일어났을 때, 만약 부모요소에도 이벤트가 적용되어 있다면 이 경우 브라우저는 전부 다 실행을 시켜버린다. (body와 html에 클릭이벤트가 없으면 아무상관없는 이야기) 어떤 순서로? 아래 event flow 순서로! [이벤트가 실행되면 브..
증감 연산자(Increment & Decrement Operators)
증감 연산자 (Increment & Decrement Operators) 변수에 적용할 수 있는 연산자 중 하나로, 복합대입연산자를 더(또?) 간략하게 사용한 형태이다 증감 연산자 설명 변수++ 기존의 변수 값에 1을 더합니다(후위) ++변수 기존의 변수 값에 1을 더합니다(전위) 변수-- 기존의 변수 값에 1을 뺍니다(후위) --변수 기존의 변수 값에 1을 뺍니다(전위) 아래 세 형태는 다 같은 의미이다. a = a + 1 a += 1 (복합 대입 연산자) a++ (증감 연산자) a++ 와 ++a, 뭐가 다른데? 직접 실행하면서 이해해보자. //변수를 선언한다 let a = 10; //출력해보자 console.log(a++); 이때에는 a++나 ++a 둘 다 결과가 같은데, 이렇게 한 줄에 독립적으로 ..
new Date() 란?
Date() MDN: 함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환합니다. *이 때 인수는 무시하고 항상 현재날짜와 시간을 나타내게 된다. 그럼 new Date() 는 무엇인가? MDN: 생성자로 호출할 경우 새로운 Date 객체를 반환합니다. 즉, 내가 입력하는 값과 인수의 타입에 따라서 여러가지 형태로 초기화시키고 그것을 객체로 만들 수 있다! new Date()는 현재 날짜 및 시간을 나타내는 문자열을 반환한다. new Date() Wed May 11 2022 11:35:05 GMT+0900 (Korean Standard Time) 인자값을 넣어주어 개별 날짜 및 시간을 객체로 생성할 수 있다. new Date(2022,12,26,0..
if 조건문 사용해서 홀수,짝수 구해보기
if (조건에 맞는다면) {이 코드를 실행해} let num = 2; if (num > 1) { console.log('yes'); } 결과 if (조건에 맞는다면) {이 코드를 실행하고} else {그게 아닌 나머지라면 이 코드를 실행해 } let num = -1; if (num > 1) { console.log('yes'); } else { console.log('no'); } 결과 if (조건에 맞는다면) {이 코드를 실행하고} else if (그게 아니라 이 조건에 맞는다면) {이 코드를 실행하고} else {그게 아닌 나머지라면 이 코드를 실행해} else if는 원하는만큼 무한대로 작성이 가능하다. console.clear(); let fruit = 'orange'; if (fruit === ..
Sass를 사용한 영화목록 페이지 클론코딩
URL: https://koreanhamster.github.io/weniv_movie_page/ 소스코드: https://github.com/Koreanhamster/weniv_movie_page 미리보기 기술스택 HTML, Sass(Scss) 적용기술 그리드 적용 아이템 모듈화하여 중복적용 footer 포지셔닝은 body에 min-height를 100vh를 준 뒤 footer박스에 margin-top을 0으로 주어 처리 아쉬운점, 배운점 예매하기와 예고편 버튼을 스타일링하고 포지션하는데 어려움이 있었는데, 일단 반응형이 전혀 고려되지 않고 네거티브 마진을 주는 식으로 버튼이 부모요소에 꽉 차있는것 '처럼' 스타일링을 했기 때문이다. 박스 스타일링은 overflow:hidden을 주어 부모의 borde..