몽땅뚝딱 개발자

◽ 이미지 성능 개선방법 1. 이미지 CDN을 사용 이미지 CDN이란 이미지를 사용자에게 보내기전에 이미지 포맷을 바꾸거나 사이즈를 바꿔 가공 후 전달하는 것으로 이미지 CDN을 사용하는 것이 성능에 좋다. url?src=[image_url]?width=200&height=200 2. unsplash의 사용 getParametersForUnsplash가 이미지 CDN의 역할을 해준다. ◽ 텍스트 압축 텍스트 압축이란 파일을 압축하듯 서버에서 보내는 리소스를 압축해서 서비스해주는 것이다. 네트워크 탭의 파일 중에서 Content-Encoding: gzip을 사용하는 파일을 볼 수 있다. 압축의 알고리즘에는 gzip, Deflate 2가지가 있다. gzip은 2KB를 기준으로 그 이하의 파일은 인코딩을 하지..

◽ 성능 최적화란? 로딩 속도와 렌더링 속도를 높이는 것 [로딩성능 최적화] 1. 이미지사이즈 최적화 2. code split 3. 텍스트 압축: 다양한 html, js 등을 다운받을 때 서버에서 압축해서 다운받으면 조금 더 빠르게 로드될 수 있다. 4. 컴포넌트 Lazy Loading (Code Splitting) 5. 컴포넌트 Preloading 6. 이미지 Preloading [렌더링 성능 최적화] 1. Bottleneck(=병목현상) 코드 최적화: 특정 js 때문에 느려지는 병목현상을 찾아내고 해결하는 방법을 배움 2. 애니메이션 최적화 (Reflow, Repaint) 이미지 지연(lazy) 로딩 Layouy Shift 피하기 useSelect 렌더링 문제 해결 Redux Reselect를 통한 ..

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()를 사용한다.그 함수..

Node.js란? Node.js는 Javascript를 사용하기 위해 만들어진 프로그램(=환경, *자바스크립트 런타임, 자바스크립트 실행기)이다. * 런타임: 특정 언어로 만든 프로그램을 실행할 수 있는 환경 스크립트 언어는 웹 브라우저안에서만 동작하여 웹 브라우저없이는 동작하지 못했다. Node.js는 Javascript를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하면 터미널 프로그램에서 Node.js를 입력하여 브라우저 없이 바로 실행할 수 있다. Node.js는 내장 HTTP 서버 라이브러리를 포함하고있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는게 가능하다. 출처 https://junspapa-itdev.tistory.com/3 https://hanamon.kr/nodej..

1. brew로 MySQL 설치 $ brew install mysql 2. 설정하기 // 서버 시작 $ mysql.server start // 여기서 초기화 $ mysql_secure_installation // 서버 종료 $ mysql.server stop 3. 워크벤치 설치 mac이 몬터레이인 상태에서 가장 최신 버전의 워크벤치를 설치했다. 사람들이 추천하는 버전은 8.22 버전이긴 했다. 아래처럼 설정하고 Test Connection 해보면 성공.

0) setup() setup()은 beforeCreate 이전에 호출되는 것이며, this를 사용할 수 없다. 첫번째인자: _, props 두번째인자: { emit, root, refs } ... 1) reactive() 객체만 받을 수 있다. deep 서치가 가능하다. 접근할 때 [.value]가 아니라 [변수이름.key]로 접근한다. return시 ...refs([변수이름])을 사용한다. 2) ref() reactive와 달리 원시타입을 모두 받을 수 있다. 원시값을 'value’라는 key로 감싸 객체를 반환시킨다. 따라서 원본 값은 ref 객체의 value 속성을 통해 접근할 수 있으며, 값을 변경할 때에도 value 속성에 접근하여 조작한다. ref()로 선언한 변수를 setup()안에서 사용..