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

# 큐(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

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

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

알고리즘 (Algorithm) " 어떠한 문제를 해결하기 위한 여러 동작들의 모임 " 컴퓨터 공학에서 뿐만이 아닌, 수학이나 해석학 등 여러 학문에서도 자주 등장하는 단어이다. 어떠한 문제를 해결하기 위해, 하나 하나의 동작들을 어떻게 구성할지 계획하고, 그 동작들이 특정 기준(정확성, 작업량, 복잡도 등)을 어느정도 만족해 나가면서 이전보다 나은 해결방법을 찾기 위해 고안된 이론이라고 볼 수 있다. 그래서 개발을 할 때는 이러한 알고리즘의 좋은 기준들을 통과하며 코드를 작성하게 되면, 그 코드로 이루어져 있는 프로그램들은 최적의 퍼포먼스를 내면서, 좀 더 사용자에게 좋은 서비스를 제공할 수 있게 된다. 특히나 웹(Web) 개발 같은 경우 브라우저 단에서 주로 개발이 이루어지는데, 이런 브라우저를 포함하..

Javascript/Algorithm 2020. 7. 2. 22:51