CS/개발지식 (6) 썸네일형 리스트형 Sass (Syntactically Awesome Style Sheets) Sass - CSS pre-processor 로써, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줌. Sass / Scss 의 문법 차이 sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 보통은 scss 문법이 더 많이 사용됨. Sass 사용하기 리액트 프로젝트 만들기 $.. 개발환경 설정 - Webpack 에디터 설정 VSCode 에디터 기본 브라우저 설정 크롬 브라우저 모듈 번들러란? 웹 개발에 필요한 자원 (HTML, CSS, JS, Image 등등 ) 을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만들어주는 도구 웹팩 (WebPack) 이란? 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 최종 배포용 파일을 만들어줌 태그가 여러개 있을 때 순서보장도 중요하기 때문에 이런 것도 WebPack이 해준다. 사용 이유에 대해서는 참고 웹팩 설치 방법 새로운 폴더를 생성한다 폴더에서 터미널을 열어 아래의 코드를 입력해 package.json 을 초기화해준다. npm init -y package.json 파일이 생성된 것을 확인한다. 아래의 코드를 터미널에 입력해 웹팩을 .. 크로스 브라우징 (Cross browsing) 크로스 브라우징이란? 웹 페이지가 웹 브라우저의 종류에 구애 받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업 HTML5, CSS3, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법 발생하는 이유 브라우저마다 렌더링 엔진이 다름 작동되지 않은 HTML , Javascript 코드가 존재 해석하지 못하는 CSS 코드가 존재 브라우저 버그 존재 브라우저마다 자체적인 CSS 스타일 렌더링 엔진 (or 레이아웃 엔진) 종류 페이지를 렌더링할 때 실질적으로 작업을 하게 되는 엔진 같은 엔진을 사용하면 다른 브라우저여도 비슷하게 출력 엔진의 종류 트라이던트 (Trident) 게코 (Gecko) 웹킷 (We.. 렌더링 엔진 렌더링 엔진에 대해서 1. 요청받은 내용을 브라우저 화면에 표시해주는 역할 2. 브라우저마다 사용하는 렌더링 엔진이 다름 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않음. 엔진마다 읽을 수 있는 코드의 버전이 다름. 결론 : 크로스 브라우징 이슈가 발생 렌더링 엔진 동작 과정 Parsing 이란? 데이터를 렌더링하기에 앞서 브라우저는 서버로부터 받은 데이터를 해석해야함. 대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML, CSS 를 해석함. 이렇게 해석하는 과정을 뜻함. 브라우저의 렌더링 엔진은 HTML 을 Parsing 하여 DOM Tree 를 생성 렌더링 엔진이 스타일 태그 (CSS) 를 만나면 DOM 생성을 중지하고, CSS Parsing 작업을 시작해 CSSOM Tr.. 웹 브라우저의 동작 순서 웹 브라우저에 대해 특징 웹 브라우저 또는 웹 탐색기는 웹 서버에서 이동하며 쌍방향으로 통신함 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 대표적인 HTTP 사용자 에이전트의 하나 웹 페이지를 가져오기 위해서, HTTP(HyperText Transder Protocol) 라고 하는 통신규약을 이용해 웹 서버와 통신하는 어플리케이션 종류 모질라 파이어폭스 구글 크롬 인터넷 익스플로러 (현재는 MS에서 지원을 중단) 마이크로소프트 엣지(MS가 새롭게 권고하는 웹 브라우저) 오페라 삼성 인터넷 사파리 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시 자원이란? 보통 HTML 문서지만 PDF 나 이미지 또는 다른 형태일 수도 있음. 북마크 관리자, 다운로드 관리자,.. 코드 리팩토링와 클린 코드 리팩토링(refactoring) 이란? 결과의 변경 없이 코드의 구조를 재조정함 주로 가독성을 높이고 유지보수를 편하게 함 버그를 없애거나 새로운 기능을 추가하는 행위는 아님 사용자가 보는 외부 화면은 그대로 두면서, 내부 논리나 구조를 개선하는 유지보수 행위 리팩토링의 목적 / 하는 이유 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 소프트웨어의 기능을 보존하기 위해서 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과 소스 코드의 유지 보수성을 개선하고 확장성을 개선하기 위해서 소프트 웨어를 더 이해하기 쉽고 수정하기 쉽게 만들어서, 코드의 품질을 좋게 만들기 위함 리팩토링의 사용 시기 기능을 추가할 때 버그를 수정해야 할 때 코드 검토 (Code Review) 할 때 클린 코드 이란? 원하는 .. 이전 1 다음
