개발을 하다 보면 특히 많이 쓰게 되는 문법들이나 연산자들이 있습니다. 이번 포스트에서는 필자가 유용하게 쓰는 자바스크립트 기본 문법 및 기능들 (ES6+ 포함)에 대해 알아보도록 하겠습니다. 이미 다 알고 있는 분들도 많겠지만 그런 분들은 내가 어느 정도 아는지에 대한 체크리스트 정도로 생각해주시고 아직 생소하신 분들에게는 좀 더 간결하고 효과적인 방법으로 개발할 수 있는 계기가 되었으면 합니다. 이외에도 공유하고 싶은게 있다면 댓글로 꼭 남겨주시길 바랍니다. 타입 변환 (Type Casting) 10 + "" -> 문자 ("10") + "10" -> 숫자 (10) !!10 -> 불리언 (true) 폼을 다루거나 서버에서 받아온 데이터를 가지고 특정 작업을 할 때 타입 변환을 해야 하는 경우가 많습니다..

이번 포스트에서는 Cloud Function과 Express 프레임워크로 RESTful API를 함께 설계해보도록 합시다. 이미 자사에서 사용하려고 만든 api가 있긴 하지만 해당 예제를 보면 더 헷갈릴 수도 있기 때문에 훨씬 간단한 예제 프로젝트를 만들어 진행하겠습니다. 어떤 API를 만들 것인가? 예제는 사용자가 감상했던 영화를 추가, 삭제, 업데이트 등 (CRUD) 작업을 할 수 있도록 API를 만들 예정이고 해당 목록은 파이어 스토어에 저장을 할 예정입니다. 파이어 스토어에서 문서를 업데이트하기 위해서 굳이 Cloud Function이 필요하진 않지만 추후에 백엔드에서 처리해야 할 로직이 추가된다거나 외부에서 API를 통해 변경해야 하는 경우도 생길 수 있기 때문에 해당 방식으로 설계하는 방법에 ..

Quill Editor란? 공식문서에 따르면 Quill Editor는 모던 웹을 위한 오픈소스 WYSIWYG 에디터라고 소개하고 있다. WYSIWYG는 What You See Is What You Get의 약자로, 편집 과정에서의 화면 포맷이 최종 완성본이랑 거의 똑같이 나오게 된다는 의미로 쓰이고 있다. 우리가 흔히 알고 있는 네이버, 다음 블로그, 미디엄, 등 여러 플랫폼에서 사용자가 직접 쓰는 콘텐츠에는 WYSIWYG 에디터가 사용되고 있다. 이미 모든게 갖춰진 에디터를 사용할 수 있으면 좋겠지만 모든 에디터가 오픈소스는 아니기에 새로운 에디터를 개발할게 아니라면 기존의 오픈소스 에디터에서 필요한 기능들을 추가해서 사용해야 한다. 그중에서 필자가 추천하는 에디터는 지금부터 사용해볼 Quill Edi..

넥스트 JS의 또 하나의 장점으로는 API 라우트 기능을 통해 API 엔드포인트를 클라이언트 코드와 함께 작성할 수 있다는 점이다. 물론 한 곳에서 작성만 할 수 있을 뿐이지 백엔드에서 실행되어야 할 코드가 클라이언트에서 실행되는 것은 아니다. 해당 라우트에 작성한 코드들은 클라이언트 번들 사이즈에 포함되지 않기 때문에 추후 별도로 배포를 할 수도 있고 serverless 함수 형식 구글의 cloud function이나 aws의 lambda)처럼 관리할 수도 있다. API Routes 사용해서 REST API 구현해보기 기존 예제 프로젝트에서는 JSON placeholder REST API포인트에 요청해서 포스트를 불러오는 방식으로 진행했는데 이번에는 API Routes를 사용해서 직접 엔드포인트를 구축..

이번 포스트에서는 카카오 알림톡을 사용하는 방법에 대해 알아보도록 하자. 알림톡이란? 카카오 알림톡이란 기업고객이 자사의 카카오톡 채널을 통해 카카오톡 이용자에게 메시지를 발송할 수 있는 상품이다 (채널에 가입하지 않은 이용자에게도 발송 가능). 예를 들어 상품 구매가 발생했을 때 구매 내역을 발송한다던지, 이용자가 챌린지를 진행 중이라면 진행 중인 챌린지에 대한 정보를 전달한다던지 활용 방법은 무궁무진하다. 기업 입장에서는 SMS를 통해 전달하는 것보다 저렴하게 보낼 수 있고, 고객 입장에서는 자주 확인하는 애플리케이션을 통해 부담 없이 메시지를 볼 수 있기 때문에 용이하다. 또 메시지 내용은 정보통신망법과 카카오의 가이드에 맞게 검수를 받기 때문에 SMS에 비해 스팸이나 피싱 성 메시지가 적은듯하다...

border에 그러데이션을 넣기 위해 사용 가능한 코드는 아래와 같다. 좀 더 자세한 설명을 원한다면 추가설명을 읽어보는 걸 추천한다. HTML CSS .gradient-avatar { width: 100px; height: 100px; background: url(https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory4.daumcdn.net%2Ftistory%2F4809359%2Fattach%2F1af7989e615749b0b3f522ea82e59ba8) padding-box, linear-gradient(90deg, #eaeaa7 , #ffcdf3aa, #c1b0e6) border-box; backgrou..