목록밥벌이 (281)
연습장
설치 $ npm install -g sass 버전확인 $ sass --version 트랜스파일링(컴파일) $ sass src/sass:dist/css package.json 사용시 "scripts": { "build:sass": "sass --style compressed src/sass:dist/css", }, 변수$변수명$변수명 : 값 !global // 전역변수로 바꿀때$변수명 : 값 !default // 초기값 Interpolation #{$변수명} // 변수의 값을 문자열로 삽입 Ampersand &:hover // &는 부모요소를 참조하는 셀렉터이다. Nesting // 선언을 중첩#navbar{ ul{ li{ ... }..
https://poiemaweb.com/sass-webpack Webpack + Sass | PoiemaWeb poiemaweb.com 기존{ "name": "sass-study", "version": "1.0.0", "main": "index.js", "scripts": { "build:sass": "sass --style compressed src/sass:dist/css" }, "keywords": [], "author": "", "license": "ISC", "description": ""} 설치 bash$ npm install --save-dev webpack webpack-cli css-loader sass sass-loader mini-css-extract-plugin..
https://poiemaweb.com/sass-built-in-function Sass - Built-in Function | PoiemaWeb poiemaweb.com https://sass-lang.com/documentation/modules/ Sass: Built-In ModulesCompatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead. Sass provides many b..
https://poiemaweb.com/sass-css-extention Sass - CSS Extensions | PoiemaWebSass의 유용한 확장 기능으로 선언을 중첩(nesting)하는 것이다. CSS는 후손 셀렉터(Descendant Combinator)의 경우, 부모요소를 기술하여야 한다.poiemaweb.com 1. Nesting 선언을 중첩(nesting)하는 것이다. CSS는 후손 셀렉터(Descendant combinator)의 경우 부모요소를 기술하여야 한다. css#navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left;..
CSS에서는 불가능한 연산, 변수, 함수 등의 확장 기능을 의미한다. 1. 데이터 타입 프로퍼티 값으로 사용할 수 있는 값에는 각각의 데이터 타입(Data type)이 존재한다. SassScript는 7가지의 데이터 타입을 제공한다. // 숫자형(Number)$font-size: 16px;$line-height: 1.5;// 문자열(String)$font-family: 'Arial', sans-serif;// 컬러(Color)$primary-color: #3498db;$secondary-color: rgba(255, 0, 0, 0.5);// 부울(Boolean)$is-active: true;$is-disabled: false;// 널(Null)$no-value: null;// 리스트(List)$co..
https://poiemaweb.com/sass-basics Sass - Basics | PoiemaWebSass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배poiemaweb.com 1. 소개 CSS pre-processor로서 CSS의 한계와 단점을 보완하여, 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. 기능변수의 사용조건문과 반복문ImportNestingMixinExtend/Inheritance 장점CSS보다 심플한 표기법으로 C..
https://velog.io/@hjoo3355/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%A0%95%EB%A6%AC 프론트엔드 +클론코딩 정리프론트엔드 구현해보고 싶은 것들:필수제한 - 하나씩 일주일이라는 시간을 둘 것1\. TODO List제한사항순수 자바스크립트로만 구현SPA 로 구현하기SCSS 전처리기 사용Babel 과 Webpack 으로 환경 세팅Pretvelog.io 필수제한 - 하나씩 일주일이라는 시간을 둘 것...? 1. TODO List제한사항1. 순수 자바스크립트로만 구현-> 리액트는 순수 자바스크립트일까? -> 리액트는 자바스크립트 라이브러리로 jsx 문법을 사용하기 때문..
사용자의 상태를 관리 하기 위한 방법클라이언트와 서버 간의 상태를 유지하고 정보를 저장하는 데 사용됩니다. HTTP 프로토콜의 특징으로 1. Connectionless (비연결지향) 클라이언트가 서버에 요청을 보내면, 서버는 해당 요청에 대한 응답을 전송한 후 연결을 끊는다는 것을 의미합니다. Keep-AliveHTTP/1.1부터 지원되는 기능으로, 하나의 TCP 연결을 여러 HTTP 요청과 응답 사이에서 재사용할 수 있게 해줍니다.서버 부하 감소: 서버는 매 요청마다 TCP 연결을 설정하는 작업을 줄일 수 있으므로 서버 부하를 감소시킬 수 있습니다. HTTP/1.0에서는 명시적으로 설정HTTP/1.1에서는 기본적으로 활성화HTTP/2에서는 다중 요청과 응답을 하나의 연결에서 병렬로 처리 2. S..
https://disco-biscuit.tistory.com/86#%ED%8A%B9%EC%A7%95 MobX 를 이용한 간단한 앱 만들기01. MobX 란 redux이후로 많이 사용되는 상태관리 라이브러리이다. MobX는, 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어주는 검증된 라이브러리다. 특징 쉽다. 미니멀하고 보일러 플레disco-biscuit.tistory.com MobX는 상태 관리 라이브러리로서, 주로 React와 같은 JavaScript 프레임워크와 함께 사용되며 애플리케이션의 상태를 관리하는 데 도움을 줍니다. MobX는 리액티브 프로그래밍 원칙을 기반으로 하며, 상태의 변화를 자동으로 감지하고 필요한 부분만 업데이트하는 방식으로 동작합니다. 옵저버 패턴. 쉽다.미니멀하고 ..
Redux는 JavaScript 상태 관리 라이브러리 입니다. 필요성:react 에서 state 는 component 안에서 관리됩니다.리액트 특성상 단방향 데이터 바인딩이기 때문에, 하위 컴포넌트에게 state를 전달 할 수 있습니다.이를 props 라고 하며, component 구조가 깊어지면 props 를 계속 전달해야 하는 'Props drilling' 이슈가 있습니다.또한 props 되는 component 가 많아지면 state 관련 오류 발생시 조치하기 어려워지는 문제점도 있습니다.이때, redux를 사용하여 state를 관리하면 위와 같은 문제를 개선 할 수 있습니다. 예시코드 .gpt Redux 를 사용해서 버튼 숫자 count 를 state 로 관리하고 '좋아요' 버튼 클릭시 count..