테스트용 기능을 만들때 css 전처리는 생략하는 작업이 되어버리기 때문에, 대체할 수 있는 플러그인을 찾다가 PostCSS를 발견하였다. create-react-dom으로 리액트 개발환경을 구축했을 때 생성되는 플러그인이며 css 파일명에 .module을 붙여주면 이용이 가능하다. 사용법은 아래와 같다. // color.css @value makerBlack: black; @value makerWhite: white; @value makerDarkWhite: #f5f5f3; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; @value makerGreen: #385461; @value makerblue: #1cb6e0; // size.css..

firebase으로 배포 이후, 뽑아져나온 url로 모바일과 PC(크롬/엣지)에서 디버깅을 위한 테스트를 해보았다. 메인에서만 16건의 이슈를 발견했고 5시간 동안 8건을 디버깅했다. :( 기업의 홈페이지를 리버스 엔지니어링해보며 무엇보다도 CSS에 관해 배운점이 참 많았다. 가장 유용하리라 생각하는 지식은 반응형에 최적화된 CSS의 단위이다. 반응형의 CSS 단위는 50px, 500px, 1000px 이렇게 정해진 값이 아니라 다른 개체와의 상대적인 퍼센트 값으로 사용해야하는데, 이것을 고려한다하더라도 모든 케이스에 대응하는 것이 쉽지 않다. 또 한번 배움이 있었고 현업에 계신 분들에게 존경심이 들었다. 자주 등장하거나 유용하게 썼던 단위는 아래의 4가지이다. 1) vh & vw 뷰포트 기준으로 정할 ..

관리하기 쉬운 코드를 작성하기 위한 최적화 방법 블록 차단 리소스 최적화 리소스 용량 줄이기 리소스 요청 개수 줄이기 이미지,폰트 x 올바른 확장자 사용 불필요한 파일 요청 지양 1)Image Sprite 2)WepP 3)Lazy Loading 4)간단한 아이콘은 DATA URL을 사용 CSS 바로 아래 작성 복잡한 셀렉터 지양 공통 스타일은 클래스로 설정 내부 스타일 시트 사용 JS 하단에 작성하거나 asyn, defer 속성 명시 불필요한 코드 제거 모듈 번들러로 번들링 공통 x x 캐싱

node-sass 설치 후 1. vs code의 터미널에서 npm install 입력하여 node_modules와 package.json 만들기 2. package.json의 "scripts" 수정 ( "node-sass": "node-sass", "sass": "node-sass styles/main.scss ./style.css" 추가 입력) 3. 기본적인 폴더 구조를 잡는 단계. scripts에 쓰여진 경로와 같이 styles 폴더를 만들어 sass파일들을 작성하였다. 4. 터미널에 npm run sass 입력하면, sass파일에 작성한 코드가 css파일에 자동으로 적용되는 것을 볼 수 있다.

이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 파일만을 관리하면 되므로 매우 간편하다. // ex. 코드예시

사용자가 사이트에 접속하면, 브라우저는 서버에 페이지를 요청한다. 서버로부터 정보를 전송받게되면 브라우저는 전송받은 코드를 해석하여 화면에 그리기위해 HTML에 있는 요소들을 Document Object Model로 만들기 시작한다. DOM에는 우리가 각각 정의한 요소들이 나무 형태로 요소들마다 각각의 뿌리를 내려가며 구성되어 있다. DOM이 다 그려지면 DOM과 CSS를 병합하여 CSS Object Model을 만들고, DOM과 CSSOM을 결합하여 최종적으로 브라우저에 표기될 요소들만 선별된 Render Tree를 구현하고 페이지를 렌더링한다. 위와 같은 일련의 과정을 수행하는 요소는 브라우저의 랜더링 엔진이다. 랜더링 엔진은 HTML과 CSS를 파싱하여 화면을 표시한다. 사용자의 접속부터 브라우저가..