Suyeon BLOG

PedroTech님의 풀스택 강의 7일 차를 참고하였습니다. 📌 Comments 테이블의 데이터 가져오기 // ./client/src/pages/Post.js function Post() { let { id } = useParams(); const [comments, setComments] = useState([]); useEffect(() => { axios .get(`http://localhost:3001/posts/byId/${id}`) .then((response) => {... }); // Comments 테이블의 데이터를 가져오는 axios 입니다. axios .get(`http://localhost:3001/comments/${id}`) .then((response) => { setComme..

React 기반으로 REST API를 활용한 프로젝트를 구성 중에 TypeScript를 활용해서 만들면 더 구체적인 코드로 구현할 수 있을 것 같아 새로운 도전을 해보았습니다. 📌 TS로 API Type 만들기 export type apiType = { CRTFC_UPSO_MGT_SNO: number; UPSO_SNO?: string; UPSO_NM: string; CGG_CODE?: string; CGG_CODE_NM: string; COB_CODE_NM?: string; BIZCND_CODE_NM: string; OWNER_NM?: string; CRTFC_GBN?: string; CRTFC_GBN_NM: string; CRTFC_CHR_NM?: string; CRTFC_CHR_ID?: string;..

어떤 버튼을 눌렀을 때 관련된 내용만 보여주고 싶을 때 useState()를 사용하면 쉽게 구현할 수 있습니다. 📌 useState()가 무엇이고 언제 사용하는가? 1. 자료를 저장하는 역할을 합니다. 2. 자주 변경되는 자료를 저장할 때 사용합니다. 📌 코드 설명 - 탭을 눌렀을 때 state가 변경되고, 변경된 state를 페이지를 출력하는 컴포넌트에 전달해서 관련된 내용만 보이도록 했습니다. import { useState } from 'react'; // Detail에 관련된 자료가 저장된 파일입니다. import {food, product, book} from 'Detail-data'; function Detail() { let[tab, setTab] = useState('food'); retu..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 프로젝트 흐름 1. 처음 시작할 때 '로딩 메시지'가 화면에 출력됩니다. 2. '로딩 메시지'를 숨기고 코인 리스트를 나열합니다. - 암호화폐 리스트 출처 : https://api.coinpaprika.com/v1/tickers 주의할 점 1. useEffect로 API 한 번만 가져옵니다. 2. useState() 초기값을 안정해주면 undefined로 되고, undefined는 길이(length)를 가지고 있지 않습니다. import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, s..