나디아 성장 일기

마우스 이벤트 (mouse event) mousedown : 마우스로 누를 때 발동 mouseup : 마우스를 뗄 때 mousemove : (해당 요소에서) 마우스를 움직일 때 e.clientX : 현재 마우스 위치의 X좌표 document.getElementsByClassName('slide-box')[0].addEventListener('mousemove', function(e) { console.log(e.clientX) }); 터치 이벤트 (touch event) touchstart : 터치 시작 시 발동 touchend : 터치 종료 시 발동 e.changedTouches[0].clientX : 현재 터치 위치의 X좌표 touchmove : 터치 중 발동 e.touches[0].clientX :..

웹 개발 라이브러리 정리 npm 라이브러리 설치 / 수정 / 삭제 / 버전 관리 Node.js의 패키지를 관리할 수 있는 도구 Node.js 프로그램 설치하면 따라옴 Node.js 구글이 만든 자바스크립트 해석 엔진 자바스크립트 코드를 컴퓨터 친화적인 코드로 변환해서 돌려주는 엔진 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있음 Vite, Webpack, parcel, snowpack Bundling tool 소스코드를 분석해서 꼭 필요한 js파일과 코드만 남겨주는 작업 브라우저 친화적인 .js 파일로 변환해주는 기능 최신 자바스크립트 문법들을 호환성 좋은 예전 문법으로 바꿔주는 기능 React, Vue SPA (Single Page Application, 단일 페이지 어플리케이션) : ..

array 정렬 숫자 정렬 오름차순 array.sort(function(a, b) { // a, b => array 안의 데이터 (ex. 7, 3) return a - b // (a-b)의 결과가 양수면 a는 오른쪽으로 이동 // 음수면 b가 오른쪽으로 이동 }); 내림차순 array.sort(function(a, b) { return b - a }); 문자 정렬 오름차순 array.sort(); 내림차순 array.sort(function(a, b) { if (a > b) return -1; // 음수 if (a < b) return 1; // 양수 return 0; // 같은 글자 }); array + object의 정렬 [ { }, { }, { } ] array.sort(); 사용 object.ke..

상품 더보기 / Ajax 서버 : 유저가 데이터 달라고 요청을 하면 데이터를 보내주는 간단한 프로그램 서버와 유저는 문자 자료만 주고 받을 수 있다. 서버에 데이터를 요청 시 확인 1. 어떤 데이터인지 url로 기재 2. 어떤 방법으로 요청할지 결정(GET/POST 등) GET 요청 : 서버에 있던 데이터 읽기 - 브라우저 주소창에 url 적으면 그 곳으로 GET요청을 날린다. POST요청 : 서버로 데이터 보내기 - 태그로 폼이 전송되었을 때 POST요청을 날린다. 단점: GET / POST 요청 시 브라우저가 새로고침 됨 => Ajax 사용 Ajax (Asynchronous JavaScript And XML = 비동기 자바스크립트와 XML) : 서버에 GET, POST 요청을 할 때, 새로고침 없이 ..

local Storage 데이터를 반영구적으로 저장하기 브라우저 안에 몰래 데이터 저장 가능 Local Storage : [키 : 값] 형태로 데이터 저장 (반영구) Session Storage : [키 : 값] 형태로 데이터 저장 (일회용) IndexedDB : 구조화 된 대용량 데이터 저장 Cookies : 유저의 로그인 정보 저장 Cache Storage : html, css, js, img 파일 저장해두는 공간 local Storage [이름 : 값] 형태로 저장 가능 5MB의 문자/숫자만 저장 가능 * 차이점! Local Storage = 사이트 재접속해도 유지 (반영구) Session Storage = 사이트 나가면 자동 삭제 (일회용) local Storage에 데이터 저장하기 localSt..

영화(movie) 소개 : 우측엔 영화 스틸컷, 좌측엔 영화 소개가 있는 영화 소개 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 1. 스크롤 시 사진 고정하기 position: sticky; 2. 일정 스크롤 시 사진 변경하기 document.getElementById("img").src = "xiang1.png"; index.html 상견니(想見你) 소개하기 想見你 상견니 널 보고 싶어 Someday or One Day 『상견니』는 가가연, 허광한, 시백우 주연의 2020년 대만 최고의 화제작이다. 『상견니』는 대만 OTT 플랫폼 누적 클릭수 3천만 회, 전 세계 OTT 플랫폼..

회원가입 : 회원가입 유효성 검사 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 & 기능 구현 1. 탭 구현 (회원가입, 로그인) 2. 회원가입 입력 칸 - 공백 검사 - 유효성 검사 전송 버튼 - 닉네임 (4 ~ 8자, 영소문자, 숫자) - 이름 (2 ~ 5자, 한글) - 비밀번호 (6 ~ 12자, 영소문자, 숫자) - 이메일 (이메일 형식) index.html 회원가입 이름 이메일 아이디 비밀번호 전송 index.js // 탭 기능 const tab = document.querySelectorAll('.tab_menu .list li'); for (var i = 0; i < t..

스크롤(scroll) 포트폴리오 : 스크롤을 내려가며 볼 수 있는 포트폴리오 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 & 기능 구현 1. 메뉴바 생성 1-2. 상단에 고정 - position: fixed; 1-3. 서브메뉴 위치 설정 - 태그 이용 2. 본문 2-1. 메뉴마다 나누기 - 태그 이용 2-2. 내용 넣기 (1) Home 자기소개 (간략) (2) About 깃허브, 벨로그 버튼 (3) Skills 가능 언어 가능 프로그램 (4) Projectst 자바 세미 프로젝트 - 캐러셀 슬라이드 (5) Contact me 이메일 주소 연락처 3. 스크롤 이벤트 3-1. 스크롤 진행바..

로딩 창(Loading) & 동영상 : 로딩 창 및 동영상 삽입 구현 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 1. 로딩 gif와 동영상 준비 2. setTimeout() 함수를 통해 로딩 페이지에서 5초 뒤 동영상 페이지로 전환하기 로딩 페이지는 display: none 동영상 페이지는 display: flex index.html Loading... Someday or One Day index.js setTimeout(() => { document.getElementById('loading').style.display = 'none'; document.getElementById('..

Carousel Slide : 버튼 클릭 시 배경색이 랜덤하게 변하며 해당 배경색의 색상 코드를 출력하는 사이트 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 1. 이미지 준비하기 브라우저 크기, 위치 배치 .slide-container { width: 300vw; transition: all 1s; } .slide-box { width: 100vw; float: left; /* 왼쪽으로 배치 */ } .slide-box img { width: 100%; } 2. 숫자 버튼 숫자 버튼을 누르면 해당 번호의 사진이 슬라이드 된다. 숫자 버튼에서도 현재 사진 변수(now)를 신경 써야 한다!..