익명의 개발노트

업무에 있어서 내가 가지고 있는 전체 지갑리스트 중 내가 가지고 있는 지갑리스트를 제외하면, 내가 가지고 있지 않은 지갑리스트가 필요하다. 없는 부분만 API로 요청을 하여, 받아와야하기 때문임. 기존에 for문을 두번 썼기에... 복잡도도 O(n^2) 성능이 엄청 후달린다. for(let i=0; i !getArrayList.includes(x));

77일 인줄알았는데 80일 이라니.. 잃어버린 3일은 어디로?! 1. 디자인 패턴이란? 소프트웨어 디자인 패턴은 소프트웨어 공학에서 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용이 가능하도록 도와주는 패턴이다. 2. 옵져버 패턴 1) 정의 : 관찰자(Observer)가 관찰대상을 선택하고 지켜보고있다가 관찰대상의 상태값이 변하면 관찰자들에게 알림 을 주고, 알림을 받은 옵져버들은 특정 행위를 수행한다. 2) 용도 : 이벤트 처리 및 위임 3) 예시 : addEventListener, 구독과 알림(카톡플러스 친구 구독, 플친내용 변경시 구독자들에게 알림) 4) 장점 : 상태값들을 연결되어있는 객체들에게 전달해주어 동적으로 변화시킬 수 있다. (객체간 연결도를 느슨하게 해주어 유..

CSS에 애니메이션 사용하기 위해서는 animation 속성을 이용해야한다. animation 속성의 하위 속성이 있는데, 아래와 같다. animation-delay : element가 load 되고 나서 언제 애니메이션이 시작될지 지정합니다. animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다. animation-name : 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙..

정규표현식이란(=정규식) ? 특정한 규칙을 가진 문자열의 집합을 표현(검색 또는 치환(replace)) 하는데 사용하는 형식 언어 자바스크립트에서는 패턴들은 RegExp의 exec 메소드, test 메소드, String의 match, replace, split메소드와 함께 사용됨. 1. 사용방법 : 2가지. 1) /ab+c/ 처럼 "/"슬래쉬로 감싸는 패턴 2) new RegExp("ab+c") 처럼 객체 생성자 함수 호출하는 패턴 2. 참고자료 정리 1) 기본적인 문법 볼 수 있는 곳 (1) MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D (2) 위키백과 : https://ko.wiki..

css 작업의 종류에는 몇가지가 있다. 1. 순수 CSS파일로만 작성하는 방법 2. Sass 3. CSS module 4. styled-components 살펴보자. 문법은 약간씩 다르다. css의 JS같은 느낌? 1. Sass 장점 1) 자주쓰는 CSS 스타일 분리해서 사용가능 2) sass-loader 설정 커스텀마이징 가능 : 1) 경우나 여러폴더 안에서 해당 scss 파일 찾아야하는 경우 용이 3) node_modules에서 불러오기 가능 : 파일이 겁나게 많다.. 2. CSS Module 장점 1) className이라는 라이브러리 사용가능 : 클래스 묶어서 사용가능 2) Sass와 혼합해서 사용가능 : Modules.css 를 Modules.scss 로 변경해서 사용가능. 코드 변경 약간 해줘..

컴포넌트 내부에서 DOM에 직접 접근할 경우가 생기면 ref를 사용한다. 먼저 ref를 사용하지 않고 원하는 기능을 구현가능한지 살펴보는게 먼저이다. 1. DOM을 꼭 사용해야 하는경우 1) 특정 input 박스에 포커스 주기 2) 스크롤 박스 조작하기 3) canvas 요소에 그림그리기 등 2. 사용방법 1) props 설정하듯이 하면 된다. 2) 아래처럼 원하는 DOM에다가 ref를 주면된다. (...) return ( {this.box = ref}} //부모꺼에만 ref다니깐 자식 컴포넌트까지 볼수있음. > );

doubly linked list는 양방향 링크드 리스트라고 불리운다. 양방향이기 때문에 단방향 리스트하고 비교시 이전값을 가리키는 포인터가 들어있다. 1. Linked List와 차이점 1) 시작과 끝 부분이 거꾸로도 가능하다는 의미이다. 2) 원하는 element의 이전값이나 다음값으로도 갈 수 가 있다. 3) 단방향에서는 원하는 element를 놓쳤을 경우 처음부터 돌아가서 탐색해야하는데, 양방향은 그럴 필요없다. 2.functional instantiation function DoublyLinkedList(){ let Node = function(item){ this.element = item; this.next = null; this.prev = null; //추가됨. }; let length ..

자바스크립트 프로토타입. 다른 블로그나 MDN을 봐도 무슨말인지 이해하기 힘들 것이다. 한마디로 정의하면, 인스턴스가 생성(instantiation)될 때 원형(original form), 즉 프로토타입(prototype)의 모양대로 인스턴스가 생성 인스턴스의 메소드는 Object.prototype.something으로 표현, prototype === 원형 프로토타입과 인스턴스의 관계는 붕어빵틀과 붕어빵의 관계라고 보면 된다. 프로토타입이 있어야 인스턴스를 만들 수가 있다는 말이다. 그럼 프로토타입은 무엇이냐?? 사전적의미는 원형이다. 자바스크립트는 함수형 언어이다. 우리가 쓰는 Array나 Object, 그안에 딸린 메서드 들도 전부 function Array(){}, function Object(){..

수정기능 추가하기. 모달창을 띄워서 수정을 해줄 것이다. 기존 값에 변경을 해줘야한다. 왜? 결국엔 수정을 하려면, 삭제와, 투표버튼 처럼, 크롬이 클릭된 곳의 id를 알아야 에러없이 추가할 수 있기 때문. 나는 기존에 만든 배열 안에 있는 객체에다가 inputValue값을 추가해서 id를 관리하기로 했다. function showComment(comment){ //생략 inputValue.id = newId; //추가 //생략 //아이디에 따른 투표수카운트. 배열에 접근해서 수정하는 방식으로 해야함. let IdAccordingToVoteCount ={ "commentId" : newId, "voteUpCount" : 0, "voteDownCount" : 0, "commentValue" : commen..

투표기능을 만들어보자. 기존에 투표기능을 구현하면서 생겼던 문제점은 [에러일지]에 가보면 보실 수 있다. 기존에 댓글을 보여줬던 부분 showComment()에 댓글 수를 관리할 수 있는 id를 부여했다. id를 각각의 투표버튼에 부여해도 되지만, 그렇게 되면 관리할 것이 많이 지기 때문에, 투표버튼의 상위 노드에다가 id를 부여했다. function showComment(comment){ //생략 voteDiv.id = newId; //생략 let IdAccordingToVoteCount ={ "commentId" : newId, "voteUpCount" : 0, "voteDownCount" : 0 } //생략 } 그 아이디를 관리 할 수 있도록 객체에 담고, 객체에는 그 댓글에 대한 id, 투표버튼에..