소소한 코딩일지

Bundling(번들링) 이란 웹 페이지의 고도화로 인해 다양한 파일들 사이의 상호작용이 발생하고 대규모 웹 서비스들이 탄생하게 되면서, 무수한 코드라인을 관리하기 힘들어졌다. 대표적인 문제점들로 다음과 같은 사항들이 있을 수 있다. 1. 전역 범위를 갖는 수많은 JS파일 내 변수의 중복선이 발생할 수 있다. 2. 수 백개에 달하는 JS 파일로 인한 늦은 로딩 3. 수동적인 개발 루틴 이러한 문제들을 해결해줄 수 있는 것이 바로 'Bundler'이다. Bundler는 연관성이 높은 자원을 모듈로 묶어주는 도구를 의미하고 아래와 같은 장점을 기대할 수 있다. 1. 모듈 단위의 코드 작성이 가능 2. 네트워크 병목현상 완화 가능 (최적화, 네트워크 코스트 절감) 3. 웹 개발 작업 자동화 웹팩 (Webpac..

Element와 Node라는 개념을 안 지 얼마 되지 않았다. 이 두가지의 차이를 정리하게 된 계기는 전에도 JS에는 비슷한 기능을 가진 메서드들이 좀 있네? 이런 생각을 가진 적이 있다. 예를 들어 바로 이전글에 포스팅한 textContent와 innerText가 있을 수 있다. 이 두가지를 한 번 정리하면 이후 메서드들을 보다 정확하게 사용할 수 있을 것 같다는 생각 들어서 이번 글을 쓰게 되었다. DOM 트리를 보면 Node는 Element를 포함하는 개념이라는 것을 볼 수 있다. DOM은 노드라는 단위에 html 문서를 파싱한 정보를 담고 있고, 그 정보는 노드 간 관계에 따라 노드 트리로 구성된다. Element는 Element Node로 노드의 종류이다. 노드의 종류는 다음과 같다. 노드 설명..

textContent와 innerText는 특정 Element의 텍스트를 가져온다는 점에서 유사한 부분이 많은 메소드들이다. 이 두 가지의 차이점을 정리해보고, 또 innerHtml과 는 또 어떻게 다른지 정리해보려고 한다. textContent vs innerText 다음과 같이 두가지 경우에 대해서 어떤 결과들을 출력하는지 확인해 보았다. 1. 안녕하세요 2. 안 녕하 세요 (hidden) ( 공백에는 빈칸 2칸 ) 안녕하세요 안 녕하 세요hidden 결과는 다음과 같이 나온다. 두 구문 모두 내부 text를 가져온다는 점은 같다. 하지만 두 번째 테스트에서 textContent는 빈칸 축약 없이 그대로 가져오지만 innerText는 빈칸 축약이 반영된 결과가 나왔다. 그리고 textContent는 ..

DOM은 Document Object Model로 웹 페이지에 대한 인터페이스를 말한다. DOM은 페이지에 대한 API로 DOM을 통해 페이지의 구조나 내용을 읽고, 조작이 가능하다. 웹 페이지 구축 과정 웹페이지를 구축하는 단계는 기준에따라 여러 단계로 분리가능하다. 하지만 주요 랜더링 경로 단계를 이해함에 있어는 크게 두가지 단계로 나뉘어진다. 첫번째, 브라우저가 html문서를 분석하여 최종적으로 랜더링할 내용을 결정하는 단계, 두번째, 브라우자게 랜더링을 수행하는 단계 첫번째 단계에서 나오는 산출물이 우리가 흔히 들어본 "렌더 트리"다. 렌더 트리는 렌더링에 필요한 내용(HTML) 과 스타일(CSS)이다. 자세히 말하면 HTML을 구문 분석한 DOM 과 CSS를 분석한 CSSOM이다. DOM이 만들..

레이아웃을 정의하거나 요소들을 정렬해야 할 때가 너무나도 많습니다. 저는 레이아웃을 정의할 때는 flex를 사용하고 요소를 정렬할 때는 float을 많이 씁니다. ( 왜 이렇게 두가지로 나눠지게 됐는지는 저도 잘... ) 그런데 최근 코드 리뷰를 받으면서 float사용을 최대한 지양하는 것이 좋다는 피드백을 받았습니다. float 이 나쁜 코드라기보다 더 좋은 flex와 grid가 있기 때문에 이렇게 말씀하신 게 아닐까 싶습니다. ( 참고 문서 : 링크 ) flex와 grid에 대한 사용경험도 별로 없어서 이번 기회에 익숙해지기 위해 두 가지에 대해서 정리해두려고 합니다! flex flex는 1차원을 수직 또는 수평 중 하나의 방향으로 레이아웃을 나눌 수 있는 속성입니다. display: flex 를 통..

HTML CSS 강의를 들으면서 같은 CSS 코드라도 다른 브라우저 환경에서 유효하지 않은 경우가 있다. 이런 경우를 방지하기 위해 CSS 호환성을 확인하고, 개별적으로 처리해주어 동일한 디자인이 적용될 수 있도록 해야 한다. 1. 조건부 주석을 통한 CSS호환성 부여 인터넷 익스플로러 10 버전 미만에서는 조건부 주석을 인식할 수 없다는 점을 활용하여 특정 문자열의 존재 여부를 확인하고 해당 문자열에 대한 코드를 실행하도록 한다. Ex) - IE 8 버전일 경우 동작 - IE 8 버전 미만일 경우 조건부 주석 문법에 맞추어 작성하여 조건을 만족하면 주석 내에 있는 HTML 코드를 실행시킨다. 2. CSS Hacks를 사용한 호환성 부여 CSS Hacks는 특정한 브라우저 또는 특정한 브라우저 버전이 인..