본문 바로가기

전체 글69

[JavaScript] localStorage 브라우저에는 저장 공간이 여러개 있다.크롬 개발자 도구의 Application 탭에 들어가면 확인할 수 있다.[Local Storage / Session Storage] : key : value 형태로 문자, 숫자 데이터 저장 가능[Indexed DB] : 크고 많은 구조화된 데이터를 DB처럼 저장 가능[Cookies] : 유저 로그인 정보 저장 공간[Cache Storage] : html, css, img 파일 저장해 두는 공간 Local Storage / Session Storage는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB까지만 저장 가능하다.Local Storage는 브라우저에 재접속해도 영구적으로 남아 있어 유저가 브러우저 청소하지 않는 이상 반영구적으로 데이터 저장이 .. 2024. 10. 18.
[JavaScript] DOM 개념 정리 & load 이벤트 보호되어 있는 글 입니다. 2024. 10. 17.
[JavaScript] array에 자주 사용하는 sort, filter, map 함수 sort()- 배열의 요소를 정렬하는 함수.- 배열의 요소들을 문자열로 취급하여 기본적으로 오름차순 정렬을 한다.- 원본 배열을 변경한다.[숫자]var array = [7, 3, 5, 2, 40];array.sort();console.log(array); // [2, 3, 40, 5, 7] 출력▲ 오름차순 정렬인데 위와 같이 결과가 나오는 위유는 sort()는 배열의 요소를 문자로 취급해서 정렬하기 때문이다.var array = [7, 3, 5, 2, 40];// 숫자를 올바르게 정렬하려면 비교 함수를 사용array.sort(function(a, b){ return a - b // 오름차순 console.log(array); // [2, 3, 5, 7, 40] 출력});array.sort(functi.. 2024. 10. 15.
[JavaScript] Ajax 개념 정리 서버란?- 유저가 데이터를 달라고 요청하면 데이터를 보내 주는 간단한 프로그램- 서버 데이터를 요청할 때는어떤 데이터인지 url로 기재하고어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내 준다.  GET/POST 요청하는 법- GET 요청 : 서버에 있던 데이터를 읽고 싶을 때 주로 사용- POST 요청 : 서버로 데이터를 보내고 싶을 때 사용 (서버는 유저 데이터를 DB에 저장해 주는 역할도 함)- PUT, DELETE 요청도 있음 GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다. 주소창에 URL 적으면 그곳으로 GET 요청을 날려 준다. POST 요청을 날리는 방법은 태그를 이용하면 된다. 폼이 전송되었을 때 POST 요청을 날려 준다.그런데 이렇게 GET, POST 요.. 2024. 10. 15.
[React] To Do List 만들기 - 3 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguagehtmlcssReact.js배포: Github.io 클릭 📂 컴포넌트 구조📂 src ├── 📂 components │ ├── 📄 AddTodo.js # 할 일 추가 컴포넌트 │ ├── 📄 Container.js # 레이아웃을 담당하는 컨테이너 컴포넌트 │ ├── 📄 Title.js # 타이틀 컴포넌트 │ ├── 📄 TodoList.js # 할 일 목록 컴포넌트 ├── 📄 App.js # 메인 애플리케이션 컴포넌트 └── 📄 App.css # 글로벌 스.. 2024. 10. 14.
[JavaScript] <select>, 자바스크립트로 html 생성하는 법, forEach, for in 반복문, arrow function - HTML에서 사용 되는 폼 요솔, 드롭다운 리스트 또는 선택 박스를 생성하는 데에 사용된다.- 요소 안에 여러 개의 요소를 포함하여 각 항목을 정의한다.- 선택시 input, change 이벤트가 발생한다.- value로 유저가 입력한 값을 가져올 수 있다. 상품선택 모자 셔츠 (▲ Bootstrap이 설치되어 있으면 예쁘게 나옴)   Q. 사용자가 셔츠를 선택하면 하단에 사이즈를 선택할 수 있는 박스가 나타나게 하려면? 상품선택 모자 셔츠 95 100 미리 를 하나 더 추가하고, .form-hide 클래스에는 display: none을 주었다.그리고 사용자가 선택한 값이 셔츠이면 form-h.. 2024. 10. 10.