몽땅뚝딱 개발자

첫번째 시도 => 실패 1. package.json 삭제 2. node-modules 삭제 3. npm i 두번째 시도 => 성공 ㅠ 라우터 js에 언제 이런게 추가됐었을까... 저 부분 지우니까 잘 돌아간다... 아프지마.. (제발)

image-box { position:relative; &__image { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 100%; max-height: 100%; } }

◽ transform-origin transform-origin: {세로} {가로} ex) transform-origin: center left; 이라면 세로 기준으로 center, 가로 기준으로 left부터 정렬된다. const BarGraph = styled.div` position: absolute; left: 0; top: 0; width: 100%; transform: scaleX(${({width}) => width / 100}); transform-origin: center left; transition: transform 1.5s ease; height: 100%; background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)'..

◽ 단방향 데이터 흐름 React는 Vue과 동일하게 데이터가 위에서 아래로 단방향으로 흐른다. 단방향으로 흘러야 통제가 쉬우며 값에 오류가 있을 때 그 값의 변경을 책임지는 컴포넌트를 빨리 찾아낼 수 있다. 이는 양방향으로 관리되는 데이터보다 ◽ React의 컴포넌트 React에서 추구하는 컴포넌트는 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙으로, 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다. 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리하는 것을 추구한다. ◽ 엘리먼트(element) - 리액트에서의 엘리먼트는 리액트 앱을 구성하는 최소 단위이다. - 리액트 엘리먼트는 일반 자바스크립트 객체값을 가진다. const ..

◽ dataset의 문법 'data-'라는 prefix를 붙이고 map으로 관리된다. const target = this.document.querySelectorAll('li') target.setAttribute("data-auto", true) ◽ 가져오기 const target = this.document.querySelectorAll('li') console.log(target.dataset.min) // 5 console.log(target.dataset.max) // 10 console.log(target.dataset.auto) // true 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ State를 올바르게 사용하기 1. setState()를 활용한다. 컴포넌트를 다시 렌더링하도록 setState()를 사용한다. contructor에서 this.state를 지정할 수 있다. // wrong // 직접적으로 state를 수정하는 이 코드는 컴포넌트를 다시 렌더링하지 않는다. this.state.comment = 'Hello' // Correct this.setState({comment: 'Hello'}); 2. state 업데이트는 비동기적으로 처리될 수도 있다. this.props와 this.state가 비동기적으로 업데이트 될 수도 있기 때문에 해당 값에 의존해서는 안된다. 이를 수정하기 위해서는 객체보다는 함수를 인자로 사용하는 다른 형태의 setState()를 사용한다.그 함수..

◽ 마크다운(Markdown)이란? 언어이며 쉽게 쓰고 읽을 수 있고 HTML로 변환이 가능하다. 간단한 구조의 문법을 사용하여 접근성이 좋다. ex) REAEME.md 파일 등

청크파일을 뜯어보자! ◽ npm webpack-bundle-analyzer Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.5.0, last published: 7 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`. T www.npmjs.com ◽ 설치하기 npm install --save-dev cra-bundle-analyzer ◽ 실행하기 npx cra-bundle-analyzer ◽ 적용..

설치하기 npm i webpack-dev-server npm i -D @types/webpack-dev-server 핫 리로딩을 위해 웹팩 데브서버를 사용한다. cors 에러를 해결해주기도 한다.

리눅스, 윈도우 환경에서 모두 실행될 수 있도록 설정 ◽ 설치하기 npm i cross-env 📄 package.json "scripts": { "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack", }