API 3

[Next 고캠핑]공공데이터포털 API 불러오기

캠핑 사이트를 만드려고 공공데이터포털에서 캠핑 api를 신청했다.  인증키는 최상단에 .env파일을 만들어서 NEXT_PUBLIC_SERVICE_KEY  인증키를 넣어준다.next.js는 NEXT_PUBLIC  을 붙여줘야 함.리액트는 REACT_APP    나는 캠핑장 정보를 카드 형태의 리스트로 제공하고 싶었다.  interface ICampingList { facltNm: string; lineIntro?: string; addr1: string; firstImageUrl?: string; themaEnvrnCl?: string; tel: string; contentId: number;}interface IApiResponse { response: { body: { it..

언어/Next.js 2024.07.16

[React 영화 소개]리액트 슬릭

영화 등장인물 api를 받아와서 슬라이드로 만들었다. 원래 슬릭은 사용해본적이 없어서 swiper를 이용해서하려다가 화살표 바깥으로 빼는게 리액트로하기엔 좀 번거로울 것 같아서 슬릭을 사용해봤다. 슬릭을 설치해주고,, import React from 'react'; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import styled from 'styled-components'; import { API_IMG } from '../../API' import empryIcon from '../../image/icon/empty.png' ..

토이프로젝트 2023.09.19

[React 영화 소개]영화 소개 페이지 만들기

홈화면 메인 이미지는 인기 1순위의 영화로 해놨지만 지금 1위 포스터가 무서워서 잠시 바비로 바꿔놨다,, 그리고 귀여운 엘리멘탈 노마드 코더 리액트 강의를 듣고 페이지를 좀 더 꾸며보려다가 https://www.youtube.com/watch?v=e8xMcMXqYGw&list=PL9a7QRYt5fqkowXUgTj_tbkFClsPhO5XV 강의를 발견해서 참고하면서 만드는 중이다. 나름 재밌음 ㅎㅎ

토이프로젝트 2023.09.19