본문 바로가기

분류 전체보기

 (59)
[React] 처음 만나는 리액트 훅 리액트 훅을 알아보기 전에 Clock 컴포넌트 코드를 추가하자.  Clock 컴포넌트는 Date 타입의 today속성을 통해 자바스크립트가 기본으로 제공하는 날짜와 시간을 얻어온다.import type {FC} from 'react'import {Div, Title, Subtitle} from '../components'export type ClockProps = { today: Date}const Clock: FC = ({today}) => { return ( {today.toLocaleTimeString()} {today.toLocaleDateString()} )}export default Clock   리액트 훅이란?   리액트 프레임워크가 2019년 2월 16..
[React] daisyui CSS 컴포넌트 이해하기 CSS 컴포넌트란?  원하는 HTML요소의 스타일링을 쉽게 할 수 있는 CSS 클래스를 'CSS 컴포넌트' 라고 하며 이를 제공하는 테일윈드CSS, daisyui 등을 CSS 프레임워크(혹은 CSS라이브러리)라고 한다.  색상 테마  웹 페이지에서 가장 많이 사용되는 색상을 주 색상(primary color)라고 한다.  웹 페이지 성격에 따라 주 색상이 다를 수 있으며 주색상과 함께 사용되는 보조 색상(secoundary-color)가 있다.     또한 필요에 따라 좀 더 다양한 색상을 사용할 수도 있다.  이런 테마 색상들을 '색상 테마 라고 한다.  Button 컴포넌트 구현하기  daisyui button CSS 컴포넌트의 형태를 react를 통해 간결하게 사용할 수 있음을 알 수 있다.// 컴..
[React] 플렉스 레이아웃 이해하기 플렉스박스 레이아웃이란?  플렉스박스 레이아웃(flexbox layout)이란 flex 컨테이너가 될 요소에 display:flex 설정 후 그 안에 자식 콘텐츠 아이템을 배치하는 것을 의미한다.  플렉스 컨테이너는 콘텐츠 아이템의 inline과 block의 성질을 완전히 무시한다.  테일윈드CSS에서는 flex 클래스를 지원한다.  flex-direction 스타일 속성  CSS에서는 flex-direction 속성을 제공하며 display 설정값이 flex일 경우에만 사용할 수 있다.  flexdirection의 설정값은 row, row-reverse, column, column-reverse 등이 있으며 기본값은 row이다.  테일윈드CSS는 flex-direction 설정값에 대응하는 클래스를 제..
[React] CSS 상자 모델 이해하기 CSS의 박스 모델  Box-model (상자 모델)이란?  모든 HTML요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델이라고 한다. 박스 모델은 HTML 구성 요소를 패딩(padding), 테두리(border), 마진(margin), 컨텐츠(content)로 구분한다.   각각의 요소는 width, height 속성을 가진다.  CSS 상자모델 표준은 레벨 1, 2, 3이 있으며 CSS1, CSS2,   CSS3 등의 이름으로 레벨에 따른 CSS를 구분한다.  width와 height 스타일 속성  CSS는 HTML 요소의 넓이와 높이를 의미하는 width와 height라는 스타일 속성을 제공한다.  이 두 속성은 auto, inherit, initial, unset 등의 CSS 키워드 값을..
[React] 테일윈드CSS 리액트 프로젝트 만들기 PostCSS가 탄생한 배경 CSS개발은 역사적으로 브라우저 호환성과 벤더 접두사 같은 문제로 어려움을 많이 겪어왔으며, 이런 어려움을  극복하기 위해 루비 언어로 만든 Sass/SCSS라는 스타일 언어가 생겨나기도 했다.   Sass/SCSS는 for 반복문과 같은 프로그래밍 언어를 일부 지원했고, 벤더 접두사 문제를 해결해 주는 autoprefixer 플러그인도 제공해 지금도 큰 인기를 끌고 있다.  부트스트랩을 비롯해 널리 알려진 CSS 프레임워크는 대부분 Sass/SCSS로 만들어져 있다.  다른 언어들도 계속 발전하듯이 CSS분야에서도 '모듈화된 CSS'라는 가치를 내걸어 PostCSS라는 이름의 새로운 스타일  언어와 이를 동작하게 하는 프로그램이 탄생하였다.  PostCSS는 다양한 플러그인..
[React] 리액트 컴포넌트의 CSS 스타일링 컴포넌트 스타일링 컴포넌트 스타일링이란, React 컴포넌트의 UI(사용자 인터페이스)에 적용할 CSS를 정의하는 방법을 의미한다.React는 컴포넌트 기반 라이브러리이므로, 각 컴포넌트마다 고유한 스타일을 적용할 수 있다.  부트스트랩 사용해 보기  부트스트랩(Bootstrap)은 웹 개발에서 널리 사용되는 프론트엔드 프레임워크이다.  주로 웹 사이트의 디자인과 반응형 웹   (Responsive Web)을 쉽게 구현할 수 있도록 돕는 도구이다.  여러가지 UI 구성 요소(예: 버튼, 네비게이션 바, 가드 등)와 반응형   그리드 시스템을 제공한다. 부트스트랩을 사용해 리액트 컴포넌트를 사용하기 위해 부트스트랩 홈페이지의 CDN links의 CSS경로를 복사한다.  그 후 public 디렉터리의 ind..
[React] 이벤트 속성 이해하기 이벤트란? UI에서 버튼을 누르거나 텍스트를 입력하는 등의 행위가 일어날 때 이벤트(event)가 발생했다고 한다.  Event 타입/** 이름이 click(type 속성 값이 click')인 Event 객체를 생성하는 예 */new Event('click', {bubbles : true })     웹 브라우저의 자바스크립트 엔진은 Event 타입을 제공한다.type : 이벤트 이름으로 대소문자를 구분하지 않는다.isTrusted : 이벤트가 웹 브라우저에서 발생(true) / 프로그래밍에서 발생(false)를 판단한다.target : 이벤트가 처음 발생한 HTML 요소이다.currentTarget : 이벤트 버블링과 관계없이 현재 이벤트가 설정된 요소를 반환한다.bubbles : 이벤트가 DOM을 타..
[React] key와 children 속성 이해하기 Key 속성 설정하기  모든 리액트 컴포넌트는 key와 ref라는 속성을 포함하고 있다.  그리고 children이라는 속성을 선택적으로 포함한다.  리액트 프레임워크는 와 같은 리액트 컴포넌트뿐만 아니라 사용자 컴포넌트에도 key 속성을 제공한다.  Key 속성은 같은 이름의 컴포넌트가 여러 개일 때 이들을 구분하려고 리액트 프레임워크가 만든 속성이다.export default function App() { const texts = [hello, world] return {texts}}   해당 경고 메시지는 각각의 요소 2개에 중복되지 않는 키 값을 설정해주면 해결할 수 있다. export default function App() { const texts = [hello, world] retu..

티스토리툴바