본문 바로가기

HTML&CSS&Javascript 📚53

[JS Deep Dive] 38. 브라우저의 렌더링 과정 38.0) 서론 구글의 V8 자바스크립트 엔진으로 빌드된 JS 런타임 환경인 ‘Node.js’의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션에서도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 JS가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션의 클라이언트 사이드이다. 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 JS 프로그래밍이 가능하다. 이를 위해서 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 해석(Parsing)하여 브라우저에 렌더링하는지 살펴보자 ! 💡 파싱(Parsing) : 작성된 텍스트 문서를 읽어서 실행하기 위해 텍스트 문서.. 2023. 3. 1.
[Typescript] 열거형(enum) 타입에 관하여 1) Typescript의 'enum' type이란 ? enum Auth { admin = 0, // 관리자를 0으로 표현 user = 1, // 회원은 1로 표현 guest = 2 // 게스트는 2로 표현 } Typescript 는 JS의 기본 타입 외에도 몇 개의 타입을 더 제공하는데, 그 중 하나가 열거형이라고 불리는 enum 이다. enum은 말 그대로, 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이다. 2) enum을 사용하는 이유 2-1) 분야 별로 종류를 정의하여 명확하게 사용하기 위함 여러 값들을 분야 별로 정의할 수 있기 때문에, 의미를 명확하게 파악하고 사용할 수 있으며 코드의 가독성을 높일 수 있다. 2-2) 하드코딩의 실수를 줄이기 위함 하드코딩을 막고, 자동완성 기.. 2023. 2. 24.
[HTML] HTML의 기초 및 태그 정리 이번 포스팅부터는 이전에 모각소(모여서 각자 소프트웨어) 활동에서 Notion에 정리해두었던 HTML/CSS/JS 내용을 복습할 겸 포스팅을 해보려고 합니다 :) 1) HTML 이란 ? HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지) 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화할 수 있습니다. 💡 메타 데이터(Meta Data)란 ? 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터 HTML5 문서는 반드시 으로 시작하여 문서 형식(document type)을 HTML5로 지정.. 2023. 2. 20.
[Typescript] 타입스크립트란 ? 1) Typescript란 ? 타입스크립트는 자바스크립트에 타입(Type)을 부여한 언어, 즉 JavaScript로 컴파일 되는 트랜스파일러입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. TypeScript 파일(ts)은 웹 브라우저에서 바로 해석될 수 없습니다. 브라우저에서 해석 가능한 언어인 JavaScript로 변환되어야 브라우저는 이를 인식하고 해석할 수 있습니다. 즉, TypeScript를 JavaScript로 변환해야 웹 브라우저에서 실행이 가능합니다. 그래서 TypeScript가 JavaScript로 출력 되기에 컴파일러가 아닌, 트렌스파일러(Transpiler)로 불립니다. 그리고 이러한 언어를 메타 언어(Meta Language)라고 부릅니다. 2) 타입스크립트를 사용하는 이유 .. 2023. 2. 16.
[CSS-in-JS] Styled Component의 theme에 관하여 Styled Component의 Theme 이란 ? 스타일링을 시작하기 앞서, 자주 사용하게 될 색상 코드, 사이즈, 폰트, 미디어 쿼리 등의 정보를 변수로 생성해 사용하면 일관적인 스타일 관리가 가능합니다. styled-component에선 전반적으로 프로젝트 전체에서 사용할 목적의 변수 모음 객체를 theme이라고 부릅니다. const margins = { sm: ".5rem", base: "1rem", lg: "2rem", xl: "3rem", }; const paddings = { sm: ".5rem", base: "1rem", lg: "2rem", xl: "3rem", }; const fonts = { family: { base: `'Noto Sans KR', sans-serif`, title:.. 2023. 2. 16.
[CSS] React Component CSS 스타일링 기본 React does not have an opinion about how styles are defined. 리액트 공식 문서에 따르면 리액트는 명확한 스타일링에 대한 가이드를 제공하지 않습니다. 왜냐하면 현재 CSS 기술 자체가 사용되는 방식이 워낙 다양하기 때문입니다. 그렇다면 React 컴포넌트를 스타일링하는 기본적인 방법들을 소개해보도록 하겠습니다. 1) Inline Style import React from "react"; const btnStyle = { color: "white", background: "teal", padding: ".375rem .75rem", border: "1px solid teal", borderRadius: ".25rem", fontSize: "1rem", line.. 2023. 2. 14.

티스토리툴바