방구석 개발자의 놀이터

&.blue{ background: $blue; &:hover{ background: lighten($blue, 10%); } &:active{ background: darken($color: $blue, $amount: 10%); } } &.gray{ background: $gray; &:hover{ background: lighten($gray, 10%); } &:active{ background: darken($color: $gray, $amount: 10%); } } &.pink{ background: $pink; &:hover{ background: lighten($pink, 10%); } &:active{ background: darken($color: $pink, $amount: 10%); ..

1. 반복자 (Iterator) next 메소드를 갖고 있다 next 메소드는 value와 done 속성값을 가진 객체를 반환 done 속성값은 작업이 끝났을 때 참이 된다 2. 반복 가능(Iterable) 객체 Symbol.iterator 속성값으로 함수를 갖고 있다 해당 함수를 호출하면 반복자(Iterator)를 반환

key값을 이용해서 의도적으로 컴포넌트를 언마운트 시켜야 할 때가 있다. export default function App(){ return( 사용자 상세 정보 ); } function UserDetail({user}){ // 여기에 상태값들이 있다고 가정하자 } 다음과 같이 사용자 정보를 받아서 렌더링을 하는 UserDetail 컴포넌트가 있다고 가정하자 이떄 UserDetail 함수에서 관리하는 상태값들이 있다고 가정할 때 그 상태값들은 해당 유저에 대한 상태값으로 부모로부터 넘어오는 user 데이터가 변경됐을 때 UserDetail함수 안의 상태값을 초기화 해야한다. 이 때, export default function App(){ return( 사용자 상세 정보 ); } function UserDe..

React DOM 요소에서 반복되는 요소에 key값을 넣어주는게 렌더링에서 효율적이다. 아래의 예제로 확인해보자! if(flag){ return( 사과 바나나 ); } else { return( 사과 파인애플 바나나 ); } 위와 같이 flag 조건에 따른 렌더링을 할 때 리액트는 이전의 돔과 비교해서 다른 점을 렌더링해주는 특징이 있다. 이전 돔과 비교할 때 순서를 기준으로 비교한다. 즉, 사과 바나나 순서에서 사과 파인애플 바나나 순서로 비교해서 따라서 위와 같이 조건에 따라 변한다면 파인애플과 바나나가 새로 렌더링된다. 하지만! 우리 입장에서는 파인애플만 추가된건데 굳이 바나나까지 새로 렌더링 된다면 비효율적이다! (물론 예제처럼 몇 안되는 돔 요소면 성능 차이는 없겠지만 복잡한 연산의 렌더링일 경..

1. useEffect 함수 react dom에 렌더링 된 후 비동기식으로 실행 비동기식으로 실행되므로 복잡한 연산을 사용해도 화면 빠르게 그려짐 2. useLayoutEffect 함수 react dom에 렌더링 된 후 동기식으로 실행 동기식으로 실행되므로 복잡한 연산을 사용하면 화면이 느리게 그려짐 렌더링 직후 돔 요소의 값을 읽어들이는 경우 또는 조건에 따라서 컴포넌트를 다시 렌더링하고 싶은 경우에만 useLayoutEffect 함수를 사용하자

filter 란? - 특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만드는 함수 예제 const food =[ { id:1, name:'포도', kind:'fruit' }, { id:2, name:'소고기', kind:'meat' } ] //과일을 만족하는 배열을 꺼내보자 const fruit = food.filter(food => food.kind === 'fruit'); console.log(fruit); // 결과 : [{id:1, name:'포도',kind:'fruit'}] food 배열에서 kind : 'fruit' 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열 fruit을 만든다.

ESM 문법을 익히기 위해 모듈을 내보내고 가져오는 코드를 예시로 사용한다. // file1.js export default function func1(){} export function func2(){} export const var1 = 123; export let var2 = 'hello'; //file2.js import myFunc1, { func2, var1, var2 } from './file1.js'; //file3.js import { func2 as myFunc2 } from './file1.js'; ESM 문법 특징 코드를 내보낼 때는 export 사용 코드를 가져오는 쪽에서는 import, from 사용 default 키워드는 한 파일에서 한 번만 사용 가능 default 키워드로 ..

React Component는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있다. 1. 기능적 차이 클래스형 컴포넌트는 함수형 컴포넌트가 할 수 있는 모든 일을 할 수 있다. React 16.8 이전 버전의 함수형 컴포넌트가 할 수 없는 일 상태값을 가질 수 없다 React Component의 생명 주기 함수를 작성할 수 없다 그러나, React 16.8부터 훅(hook)이라는 기능이 추가되면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성할 수 있게 되었다 2. 결론 새로운 프로젝트를 만든다면 되도록 클래스형 컴포넌트를 지양하고 훅(hook)과 함께 함수형 컴포넌트를 작성하는게 좋다 출처 : 실전 리액트 프로그래밍 도서

create-react-app 환경에서 npm install node-sass를 하고 npm start를 했을 때 Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 에러가 났다. 해결 방법 1. npm uninstall node-sass 2. npm install node-sass@4.14.1

1. Getter의 특징 - get 함수명() {} 식으로 생성할 때 get을 붙임 - return 값이 있어야함 - 호출할 때 getter()로 하지 않고 getter로 호출 const numbers = { a: 1, b: 2, get sum(){ console.log('getter 실행'); return this.a + this.b; } }; console.log(numbers.sum); numbers.b = 5; console.log(numbers.sum); 2. Setter의 특징 - set 함수명() {} 식으로 생성할 때 set을 붙임 - parameter가 있어야함 const dog = { _name: '멍멍이', set name(value){ console.log('setter'); thi..