1. inline, block, inline-block 구별하기
inline
span 태그 같은 inline-element에는 width 나 height를 지정해도 반영되지 않는다. margin, padding은 좌우에만 적용된다.
block-element
p, h1 태그같은 block-element는 하나의 태그로 한 줄의 공간을 차지한다.
inline-block
button, input, select 태그의 기본 속성인 inline-block은 한 줄 전체를 차지하지 않고 inline 처럼 나란히 배치된다.
그러나 inline에서는 적용되지 않는 width, height와 margin, padding의 상하 간격을 적용할 수 있다.
🔗 [CSS] display 속성: inline, block, inline-block
2. 사이드 프로젝트에 활용하기 좋은 퍼블릭 API
인덱스 별로 정리되어있고 1420개나 된다!
3. 번들링(Bundling)과 웹팩(Webpack) 얕게 이해하기
-
번들링을 하면 수많은 자바스크립트 파일이 하나로 압축되기 때문에 서버와 여러 번 통신하지 않아도 되고, 해당 코드들을 압축하고 최적화했기 때문에 로딩 속도도 높아진다.
-
번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미한다.
-
번들러에는 웹팩(Webpack)부터 Rollup, Parcel, Browserify 등이 있다.
-
C언어에서는 구분하지만, 일반 프론트엔드에서는 빌드, 번들링을 같은 의미로 사용한다.
-
웹팩(Webpack)은 프론트엔드 프레임워크에서 가장 대중적인 모듈 번들러이다.
-
ES5, ES6등 새로운 자바스크립트 스펙이 계속해서 등장하고, 어떤 브라우저에서는 이 업데이트를 따라오지 못하여 최신 버전의 자바스크립트를 이전 버전 코드로 변환시켜야 할 때가 있다. 이 변환을
transpile이라고 한다. 웹팩에 포함된babel이라는transpiler가 이 역할을 하여 에버그린 브라우저(최신 스펙의 자바스크립트 코드가 호환이 가능한 브라우저)를 가능하게 한다. -
transpile은complie과 다르다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 바꿔주는 것이다.
💬
노션에 TIL을 작성하고 그 중 블로깅 가능한 부분을 골라 이 곳에 TWIL로 발행하고 있는데 작년 하반기부터 이직 준비 및 게으름으로 계속 미뤘다가 오늘 늦은 업로드를 해보았다. 지금의 블로깅 방식이 아직은 마음에 드는데, 조금 고민도 되고... 어쨌든 이 곳에는 내가 다시 읽어볼만한 내용을 다른 사람이 읽기에도 불편함 없을 정도로 정리하여 올린다고 생각하고 있다.
일을 시작한지 벌써 1년 6개월이 되었는데, 조만간 그동안 느낀점을 적어봐야겠다는 생각도 든다. 최근 좋아하는 친구들이 오랜 고민 끝에 개발 공부를 시작하였는데 너무 기쁘고 함께 공부할 날들이 기대되어 오랜만에 괜히 글을 써본다.
