ALL
Dart 연산자#1
Dart애서 Null Safety 타입과 연산자가 있다Dart 2.12버전부터 Null값에 대한 안정성을 위해 Null Safety라는 개념이 도입되었다Nullable TypeNull을 허용해야하는 타입일때 ? 를 붙인다int?, double?, bool?, String?Non-nullable TypeNull을 절때 허용하지 않는 타입이다int!, double!, bool!,String!
Dart 변수와 타입#2
늘 그랬듯이 개발을 처음 공부할 때 가장 먼저 하게 되는 Hello World를 입력해보자void main() { print('Hello World');}변수 선언 및 할당을 해보자bool: 참 / 거짓형int : 정수형double : 실수형String: 문자열형null: Null 형해당 키워드를 앞에 입력하고 변수를 선언하면된다bool 같은 경우 참 혹은 거짓에 대한 값만 받을 수 있기 때문에 true라고 작성햇다void main() { bool isTrue = true;}이렇게 하면 isTrue값에 true값이 들어가게된다이것을 변수를 선언하고 할당했다고 한다void main() { int num = 100; double num2 = 3.14; String string = 'Hello..
Dart 변수와 타입
Dart에서 타입은 꼭 정의 해야 할까?반드시 정의할 필요는 없다. 하지만 주고 받는 타입에 대한 정의가 명확해야, 추후에 코드를 관리하고 협업하는데에 도움이 된다.가변형var : 최초에 한번 부여 된 타입이 고정적으로 사용된다Dynamic : 타입이 코드 진행 중에라도 언제든 변환 가능하다변수는 한번 할당한 값을 여러번 수정할 수 있는 특징이 있다.상수는 값을 한번 할당하면 바꿀 수 없다.Dart에는 상수를 선언하는 방법이 2가지 존재하는데,Const: compile 시점에 상수 처리 될 경우에 활용된다final : 프로그램의 진행 중에 상수 처리 될 경우에 활용된다
Styled-Components Dialog 만들기
Dialog란 화면을 가리면서 어떤 작업을 선택할지 나오게 되는 컴포넌트 박스입니다 Components 폴더에 Dialog.js 생성 기존에 만든 버튼을 활용할 예정이기에 버튼도 같이 불러옵니다 import React from "react"; import styled from "styled-components"; import Button from "./Button"; function Dialog() { return ; } export default Dialog; 어두운 배경 설정 const DarkBackground = styled.div` position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: cen..
Styled-Components 버튼 스타일 추가 설정
Button.js에서 outline props를 생성합니다 function Button({ children, color, size, outline, ...rest }) { return ( {children} ); } outline은 true or false Boolean값으로 정해지기 때문에 defaultProps 설정을 전달하지 않는다면 undefined가 되면서 false와 똑같이 간주하게 됩니다 색상 쪽에서 지정하겠습니다 ${(props) => props.outline && css` color: ${selected}; background: none; border: 1px solid ${selected}; &:hover { background: ${selected}; color: white; } `}..
Styled-Components 각각의 버튼 사이즈 조정 하는 방법
Button.js에서 size props를 생성합니다 function Button({ children, color, size, ...rest }) { return ( {children} ); } //Button 기본값 설정 Button.defaultProps = { color: "blue", size: "medium", }; 사이즈 props에 따라 각기 다른 값을 주겠습니다 props.size가 large라면 css에 어떤값을 줄 것이냐 라는 의미입니다 ${(props) => props.size === "large" && css` height: 3rem; font-size: 1.25rem; `} 2번 복사해서 large, medium, small을 만들고 값을 지정하겠습니다 /* 크기 */ ${(pro..
Styled-Components Polished 라이브러리
✨ polished | A lightweight toolset for writing styles in JavaScript A lightweight toolset for writing styles in JavaScript. polished.js.org Polished 라이브러리는 다양한 스타일 유틸 함수를 적용할 수 있습니다 사용할 함수를 가져와서 import하면 적용됩니다 Polished 라이브러리 설치 $ npm install --save polished Button.js에 사용할 import 해줍니다 import { darken, lighten } from 'polished'; hover에서 사용해봅시다 /* 색상 */ background: #228be6; &:hover { background: ${..
Styled-Components로 버튼 만들기
src 폴더에 components 폴더를 생성하고 BUtton.js 파일을 생성합니다 Styled-Components를 불러옵니다 import styled from "styled-components"; 버튼 컴포넌트 생성 const StyledButton = styled.button``; 먼저 공통적으로 해야할 사이즈를 조절합니다 const StyledButton = styled.button` /* 공통 스타일 */ display: flex; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; justify-..