본문 바로가기

Front-End/개념6

[Front-end] 모듈 번들 themewagon에서 템플릿을 찾아보다가 맘에드는 템플릿을 발견했다 tailwindcss 템플릿이었는데 마침 저번에 혼자 React,Tailwindcss 를 사용해서 쇼핑몰 메인 홈페이지 클론코딩을 해봤던 경험이 있기에 당당하게 다운로드했다.생각보다 템플릿을 적용하는게 쉽지가 않다... 정보도 몇개 없는거 같고.. 그리고 tailwindcss 만 받으면 될 줄 알았는데 gulpfile.js 라는 파일이 있어서 검색해봤더니 자동화를 도와주는 친구라는데... 사용해보려고 공부했다.  일단 gulp는 bundler의 일종이라 이것에 대해서 공부해야했다번들러는 여러개의 파일을 묶어주는 도구인데 Webpack의 기능은 하나의 자바스크립트 파일에 자바스크립트 뿐만 아니라 css, 이미지와 같은 여러가지 모듈들을 .. 2024. 6. 9.
DOM 이란?? Document Object Model (문서 객체 모델) Document = HTML (웹 개발 관련 글에서 Document를 보게 된다면 그것은 HTML에 대해 말하는 것) Object : 객체 (javascript에서 많이 나오는 것) Model : 모델 HTML 코드를 받아 Browser에서 DOM 을 만든다고 생각해보면 쉽다. 상세히 말하면 HTML 소스코드를 Browser에서 한줄한줄 읽어서 문서를 객체화하여 JavaScript로 접근할 수 있도록 해준다. 위의 그림처럼 소스코드의 각 부분들을 Tree구조로 만들면 오른쪽 마인드 맵과 같은 형태로 만들어진다. JavaScript로 하나하나 제어가 가능한 이유는 Document의 트리들 각 요소들이 API이기 때문이다. #collection 으로.. 2024. 4. 19.