본문 바로가기

전체 글139

[TypeScript] Tip - 자동으로 Type 추출 API 에서 받아오는 Data같은 경우 Type을 직접 interface로 작성해주려면 귀찮다. 아래 사이트에서 json copy & paste 하면 interface 자동으로 추출해줌. https://app.quicktype.io/?l=ts Instantly parse JSON in any language | quicktype app.quicktype.io 2022. 12. 19.
[React / TypeScript / API] API 구조 작성은 이렇게 한다. 컴포넌트 호출 시 import { getCoin, getCoinPrice } from "APIs/get"; index가 있어서, 이렇게 선언하면서 사용이 가능해진다. 리액트 템플릿 사면, 이런 구조로 작성된 형태가 종종 있었는데, 왜 그렇게 했는지 이해가 된다. 이 구조가 가장 깔끔하다. index.ts import { getCoins } from "./getCoins"; import { getCoin, getCoinPrice } from "./getCoin"; export { getCoins, getCoin, getCoinPrice }; getCoins.ts import axios from "axios"; export const getCoins = async () => { try { const resp.. 2022. 12. 16.
[React / Router] Link 에서 state로 값 넘기기 전달하는 Link // state로 주면 된다. {coin.name} → 이렇게 하면 state에 값이 넘어간다. react router v6 에서 좀 더 간편해졌다. 예전에는 to 에 객체를 통째로 넣어야 했는데.. 지금은 state에 넣을 수 있게 되었다. state={{ name=coin.name }} 이런 식으로 작성도 가능해졌다. 전달받은 Link의 컴포넌트 전달받은 Link에 해당하는 Component에서는 useLocation 을 사용하도록 한다. useLocation().state를 받기 위해서 const { state } 라고 선언해주어서 사용하면 된다. import { useLocation } from "react-router-dom"; const Coin = (props: any) =.. 2022. 12. 16.
[HTML / CSS] a태그(Link) 내에 있는 text를 세로 중앙 정렬하기 Code // Styling a { display: flex; align-items: center; } span { padding-top: 4px; } // The Part of HTML or React Redner // a 태그 역할. 동일하게 동작한다. {name} a태그에서 가운데 정렬은 모두 끝난다. 그러나 Font 자체의 여백이 있기 때문에 이를 조절하려면, 결국 padding을 주는 수 밖에 없다. Font의 여백에 따라 padding-top or bottom을 주면 된다. Render padding-top Not padding-top 2022. 12. 15.
[React] 프론트엔드 폴더 구조 방법론 정리 [펌 + 사견] 이런저런 자료들을 찾아보았다. 결론부터 말하면, 정답은 없다. 정답이 되게 하기 위한 정답에 가까운 구조만이 있을 뿐이다. 오픈소스들 보면서 폴더구조를 참조하는 것도 좋은 방법이다. Ant design Pro https://github.com/ant-design/ant-design-pro 주요 원칙 (결론) 그래도 원칙은 있는 것 같다. 1. 재사용 2. 중복 방지 3. 팀 시너지 증대 위 3가지 원칙을 지키기 위해 나온 것이 multi-Layerd Architecture (다층화 구조) 라고 보면 된다. 리액트에서 추천하는 분류법 (공식문서) 1. 파일의 기능이나 라우트에 의한 분류 최초에 src폴더를 이렇게 만들어봤는데, 폴더별로 가지는 파일 수가 너무 많이 늘어나는 경향이 있었다. 가벼운 프로젝트에.. 2022. 12. 14.
[React / Router] url 마지막에 있는 slash 없애기 http://localhost:3000/sub/ { const location = useLocation(); // If the last character of the url is '/' if (location.pathname.match("/.*/$")) { return ( ); } else return null; }; export default RemoveEndUrlSlash; 2. app 컴포넌트 내부에 합성 import React, { useEffect } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import AppLayout from "./components/AppLayout"; import .. 2022. 12. 13.

티스토리툴바