FrontEnd/React.js
-
[React] 카카오 api를 통해 주소를 좌표로 변환해보기 (undefinded Geocorder)FrontEnd/React.js 2024. 9. 6. 18:08
일단 페이지에 카카오 지도가 열려있다면 단순하게 kakao.maps.services.Geocoder()를 열어서 키워드를 콜백함수에 넣어주면 쉽게 나옴. 아래는 카카오 문서에 있는 예시 // 주소-좌표 변환 객체를 생성합니다var geocoder = new kakao.maps.services.Geocoder();// 주소로 좌표를 검색합니다geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) { // 정상적으로 검색이 완료됐으면 if (status === kakao.maps.services.Status.OK) { var coords = new kakao.maps.LatLng(result[0].y, resu..
-
react-day-picker 에서 한글화 시키기 (feat. date-fns)FrontEnd/React.js 2024. 9. 4. 17:00
react-day-picker/DayPicker는 위 사진처럼 디폴트가 영어이것에 대해 각 나라별 언어를 호환할려면 date-fns/locale을 사용하면 됨 (https://daypicker.dev/docs/translation#aria-labels)import { DayPicker } from "react-day-picker";import { ko } from "date-fns/locale";간단한 옵션 추가로 아래와 같이 한글화로 매핑됨
-
custom Infinite Scrolling hooks (with tanstack Query in Next.js)FrontEnd/React.js 2024. 9. 3. 14:59
오랜만에 무한 스크롤링 구현하면서 기록을 남겨봄두가지 커스텀 훅을 만들 예정1. 리액트 쿼리에서 제공하는 useInfiniteQuery를 활용한 커스텀 훅 ->이하 useQuery( 아래는 반환 값 ) -> useInfiniteQuery {data, fetchNextPage, hasNextPage, isFetchingNextPage, status} 2. 바닥 ref가 InView인지 확인하여 조건 만족시 fetchNextPage 발동 할 useInfiniteScroll 1. useQuery 매개변수로는 아래 요인들 ( 카테고리에서 날짜,지역,태그에 따라 보여지는 게시물들이 다름){category,searchDate,searchRegions, searchTags}일단 react-query 에서 제공 받..
-
webpack과 babel (feat. CRA)FrontEnd/React.js 2024. 1. 11. 14:00
webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 ..
-
[React] 기술 면접 대비 리액트 용어 모음FrontEnd/React.js 2023. 11. 6. 15:42
SPA (Single-page application) 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS, CSS 같은 모든 자산을 로드하는 애플리케이션 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드 되지 않음 ES6, ES2015, ES2016 등등 ECMAScript 언어 명세의 최신 버전을 나타내며, JavaScript는 이를 구현한 것 ES6 버전에는 화살표 함수, class,템플릿 리터럴, let const 같은 추가 사항 있음 컴파일러 자바스크립트 컴파일러는 코드를 변환하고 다른 형식으로 코드를 반환함. 일반적으로 es6 문법을 구형 브라우저에서도 동작하도록 변환 Babel은 리액트와 함께 널리 사용되는 컴파일러 번들러 분리된 자바스크립트와 cs..
-
아임포트 결제 로직FrontEnd/React.js 2023. 8. 23. 17:31
프론트엔드 ➡ 백엔드 주문 정보 생성 요청 백엔드 ➡ 프론트엔드 주문 정보(주문 번호, 가격 등) 생성하고 반환 프론트엔드 ➡ 아임포트 생성된 주문 정보로 결제 요청 아임포트 ➡ PG 해당 PG 사에 결제 요청 사용자 ➡ PG 결제 정보 확인 및 카드사 선택 PG ➡ 카드사 해당 카드사에 결제 요청 사용자 ➡ 카드사 카드 정보 입력하고 결제 카드사 ➡ PG 결제 결과 반환 PG ➡ 아임포트 결제 결과 반환 아임포트 ➡ 프론트엔드 결제 결과 반환 프론트엔드 ➡ 백엔드 결제 정보와 주문 정보를 이용하여 검증 요청 백엔드 ➡ 프론트엔드 결제 정보와 주문 정보가 일치하는지 확인하여 검증하고 결과를 반환
-
[React] React.ReactElement 와 React.ReactNodeFrontEnd/React.js 2023. 7. 13. 17:02
React.ReactElement와 React.ReactNode은 React에서 사용되는 두 가지 다른 타입입니다. React.ReactElement: React.ReactElement는 React 컴포넌트의 인스턴스를 나타내는 타입입니다. React 컴포넌트를 JSX로 작성할 때 생성되는 엘리먼트입니다.(jsx 요소만을 허용) React.ReactElement는 컴포넌트의 타입, 속성(props), 자식 엘리먼트 등을 포함합니다. 일반적으로 JSX를 사용하여 컴포넌트를 작성하면 React.ReactElement가 생성됩니다. (JSX.Element와 차이 없음) 예: React.ReactNode: React.ReactNode은 React 컴포넌트가 렌더링할 수 있는 모든 타입을 나타내는 타입입니다. R..
-
[React] 컴포넌트가 데이터를 다루는 3가지 방법FrontEnd/React.js 2023. 6. 21. 19:13
Props, State, Context (참고 사이트) 1. Props 부모 컴포넌트에서 자식으로 전달 되는 데이터 부모에서 받으므로 자식에서 변경x const Text = ({text}) => { return {text} } const App = () => { return } Hello world! 라는 문자열 데이터를 전달 2. State 한 컴포넌트에서 동적 데이터를 다룰 때 사용 컴포넌트 안에서 데이터 변경 가능 import React, { useState } from 'react'; const Text = ({text}) => { return {text} } const App = () => { const [count, setCount] = useState(0); return setCount(co..