안녕하세요

class 표현방식 5가지 Abc : 파스칼케이스 aBc : 카멜케이스 a_bc : 스네이크케이스 a-bc : 케밥케이스 a__b-- : BEM meta tag를 이용하여 검색엔진에 나타날 홈페이지의 설명을 정할 수 있습니다. naver, facebook, twitter, kakaotalk 등 사이트별로 meta를 지정할 수 있습니다. 반응형으로 사이즈를 바꿀 때 left right를 주어 사이 값을 너비로 만드는 방법은 코드를 줄여주고 유용합니다. .topBanner { position: absolute; top: 50%; left: 1.5rem; right: 1.5rem; transform: translateY(-50%); } export로 function을 내보낼 수 있습니다. export defa..

리액트의 virtual DOM을 이용하여 웹페이지를 새로고침하지 않고 파일을 다 실행시킵니다. 리액트에서는 여러 페이지를 링크로 이동하는 것이 아닌 single page에서 모든 작업을 실행할 수 있습니다. 이를 CSR(client side rendering)이라 하여 이용자가 작업을 웹페이지의 새로고침 없이 연속적으로 실행할 수 있습니다. (반댓말 Server Side Rendering) 부모 태그는 하나만 존재해야 하는 규칙이 있기 때문에 로 싸줍니다. 함수표현식 function App() { return ( ); } 함수선언식 const App = () => { return ( ); }; return 안에서는 문자로만 인식됩니다. js를 실행시키려면 {} 중괄호로 감싸주면 됩니다. props는 객체..

react를 실행시키기 위해서는 node.js를 설치합니다. 설치가 되었는지 확인하기 위해서는 터미널에 node -v를 입력하면 됩니다. >> v16.16.0 리액트 app을 만듭니다. npx create-react-app react00를 입력하여 react00 폴더를 생성합니다. package.json에는 설치한 파일들이 기록됩니다. 리액트 서버를 구동하는 순서입니다. cd .. //경로를 이동합니다. cd react00 //react00 폴더로 갑니다. npm start //react를 시작합니다. .gitignore 를 통해서 git에 모든 파일을 올리지 않도록 합니다. 리액트는 무겁습니다. src폴더의 App.js 와 index.js 만 남겨도 문제 없이 실행됩니다. return을 여러 줄에 걸쳐..

date 내장함수를 이용해 현재 시간을 출력할 수 있습니다. toLocaleString() 함수는 위치한 지역의 시간대로 출력합니다. date함수를 이용해서 시계를 만듭니다. transition을 적용하면 59초에서 0초로 바뀔 때 시계 바늘의 각도가 356deg > 0deg 로 변하기 때문에 시계 바늘이 반대로 회전하게 됩니다. 각도를 초기화하지 않고 쌓아주도록 합니다. const week = ["일", "월", "화", "수", "목", "금", "토"]; let h = new Date().getHours(); let hDeg = h * (360 / 12); let m = new Date().getMinutes(); let mDeg = m * (360 / 60); let s = new Date().g..