프론트 개발 블로그

// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , ); React.StrictMode 는 버전 16.3에 추가된 기능입니다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 합니다. StrictMode는 개발 모드에서만 활성화되기 때문에 프로덕션 빌드에는 영향을 끼치지 않습니다. Create-react-app 으로 웹앱을 설정하면 ..

jest 를 설치 후 npm start 혹은 yarn start 로 리액트를 브라우저에 띄우려고 할 때 아래와 같이 에러가 발생한다. 프로젝트 종속성 트리에 문제로 Create React App 의 버그는 아니고 앱에서 수정해야 한다고 나왔다. 해당 매뉴얼 대로 확인해보니 Create React App 으로 리액트를 설치 했을 때 react-scripts 패키지에 jest가 이미 설치되어 있어서 에러가 나고 있었다. yarn run v1.22.1 $ react-scripts start There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you nee..

create-react-app 으로 react 개발 환경을 설정해줄 때, 자동으로 index.js 파일 내에 코드가 추가 됩니다. 해당 코드로 인하여 render가 두번씩 발생합니다. React.StrictMode 는 버전 16.3에 추가 된 기능이며, 애플리케이션에서 잠재적인 문제를 찾는 데 도움을 줍니다. medium.com/nmc-techblog/wait-youre-not-using-react-strictmode-a9713927a33b Wait, you’re not using ?! Last month on twitter, I encountered a tweet by Sebastian Markbåge a React core team member asking developers if there app ..

아래와 같은 코드를 작성할 때 Warning: Each child in a list should have a unique "key" prop. 이와 같은 에러 문구가 발생된다. 리스트의 원소마다 유니크한 'key' prop를 가져야 된다는 말이다. 리액트의 원소는 유일해야 되는데 원소가 리스트에 포함되면서 유일성이 없어졌기 때문이다. 불러오는 데이터에 id를 추가해 각각 원소마다 유니크한 값을 주고 key props를 불러오면 에러문구는 사라진다. 리액트는 컴포넌트가 서로 다르다는 것을 알 수 없기 때문에 이렇게 각각의 유니크한 key props 값을 주어야 한다. const foodILike = [ { name: 'banana', number: 1, image: 'https://www.google.co..

input 가상 클래스 ::after 로 디자인 된 체크박스 작업 시 IE에서 가상요소인 ::after 속성을 삭제하는 현상 1 2 3 4 5 6 .apply .agree .input__checkbox {float:left; width:0px; height:0px; margin:-1px; padding:0; border:0; clip:rect(0, 0, 0, 0);} .apply .agree .input__checkbox::after {display:block; content:''; cursor:pointer; display:inline-block; width:30px; height:30px; background:url('../../static/img/ico_agree.png') no-repeat; ba..

Frame By Frame 애니메이션 구현하기 1분 코딩님의 인터랙티브 웹 개발 제대로 시작하기 강의 참고 5100 X 300 사이즈의 스프라이트 이미지를 Frame By Frame 애니메이션으로 구현해야 되는 상황 TIP1. 가로, 세로 사이즈의 두배 사이즈의 이미지를 만든 다음에 CSS 상에서 절반으로 잘라서 사용하기 : 레티나 디스플레이와 같은 고해상도 디스플레이에서 px 직접도가 높은 고해상도로 표현됩니다. TIP2. animation-timing-function: steps() 속성을 사용하기 : 해당 속성을 지정해주지 않으면 -2550px 만큼 연속으로 흘러가는 애니메이션이 되는데, 해당 속성을 사용하면 steps 단계만큼 끊어지는 애니메이션을 구현할 수 있습니다. @keyframes spac..

Invalid shorthand property initializer 객체에서 key, value 값을 작성할 때 ':' 대신에 '=' 을 잘못 사용할 경우 해당 에러 코드가 난다.

플렉스 컨테이너 자식을 어떤 방향으로 배치할 수 있고, 자식의 크기도 유연하게 표현할 수 있습니다. display: flex 부모 요소 컨테이너의 속성으로 지정하여, 자식 속성을 유연하게 만듭니다. .container { display: flex; background: gray; } flex-direction 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다. .container { display: flex; flex-direction: row; background: gray; } 기본값 row 상속 NO 애니메이션 NO 버전 CSS3 Javascript syntax: object.style.flexDirection='row' css syntax row | row-re..

CSS에서의 3D 공간의 표현은 우선 원근감을 부여해 화면에 3D 공간을 설정한 후 그 공간 안에서의 2D 요소를 어떻게 행동시킬 지 설정합니다. perspective 원근감을 표시할 수 있도록 Z 인덱스와 관찰자 사이의 거리를 지정하는 속성 Z 인덱스에 관찰자가 가까울 수록 3D 요소가 커짐 기본 값 none 상속 NO 애니메이션 Yes 버전 CSS3 Javascript Syntax object.style.perspective = '50px' Property Values none | length | initial | inherit perspective-origin 3D 위치의 소실점을 정의함 기본 값 50% 50% 상속 NO 애니메이션 Yes 버전 CSS3 Javascript Syntax object...

CSS Animations 은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 됩니다. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. // 예시 코드 animation: sprite-ani 1s infinite steps(17); /* animation-duration: 1s; animation-timing-function: steps(17); animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: sprite-ani; */ an..