Fall in IT.

안녕하세요. 오늘은 컴포넌트를 스타일링하는 방법에 대해서 간단히 알아보겠습니다. 컴포넌트 스타일링 방식은 다양하게 존재한다. 일반 CSS Scss, Sass 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. CSS Module 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있다 일반 CSS 중요한 점은 CSS 클래스명을 중복되지 않게 만드는 것이다 [컴포넌트 이름] - [클래스 이름] 형태로 이름을 짓..

안녕하세요. 오늘은 ESLint와 Prettier를 사용해서 개발환경을 만들어보겠습니다. 여러명이서 개발을 할때 코드 품질/포맷팅 도구의 도움을 받지않고 일관된 코드로 작성을 하기란 매우 어렵습니다. 최근에 많이 사용되는 ESLint와 Prettier를 사용해서 여러명이서 협업을 할때 일관된 코드를 작성할 수 있는 자동화된 환경을 만들어보겠습니다. 알아둬야할 키워드 ESLint Prettier (eslint-config-prettier, eslint-plugin-prettier) husky lint-staged git hooks ESLint란? lint란 보풀이란 의미로 코드상의 보풀을 제거해주는 도구를 말한다. 코드에서 보풀이란 선언한 변수를 사용하지 않았거나 들여쓰기를 일관되게 하지 않았거나 긴 코드..

안녕하세요. 오늘은 DNS 즉, Domain Name System에 대해서 간단하게 알아보고 그와 관련하여 자주 사용되는 용어들을 정리해보도록 하겠습니다. DNS(Domain Name System)란? 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행하는 시스템 DNS 동작 원리 컴퓨터에서 브라우저를 켜고 www.google.com 을 입력한다. 컴퓨터는 컴퓨터 내부에 등록 되어 있는 DNS 서버로 www.google.com에 해당되는 IP 주소를 물어보고 DNS 서버는 해당 도메인의 IP 주소를 알려준다. 컴퓨터는 이를 받아서 IP 주소에 해당하는 컴퓨터에 접속하게 되는 것이다. DNS가 나오게 된 배경 인터넷에 연결 된 컴퓨터 한대 한대를 호스트(host) 라고 한다. ..

안녕하세요. 오늘은 웹 성능 최적화 방법에 대하여 간단하게 알아보도록 하겠습니다. 목표 느린 웹 페이지를 빠르게 만들어보자 목차 로딩 최적화 방법 렌더링 최적화 방법 용어 정리 Navigation Timing Resource Timing (Network) + Processing + Load로 결합된 페이지가 그려지기까지의 과정을 나타낸 그림이다. Resource Timing은 네트워크와 연관 된 부분으로 프론트엔드에서 최적화하기 어렵다. Processing과 Load 부분은 최적화가 가능하다. Critical Rendering Path 브라우저가 하나의 화면을 그려내는 과정을 말한다. DOMContentLoaded Event HTML 파싱이 끝났을때 (DOM Tree 분석이 끝났을때) 발생하는 이벤트로 ..

안녕하세요. 오늘은 Golang에서 JSON 인코딩 / 디코딩을 사용하여 json object를 string으로 혹은 json string을 object 형태로 변환하는 방법에 대해서 알아보도록 하겠습니다. 소스코드 package main import ( "encoding/json" "fmt" ) // Person - 사람 정보 type Person struct { Name string Age int Sex int // 0: 여자, 1: 남자 } func main() { fmt.Println("Say hi!") // 1. CONVERT JSON OBEJCT TO STRING fmt.Println("\n1.CONVERT JSON OBEJCT TO STRING") var personA = Person{"Al..