본문 바로가기
  • 살짝 구운 김 유나

Project8

XML to JSON - JavaScript, React Open API를 호출하면 데이터를 XML로 제공하기 때문에 이를 JSON으로 변환하는 과정이 필요했다. TypeScript로 하려고 했는데, 잘 모르겠어서 JS로~ XML parser 설치하기 $ npm install react-xml-parser // or $ yarn add react-xml-parser import import XMLparser from 'react-xml-parser'; 사용하기 XMLparser 생성후 parseFromString() 호출 new XMLparser().parseFromString(data) 전체코드 // bestkeyword.js // 이달의 키워드 조회 export async function getBestKeyword(year, month) { try { co.. 2023. 3. 22.
[React] react-Intersection-Observer 라이브러리를 이용해 무한스크롤 구현하기 InterSection Observer? => 브라우저 Viewport와 설정한 요소의 교차점을 관찰하여 요소가 viewport에 포함되는지 구별하는 기능 제공 페이지 스크롤 시 이미지를 Lazy-Loading 할 때 무한 스크롤을 통해 새로운 컨텐츠를 불러올 때 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 떄 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때 무한 스크롤 사용자가 특정한 영역 하단에 도달했을 때, API가 호출되며 콘텐츠가 계속 로드되는 방식 -> 모든 데이터를 불러와 뿌려주는 방식은 렌더링 시간이 많이 소요되니까 ㅜ 바닥에 닿으면 불러오자! 구글에 정보가 정말 많아서 라이브러리 없이도 구현 해보면 좋을 것 같아,, 하지만,, 나는 당장 시간이 좀 없기 때무네,.. 2023. 2. 7.
[React] axios로 다중 파일 전송 - 이미지, JSON 나는,, 상품의 정보를 등록할 때, JSON(제목, 설명, 현재 상태,, 등), 과 상품의 이미지를 함께 post로 보내고 싶었다! -> 파일과 JSON을 같이 보내줘야 한다는 사실이 나는 좀,,, 어려웠다,, FormData ? AJAX로 form 전송을 가능하게 하는 객체! => 업로드한 파일을 서버에게 전송할 수 있도록 하는 객체 이미지 파일을 서버에 업로드하기 위해서는 FormData 객체를 사용해야 한다. -> key 값과 value의 쌍의 형태! (딕셔너리 넊김) // 사용하기 let formData = new FormData(); formData.append("key","value"); // 키-값 쌍으로 formData에 추가한다. 여러개도 추가할 수 있음 formData.append("k.. 2023. 2. 7.
[React] 타이머 기능 구현하기 - setInterval [공식문서] https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often Hook 자주 묻는 질문 – React A JavaScript library for building user interfaces ko.reactjs.org setInterval : 매 시간 동안 브라우저와 통신하는 함수 => 일정한 간격으로 setInterval 내의 코드를 반복할 수 있다. => 매 초마다 시간이 바뀌는 화면을 만들어 낼 수 있음! setInterval(() => { // 실행할 코드 }, 시간 간격) 마운트 될 때 타이머를 바로 실행 시키도록 작성해보았다. count가 0이 되었을 때 실행할 코드.. 2023. 2. 5.
[React] 실시간 채팅 구현하기 - STOMP 소켓 프록시 수동 설정하기 https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev http-proxy-middleware 설치하기 $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware // ws 프로토콜을 사용해야하니 설정해주는.. 2023. 2. 3.
[React] swiper로 이미지 슬라이드 구현하기 [공식문서] https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 설치하기 $ npm install swiper $ yarn add swiper swiper를 사용하고자 하는 페이지에서 import // swiper - 이미지 슬라이더 import { Swiper, SwiperSlide } from "swiper/react"; import 'swiper/css'; import 'swiper/css/naviga.. 2023. 1. 28.
[React] 카카오 로그인 카카오 로그인 과정 1. 카카오에 인가 코드 발급 요청 2. 인가 코드를 백엔드에 알려줌 3. 로그인 처리를 한 후에 jwt 토큰 발급 4. 토큰을 로컬 스토리지에 저장 kakao developers를 참고해서 공부하자! https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 애플리케이션 등록 1. 애플리케이션 추가하기 공식문서 > 내 애플리케이션 > 애플리케이션 추가하기 2. 웹 플랫폼 추가하기 내 애플리케이션 > 앱 설정 > 플랫폼으로 들어가서 Web 선택 도메인을 입력해야 하는데 우선,, .. 2023. 1. 26.
[React] React에서 Firebase 사용하기 - Google 로그인 Firebase의 장점 1. HTML CSS JS만으로 서비스 제작이 가능 2. DB 콘솔을 다루기 쉬움 3. 프로젝트가 커지면 스케일 업을 자동으로 해줌 4. DB 데이러를 알아서 리얼타임으로 싱크 Firebase로 google 로그인 하기! 1. 원하는 경로에 React 프로젝트 생성 $ yarn create react-app '프로젝트명' 2. Firebase로 이동해서 프로젝트 생성 https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 프로젝트를 생성하면 아래의 사진과 같은 화면이 나온다. 3. 생성된 React 프로젝.. 2023. 1. 25.

티스토리툴바