본문 바로가기

Study/JavaScript

(6)
[JavaScript] 함수형 프로그래밍(2) 이전 포스팅에서 "쏙쏙 들어오는 함수형 코딩"이라는 책을 소개하였고, 이제 두번째 파트로 이어나간다. [JavaScript] 함수형 프로그래밍(1) 요즘 흥미롭게 읽고 있는 책이 하나 있는데, 함수형 프로그래밍에 대해 알려주는 책이다. 무슨 개발이 되었든 함수를 사용하여 코드를 작성해두면 어떤 로직을 재사용하기 편리한 것 같다. 가령 beautify-log.tistory.com 기존에 있는 코드에 함수형 프로그래밍을 적용시킬 수 있다. 코드를 읽을 때 액션, 계산, 데이터 관점으로 읽는 연습이 필요하다. function figurePayout(affiliate) { let owed = affiliate.sales * affiliate.commissions; if (owed > 100) { sendPayo..
[JavaScript] 함수형 프로그래밍(1) 요즘 흥미롭게 읽고 있는 책이 하나 있는데, 함수형 프로그래밍에 대해 알려주는 책이다. 무슨 개발이 되었든 함수를 사용하여 코드를 작성해두면 어떤 로직을 재사용하기 편리한 것 같다. 가령 쇼핑몰에서 사용자가 구매할 물건을 장바구니에 넣는 로직을 작성한다고 할 때 /** 사용자가 고르려 하는 상품 **/ const goods = { id: 200, name: "식기세척기", price: 560000, isPurchasable: true } /** 장바구니 배열 **/ const cart = []; /** 장바구니에 사용자가 선택한 상품을 추가하는 함수 **/ function addGoodsToCart(product) { cart.push(product) } /** 카트 버튼 **/ const btnAddC..
[JavaScript] 배열에 사용하는 반복문과 배열 메소드 비교하기 배열에 적용하여 쓸 수 있는 반복문과 배열 메소드를 대략 살펴보면 for문, while문 그리고 map, forEach가 있다. 이게 전부는 아니지만 자주 쓰이므로 각각의 차이에 대해 정리할 필요가 있다고 생각한다. 1. 반복문 우선 어느 프로그래밍 언어든 처음 배울 때 나오는 핵심 내용, 바로 반복문이다. 큰 맥락으로 구분해보면 for문, while문이 있다. do...while 같은건 어차피 while이랑 모양이 비슷하니 for와 while 두개로 크게 나눈다고 가정한다. 예를 들어 1부터 10까지 담긴 배열 numArr이 있다고 하자. const numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 반복문을 사용하여 이 배열 안에 있는 원소를 하나씩 출력하는 케이스를 만든다면 ..
[JavaScript] 바닐라 JS로 AJAX 통신하기 예시 AJAX 통신을 할 때 jQuery가 사용하기 편리해서 자주 사용했으나 이번에 바닐라 JS로 어떻게 구현하는 지 궁금해서 대강 코드를 작성해보았다. AJAX 통신 테스트하기 버튼 하나를 두고 버튼을 클릭하면 AJAX 통신이 이루어지는 방식이다. POST로 요청을 보낼 때는 헤더 설정이 반드시 필요하다. 4-1을 참조하면 된다.
[JavaScript] 웹소켓 사용하기 API를 통해 서버에서 받아온 어떤 정보를 화면에 뿌려주려고 할 때 fetch 메소드를 사용해서 데이터를 받아오거나, axios 모듈을 사용하는 경우가 많다. 서버가 RESTful API를 지원한다면 API KEY 등을 사용해서 정보를 받아올 수 있는데, 개인 서비스라면 모르겠지만 상용으로 개발된 것은 프론트단에서 API키를 공개하여 던져주게 된다면 보안결함 등 이슈가 충분히 발생할 수 있다. 때문에 어떤 곳에서는 웹소켓을 사용해서 API_KEY 등이 요구되는 개인적인 정보를 제외한, 공공정보를 개발자가 사용할 수 있도록 제공하고 있다. 웹소켓을 사용해본적이 한번도 없으며 이번 기회에 맛을 보고(?) 기억해둘 겸 정리하고자 한다. 1. 웹소켓이란? 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중..
[JavaScript] 쓸데 많은 정규 표현식 정리 1. 자릿수를 구분하는 함수 const divideNum = (num) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } 2. 전화번호에 하이픈을 자동으로 추가하는 함수 const addHyphenToPhoneNumber = (phoneNum:String) => { let trimNum = phoneNum.replace(/[^0-9]/g, ""); let collectNum = trimNum.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3"); return collectNum; } 3. 숫자입력을 체크하는 정규식 const numCheck = /^[0-9]+$/ 4...