본문 바로가기

분류 전체보기502

Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) 1. 복기 - 지난 시간에 간단하게 지역저장소(Local Storage)에 대해서 알아보았다. - 지역저장소란, 브라우저가 제공하는 일종의 DB이며, JS를 이용해 접근 및 통제하여 브라우저를 운영하는데 필요한 정보를 사용자 측에 저장하는 것을 의미한다. - 이번 포스팅에서는 지역저장소에 정보를 저장하고 저장된 정보를 활용하는 방법을 다루려고한다. - 이를 위해, 저장 및 삭제 기능을 갖는 간단한 toDoList를 만들어보자. 2. 기본코드 - 지난 포스팅에서 사용했던 코드를 그대로 이어서 사용해보자. - 추가된 사항은 다음과 같다. toDoList를 만들기 위해, 입력란이 필요하다. → input태그 input태그에 입력된 정보를 활용해야 한다. → form태그 toDoList는 여러개의 입력을 받을 .. 2020. 10. 12.
Vanilla JS - 지역 저장소(Local Storage) 1. 지역 저장소(Local Storage)란? - 브라우저를 운영하는데 필요한 정보를 사용자의 컴퓨터에 저장하는 것을 말한다. - 다시 말해, 브라우저가 제공하는 일종의 DB이다. 이를 이용해 필요한 정보를 저장 및 사용할 수 있다. - 모든 웹사이트에서 사용할 수 있으며, JS를 이용해 통제할 수 있다. - 크롬의 개발자 도구를 사용하면 Application탭에서 쉽게 찾아볼 수 있다. [예시화면] - momentum extension에서 사용하는 local storage의 모습이다. - 현재까지 ToDoList에 기록했던 모든 정보들이 들어 있다. - 스크린샷에서 확인할 수 있듯이, key와 value 형식으로 정보가 저장된다. 2. 어떻게 사용하는가? - 직접 예제를 만들어 보면서 Local St.. 2020. 10. 10.
Vanilla JS - 시계 만들기 1. Date() 객체 생성 - Date는 시간정보를 담고있는 클래스다. 이를 이용해서 시간정보를 갖는 객체를 생성할 수 있다. const date = new Date(); // 시간정보를 담고있는 객체를 생성 - Date 클래스를 이용하면 해당 클래스가 갖고있는 메소드를 이용해서 다양한 정보를 알아낼 수 있다. console.log(date); // 현재 시간정보를 출력 console.log(date.getDay()); // 1 = 월요일 console.log(date.getDate()); // 일자를 가져옴 console.log(date.getHours()); // 시간 console.log(date.getMinutes()); // 분 console.log(date.getSeconds()); // 초.. 2020. 10. 10.
Vanilla JS - 조건문(if~else) 1. if 조건문 사용 형식 - JS에서 if 조건문을 사용하는 방식은 다음과 같다. if (condition) { // 해당 조건에 수행할 명령문 } else if (condition){ // 해당 조건에 수행할 명령문 } else { // 위의 2가지 조건에 해당하지 않는 경우, 수행할 명령문 } 기본적인 비교/논리 연산자 - 앞으로 조건문을 사용할 때, 비교와 논리연산자를 통해 표현을 많이 하게 될 것이다. - JS에서는 어떻게 표현하는지 아래의 사진을 참고하여 알아두자. 2. 조건문을 사용한 JS - 이번에는 조건문을 사용하여 JS 적용하는 예제를 만들어보자. - 예제) h1태그를 클릭하면 글자색이 변하도록 만드는 이벤트를 조건문을 이용해서 구현한다. [기본 HTML] Hello, JavaScri.. 2020. 10. 8.
Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) 1. Event란? - JavaScript는 단지 HTML과 CSS를 수정하기 위한 스크립트 언어가 아니라 이벤트에 대응하기 위해 만들어진 언어이다. - 이벤트란, 웹사이트에서 발생하는 모든 것(사건)을 의미한다. ex) 클릭, 새로고침, 닫기, 버튼입력, 제출(submit), etc. - JavaScript를 사용하면 웹사이트에서 발생하는 이벤트 상황을 control 할 수 있다. ex) 새창이 열리기 전/후, 버튼 클릭 후, etc. Window 이벤트 - 윈도우 이벤트는 웹사이트 내부에서 발생하는 것이 아니라, 윈도우 환경 자체에서 발생하는 이벤트를 말한다. 예를 들어, 브라우저 창의 사이즈를 조절하거나 브라우저를 최소화 하거나 닫는 경우 등이 존재한다. - 예시로 브라우저 창의 사이즈를 조절할 때.. 2020. 10. 7.
Algorithm - 알고리즘 핵심정리 1. 정의 알고리즘이란? 어떤 문제를 해결하기 위해 사용되는 풀이과정을 말한다. 즉, 문제해결방법이다. 수학에서 한 문제에 대해 여러가지 풀이법이 존재하는 것처럼, 프로그래밍 또한 한 문제에 대해 여러 풀이법이 존재한다. 여러가지 풀이법 중 가장 효율이 좋은 방법을 어떤 문제에 대한 알고리즘이라고 한다. 수학의 공식처럼, 특정 형태 또는 구조를 갖는 프로그래밍 문제에는 공식화된 알고리즘이 존재한다. 2. 알고리즘의 종류 a) 정렬(Sort) 1. 버블정렬(Bubble) 인접한 두 데이터의 크기를 비교하여 정렬하는 알고리즘 2. 선택 정렬(Selection) 주어진 데이터 중 최소값을 찾아 순서대로 정렬하는 알고리즘 후보군 중 최소값을 찾아낸 후, 맨 앞의 데이터와 교체한다. 교체된 맨 앞의 데이터를 제외.. 2020. 10. 7.
Vanilla JS - DOM(Document Object Model)(2) 1. DOM을 이용해 HTML 바꿔보기 - DOM의 의미는 HTML(= Document)을 객체화(Object)하여 사용하는 것을 의미한다. - 저번 포스팅에서 배운 getElementById를 사용해서 HTML의 특정 엘리먼트 요소를 객체화하여 내용을 바꿔보자. [기본 HTML] This works! [출력화면] 위의 기본 HTML을 기반으로, h1태그를 객체로 만들어서 내용과 글씨색을 바꿔보도록 하자. [JavaScript 소스코드] const title = document.getElementById("title"); title.innerHTML = "This is JAVASCRIPT!!!! "; [출력화면] - 위와 같이 HTML을 수정할 수 있는 이유는 title이 JS로 인해 객체화 되었기 때문.. 2020. 10. 6.
Algorithm - 자료구조 핵심정리 1. 정의 a) 자료구조란? 대량의 데이터를 효율적으로 관리하기 위해, 데이터를 저장 및 정렬하는 방식을 말한다. 데이터를 어떤 방식으로 저장하고 정렬하느냐에 따라 추출 방식 등 데이터를 처리 및 조작하는데 필요한 코드가 달라진다. 2. 자료구조 (Data Structure) a) 배열(Array) 한가지 데이터 타입의 데이터를 순차적으로 저장 및 정렬하는 자료구조 각 데이터마다 index를 부여하여 데이터 검색에 용이(장점) 배열은 크기가 고정적(단점) 데이터가 삭제되면 배열 전체의 데이터를 재정렬(단점) b) 큐(Queue) FIFO(First In, First Out)방식으로 데이터를 저장 및 정렬하는 자료구조 FIFO방식으로 인해 데이터 삭제시, 재정렬이 필요없다. 운영체제(OS)에서 프로세스 스.. 2020. 10. 6.
Advanced Algorithm - Backtracking 1. 백트래킹이란? - 완전탐색 알고리즘의 하나다. - 완전탐색을 하는 도중, 현재의 탐색이 무의미하다고 판단이되면 되돌아가는 알고리즘이다. - 그래서 퇴각 검색이라 부르기도 한다. 2. 백트래킹의 로직 - 백트래킹은 제약조건 만족 문제(Constraint Satisfaction Problem)에서 해를 찾기 위한 전략이다. 해를 찾기위해서 어떤 후보군을 대상으로 제약조건을 체크하다가 해당 후보군이 제약조건을 만족할 수 없다고 판단되면, 그 즉시 backtrack(다시는 해당 후보군을 체크하지 않을 것을 표시)한 후, 다른 후보군으로 넘어가는 방식으로 최종적으로 최적의 해를 찾는 전략이다. 백트래킹 전략에 의해 연산의 대상이 되는 후보군이 적어지고, 그만큼 시간복잡도가 줄어드는 것이다. a) 어떻게 구현.. 2020. 10. 5.

티스토리툴바