Google DSC Sookmyung

Context API context를 이용하면 단계마다 일일이 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 언제 context를 써야 할까 context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마(theme) props를 명시적으로 넘겨주고 있습니다. class App extends React.Component { render() { return ; } } function Toolbar(props) { // Toolbar 컴포넌트는 불필요한 테마 prop를..

React-query 란? react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리 react-query 상태 ✅ fresh : 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 ➜ 컴포넌트가 마운트, 업데이트되어도 데이터 재요청 ❌ ✅ fetching : 요청 중인 쿼리 ✅ stale : 만료된 쿼리 ➜ 컴포넌트가 마운트, 업데이트되면 데이터 재요청 ⭕️ ✅ inactive : 비활성화된 쿼리 ➜ 특정 시간이 지나면 가비지 컬렉터에 의해 제거 react-query 장점 캐싱 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들..

CSS-in-CSS CSS module css를 모듈화하여 사용하는 방식으로, css 클래스를 만들면 자동으로 고유한 class name을 만들어 scope를 지역적으로 제한한다. 모듈화된 css를 번들러로 불러오면, 아래 그림과 같이 사용자가 정의한 class name과 고유한 class name으로 이루어진 객체가 반환된다. 장점: 동일한 프로젝트 소스 안에 중복되는 css 클래스 이름이 있더라도, 새로운 이름이 입혀져 중복의 위험성이 적다. css 네이밍 규칙이 간소화된다. 단점: 한 곳에서 모든것을 작성하지 않기에 별도로 많은 css 파일을 만들어 관리해야 한다. CSS 전처리기 자신만의 특별한 구문(syntax)를 가지고 css를 생성하는 프로그램. 변수, 함수, 상속 등 일반적인 프로그래밍 개..

webpack이란? 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러 webpack이 애플리케이션을 처리할때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다. 앤트리 포인트에서 시작하여 애플리케이션에 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 만들고 모든 모듈을 브라우저에 의해 로드 되는 작은 수의 번들로 묶는다. Entry : 앤트리 포인트는 webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈 webpack은 앤트리 포인트가 의존하는 모든 모듈과 라이브러리를 찾아냄 // 단일 앤트리 구문 module.exports = { entry: './path/to/my/entry/file.js', }; or // 다..

초기세팅 (ESLint + Prettier + Stylelint) / Recoil ESLint란? ES는 EcmaScript(=Js)로서 Ecma재단에서 만든 Script Specification을 의미하고, Lint는 에러가 있는 코드에 표시를 달아주는 것을 의미한다. 자바스크립트는 동적 분석을 하기 때문에 에러를 찾기 위해서는 코드를 직접 실행하고 확인해야 한다. 동적 분석: 프로그램을 직접 실행해서 코드 분석 정적 분석: 프로그램을 실행하지 않고 코드 분석 이를 도와주는 것이 Linter인데, 코드를 정적으로 분석해서 프로그램 실행 전에 코딩 컨벤션에 맞지 않는 내용을 검출해준다. 출처: https://eslint.org/ constant는 재선언, 재할당이 불가능한데 같은 이름의 상수를 재선언 했..