본문 바로가기

react

 (4)
React란 한때, 자바스크립트 (이하 JS)는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 수행하고 있습니다. 나아가 브라우저뿐만 아니라 모바일, 데스크톱 어플리케이션에서도 널리 쓰이고 있습니다. 우리가 보통 사용하는 웹 아키텍처는 흔히 들을 수 있는 MVC (Model View Controller), MVVM (Model View View Model), MVW (Model View Whatever) 패턴 등이 있습니다. 모델은 어플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 부분입니다. 컨트롤러는 사용자에게서 요청이 들어오면 모델 데이터를 조회하거나 수정하여 변경 사항을 뷰에 반영합니다...
React-slick으로 슬라이드 만들기 일단, npm 혹은 yarn으로 react-slick과 slick-carousel을 설치합니다. npm install react-slick, npm install slick-carousel 혹은 yarn add react-slick, yarn add slick-carousel (타입스크립트 사용시 @types/react-slick 추가 설치) 가장 먼저, 슬라이드 설정을 해줘야 합니다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 9, slidesToScroll: 9, initialSlide: 0, responsive: [ { breakpoint: 1440, settings: { slidesToShow: 7, slid..
styled-media-query로 반응형 디자인 구현하기 styled-media-query는 styled-component와 같이 반응형 디자인을 구현할 때 좋습니다. 사용법은 정말 간단합니다. 일단 styled-media-query를 npm 혹은 yarn으로 설치합니다. yarn add styled-media-query 혹은 npm install styled-media-query 그 후에, 전역적으로 영향을 미치는 최상위단의 파일에 (가령, styled-component를 사용하는 경우에는 GlobalStyles.js 내부) import { createGlobalStyle } from "styled-components"; import { generateMedia } from "styled-media-query"; import reset from "styled..
styled-components 사용법 일단 npm 혹은 yarn으로 styled-components를 설치합니다. yarn add styled-components 혹은 npm install styled-components 입력 가장 먼저, 공통으로 적용될 css을 설정해주기 위해 GlobalStyles.js라는 파일을 생성합니다. import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const globalStyles = createGlobalStyle` ${reset}; a { text-decoration: none; color: inherit; } * { box-sizing: border-box; } body { font-family:..

티스토리툴바