내가 보려고 쓰는 기록

✔ 프로젝트 생성 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..

※ 구매버튼 누르면 장바구니에 상품명 추가되는 기능 버튼눌렀을때 내정보, 내가 선택한 상품이 서버에 보내진 후 저장 되어야함 but 우리는 서버 안만들음 반영구적으로 데이터 저장할 수 있는곳 만들어야함 브라우저 안에 몰래 데이터 저장 가능 브라우저 -> 개발자도구 -> Application 탭 -> Storage 쭈루룩 우리가 쓸 storage 는 - Local Storage - Session Storage 둘다 키값:밸류값 형태로 저장 가능 둘다 5MB의 문자/숫자만 저장 가능 LocalStrorage는 사이트 재접속해도 유지됨 *반영구적 SessionStorage는 사이트 나가면 자동삭제 ● LocalStorage에 데이터 저장 localStroage.setItem('키값','밸류값'); localS..

자바스크립트는 유연성 & 자유도가 높음 타입스크립트는 타입 엄격히 검사해줌 에러메세지 퀄리티가 높음 (에러 정확히 짚어줌) 타입스크립트 설치 1. 터미널에 입력 npm install -g typescript 2. .ts 파일 생성 3. tsconfig.json 파일 생성 .ts 파일에 코드 작성해주면 됨 but .ts파일에서 입력한 코드는 브라우저에서 인식못함 무조건 자바스크립트만 읽을수있음 터미널 켜서 tsc -w 입력해두면 자바스크립트로 자동변환됨 index.js 파일 자동으로 생김

array 함수 .sort()는 원본 변형 O .filter()는 원본 변형 X -변수 새로 만들음 .map()은 원본 변형 X -변수 새로 만들음 1. sort() : 정렬함수 ● 문자정렬 - 가나다순 array.sort(); -역순 var 어레이문자=['가','나','다']; 어레이문자.sort(function(a,b){ if (a