# Sass
SCSS(Sass)란?
css는 문서의 스타일을 구현하는 스타일 시트 언어이다. 프로젝트가 커지고 코드가 많아질수록 유지보수가 어렵다는 불편함이 생길 수 있다. > 1. selector를 만들때 매번 불필요한 부모요소의 선택자를 적어야 한다. > 2. 코드 수동 변경 필요 > 3. 중복
235024 - React(css module)
🚩 React CSS Module 📝 설명 css module을 사용하면 css 클래스가 중첩되는 것을 방지할 수 있다. css 파일명 뒤에 .module을 붙여주면 됨 ✒️ 예제 코드 작성 입력 App.js Button1.jsx Button1.module.css Button2.jsx Button2.module.css CheckBox.j...
[scss] @if
if(조건식, 표현식1, 표현식2).section-v1{ width: $section-v1; background-color: if($section-v1 > 700, coral, orange);}/ CSS 컴파일 결과 /.section-v1{ width:900pxl
[scss] 변수, !global, !default
변수 이름 앞에 $를 넣어서 사용한다.반복되는 목적의 속성 값을 하나의 변수에 관리하여 여러 곳에 값을 할당하여 줄 수 있다.변수에서 사용 가능한 값은 문자열, 숫자, 색상, 불리언(true, false), 리스트(Array), null이다.변수 문법 코드문서의 최상위
[scss] @each, @while
@each는 list와 map데이터를 반복할 때 사용한다.자바스크립트 for in 반복문과 유사하다.하나의 데이터를 저장하기 위해서 변수를 사용하는데, 여러 개의 데이터를 저장할 때에는 list 또는 map이라는 형식으로 저장한다.연관된 데이터들끼리 모아서 하나의 변수
[scss] @for (through / to)
@for $index from 1 through 3through 숫자까지 반복 \* 1부터 3까지 반복@for $index from 1 to 3to 바로 앞 숫자까지만 반복 \* 1부터 2까지 반복
230519 - React(useCallback, useEffect, useReducer), SASS/SCSS(반응형)
🚩 React useCallback 📝 설명 React Hooks 중 하나, useMemo와 비슷 useMemo는 특정 결과값을 재사용, useCallback함수를 재사용 함수 안에서 사용하는 props가 있으면 꼭 deps로 포함시켜야 함 -> 최신값을 인식하게 ✒️ 사용법 useCallback(함수선언구, 변화요소(dependency)) 예제...
[scss] @for 반복문
1. @for문의 사용 위와 같은 형태로 작성하고 to 대신 through를 작성할 수 있다. 예시 > @for문을 작성할 때 변수는 보간법으로 처리해야 컴파일 에러가 발생하지 않는다 > > * 보간법 > - #(샵) 특수문자와 {}(중괄호)를 사용하여 표기한다
230517 - React(배열 렌더링, useRef), SASS/SCSS
🚩 React 배열렌더링 prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js UserList1.jsx UserList2.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [React] 배열렌더링 useRef 📝 설명 컴포넌트의 속성
230516 - useState
🚩 React useState(중첩된 객체) prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js 출력 이미지로 대체 , sass/scss(채팅어플)
🚩 React 리액트로 가위바위보 만들기 3일차(완성) 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 버튼 클릭할 때 마다 컴퓨터의 이미지 랜덤으로 변경됨 가위 
[SCSS] node-sass 설치&설정
vscode 터미널에 npm init -y 입력\-> package.json 파일 생성vscode 터미널에 npm i node-sass 입력\-> package-lock.json 파일 생성packge.json "sctipts" 부분 아래와 같이 수정cf) node-sa

(SEB_FE) Section3 Unit3 Component Driven Development
Component Driven Development(CDD)의 필요성과 이점에 대해서 이해한다.구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.CSS 방법론들의 특징과 장단점을 이해한다.Styled Components의 기본 사용법을 익힌다.HTML과