전체 글 (395) 썸네일형 리스트형 [React] 리액트에서 카카오 맵 불러오기 (with kakao map) 내용은 나중에 다시 정리하더라도, 일단은 스니펫 으로 크게 남겨 둡니다. 제가 공부하면서 적어두는 것이라 좀 지저분 합니다. 혹시나 참고하는 분 있다면 이 점 고려해서 보시길 바랍니다. 관련 문제나 사용법 등에 설명하는 글들은 정말 많지만, 이 내용을 기록해두는 목적은 kakao 가 정의되지 않았다 에러, LatLng 이 생성자 함수가 아니다 라는 둥의 에러가 떴을 때 나에게 맞는 명확한 방법이 없었기 때문이다. 혹여나 이 글을 보는 유사한 고민을 가진 분이 있다면 바로 해결 하길 바라며 남겨본다. // /*global kakao*/: 이 주석은 전역적으로 사용되는 변수 kakao를 선언한 것 // 이렇게 선언하면 ESLint와 같은 코드 검사 도구에서 해당 변수를 선언하지 않은 것으로 // 인식하는 오.. [react] 리액트에서 카카오 맵 사용하기( with ReactKakaoMapSDK) 이 방식의 단점은 document.write 를 사용하고 있고, 크로스 사이트 문제로 인해 sdk 스크립트 사용이 불안정하다는 점이 있다. Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs Description will go into a meta tag in react-kakao-maps-sdk.jaeseokim.dev ReactKakaoMapSDK 란? kakao map 을 리액트 환경에 맞게 컴포넌트화 시킨 것이라 보면 된다. 국내 개발자가 만든 것으로 보이고, 카카오 맵의 경우 타입 정의를 지원하지 않는데, 이에 대한 타입 정의를 만들어서 제공하고 있는 점이 눈에 띈다. 단, 아직 미완성이라서 모든 타입을 다 지원해주는 것은 아니다... [nodejs] 엑셀 파일을 json 데이터로 변환 해보기 node-telegram-bot-api 와 mongoose 를 사용하여 텔레그램 챗 봇을 만들어 보던 중 엑셀 파일을 json 형태로 변환해서 데이터베이스에 저장하는 기능을 만들어 보기로 했다. 이 기능을 구현하는 것에 큰 의미는 없지만, 연습 삼아서 해본다. 텔레그램 봇이나 데이터베이스 사용을 떠나서 엑셀 파일을 json 형태로 바꾸는 것에만 초점을 두고 기록해둘 것이다. 패키지 설치 우선 json 형태로 변환하기 위해 npm 패키지를 설치한다. 이번에 사용한 패키지는 convert-excel-to-json 이라는 것인데, 자세한 사용법은 아래 패키지 공식 깃허브에 자세하게 나와있다. npm install convert-excel-to-json GitHub - DiegoZoracKy/convert-ex.. [SCSS/SASS] 기초 사용법 정리 https://sass-lang.com/guide/#variables Sass: Sass Basics CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help sass-lang.com sass 환경설정 1) 설치방법 npm install -g sass 2) 기본 컴파일 방법 아래와 같이 입력하면 해당 scss 파.. [JS] input file 에 등록된 이미지를 임시로 읽어오는 방법 주어진 이미지 파일을 선택하면 해당 이미지를 읽어서 미리보기로 출력 이 기능을 잘 활용하면, 유저가 첨부한 이미지 파일을 서버로 전송하기 전에 미리보기로 형태로 제공해줄 수 있다고 합니다. react 나 vue 같은 라이브러리 및 프레임워크에서 사용하려면 별도의 패키지를 사용하거나 아니면 상황에 맞게 가공해야 하겠지만, 이런 방식이 있다는 것에 의미를 두어 봅니다. const wImage = document.querySelector('.image_input') wImage.addEventListener("change", (e) => { const reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader.addEventListen.. [react hooks] 3. useContext 에 대한 정리 useContext 와 사용 시 주의사항 리액트에서 부모 컴포넌트에서 하위 컴포넌트(자식 컴포넌트)로 데이터를 전달할 때는 props 라는 속성을 인자로 넘겨주어 해당 자식 컴포넌트 내에서 매개변수로 받아와 사용하게 된다. 이러한 방식은 데이터를 명시적으로 연결하는 데 있어서 아주 좋은 방법이지만, 부모 컴포넌트에서 리프 컴포넌트에 도달하는 파이프라인이 길고 복잡할 수록 props 를 사용한 전달 방식은 한계에 봉착할 수 있다. useContext 는 이러한 문제를 해결할 수 있도록 데이터를 전역적으로 관리할 수 있도록 해준다. 단, 주의할 점은 useContext 는 프로바이더(제공자)를 통해 전달된 값이 존재하는 컴포넌트를 값이 변동될 때 마다 리렌더링한다는 점이다. 따라서 무턱대고 useContex.. [react-router-dom] useSearchParams () 에 대한 정리 useSearchParams() 현재 위치의 쿼리 매개변수(쿼리 문자열)에 대한 데이터를 읽고 수정하는데 사용하는 리액트 라우터 돔 라이브러리에서 제공하는 훅이다. 참고) 쿼리 문자열과 쿼리 매개변수를 혼용해서 사용하고 있는데, 둘 다 같은 말이다. 사용예시 리액트의 useState 훅과 유사하게 두 개의 변수를 제공하는데, 하나는 쿼리 매개변수의 데이터가 담겨 있는 searchParams 변수이고, 두 번째는 쿼리 매개변수를 개발자 혹은 사용자가 직접 지정할 수 있는 setSearchParams 함수를 제공한다. searchParams 변수에는 현재 쿼리 문자열이 {key : value} 형식으로 저장되어 있으며 get 메서드에 '키'를 전달하면 해당 키의 value을 읽어서 출력해준다. import .. [react hooks] 2. useMemo() useMemo() 리액트의 useMemo는 함수 컴포넌트 내에서 계산 결과를 메모이제이션하는 훅이다. 메모이제이션은 이전에 계산된 결과를 저장해 두었다가 동일한 입력에 대해 다시 계산하지 않고 저장된 결과를 반환함으로써 성능을 최적화하는 기술이다. useMemo를 사용하면 특정 계산이 매번 다시 수행되지 않고 캐시된 결과를 사용할 수 있다. 다음은 useMemo를 사용한 예시 코드이다. import React, { useMemo} from 'react'; const MyComponent =() =>{ // 복잡한 계산 로직을 가정해봅시다. const expensiveCalculation =(a, b) =>{ console.log('계산 중...'); // 여기서 실제로 계산을 수행하는 로직이 들어갑니다... 이전 1 ··· 26 27 28 29 30 31 32 ··· 50 다음
