본문 바로가기

전체 글

 (124)
Tailwind CSS이란? TailwindCSS이란? Tailwind란 컴포넌트 위주의 디자인 대신 HTML 문서에 저수준의 유틸리티 클래스를 정의하는 것으로 디자인을 구성할 수 있다. 부트스트랩같이 기존 디자인을 빠르게 가져와서 구성할 수는 없음 커스터마이징이 아주 편하고, 직관적임 실제 코드 Tailwind를 사용하지 않은 CSS ChitChat You have a new message! Tailwind를 사용한 CSS ChitChat You have a new message! 사전에 만들어진 디자인의 컴포넌트나 기능을 빠르게 가져와서 사용할 수 있도록 만들어진 프레임워크가 아니다. 그 대신, CSS의 각 속성들을 직관적이고 효과적으로 사용할 수 있도록 만들 수 있다. 장점 학습 난이도가 낮다. 정확하게는, CSS만 알고 있다..
부트스트랩이란? 부트스트랩이란? 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것으로 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다. '프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. 장점 Easy to use : CDN 방식으로 링크해서 사용해 html과 css 기본 지식을 가진 누구나 쉽게 접근 가능 Responsive features : 반응형 css를 포함한 단일코드로 모든 디바이스에 적용가능 Mobile-first approach : 부트스트랩 3부터 모바일 겸용이 아닌 모바일 ..
Styled-Component란? Styled-Component란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다. 설치 $ npm install --save styled-components 기본문법 const {위에서 지정해준 component명} = styled.{태그명} ``; HTML 엘리먼트를 스타일링 모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에 해당 태그명의 속성에 접근합니다. import styled from "styled-components"; styled.button` // HTML 엘리먼트에 대한 스타일 정의 padding: 4em; background: papayawhip; ` Re..
SCSS (CSS Modules)란? SCSS란? Sassy CSS(멋진 CSS)의 줄임말 SASS 후 SCSS가 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장한다. Sass(SCSS)를 CSS pre-processor(전 처리기)라고도 하는데 이는 Sass(scss)자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문(아래 그림 참고) ⇒ SASS(SCSS)로 작성한 코드는 컴파일을 해서 일반 CSS의 문법으로 바꾼 뒤 적용한다. CSS, SASS, SCSS 차이 CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-..
SEO와 SSG, 그리고 Gatsby.js SEO란? Search Engine Optimization (검색엔진 최적화) 검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책 SEO의 목적 광고 비용을 들이지 않고 자신의 콘텐츠를 검색 결과의 상위에 표시함으로써 사이트 유입을 늘림 검색 키워드에 관련된 콘텐츠를 제공해, 검색에 대한 니즈를 만좀시켜줌으로써 브랜드 인지도 향상 및 신뢰도 상승, 상품 구매까지 이어지게 할 수 있는 전략. SEO에서 중요한 2가지는 검색 니즈에 맞춘 콘텐츠 (contents)와 기술적 요소 SEO의 과정 검색엔진이 검색 결과를 제공하는 주요 프로세스에는 크롤링(C..
Redux란? 필요한 이유 만약 A 컴포넌트가 B 컴포넌트에, B 컴포넌트는 C 컴포넌트에.. 이렇게 D, E, F, G 컴포넌트 까지 이어진 루트가 있다고 가정했을 때 A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야한다. = 이는 매우 비효율적인 행위. 이 때 하나의 스토어 ( Store ) 라는 매체를 두면 위의 순서가 아니라, A ▶ Store ▶ G 식의 효율적인 접근이 가능하게 해준다. 이 Store 는 Redux 를 통해 사용할 수 있다. 리덕스 ( Redux ) 란? Redux는 상태 관리 도구이다. 주로 React와 함께 사용되며 다른 JavaScript 프레..
React Router란? React는 SPA(Single Page Applicatoin)이다. SPA : 페이지(Page)가 하나(Single)인 어플리케이션(Application) React Router란? 여러개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA(
React Hooks란? React Hooks란? 함수형 컴포넌트에서 상태와 생명주기 관리를 쉽게 할 수 있다. 기존 react와 호환되기 때문에 이전 코드를 고칠 필요가 없다. class형 컴포넌트에서는 작동하지 않는다. react에서 제공하는 내장 Hooks : useState, useEffect… 1. useState state 값을 관리한다. import React, { useState } from 'react'; const AddSub = () => { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}>더하기 setCount(count - 1)}>빼기 ); }; export default AddSub;..

티스토리툴바