리액트 (66) 썸네일형 리스트형 Next.js 개인프로젝트 : 포켓몬 도감 - 6 프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외06. 폴더 구조 변경, 폰트 추가분반 수업을 듣고 폴더 구조를 수정하기로 했다.모든 페이지들은 서버 컴포넌트로 남겨놓고 리스트와 같은 클라이언트 컴포넌트들은 따로 파일로 만들어서 분리상세 페이지와 관련된 폴더랑 파일들은 (detail)로 그룹화컴포넌트폴더는 _를 붙혀 path로 지정되지 않도록 이름 변경 폰트 추가 폰트만 바꿔도 훨씬 이뻐보일 것 같아서 폰트를 추가해봤다.외부에서 다운받았던 폰트를 추가하려면 public 폴더에 추가하면 된다.(public 폴더에 정적이미지, 폰트 등을 추가하도록 공식문서에서 설명함)global.css@tailwind ba.. Next.js 개인프로젝트 : 포켓몬 도감 - 5 프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외05. 포켓몬 상세 페이지 작성id를 기반으로 동적 라우팅을 해야하기 때문에src/app/detail/[id] 의 경로에서 작성일단 id를 기반으로 특정 포켓몬에 대한 정보를 가져와야하기 때문에 제공된 api 작성src/app/api/pokemons/[id]/route.ts더보기import { NextResponse } from "next/server";import axios from "axios";export const GET = async ( request: Request, { params }: { params: { id: string } }) =>.. Next.js 개인프로젝트 : 포켓몬 도감 - 4 프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외04. 포켓몬 리스트 컴포넌트 작성하기 전에 포켓몬 데이터에 대한 타입 지정src/app/types/pokemons.tstype Pokemon = { id: number; // 포켓몬 id, 도감 번호 name: string; // 포켓몬 영문 이름 korean_name: string; // 포켓몬 한글 이름 height: number; // 포켓몬 신장 weight: number; // 포켓몬 체중 sprites: { front_default: string }; // 포켓몬 이미지 types: { type: { name: string; kor.. Next.js 개인프로젝트 : 포켓몬 도감 - 1, 2, 3 필수 구현 사항Next.js v14로 프로젝트 구성 (App routing 기반, TypeScript, Tailwind css 사용)Layout에 metadata 설정 및 공통 UI 구성151가지 포켓몬을 보여주는 리스트 작성 (클라이언트 컴포넌트)포켓몬 id를 기반으로 해당 포켓몬의 상세 정보를 보여주는 페이지 작성 (서버 컴포넌트, 다이나믹 라우팅)Next.js에서 제공하는 Image 태그 사용전체적으로 적절한 타입 사용프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외01. 프로젝트 셋업터미널yarn create next-appWhat is your project named? my-appWould y.. 전 세계 리스트 APP (TypeScript 개인 프로젝트) 예비군 끝나고 급하게 해설 영상 참고하면서 짰다. 전 세계 API 불러오기import axios from "axios";import { Country } from "../types/country";export const getCountries = async (): Promise => { const response = await axios.get("https://restcountries.com/v3.1/all"); return response.data;};axios get메서드를 이용해서 전 세계 국가들의 정보를 호출 필요한 데이터 타입 지정하기export interface Country { name: { common: string; }; capital: string[]; translati.. 2024/06/19 팀프로젝트(Festiall) : 찜 기능 특정 행사에 찜 버튼을 누르면 찜이되고, 찜이 되어있는 상태에서 찜 버튼을 누르면 찜이 취소되게 구현하기결과부터화면에 나오지는 않지만 현재 로그인 상태네트워크 탭을 통해서 확인해보면찜 하기 버튼 클릭 => POST 요청을 보내고 성공 => 찜 취소 버튼으로 변경찜 취소 버튼 클릭 => DELETE 요청을 보내고 성공 => 찜 하기 버튼으로 변경실제 DB를 확인했을 때도 결과가 잘 나왔다! 테이블 구조Hearts (테이블 명)created_at (자동생성)hearts_id (자동생성, uuid)post_id (uuid)user_id (uuid) Hearts 테이블에 새로운 데이터가 들어가면 특정 id의 유저가 찜한 테이블의 id를 확인할 수 있고 이를 통해 마이페이지에서 찜한 행사 데이터를 불러올 수 있.. 2024/06/18 팀프로젝트(Festiall) : 공통 컴포넌트 - 버튼 모든 컴포넌트에서 재사용 가능한 버튼 컴포넌트기존에는 컴포넌트 마다 버튼 컴포넌트, 인풋 컴포넌트 등 많이 사용되는 컴포넌트들을 일일이 새로 만들어서 사용했었다.결국 페이지가 나타내는 이미지에 따라 일관성있게 버튼, 인풋 등은 디자인을 비슷하게 해서 기존에 썼던 스타일 코드를 ctrl C + ctrl V 하는 경우가 많았었고, 이 부분으로 피드백도 한 번 받았어서 이번 프로젝트에서하나 만들어봤다. 굉장히 간단버튼의 레이블을 children으로 받고,onClick 이벤트, 배경 색상도 props로 받는다.props로 받은 배경색상이 없으면 기본 배경색은 흰 색, 글자 색은 검은 색, 보더도 검은 색으로 나타나고배경색상을 받으면 그 배경 색상으로 버튼 색이 바뀌면서 보더도 같은 색으로 바뀐다.레이블이 눈에.. 2024/06/18 팀프로젝트(Festiall) : 상세페이지 - 3 카카오 맵 API 이번에는 카카오 맵 API를 이용해서 행사 장소를 지도로 보여주기일단 결과카카오 맵 API를 이용하기 위해서는 먼저 https://apis.map.kakao.com/web/guide/여기에 나와있는대로 그대로 잘 따라해주면 API 키를 발급받을 수 있다.(공식문서라 기본적인 사용법도 나와있음)발급받은 API키를 토대로 자바스크립트 API를 가져오기(참고로 나의 경우에는 리액트로 작업해서 루트 index.html에 삽입해줬다.) 이제 카카오 맵을 import하고 사용해주기import { Map, MapMarker } from 'react-kakao-maps-sdk';... return (... 행사장소 .. 이전 1 2 3 4 ··· 9 다음
