이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. HTML 문서의 각 엘리먼트들은 계층적으로 이루어져 있습니다. → 이런 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생하면 연쇄적 이벤트 흐름이 일어나게 됩니다! 이런 이벤트 전파(Event Propagation)은 크게 버블링과 캡처링으로 나뉩니다. 버블링: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파(기본값) 캡처링: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 즉, 버블링은 자식→ 부모, 캡처링은 부모→ 자식으로 방향이 정반대인 것을 알수 있습니다. 이벤트 전파 흐름은 3가지 단계가 있습니다. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 이번 주부터 저희는 JavaScript에 대해서 배우게 됩니다! 강의 도중에 실행 컨텍스트라는 개념에 대해서 배우게 되는데요. 이와 관련해서 좋은 글을 발견해서 같이 공유하려 합니다. 글 링크 : https://velog.io/@hyumapr/JavaScript-Sean103024 JavaScript의 핵심 원리 탐구: 실행 컨텍스트관점으로 보는 클로저, this, 그리고 호이스팅 여러 면접을 거쳐오면서 기술면접 질문들로 자주 받는 내용들인 실행 컨텍스트,클로저,this,호이스팅을 한번에 다뤄볼려고 한다. velog.io 어제 쓰여진 따끈따끈한 글인데요. 이 글에서는 this 바인딩, 클로저, 호이스팅이 무엇인지 알려주고 이 개념들과 실행 컨텍스..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. box-sizing: border-box box-sizing : border-box로 설정하고 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. → border값이나 padding 값이 지정한 width값이나 height값에 포함이 된다. 출처: https://juicyjerry.tistory.com/entry/css에서-box-sizing-을-border-box로-하는-이유 position sticky가 적용이 되지 않는 이유 sticky 속성을 갖는 요소는 자신의 부모 요소 안에서만 적용됨 부모 태그는 무조건 height 높이 값이 들어가 있어야 ..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. CSS 전처리기 CSS 전처리기는 전처리기가 가진 특별한 문법으로 CSS를 생성하도록 하는 프로그램입니다. → 기존 CSS가 가진 문제점들을 해결하기 위해 만들어졌습니다. CSS 전처리기를 사용하면 다음과 같은 장점이 있습니다. 재사용성 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능 시간적 비용 감소 임의 함수 및 내장 함수로 인한 개발 시간적 비용 절약 유지 관리 CSS코드를 여러 파일로 나눠 유지 보수성 향상 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리 용이 Learning curve 낮음 하지만 전처리기를 위한 도구가 필요하다는 점과, 퍼블리셔나 디자이너가 개발에 대한 역햘과 요소 접목으로 개발적인 요소..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. id와 class의 차이 html에서 id를 사용할 때도 있고, class를 사용할 때도 있습니다. 이 둘은 무슨 차이일까요? id는 태그에 유일한 이름을 쓸 때 사용됩니다. → 단 하나의 요소에만 사용되므로 중복이 불가합니다. → class보다 우선적으로 적용이 됩니다. class는 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용됩니다. → 유형별로 동일한 class를 사용할 수 있으므로 중복이 가능합니다. 출처: https://velog.io/@jos9187/id-속성과-class-속성의-차이 css 우선순위 id가 class보다 우선적으로 css가 적용되는 것은 이제 알겠습니다. 그렇다면 전체적으로 css 우선순위는..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. 한 주 동안 스터디하시느라 다들 수고하셨습니다! 이번 주 부원님들께서 워크북 발표하시는 내용을 듣고 추가적으로 보충 설명을 했었는데요. 한 번 글로 정리해서 공유해보려 합니다. LocalStorage HTML Web Storage API는 localStorage와 sessionStorage를 포함합니다. 그 중 localStorage는 브라우저가 닫히고 다시 열려도 데이터가 지워지지 않습니다. 데이터는 만료 날짜가 없으며, JavaScript를 통해 브라우저 캐시/로컬 저장된 데이터를 지우는 것을 통해서만 지워집니다. localStorage는 로그인 여부를 확인할 때 사용됩니다. 만약에 토큰 방식을 활용하여 로그인을 한다면, 우리는 백엔..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. 안녕하세요! 1주차 강의에 저희 웹 파트는 HTML에 대하여 배우게 됩니다. 강의에 나오듯이 HTML은 마크업 언어일 뿐이라 별 기능이 없는데요. 그래서 웹 개발을 할 때 개발자들은 기능을 구현할 때 JavaScript나 React를 사용하게 됩니다. 하지만 제가 지금 소개해드릴 ‘htmx’ 라이브러리를 활용하면 JavaScript 없이도 많은 기능을 사용할 수 있습니다. htmx를 사용하고 싶다면 html에 아래와 같은 script 구문 하나만 추가하면 됩니다. 매우 간단하죠? htmx를 활용하면 매우 간단하게 서버와의 통신을 할 수 있습니다(서버에서 html을 가져올 수 있습니다). JavaScript나 React에서 서버와의 통신을..
