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

이제 리액트를 이용한 레이아웃 구성을 위해 필요한 Component(컴포넌트)에 대해서 알아보자. # Component 직역하자면 '구성요소' 라는 뜻을 가지고 있고, 우리가 흔하게 볼 수 있는 웹페이지들도 이러한 '구성요소'가 1개 이상으로 이루어져있다. 위 그림 같은 경우에도 [ Header ], [ Main ], [ Footer ] 라는 컴포넌트로 이루어진 웹페이지며, 이런 구조를 흔하게 다른 사이트에서도 볼 수 있을 것이다. ( 또한, 위 세개의 컴포넌트를 또 감싸고 있는 또 다른 컴포넌트를 정의해서 사용할 수도 있을 것이다. ) 그리고 [ Header ] 라는 컴포넌트 안에 로그인, 검색 이라는 기능을 있듯이, 각 컴포넌트 별로 사용자와 인터랙션이 가능한 기능들을 정의할 수도 있다. 즉, 각 컴..

Javascript/React 2020. 7. 27. 13:15

요즘 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

# React 매우 심플하게 정의하면, 페이스북에서 개발한 Javascript View(UI) 라이브러리. 사실상, 단순한 구조의 웹페이지를 만들 때는 위와 같은 Javascript 라이브러리나, 프레임워크들을 채택해서 사용할 필요는 없다. 하지만 단순 웹페이지를 넘어, 사용자와의 인터랙션(Interaction)이 자주 일어나고 무수한 웹페이지들이 서로 관계를 맺고 있는 웹어플리케이션 같은 경우, React.js / Vue.js / Angular.js 와 같은 도구를 쓴다고 한다. 그리고 현 시점에서 웹개발 - 프론트엔드 쪽에서 가장 Hot 하게 사용되어지고 있는 것이 리액트(React) 라이브러리이다. 실제 어느정도 규모감이 있는 기업의 웹사이트나, 어플리케이션 등을 보면 리액트 라이브러리를 사용하고 ..

Javascript/React 2020. 7. 18. 16:22

# 트리(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