프론트엔드 정복하기

SCSS V2가 릴리즈되면서 사용법이 매우 편리해졌다. (이전에는 sass-loader를 추가하는 등 복잡했음) 1) node-sass를 설치해주고, npm i node-sass 2) .scss 확장자를 가진 파일을 만들어 주고 AnyName.scss 3) AnyName.js파일에 AnyName.scss 파일을 import 해준다. import './AnyName.scss'

SCSS 중첩(Nesting) (LESS의 내포 규칙과 많이 비슷하다.) 중괄호 안에 해당 요소의 자식 요소들의 스타일을 작성하면 된다. LESS 기법에서 접두어만 @에서 $로 바꾸면 된다. 기존 CSS SCSS div { width: 500px; color : #000000; } div h3{ width: 500px; color : #f96d9c; } div h3 a { color : #000000; } div h1{ width : 300px; color : #ff0000; } $color-black : #000000; $color-pink : #f96d9c; $color-red : #ff0000; $width-default : 500px; div { width : $width-default; colo..

LESS 내포 규칙(Nested Rules) 중복되는 부모 태그, 클래스를 생략해주는 기법 => CSS 전체 구조도를 파악하는 데도 도움이 된다. 기존 CSS LESS div { width: 500px; color : #000000; } div h3{ width: 500px; color : #f96d9c; } div h3 a { color : #000000; } div h1{ width : 300px; color : #ff0000; } @color-black : #000000; @color-pink : #f96d9c; @color-red : #ff0000; @width-default : 500px; div { width : @width-default; color : @color-black; h3 { wi..

SASS, SCSS, LESS 비교 SASS, SCSS VS LESS SASS, SCSS LESS 구축환경 Ruby 환경 JS 문법을 취하고 Node.js 기반 접두어 달러 $ @ 변수 예시 $test @test 대입 예시 $test : 10px @test : 10px SASS VS SCSS *Sass는 css를 확장한 메타언어이고, 이는 SASS, SCSS라는 2가지 기법을 가지고 있다. SASS기법이 먼저 나오고 SCSS기법이 연이어 나왔는데, SCSS기법을 더 많이 쓰는 추세라고 한다. SASS SCSS like 툴 ruby like (Ruby를 설치해야 SASS를 사용할 수 있다.) css like 괄호, 세미콜론 사용 중괄호, 세미콜론 사용 x => 대신 indent를 활용 CSS와 거의 비슷 ..

MongoDB의 $text 텍스트 인덱스란?) 특정 string 검색어와 일치하는 필드 내용을 찾는다. (인덱싱된 필드의 내용에 대해 텍스트 검색을 수행한다.) $text 표현문 기본 { $ text : { $ search : , $ language : , $ caseSensitive : , $ diacriticSensitive : } } 필드 타입 설명 $search string 검색에 사용하는 문자열 $language string (선택값) 불용어 목록 등을 설정함. $caseSensitive boolean (선택값) 대소문자 구분을 활성화 - default : false ( 구분 x ) $diacriticSensiti..

자식 컴포넌트에서 변화되는 state을 부모 컴포넌트에서도 바로 바로 반영받고 싶다면 어떻게 해야 할까? 1. 부모 컴포넌트에서 update 함수를 자식에게 props로 넘겨준다. -update 함수 const [SomeState, setSomeState] = useState("") //state 생성 const updateState = (newCont) =>{ //newContents를 state에 setting하는 함수 생성 setSomeState( newCont ) } //자식 컴포넌트에 update function을 props로 상속한다. 2. 자식 컴포넌트에서 변화하는 state를 부모컴포넌트로부터 상속받은 refreshFunction에 입력해준다. //자식 컴포넌트 //예를 들어 input 태..