키티의 코딩공부

컴포넌트 연습하기 Text //Text.js import "./Text.css"; import PropTypes from "prop-types"; const Text = ({ children, size, paragraph, block, strong, underline, delete: del, color, mark, code, ...props }) => { const Tag = block ? "div" : paragraph ? "p" : "span"; const fontStyle = { fontWeight: strong && "bold", fontSize: typeof size === "number" && size, textDecoration: underline && "underline", color, }..

컴포넌트 스타일링 1. 스타일 시트를 이용하는 방법 (CSS 파일을 통한 스타일링) 2. Inline Style을 이용하는 방법 (태그 자체에 스타일을 적용하는 방법) //index.js import "./Box.css" const Box = ({ bgColor }) => { return } export default Box; 3. CSS in JS 방법 (emotion과 같은 CSS 라이브러리를 이용하는 방법) => emotion Emotion 은 JS 로 css 스타일을 작성하도록 설계된 라이브러리 npm i @emotion/react 설치 npm i -D @emotion/babel-plugin 바벨플러그인 설치 create-react-app 에서 사용하기 pragma : 컴파일러에게 명령, /** ..

React 반응형 프로그래밍 (엑셀) 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다. 컴포넌트의 조합으로 view를 구성한다. 컴포넌트 : 재사용이 가능한 독립적인 객체. 런타임 시점에 사용. virtual dom(가상돔) : 필요한 부분만 한 번에 렌더링한다. => 성능보다는 개발을 편하게 처음에는 컴포넌트만 열심히 생각하자. 컴포넌트 구조, 아키텍처, 아름다운 코드는 잠깐 잊고 눈에 보이는 UI를 컴포넌트로 구현해보자. 그러면서 UI를 점차 추상적으로 바라보는 방법을 익히자. create-react-app 리액트로 app을 만들 수 있는 가장 빠른 방법 웹팩 등을 통한 기초 빌드 설정을 직접하지 않아도 돼서 편하다. JSX React는 JSX라는 문법을 채택하여 사용 JSX는 ht..

조건부 렌더링 v-if v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다. 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 v-else v-else 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있다. A B C A/B/C 아님 v-if는 디렉티브이므로 단일 엘리먼트에 연결해야 한다. 하지만 둘 이상의 엘리먼트를 전환하려면 엘리먼트에 v-if를 사용할 수 있다. 제목 단락 1 단락 2 v-show v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아 있다. 엘리먼트의 display CSS 속성만 전환. v-cloak을 같이 사용하는게 좋다. + 속성 선택자를 전역으로 등록시킨다. (v-cloak: 준비될 때까지 컴파일되지 않은 템플릿을 숨기는 데 사..

Vue 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 선언적 렌더링(Declarative Rendering): Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있습니다. 반응성(Reactivity): Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다. 반응형 데이터 (반응성) : 데이터가 바뀌면 화면도 바뀐다. 타이머함수 콜백을 작성할 때 화살표 함수를 사용해야한다. => 일반함수(function)를 사용하면 정상적으로 작동하지 않는다. => 일반함수에서의 this 는 함수가 '..

타입스크립트 2012년 마이크로소프트에서 발표하였다. 자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어이다. 정적 타입의 컴파일 언어 자바스크립트(동적 타입) - 런타임에서 동작할 때 타입 오류 확인 타입스크립트(정적 타입) - 코드 작성 단계에서 타입 오류 확인 => ts를 js로 변환 후, 브라우저나 Node.js 환경에서 동작 시켜야함. 자바스크립트와 완벽 호환 대부분의 플러그인, 라이브러리, 프레임워크가 지원된다. 자바스크립트 문법은 당연하게 가지고 있고 추가적인 문법까지 사용가능하다. 타입 종류 - 문자, 숫자, 불린 타입 => string, number, boolean - 객체 타입 => {KEY : TYPE} = {KEY: VALUE} obj 변수는 할당연산자(=)로 {a:0} (..

SCSS - 재활용 @mixin : 재활용 할 코드를 정의하고 필요에 따라서 언제든지 활용 가능 => @mixin 믹스인이름 { 재활용할 스타일 } @include : mixin에 담긴 속성들을 사용할 때 씀 - 매개변수를 만들어 범용화해서 스타일을 재활용 / ($size: 기본값)을 지정해주어야 다른 값을 주었을 때 적용 가능 - if 조건문 삼항연산자 처럼 사용할 수도 있다. - 클래스 선택자, 가상요소선택자 - 중첩 => @mixin에 다른 @mixin을 @include를 사용해 가지고 올 수 있다. - 전개연산자(...)를 사용하여 가변인수 - 전개연산자(...)를 사용하여 리스트 형식 + 보간을 사용해서 확장할 수도 있다. - 키워드 인수 - 특정 스타일 블럭을 추가하여 @content를 통해 ..

CSS - 변수 --변수명: 값; 속성: var(--변수명); 변수를 선언할 때 특정한 선택자 내부에서 변수를 선언한다. 변수들은 선택자의 요소에 종속이 되고 요소의 후손으로 상속이 된다. root 라는 가상클래스선택자는 html 태그 선택자와 동일하고 html태그 내부의 모든 요소에서는 선언된 변수들을 모두 사용할 수 있다. 변수가 선언된 요소에 유효범위를 가진다. container안의 item에만 갈색이 적용된 것을 볼 수 있다. 변수의 재할당 변수의 초깃값 설정 => var(--color-success, orange); --color-success에 지정된 값이 없으면 두번째 인수에 들어있는 값을 사용하겠다는 의미 CSS - @supports 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 ..

Grid Items 1 9개의 cell을 가지는 grid container , grid는 행축, 열축을 기준으로 line을 가진다. 개발자 도구를 통해 grid를 클릭하면 line의 번호를 알 수 있다. grid-row(column)-start(end) : 각 행, 열 의 라인 번호중에 몇 번째 라인에서 시작할 것인지(끝낼 것인지)를 명시 grid-row-start : 2; grid-row-end: 4; grid-column-start : 2; grid-column-end : -1; (음수도 가능) => 아이템의 위치를 어디서 시작해서 어디서 끝낼것인지 정할 수 있다. grid-row(column)-start(end): span 2; 시작 라인을 기준으로 n개의 라인을 확장해서 아이템을 늘리겠다는 의미,..

Float - 수평 정렬 float을 사용하면 container가 정상적으로 작동하지 않는데 옵션(4)을 새로 하나 만들어서 float 해제(clear)를 해야한다. => 비효율적!!! 컨테이너 속성에 overflow 추가 => 넘침을 제어해주는 속성, float과 아무런 관계를 가지지 않는다. 가상요소선택자 after => html에 가상요소를 만들어서 css속성을 추가할 수 있다. clearfix요소의 가상요소 after는 내부의 가장 뒷쪽에 가상의 요소(형제)를 만들게된다. => 컨텐트는 없고, 블록요소로 만들어져서 오른쪽,왼쪽 모두 해제가 가능한 both를 추가함. => clearfix가 부여된 컨테이너에는 float을 사용하는 요소(item)만 들어있어야 한다. @ .container>.item..