이번 포스트에서는 많은 개발자들이 헷갈려하는 커링(currying) 기법에 대해 우선적으로 알아보고 어떻게 하면 잘 활용할 수 있는지 알아보도록 하겠습니다. 커링(Currying) 이란? 일단 정의부터 시작을 해보자면 Currying이라는 단어에 따로 뜻이 있는 건 아니고 해당 기법을 발전시킨 수학자 하스켈 커리로부터 유래했다고 합니다. 프로그래밍 세계에서 커링을 요약해보자면 아래와 같이 요약을 할 수 있습니다. 인자를 여러 개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수로 만드는 방법 함수형 프로그래밍 기법 중 하나로 함수를 재사용하고 리팩트링하기 쉽게 하는 방법 특정 언어의 경우 커링이 내부적으로 구현이 되어 있기도 하지만 다중 패러다임 언어인 자바스크립트는 커링이 따로 내장되어 있지는 않기 때..

웹이나 앱을 만들 때 훅을 애용하고 폼을 자주 다룰일이 많으셨다면 React Hook Form 라이브러리를 한 번쯤 사용해 보셨을 겁니다. 필자는 formik이나 redux-form도 가끔 사용하긴 하지만 간결한 코드 작성이 가능한 훅을 더 선호하기 때문에 해당 라이브러리를 즐겨 사용합니다. 커스텀 인풋 창을 만들어 사용할 경우 register후 바로 사용해주면 되는 구조이지만, react-select이나 react-datepicker 등 외부 라이브러리를 사용해야 할 경우 하나의 스텝이 더 추가되기 때문에 이번 포스트에서는 해당 내용을 주제로 글을 작성해보겠습니다. 글 작성일 기준으로 사용한 버전은 아래와 같습니다. "react-hook-form": "^7.33.1", "react-select": "^..

이번 포스트에서는 파이어베이스 스토리지에 이미지를 업로드하고 해당 링크를 받아오는 방법까지 함께 진행을 해보겠습니다. 파이어베이스 스토리지 (Firebase Storage) 란? 파이어베이스 스토리지는 클라우드에 호스팅 되는 확장 가능한 파일 저장소로 이미지, 텍스트, 오디오, 동영상 파일 등을 저장할 수 있습니다. 파이어베이스 스토리지에 저장되는 파일들도 결국에는 구글 스토리지 API 를 통해 접근할 수 있기 때문에 AWS의 S3 저장소의 구글 버전 정도로 볼 수 있습니다. 보통 이런 파일 저장소에 파일을 저장해 두고 해당 파일을 조회 또는 다운로드할 수 있는 주소를 받아서 데이터베이스, 즉 파이어스토어에 저장해두는 방식을 많이 사용하고 있습니다. 1. 초기 세팅하기 그럼 본격적으로 이미지를 업로드하기..

이번 포스트에서는 여러 프로젝트를 진행하고 강의를 들으면서 노트해뒀던 HTML과 CSS 작성 시 주의해야 할 점과 팁을 공유해볼까 합니다. 물론 HTML과 CSS를 꼭 이런 식으로 작성해야 하는 건 절대 아니며 필자도 이 모든 걸 다 고려하면서 작성하진 못하고 있습니다. 다만, 더 효율적이면서 가독성도 좋은 CSS 코드를 작성하려고 매번 노력하고 있고, 해당 포스트를 읽는 분들께서도 좀 더 나은 방향으로 나아갈 수 있었으면 하는 마음에 몇 가지 적어보도록 하겠습니다. HTML이 어떤 역할의 언어인지 알자 필자가 처음 마크업을 할 때 가장 많이 했던 실수 중 하나는 HTML을 작성할 때 스타일적인 요소도 함께 고려를 하면서 마크업을 했던 점입니다. HTML의 가장 근본적인 역할은 문서의 구조를 잡고 독자에..

이번 포스트에서는 Next JS에서 동적 불러오기(Dynamic Import)를 통해 코드분할(Code Splitting)을 적용해보도록 하겠습니다. React의 경우 모든 페이지가 하나의 페이지에서 랜더링 되는 SPA (Single Page Application)이기 때문에 코드분할을 따로 해주지 않으면 퍼포먼스에 영향이 가게 되고 이는 곧 좋지 않은 사용자 경험으로 이어지게 됩니다. 물론 한 페이지에서 실행되는 로직이 복잡하지 않다면 크게 영향을 받지는 않지만 로직이 복잡해지고 많은 양의 데이터를 불러와야 한다면 각 라우트마다 코드 스플리팅을 해주는 편이 좋습니다. 그렇다면 Next JS는 어떨까요? 넥스트 JS를 배워보자 1편 에서 언급했다시피 Next JS는 파일 시스템의 라우트를 내장하고 있기 ..

이번 포스트에서는 파이어베이스에서 검색을 구현하는 방법에 대해 알아보도록 하겠습니다. 일단 가장 중요한 부분을 짚고 넘어가자면, 현재 파이어스토어에서는 문서의 전체 텍스트 검색을 자체적으로 지원하지는 않고 있습니다. 이를 관련해서도 각종 포럼이나 스택오버플로우에서 MongoDB나 다른 noSQL 데이터베이스처럼 왜 제대로 된 검색을 지원하지 않냐는 반발이 많긴 하지만 파이어베이스가 나온 지 10년이 되어가는 시점에도 아직 관련 정보가 없는 것으로 보아 검색은 우선순위는 아닌 것으로 판단됩니다. 그렇기 때문에 파이어베이스를 사용하는 개발자들이 검색을 구현하기 위해선 쿼리문을 변형해서 사용하거나 공식문서에 나와있듯이 타사 솔루션인 Algolia나 Elastic 같은 검색엔진 API를 사용해야 합니다. 1. ..