Class class는 객체를 생성하기 위한 템플릿이다. class Car { // 맴버변수 speed fuel door // 메서드 drive() { this.speed++ this.fuel-- } } 예시를 들어보자. 나는 방금 Car class를 선언하여 Car설계도(템플릿)를 만들었다. 이 class 안에서 쓰이는 변수를 멤버변수, 함수를 메서드라고 부른다. instance const k3 = new Car() const sclass = new Car() new 연산자 사용하여 Car의 인스턴스를 생성할 수 있다. 일일이 k3에 speed, fuel..., sclass에 speed, fuel... 중복적으로 선언해주지 않아도, class에 정의된 멤버변수와 메서드를 사용해 줄 수 있다. 객체 지향..
Front-end
프로젝트 내에 한 리스트 페이지를 구현하면서 무한 스크롤 페이징 기능을 만들었다. react-query의 useInfiniteQuery와 IntersectionObserver를 사용하여 구현해 보았는데, 다른 페이지에서 반복적으로 사용될 수 있는 로직이 있어 custom hooks으로 분리하여 리팩토링을 해주었다. 이를 블로그로 정리해보고자 한다. 무한 스크롤 페이징의 구현 무한 스크롤 페이징의 구현방식은 다음과 같다. useInfiniteQuery를 통해 리스트 데이터를 일부 호출하여 보여준다. IntersectionObserver를 통해 view에서 지금까지 호출된 데이터의 리스트가 다 보였을 때를 target으로 인지하고 target이 보였을 때 && list에 다음 페이지 데이터가 있을 때 다음 ..
프로젝트 중 imageURL을 사용하여 다운로드 버튼을 누르면 이미지가 다운로드할 수 있게끔 하는 기능을 만들어야 했다. 위 기능을 구현하면서 겪은 어려움은 크게 2가지였다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 2. 1.을 해결하기 위해 imageURL url을 fetch 해줬어야 했는데, CORS에러가 발생했다. 해결방법을 블로그에 남겨 정리해보려고 한다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 먼저 첫번째 문제를 해결해 보자. 방법은 간단하다. 태그 href에 경로와 download 속성에 저장될 파일 이름을 지정해 주면, 다운로드가 가능하다. 그런데, 서버에서 오는 imageURL을 그..
자바스크립트의 this에 대해 알아보자. this는 Javascript의 예약어이다. 기본적으로 this는 전역 객체를 가리킨다. Node환경에서는 global객체를, 브라우저 환경에서는 Window객체를 가리킨다. (브라우저 도구탭에서 this를 쳐보면 Window객체가 출력된다.) this; // Window{}this는 가리키는 값(this 바인딩), 함수 호출 방식에 의해 동적으로 결정된다. (바인딩 : 식별자와 값을 연결하는 과정) this를 알기 위해서는 “누가 나를 불렀는가”를 알면 된다. 여기서 "누가"는 콘텍스트 객체이며 this가 바라보고 있는 객체 정도로 인지하자. const car = { name: 'KIA', getName: function () { console.l..
콜백함수란 다른 코드의 인자로 넘겨주는 함수, 즉 어떤 이벤트가 발생한 후 수행될 함수를 의미한다. 예를들어 식당에 자리를 예약하는 상황이라고 가정해보자. 우리는 식당 대기자 명단에 이름을 쓴 뒤, 자리가 날때까지 식당 근처를 구경하러간다. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락을 줄 것이다. 바로, 그 전화를 받는 시점이 콜백 함수가 호출되는 시점과 같다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처에서 쇼핑을 하거나 구경을 할 수 있다. 자리가 났을 때 연락이 오기 때문에 미리 가서 기다릴 필요❌ 자리가 비어있는지 확인할 필요❌ 자리가 준비된 시점 즉 데이터가 준비된 시점에서만 원하는 동작(자리에 앉는다. 특정 값을 출력한다)를 수행할 수 있다. // 동기식 콜백 예..
브라우저 우리가 잘 사용하는 인터넷 익스플로러, 파이어폭스, 사파리, 크롬 등의 소프트웨어를 말한다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시해주는 것이다. 자원은 보통 HTML 문서지만, PDF나 이미지 혹은 다른 형태일 수 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데, 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성을 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다고 한다. 브라우저의 사용자 인터페이스는 서로 닮아있는데, 다음과 같은 요소..
회원가입시에 주소값을 필요로 할때, 특히나 주소의 경우에는 정확한 값을 받아올 필요가 있다. 이때는 사용자가 직접 주소 값을 입력하는 것 보다 우편번호 검색 서비스를 이용해 정확한 값을 받아 오는 것이 좋다. react-daum-postcode를 선택한 이유 따로 key를 발급받을 필요 없이 사용할 수 있다. 회원가입 기능을 구현하면서, 정확한 주소를 받기 위해 우편번호 API가 필요했다. https://github.com/bernard-kms/react-daum-postcode GitHub - bernard-kms/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Contribute to ber..
보통 개발환경의 주소는 http://localhost:3000을 사용한다. Api 서버의 주소가 https://dev-api.com 일때, 따로 cors 설정을 해놓지 않는다면, cors 에러가 난다. CORS 일반적으로 브라우저는 보안 문제상의 이유로 동일 출처 정책(SOP)을 따른다. 요청 URL과 응답 URL 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일 출처로 볼 수 있다. 출처가 다른 호스트로 데이터를 요청하는 경우 CORS 정책을 위반하게 된다. 예를 들어 a-url.com 페이지에서는 b.url.com 호스트로 데이터를 요청할 수 없다. proxy proxy는 웹팩 개발서버로, proxy를 통해 브라우저에서 API 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 ..
프로젝트에서 위치를 지도 위의 마커로 표현해야 하는 화면이 있어 @react-google-maps/api 라이브러리를 사용해 구현해 보았다. google, kakao, naver 중 google API를 선택한 이유 프로젝트 내에 google address api를 사용해 주소를 가져오는 기능도 있었기에, 지도를 띄우는 것도, google address api에서 발급받은 API 키를 동일하게 사용할 수 있어 google address api를 사용하게 되었다. 왜 @react-google-maps/api인가 다른 라이브러리에 비해 Weekly Downloads가 높았고, Last publish 도 내 기준 7일전으로, 업데이트가 꾸준히 진행되고 있는 것 같았다. 구글 공식 유튜브계정인 Google Ma..
이번 프로젝트에서 제일 많이 다뤘던 라이브러리는 단연코 yup이랑 Formik이었다. 웹에서 사용하는 모든 form을 위 라이브러리를 적용해, 유효성 검사를 해주었다. Yup & Formik를 쓰면 form 내의 state관리가 편하며, 스키마 기반 유효성 검사로, 보다 편리하게 양식 검사를 수행할 수 있다. 이전보다, 알게된 것이 많아진 것 같아 다시 한번 정리해보려고 한다. 핸드폰 유효성 검사 프로젝트 특성 상, 정규표현식을 사용하는 것보다, phone Validation 라이브러리를 사용하는게 마음이 편했다. import "yup-phone"; yup에 적용가능한 yup-phone 라이브러리를 사용해줬다. yup-phone github phone: yup .string() .min(9, '핸드폰 번..
