개발자연습노트

개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 남자답게 숫자 높은 최신버전 써도 되는데 그로 인한 버그와 배포시 에러는 알아서 감수해야함- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.- 설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.(기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수) Q. 맥북은 다른가요? A. 다른거 없음    리액트 프로젝트 생성은    1. 작업용 폴더를 하나 만들어줍니다찾기좋게 바탕화면에 만드는게 어떨까요.     2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.맥북은 손..

▲ 오늘 만들어볼 간단한 애니메이션   transform을 쓰면 3D 스타일 회전이 가능합니다. transform : rotateX(180deg);transform : rotateY(180deg);transform : rotateZ(180deg);  각각 X,Y,Z축 회전이 가능합니다. X축은 가로줄입니다. 그래서 rotateX()는 가로줄을 축으로 회전이 들어갑니다.뭔소린지 모르겠으면 연필을 모니터에 가로로 대보십시오.그리고 그 연필을 돌돌 말아봅니다. 그게 X축 회전, rotateX() 입니다.아니면 직접 CSS로 박스나 글자를 rotateX() 줘보면 알 수 있습니다.  Y축은 세로줄입니다. 모니터에 연필을 세로로 놓고 돌돌 말면 그게 Y축 회전입니다. Z축은 여러분 얼굴과 모니터 간의 가상의 선을..

간단한 Grid 레이아웃 만들기  Grid 레이아웃은 말그대로 격자를 만드는 레이아웃입니다.  설명하다  설명하다 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px;} 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열됩니다. grid-template-columns는 격자의 열 너비와 갯수grid-template-rows는 격자의 행 높이와 갯수를 설정하는 속성입니다.fr이라는 단위는 몇배만큼 차지할지를 나타내는 값입니다.그런데 격자를 왜 만드냐고요? 격자..