React128 React - 구글 스프레드 시트 API 연동하기(2) - 프로젝트 설정 구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까? 일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)지난 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 이번 포스팅에서는 프로젝트 설정을 해보려고 한다.자, 머리에 그려졌으면 따라와보시길 ! 1. 구글 콘솔에서 할일 1) 서비스 계정 만들고 키 발급 받기 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기 React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정구글 스프레드 시트에 저장한 데이터를.. 2025. 1. 30. React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정 구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까? 일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)이번 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 자, 머리에 그려졌으면 따라와보시길 ! 1. 구글 콘솔에서 할일 1) 서비스 계정 만들고 키 발급 받기 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기 2. 프로젝트에서 할일 1) 구글 스프레드 시트 라이브러리 설치 2) 라이브러리 사용해서 API 호출해보기 React - 구글 스프레드 시트 API 연동하기.. 2025. 1. 14. Prettier - Prettier 로 통일된 코드 스타일로 협업하기 Prettier 는 코드 포매터 플러그인 중 하나이다. 사실 개인프로젝트에서 나혼자 사용하기 위해 세팅하거나, 이미 세팅되어 있는 부분들을 format on save 옵션을 걸어 사용하는 정도의 소극적 사용을 하고 있었다. 프로젝트 중에 코드 포매터가 없는 프로젝트가 있어, 적용해본 경험을 포스팅 해보려고 한다. 첫번째로 prettier 플러그인을 패키지 매니저 레벨에서 설치해주는 것이다. IDE 내부에서 익스텐션의 형태로 설치할 수 있겠으나, package.json 에 설치해야 모두가 같은 버전의 포매터를 사용할 수 있게 된다.pnpm add prettier --save-dev 이렇게 되면 package.json 의 devDependencies 라는 개발서버 전용 디펜던시로 설치된다. 즉 로컬에서만.. 2024. 10. 26. React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 셀렉트 박스와 클릭시 등장하는 옵션 메뉴를 직접 만들어 보았다 :) 이번 포스팅에서는 UI 보다는 기능적인 측면만 다루어 보았다 (작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다) 결과화면 미리보기 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 일단 메뉴배열을 useState 를 사용해서 선언해주자 const [menu, setMenu] = useState(['메뉴1', '메뉴2', '메뉴3', '메뉴4']); const [menuItem, setMenuItem] = useState('메뉴1'); // 선택된 메뉴 아이템 const [showMenu, setMenu] = useState(false); // 옵션박스 열고 닫힘 여부를 알려주는 값 옵션박스에서 메뉴를 고르.. 2023. 9. 16. React(99) 버튼 클릭시 동적으로 테두리색 변경하기 작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다. 아주 심 - 플하게 동작하는 버튼 선택 기능이다 :) 버튼 인덱스를 저장할 상태 변수를 만들자 const [selectedIndex, setSelectedIndex] = useState(0); 핵심은 클릭해서 저장된 selectedIndex 와 === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다. {buttonItems.map((item, index) => ( setSelectedIndex(index)} > {item.title} ))} 2023. 9. 6. React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 슬라이더 두번째 포스팅이다 지난번에는 슬라이더를 이동하면 탭이 선택이 되도록 만들어 보았는데 이번에는 커스텀 탭을 클릭하면 슬라이더가 이동하도록 만들어볼 것이다. React(97) Slick 슬라이더와 커스텀 탭 사용하기 slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 처음에는 막막했지만 하다보니 어떻게든(?) 되더라 다음처럼 화면에 한 devbirdfeet.tistory.com React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx import Slider, { Setti.. 2023. 8. 16. React 실행오류 - URIError: URI malformed 상황인즉슨 이렇다. 검색 서비스를 개발 중이었다. 검색창 내에 특수기호를 넣고 검색하면 에러가 발생했다. 쉽게 말해서 검색어를 입력하고 엔터를 뙇 치면, URL 에 ?search={검색어 키워드} 형식으로 반영이 되는 구조였다. 검색어를 맨처음 window.location.search 로 받아오면 인코드된 문자열로 보인다 하지만 웹사이트에서 "가독성" 을 위해서는 읽기 쉽게 디코드해줘야 된다. 그래서 나는 디코드를 해줬다. const searchURL = decodeURIComponent(window.location.search); 즉, /search?search=캐릭터 와 같다 하지만 여기에 #, % 같은 몇몇 특수 문자가 들어가면 에러가 터지게 된다. 나는 문제해결을 위해 머리를 굴려 보았다. 일단.. 2023. 8. 11. React(97) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. afterChange) slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 다음처럼 화면에 한장씩 보이는 싱글 슬라이더가 있다. 슬라이더 아래에는 커스텀 탭이 위치한다. 탭을 클릭하면 해당 슬라이더로 이동한다. 또한 [ ] 버튼으로 슬라이더를 이동하면 탭이 선택된다. React(97) Slick 에 커스텀 탭 사용하기 코드를 짜기 전에 내손에 쥐어진 무기가 뭐가 있는지 살펴보자 👊(현실은 맨주먹) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx 우선 Tab 과 ImageSlider 컴포넌트를 임포트 해주자 import Slider, { Settings } from 'react-s.. 2023. 7. 12. React(96) useContext 로 상태값 관리하기 예전에도 useContext 에 대한 개념을 다룬 적이 있지만 이번에는 실무에 직접 적용해본 경험을 정리해보려고 한다. 예전에 공부할 때는 개념적으로만 알다가 막상 사용해보니 너무x10 편리하고 좋았다. useContext 를 사용하는 이유는 redux 를 사용하는 이유와 같다 → 전역적인 상태값(state) 관리를 위해서이다. 여러 컴포넌트를 거치며 props의 drilled down 지옥을 맞본 새발자는 redux를 사용하자니 store 가 비대해질 것 같아 고민이었다. 또한 전역적이라기에는 특정 캠페인 페이지 내에서만 사용이 되는 상태 값이기 때문에 효율적이지 않다는 생각이 들었다. 그래서 useContext 를 사용하기로 결심했다. 사이트 내 전역적으로 사용되는 data 의 경우는 redux 를 .. 2023. 6. 1. 이전 1 2 3 4 ··· 15 다음 반응형
