자바스크립트에서 JSON은 JavaScript Object Notation의 줄임말로 문자 기반의 표준 포맷을 말합니다. 그리고 자바스크립트에서 데이터를 다룰 때는 주로 JSON 형식을 취하기 때문에 JSON의 사용하는 방법에 대해 알아두는 것이 좋습니다. 특히 JSON을 다루기 위해 내장되어 있는 JSON.stringify(), JSON.parse() 사용 방법을 알아두면 JSON 객체를 다루기도 쉽고 개발의 생산성, 효율성도 좋아집니다. JSON은 무엇일까? JSON을 잘 사용하는 방법을 알아보기 전에 먼저 JSON에 대한 정의를 알아보겠습니다. JSON을 잘 사용하기 위해서는 JSON의 정의를 아는 것도 중요합니다. 서문에서는 JSON(JavaScript Object Notation)을 문자 기반의..
jQuery 라이브러리를 사용하게 되면 많이 이용하는 메서드가 바로 click()이나 change() 같은 이벤트를 다룰 때 사용하는 이벤트 핸들러 메서드입니다. 그런데 click(), change() 같은 이벤트 핸들러가 잘 동작하다가 특정 상황에서 동작하지 않는지 이유를 알고 계신가요? 그리고 click()나 change()가 동작하지 않을 때 on()을 사용하면 문제가 해결되는 걸까요? 오늘은 on()과 click()의 차이 그리고 그 차이점을 통해서 click() 대신 on()을 써야 하는지 알아보겠습니다. click()이 동작하지 않으면 on()을 쓰자 click()와 on()의 차이점을 알아보기 전에 click() 이벤트 핸들러가 정상적으로 동작하지 않는 경우 on()을 사용해서 이벤트를 처리..
프로그래밍에서 정규 표현식을 잘 사용하면 보다 간단하게 문제들을 해결할 수 있습니다. 대표적으로는 공백, 숫자, 한글과 같은 문자 유효성 검증을 이야기할 수 있겠네요. 정규 표현식(regular expression)을 사용하면 if문을 사용하지 않는 검증을 만들 수 있을 뿐만 아니라 코드의 가독성도 높일 수 있고 문자 탐색에서도 이점을 가질 수가 있습니다. 오늘은 자바스크립트를 이용해 유효성을 검증하는 정규표현식에 대해서 알아보겠습니다. 유효성 검증의 경우 대표적으로 사용하는 사례는 공백 확인, 영문자 혹은 한글 확인과 같이 사용자의 입력 값을 확인하는 경우입니다. 그럼 예제 코드를 통해서 정규 표현식에 대해 알아보겠습니다. 이 글에 예제 코드로 작성한 유효성 검증 코드는 공백 확인, 숫자 확인, 영문자..
애플 공식 홈페이지에서 2021년 12월 마지막 날에 구매한 아이패드 미니 6을 2달가량 기다려 일주일 전쯤 받아 볼 수 있었는데요. 오늘은 아이패드 미니 6 구매 과정과 간단하게 느낀 점을 글로 써볼까 합니다. 주문 후 2달을 기다려서 받은 아이패드 미니 6 온라인 쇼핑몰을 통해 구매하면 더 빠르게 배송을 받아 볼 수 있지만 공식 홈페이지에서 구매하면 혹시나 모를 문제가 발생한 경우 환불이 쉽기 때문에 공식 홈페이지에서 아이패드 미니 6을 구매하였습니다. 이전에도 아이폰을 구매했을 때 초기 불량이 있었는데 대리점이나 통신사를 통한 교환이 쉽지 않아 애플 공식 홈페이지를 이용했는데 쉽고 간편하게 제품을 환불하고 구매할 수 있었습니다. 지금은 보편화된 알림 서비스이기는 하지만 애플 공식 홈페이지에서 제품을..
스프링 시큐리티(Spring Security)를 사용할 때 적용되는 패스워드 암호화 부분은 PasswordEncoder를 이용하면 자유롭게 커스터마이징이 가능합니다. 예를 들어 MySQL의 암호화 기능인 Password()도 PasswordEncoder를 구현해서 사용하면 스프링 시큐리티에 적용할 수 있습니다. MySQL의 암호화 기능 Password() 스프링 시큐리티의 PasswordEncoder를 통해 구현하기 위해 먼저 MySQL의 Password()가 정의된 내용을 확인해보겠습니다. /* Generate binary hash from raw text string Used for Pre-4.1 password handling SYNOPSIS hash_password() result OUT stor..
주위에 간혹 문서를 잘 쓰시는 분들을 보면 대단하다는 생각이 든다. 단순한 매뉴얼이나 릴리즈 노트라면 모를까 몇 장 혹은 몇 십장에 달하는 보고서나 문서를 누가 봐도 논리 정연하게 써내는 사람들을 보면 진심으로 존경심이 피어난다. 단연 이 블로그를 운영하게 된 까닭에는 그런 사람들이 보여준 멋진 글쓰기도 한몫을 했다. 언제쯤이면 그런 사람들처럼 설득력 있는 문장을 만들 수 있게 될지는 잘 모르지만 조금은 나아지기를 바라며 왜 나는 글쓰기가 어려웠을까라는 생각이 들어 글로 정리해볼까 한다. 설득보다는 결론만 말하는 글쓰기 개발자들은 다 그렇다고 할 수 없지만 기본적으로 프로그래밍이 익숙한 사람들은 글을 쓸 때 문장에 수식을 붙이기보다는 핵심만 간단명료하게 적게 된다. 왜냐하면 프로그래밍을 하는 방식이 익숙..
jQuery를 사용할 수 있는 방법은 무엇이 있을까요? jQuery를 사용하기 위해서는 jQuery 모듈을 우리가 사용하는 프로젝트에 포함시켜야 합니다. jQuery뿐만 아니라 어떤 자바스크립트 라이브러리가 되었던 우리가 명시적으로 사용한다는 스크립트를 추가해야 사용이 가능해집니다. CDN 방식을 이용해서 jQuery를 사용하기 CDN(Content Delivery Network)은 콘텐츠 전송 네트워크라는 의미로 간단하게 설명하면 네트워크(인터넷)를 통해서 콘텐츠(jQuery 라이브러리 파일)를 배포하는 방식을 말해요. 즉 사용하는 사람 입장에서 쉽게 이용할 수 있도록 만들어진 방식이에요. jQuery의 CDN 주소는 공식 홈페이지를 통해서 확인할 수 있습니다. CDN 방식으로 배포되는 타입은 unco..
이번에는 삭제한 branch나 commit를 복구하는 방법에 대해서 알아보겠습니다. 개발을 하다 보면 생각지 못한 실수로 branch나 commit를 삭제하는 경우가 있습니다. 이런 경우 생각보다 어렵지 않은 방법으로 삭제한 기록을 되살릴 수 있는 방법이 있는데요. 바로 git이 제공하는 reflog를 사용하는 것입니다. reflog로 삭제한 기록을 복구해보자. reflog는 참조(ref)에 대한 이력을 볼 수 있는 방법이에요. git에서 사용되는 command는 참조를 포함해서 기록되고 있기 때문에 reflog를 이용하면 git을 이용해 작업한 모든 이력을 확인할 수 있어요. 1. git reflog를 사용해서 시점을 찾자. git reflog // 추가 명령어를 이용하게 세밀하게 기록을 찾는 방법 g..
자바 8 버전에서 새롭게 추가된 스트림(Stream) API는 자바가 함수형 프로그래밍을 지원한다는 사실을 잘 보여주는 패키지입니다. 여기서 다루지는 않지만 자바 8 버전부터 도입된 람다식(lambda expressions)을 통해 자바는 함수형 프로그래밍을 일부 지원하게 되었고 그 활용의 대표적인 예가 바로 스트림 API입니다. 공식 홈페이지의 말을 인용해 스트림(Stream) API에 대해 설명하면 Collection의 요소를 Stream을 통해 함수형 연산을 지원하는 패키지입니다. 아 그리고 여기서 한 가지 알아 둘 점은 지금 이야기하고 있는 스트림은 데이터 입출력(I/O)을 다룰 때 사용하는 그 스트림이 아니에요. 자바에서 사용하는 List, Map, Set과 같은 자료 구조의 집합인 컬렉션(Co..
이번 글에서는 자바스크립트의 map() 함수를 만들어보겠습니다. 이전에 filter()를 구현했던 것과 같이 map()을 직접 정의해보면서 map() 함수에 대해 알아가 보도록 하겠습니다. map() 함수도 filter() 함수처럼 구현하는 내용이 어렵지 않기 때문에 글 내용을 따라 코드를 작성해보시기를 추천드립니다. map()를 사용하는 이유 map() 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수입니다. 객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다는 점을 알아주세요. 예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터 사용해야 하는 상황이 발생한 경우에 map()을 사용할 수 있습니다. map()은 주어진 값을 새로운 값..
고차 함수의 정의는 함수를 매개변수로 사용하거나 함수를 반환하는 함수입니다. 문장으로만 보면 어렵게 느껴질 수 있는 개념이지만 함수형 프로그래밍에서는 필수적으로 알아야 하는 개념이기도 합니다. 고차 함수(HOF)라는 용어가 생소하고 개념도 낯설어서 어렵다고 느껴질 뿐 조금만 익숙해지면 함수형 프로그래밍을 보다 빛나게 해주는 멋진 기술입니다. 예를 들어 자바스크립트의 filter(), map(), reduce() 함수도 고차 함수 개념을 활용해 만들어져 있습니다. filter()를 구현하는 방법에 대해서도 다룬 적이 있으니 흥미가 있으시다면 한 번 확인해보셔도 좋습니다. 고차 함수와 비슷한 개념으로는 고차 컴포넌트(HOC: Higher-Order Component)도 있습니다. 고차 컴포넌트가 주로 리엑트..
이번 글에서는 자바스크립트의 filter() 함수를 직접 만들어보겠습니다. 가벼운 내용이지만 자바스크립트가 가진 filter() 함수를 구현해본다면 이전보다 filter() 함수에 대해 잘 이해할 수 있을 뿐만 아니라 함수형 프로그래밍이 가진 멋진 장점을 알 수 있습니다. filter()를 사용하는 이유 filter() 함수는 의미 그대로 "거르다"를 하기 위해 정의된 함수입니다. 예를 들어 특정 사용자 데이터(이름, 나이)가 주어지고 그중에서 특정 조건을 만족하는 대상들을 찾는 경우에 filter()를 사용할 수 있습니다. 선언적인 프로그래밍 방식으로 이 문제를 해결한다면 for문 혹은 while문을 사용해서 다음과 같은 방식으로 코드를 작성할 수 있습니다. const users = [ { name: ..