Developer

React 리액트 - 컴포넌트(component)

component import React from 'react';import Button from './style';const BasicButton = ({size, shape, variant, border, font, color, children}) => { return ( {children} );};export default BasicButton; : size={""} shape={""} variant={""} border={""} font={""} color={""} -> 사용하고자 하는 요소들의 key값을 비구조할당함 import styled, {css} from "styled-components";import { flexCenter } from "../../s..

React 리액트 - 리액트 style 아이콘 [Font Awesome]

icon - 다양한 아이콘 무료 사용 가능- 애니메이션 아이콘 생성 가능 https://fontawesome.com/ Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com yarn add styled-components @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome styled-reset @fortawesome/fontawesom..

React 리액트 - 리액트 style 미디어 사이즈 적용 breakpoint.js

breakpoint.js - 미디어 사이즈를 정의하는 파일- 모바일, pc, 태블릿 등 미디어별로 이펙트 부여 가능 breakpoint.js>const size ={ mobile: "480px", tablet: "768px", laptop: "1024px", desktop: "1280px"}export const media = { mobile: `(max-width: ${size.mobile})`, tablet: `(max-width: ${size.tablet})`, laptop: `(max-width: ${size.laptop})`, desktop: `(max-width: ${size.desktop})`} import styled from "styled-components";i..

React 리액트 - 리액트 style 애니메이션 적용

keyframes.js - keyframes 폴더로 애니메이션 이펙트 관리- keyframes > keyframes.js 파일 내에서 이펙트 구현 import { keyframes } from "styled-components";export const fadeIn = keyframes` 0% { opacity: 0; transform: translate(0, -30px); } 100% { opacity: 1; transform: translate(0, 0); }` import styled from "styled-components";import { flexCenter, flexCenterColumn, flexColumn, h1Bold, h3Regular } from ..

React 리액트 - 리액트 style 활용 방법 theme.js

theme.js - 테마 관련 정의 파일 - UI/UX 가이드에 정의된 값을 정의하는 파일 theme.js에서 전체 테마를 정의한 후 common.js에서 프로젝트에서 자주 쓰이는 공통 속성을 정의style.js에서 해당 폴더에 적용하는 스타일을 변경 가능하도록 정의해 사용 theme.js>const theme = {}; theme.PALETTE = { primary: { main: "#ffd159", sub: "#fff4d8" }, secondary: "#f1ebf5", white: "#fff", gray: { 100: "#f1ebf5", 200: "#aea8be", 300: "#605866" }, error:..

React 리액트 - 리액트 style 활용 방법 global.js

styles > global.js global.js는 리액트의 글로벌 스타일 정의 파일-> 프로젝트 전체 속성을 한꺼번에 정의할 수 있다 ** common.js가 공통적으로 자주 사용하는 속성이라면global.js는 프로젝트 전체 속성 및 스타일을 정의한다 기본 스타일 리셋 기본적으로 가지고 있는 스타일이 있다-> 패딩, 마진 등이 기본적으로 적용되어 있음-> 고유 스타일을 적용하기 위해 기본 스타일을 리셋해주어야 함 import { createGlobalStyle } from "styled-components";import reset from "styled-reset"; // reset이라는 패키지를 가져올 수 있다const GlobalStyle = createGlobalStyle` ..

React 리액트 - 폰트 스타일 적용 방법 [눈누]

font : 상업적 이용 가능한 무료 한글 폰트 사이트 https://noonnu.cc 눈누상업적 이용 가능한 한글 폰트를 쉽게 찾아보세요.noonnu.cc 상업적으로 이용 가능한 유료 폰트를 포함해다양한 무료 폰트를 제공하고 있다 다운로드 페이지에서 글꼴을 다운로드해 사용 리액트 프로젝트의 resource폴더에 글꼴을 저장하고웹 프로젝트의 경우 web용으로 사용 폰트 적용 방법 web > static > woff2 가장 자주 사용하는 포맷으로 적용 public > assets > fonts 내에 사용하고자 하는 폰트 파일 넣어주기 web > static 폴더의 .css파일에 웹에 적용하는 방법이 들어 있다 global.js> // 폰트 적용 @font-face ..

React 리액트 - 리액트 style 활용 방법 common.js

Style 컴포넌트 기본 구조 import React from 'react';import S from './style';const Styled01 = () => { return ( EMAIL PW SUBMIT );};export default Styled01; - 이메일, 패스워드 입력창을 꾸미기 위해 form과 div 사용-> 스타일 적용을 위해 className 부여 import styled from "styled-components";const S = {} S.Wrapper = styled.form` disp..

React 리액트 - 폴더 구조, 리액트의 스타일

리액트 기본 폴더 구조 [components][utils] - arrayheler.js - parseheler.js[consts] - key.js (상수, 문자열)[styles] // js의 장점 -> 동적 스타일 변경이 가능 -> 변수 제어 -> 속도가 엄청나게 빠름 - theme.js - globalStyle.js - common.js ...[pages] [Home] [Hooks] [Components] -home.js[routes][hooks]... etc styled 확장 기능 styled 확장기능을 사용해 빠르고 쉽게 다양한 스타일 사용 가능 Home 리액트 프로젝트의 스타일 컴포넌트 구조 - pages에 폴더 추가: 하나의 페이지에 하나의 폴더를 만들고 스타일을 ..