HumanWater

# findIndex https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex Array.prototype.findIndex() findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다. developer.mozilla.org 협업 프로젝트를 진행 중에, 회원가입 완료 버튼을 클릭 하기 전, 입력받은 회원가입 정보와 DB에 있는 기존 회원정보들 중에서 email과 name의 값을 비교하는 중복확인 기능이 필요하여, 이 메서드를 사용하였다. 사용 이유에 대해 좀더 상세히 말하자면, DB 내부에 있는 기존 ..

Javascript/ES6 2020. 8. 14. 18:34

# Some 개인적으로 진행하고 있는 프로젝트에서 회원가입 필터 기능을 구현하고 있는 중이다. 대략적으로 기능을 설명하면, ( === test ===> 를 통과할 경우 true 반환 ) 1) input [ 아이디 ] === test ==> 이메일 정규식 2) input [ 닉네임 ] === test ==> 4글자 이상 3) input [ 비밀번호 ] === test ==> 비밀번호 정규식(영문, 숫자, 특수문자 포함 8 ~ 16자) 4) input [ 비밀번호 확인 ] === test ==> 위 비밀번호와 일치여부 네 가지의 사용자 입력창이 있고 최종적으로 [회원가입 완료] 버튼을 누를 때, 위 네 가지 통과기준에 하나라도 부합하지 않을 경우 회원가입을 못하게 처리를 했어야 됬다. 그래서 이에 적합한 J..

Javascript/ES6 2020. 8. 12. 19:26

요즘 velopert, velog를 운영하고 계시는 김민준 개발자님의 리액트 강의를 듣고 있는 중이다. 강의 내용 중에 사용자 주소록 정보를 map( ) 과 filter( ) 를 이용해서 데이터를 표현해내는 부분이 있었는데, 추후에도 이 두개의 메서드는 계속적으로 사용할 것 같은 느낌이 들어서 이번 기회에 이 두가지 메서드에 대한 내용을 적어보도록 하겠다. # Map map( ) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아, 새로운 배열을 반환합니다. [참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() map() 메서드..

Javascript/ES6 2020. 7. 20. 13:29

# 트리(Tree) 저번 장에 썼던 큐(Queue)와 스택(Stack)은 자료구조의 종류 중에서 [선형(Linear) 자료구조] 에 속하고, 이번 장에서 다룰 [비선형(Nonlinear) 자료구조]에 속하는 트리 이다. 선형 자료구조 같은 경우, 데이터를 저장 & 추출 하는 것에 초점이 맞춰져있고, 비선형 자료구조 같은 경우에는 데이터들의 관계를 표현하는데 초점이 맞춰져있다. 그리고 비선형 자료구조의 대표적인 유형인 이진 트리(Binary Tree)를 각 노드의 명칭을 알아보자. 이러한 트리 구조를 실제 적용가능한 예로 보면, 우리가 하루에도 몇십번씩 보게 되는, 웹사이트 URL의 경로[ /path ] 가 그나마 대표적이라고 볼 수 있겠다. URL 경로 트리 표현 예시. 그리고 위의 경로 트리를 아래 코..

Javascript/ES6 2020. 7. 15. 22:29

# 큐(Queue) 추상 자료형(ADT: Abstract Data Type)의 한 종류로 FIFO(First In First Out = 선입선출)의 특징을 지닌다. 추상자료형: 구체적인 구현 방식이 아닌, 데이터를 어떻게(Ex. 선입선출) 다뤄야 하는지에 대한 정의를 나타내는 자료형. * 클래스(Class)와 배열(Array)를 이용한 큐 구현 예. 위와 같이 클래스로 큐(Queue)에 대한 생성자(Array 타입), 그리고 enqueue, dequeue 메서드를 정의. 실제 생성된 Queue( = q )를 통해 enqueue( ), dequeue( ) 작업을 진행. 위에서 보듯이 enqueue 작업을 통해 처음 들어갔던 'fisrt' 문자열이 dequeue 작업을 통해 가장 먼저 빠져나오게되는 현상, ..

Javascript/ES6 2020. 7. 13. 13:19

# Class ES6이전에는 JAVA같이 클래스 역할을 해줄 수 있는 것이 없어서, '생성자' 라는 것을 사용해왔다. 클래스와 비슷하게 위해서는 생성자(Instance)를 먼저 생성하고( 더 정확하게 말하면, 생성자 역할을 할 수 있는 function ) , Prototype을 다음에 정의하여 그 생성자가 실행할 수 있는 메서드를 선언해야 했다. 위를 보게 되면 실제 어떤 객체의 프로퍼티를 정의하는 생성자 역할을 하는 코드와, 그 객체가 수행할 수 있는 메서드를 선언하는 코드가 분리되어있는 것을 볼 수 있다. 하지만 ES6부터 도입된 클래스(Class, 하지만 실제 type은 function) 기능을 사용하게 되면, 위 처럼, 클래스 블럭 내부에 생성자와 메서드를 선언하여 사용할 수 있게 된다.

Javascript/ES6 2020. 7. 9. 09:28

# Iteration ( = 되풀이) 심플하다. 뜻 그대로 어떠한 작업을 '반복'할 때 위와 같은 개념을 사용한다. ( 사실 이 글을 쓰기전에 Iteration 이 무슨 뜻인지도 몰랐다... 허허헣 ) 프로그래밍을 할때 심심찮게 '반복' 과 관련된 작업들을 많이 한다 .... Ex) for문, forEach( ) .... 특정 문자를 반복해서 출력하거나, 배열 내부에 있는 특정 원소를 탐색하기 위해서도 반복문을 자주 사용하곤 했다. 그러다보니, 자연스럽게 어떠한 연결된 '뭉치'에서는 이러한 반복 개념을 통해 뭔가 원하는 작업을 할 수 있겠다라는 생각을 했다. 실제 지금까지도 그렇게 개발을 했었고. 이제는 조금 더 디테일하게 Iteration(반복)에 대한 것을 다뤄볼때가 온 것 같다. 일단 Javascr..

Javascript/ES6 2020. 7. 8. 22:19