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

저번 장 마지막 부분에서 AWS EC2 내부에 젠킨스를 설치하는 것까지 마치고, 이후 진행해야할 CI/CD 관련 젠킨스 플러그인 설치에 대해서 잠깐 설명했다. https://humanwater.tistory.com/15 [ Project ] AWS - Jenkins(젠킨스) CI / CD 구축 (1) # CI (Continuous Integration) 직역하자면 지속적 통합이라는 뜻으로, 소프트웨어 개발에 빗대어 예를 들자면, 어떤 프로젝트에 참여하는 인원들이 서로의 로컬(Local) 작업 환경에서 작성한 코드들을 서 humanwater.tistory.com 한번 더 간단하게 설명하자면, 각자가 개발 중인 로컬 환경에서 깃으로 푸시(Push)를 할 경우, 깃 웹훅(Webhook)이 푸시를 감지해 이 내..

Project 2020. 8. 7. 12:39

# CI (Continuous Integration) 직역하자면 지속적 통합이라는 뜻으로, 소프트웨어 개발에 빗대어 예를 들자면, 어떤 프로젝트에 참여하는 인원들이 서로의 로컬(Local) 작업 환경에서 작성한 코드들을 서로 연동시키기 위해서 하나의 보관함에 모으는 행위라고 보면 될 듯 하다. # CD (Continuous Delivery or Deploy) 지속적 배포 ....배달? 뭐 아무튼, 위의 CI 단계를 거친 작업물들이 계속적으로 한 곳으로 모이는 과정이라고 보면 된다. 이 과정 역시 소프트웨어 개발로 예를 들오면, CI 단계에서 빌드와 테스트 단계를 끝난 코드들이 CD과정을 통해 사용자들에게 보여줄 서버 같은 곳에 뿌려준다고 보면 된다. (곰곰히 생각해보면, 어떤 기술적인 개념이라기 보다는 ..

Jenkins 2020. 7. 30. 14:10

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

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

프로젝트 루트 경로 . / wmv-pjt --- webpack 글로벌 설치 npm install -g webpack webpack-dev-server --- front 폴더 생성 mkdir web-react cd web-react npm init => package.json 파일 생성 확인. --- react, react-dom 설치 npm install --save react react-dom --- babel 설치 npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react --- hotloader 설치 npm install --save-dev react-hot-loader webpack webpack-dev..

Project 2020. 7. 22. 13:10

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