본문 바로가기
반응형

전체 글136

React로 Todo List 구현하기 ( version 1 , 하나의 컴포넌트에 구현!) 최근 스터디에서 이제 프로젝트를 진행하고자 리액트 투두리스트를 만들기로 하였다. 위와 같은 형태의 TodoList 이다. 상단에서부터 입력할 수 있는 input이 있고 아래에는 Navigation bar 이 네비게이션은 전체를 볼 수 있는 것, 내가 해야할일만, 완료된것만 나눠서 볼 수 있다. 그 아래에는 가데이터로 들어가 있는 객체배열을 보여준 모습이고, 왼쪽에 mark all as complete 를 체크하게 되면 전체 체크, 다시 누르면 전체 해제 이다. 오른쪽에 Clear completed 옆에 괄호 숫자는 현재 완료된 해야할일을 보여주며, 이 버튼을 누르면 완료된 해야할일을 지워준다. 그 오른쪽에 2 items left는 내가 해야할일이다. ---> 여기까지가 위 사진에 대한 설명이다. 기본적으.. 2019. 10. 31.
자바스크립트로 하는 자료구조와 알고리즘(9장) - 집합 집합은 유한하고 구분되는 객체들의 그룹 자바스크립트에서는 Set이 기본 지원됨 집합 연산 삽입 let exampleSet = new Set(); exampleSet.add(1) 중복해서 추가된다면 추가되지 않는다. 삭제 let exampleSet = new Set(); exampleSet.add(1) exampleSet.delete(1) // true boolean값을 반환한다. 포함 이역시 boolean값을 반환한다. has(1) 이런식으로 사용 교집합 function intersectSets (setA, setB) { let intersection = new Set(); for (let elem of setB){ if(setA.has(elem)){ intersection.add(elem); } } r.. 2019. 10. 24.
자바스크립트로 하는 자료구조와 알고리즘(8장) - 재귀 무한 재귀 호출은 스택 오버플로를 초래한다. 기저 조건 = 종료조건, 재귀를 탈출하기 위한 조건이라고 보면 된다. 대표예시 피보나치 수열 일반 반복문으로 구현한 피보나치수열 function getNthFibo(n) { if ( n = endPos) { return true; } if(word.charAt(beginPos) !== word.charAt(endPos)) { return false; } else { return isPalindromeRecursiveHelper(word, beginPos + 1, endPos - 1); } } console.log(isPalindromeRecursive('racecar')); 시간 복잡도 O(n) 이다. 2019. 10. 24.
자바스크립트로 하는 자료구조와 알고리즘(7장) - 메모리 관리 메모리 누수 : 버려진 메모리를 해제하지 못한 경우 -> 성능이 저하되고 프로그램 자체가 주앋ㄴ되기도함 자바스크립트에는 가비지컬렉터가 있어서 이러한 문제를 해결해주기도 한다. 하지만, 가비지컬렉터가 올바른 방식으로 해제하지 않은 경우에 메모리 누수가 발생한다. 객체가 참조 중이면 해당 객체는 메모리에 존재한다. 마찬가지로 HTML DOM 객체들은 삭제된 이후에는 참조돼서는 안 된다. 함수에서 객체를 참조할 때 필요한 부분만 참조해야 한다. 연습 문제 1. function someLargeArray() { return new Array(1000000); } let exampleObject = { 'prop1' : someLargeArray(), 'prop2' : someLargeArray() } funct.. 2019. 10. 24.
반응형

티스토리툴바