내가 보려고 쓰는 기록

js에서도 html 잘 동작하는 이유는? JSX 언어라서! (js안에서 html 쉽게 작성할 수 있음) JSX문법1. class 넣을 땐 className (js안에서 class는 문법이 따로 있음) JSX문법2. 변수넣을땐 데이터바인딩 {중괄호} id={}, className={} 모두 가능 😎데이터 바인딩이란? 서버에서 데이터 가져와서 사이에 넣어주세요~ ---> 프론트엔드 개발자가 제일 많이 하는 것 포트폴리오 JSX문법3. style 넣을 땐 중괄호 안에 object 형식으로 작성해야 됨 style={ { 스타일명 : '값' }} {post}

html 글,그림 css 디자인 js 기능 Library 남이 작성한 코드(가져다 쓰면 코딩 편해짐) node js 자바스크립트 실행 도우미 npm js 라이브러리 관리 도와주는 패키지 매니저, 라이브러리 쉽게 설치, 수정, 삭제 가능 ex) npm update 라이브러리명, npm install 라이브러리명 webpack js 라이브러리 용량 줄여줌

if 대신 switch 문법 쓸 수 있음 switch(변수){ 변수가 3이면 이거 실행해주세요 변수가 4이면 이거 실행해주세요 } let 변수 = 2+2; switch(변수){ case 3: alert('변수가 3이네요'); break case 4: alert('변수가 4이네요'); break default: alert('아무것도 해당안됨') } case - if와 비슷 breack - switch문 중지해주세요 default - else와 비슷 if는 다양한 조건식 가능 switch는 변수 1개만 테스트 가능, 코드 깔끔, 변수 하나만 검사할 때 간편하게 사용 가능

✔ 프로젝트 생성 npx create-react-app 프로젝트명 ✔ 미리 보기 띄우기 npm start 웹페이지는 html 파일로 이루어져야 한다. App.js가 js파일인데 잘 뜨는 이유는 public의 index.html에 들어가 있기 때문!

.gitignore 파일에서 node_modules/ 입력 하면 추척안당함

HTML CSS JavaScript 웹개발 편리하게 도와주는 라이브러리 1. Single Page Application 만들 때 사용 - html 파일을 1개만 쓰고 - 다른 페이지 보여주고 싶을 때 html 부분만 수정해서 보여줌 -> 부드럽게 작동 2. html을 함수, array, object에 보관하고 재활용할 수 있어서 html 관리 편함 3. React native로 앱개발 가능

⭐a,b 값 구하기 위한 1차 함수 ⭐스크롤이벤트 ⭐opacity(불투명도) ⭐position : stiky *top 속성 필수 ⭐transform html, javascript css /*스크롤*/ .card-background{ height:3000px; margin-top: 800px; margin-bottom: 1600px; } .card-box img { display: block; margin:auto; /*가운데 정렬*/ max-width:80%; } .card-box{ position:sticky; top:400px; /*top 400px 부터 고정됨*/ margin-top:200px; }​

👏드래그(터치)해서 이미지 넘기기 기능 만들어 보잣 ✔ 기능 1. 내가 드래그 한 거리만큼 박스도 왼쪽으로 움직여야 함 내가 50px만큼 드래그했으면 이미지박스도 50px 움직여야 함 so 내가 얼만큼 드래그 했는지 알아야함 알아야할 이벤트 mousedown - 마우스 버튼 누를 때 발생하는 이벤트 = touchstart mouseup - 마우스 버튼 뗄 때 = touchend mousemove - 마우스 움직였을 때 = touchmove e.clientX - 지금 마우스 있는 x 좌표 *왼쪽으로 갈수록 0에 가까워짐, 오른쪽으로 갈수록 증가 ex) 현재 mousedown한 x 좌표는? $('.slide-box').eq(0).on('mousedown',function(e){ console.log(e.cl..