React & TypeScript42

• 

  [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 React & TypeScript/TypeScript 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.. React & TypeScript/TypeScript 2022. 12. 16.

• 

  [React] 프론트엔드 폴더 구조 방법론 정리 [펌 + 사견] 이런저런 자료들을 찾아보았다. 결론부터 말하면, 정답은 없다. 정답이 되게 하기 위한 정답에 가까운 구조만이 있을 뿐이다. 오픈소스들 보면서 폴더구조를 참조하는 것도 좋은 방법이다. Ant design Pro https://github.com/ant-design/ant-design-pro 주요 원칙 (결론) 그래도 원칙은 있는 것 같다. 1. 재사용 2. 중복 방지 3. 팀 시너지 증대 위 3가지 원칙을 지키기 위해 나온 것이 multi-Layerd Architecture (다층화 구조) 라고 보면 된다. 리액트에서 추천하는 분류법 (공식문서) 1. 파일의 기능이나 라우트에 의한 분류 최초에 src폴더를 이렇게 만들어봤는데, 폴더별로 가지는 파일 수가 너무 많이 늘어나는 경향이 있었다. 가벼운 프로젝트에.. React & TypeScript/React 2022. 12. 14.

• 

  [React / TypeScript] interface로 타입 정의 중 발생한 이슈 (useParams, Params) - TS2344 1. 이슈 import React from "react"; import { useParams } from "react-router-dom"; interface RouteParams { coinID: string; } const Coin = () => { const { coinID } = useParams(); return Coin; }; export default Coin; 위와 같이 작성했을 때, 아래와 같이 에러가 나왔다. ERROR in src/routes/Coin.tsx:9:32 TS2344: Type 'RouteParams' does not satisfy the constraint 'string | Record'. Type 'RouteParams' is not assignable to type .. React & TypeScript/TypeScript 2022. 12. 9.

• 

  [React / TypeScript] styled-components와 함께 사용하는 TypeScript에 대한 고찰 (feat.react) 0. 설치간 오류 JS로 만들어진 패키지, TS type이 정의된 패키지를 모두 설치해야 TS에서 인식할 수 있다. 어찌보면.. 당연. 패키지의 타입을 정의해서 가져다 줘야 해석을 하던가 말던가 하지.. 보통 이런 것들은 @types/~패키지명 으로 정의되어 있음. @types/~* 라고 정의되어 있는 경우, 모두 type 정의한 옵션 패키지 구나 정도로 생각하면 된다. 만약 @types/~패키지명을 설치 안하면 다음과 같이 display된다. Module not found: Error: Can't resolve 'styled-components' 패키지명은 예시 tip. 만약 본인이 패키지를 설치했는데 type이 없는 패키지일 경우, @types/설치한 패키지명 으로 install을 해보면 꽤 유명한 .. React & TypeScript/React 2022. 11. 28.

• 

  [React / Test] Material UI (mui) + React + Testing Library 적용 간 어려운 점 회고 Render 관련 코드 구조 describe("Application 테스트", () => { it("Application - UI Test ", () => { render( , { wrapper: MemoryRouter } ); // ... material UI 특성상 theme 가 구동되기 때문에 ThemeProvider 를 감싸줘야 한다. (참고 : Custom Render - 아예 test-util을 만들어서 wrapping 하는 방법도 있다.) FetchProvider 도 감싸줘야 하며, Application 내부에서 match.params.id 를 사용하는데, 페이지를 전환하면서 전달한 게 아니라서, 임의로 props로 match 객체처럼 보여지게끔 전달해서 해결했다. Provider들을 감싸는.. React & TypeScript/React 2022. 6. 22.

• 

  React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. React & TypeScript/React 2022. 4. 29.

• 

  Build 이후 흰 화면만 나오는 이유 (로컬 index.html 안열리는 이유, react-router, 파일 프로토콜, http 프로토콜) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 이유를 알기 위해서는 생각보다 조금 더 깊게 학습이 필요했다. package.json에 homepage : "." 코드 한줄만 추가한다고 되는 게 아니었다. (사실, 이 건 필요가 없었다.) cli에서 빌드를 마치고 serve를 설치한 이후에 다음 명령어를 실행을 했어야 했는데, serve -s build 그 이유는 build시에 server에 대한 패키지는 빼고 빌드되기 때문이었다. (이렇게 static server.. React & TypeScript/React 2021. 9. 16.

• 

  [React] cypress를 활용한 React 테스트 (feat. 시나리오 테스트, E2E Test) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 개발을 마치자마자 문제라는 녀석이 끼어들기 시작한다 개발 자체가 긴급해서 테스트를 직접해가면서, 개발을 마쳤다. 마치고 나니까, Front-end 테스트가 누락됨에 따라, 컴포넌트를 추가/수정하는 과정에서 에러가 발생하는 경우가 있었다. 꼭 Front문제라기 보담은, Back-end 개발자가 api를 변경한 경우에도 종종 문제가 발생하는 경우가 있었다. 모든 문제를 육안으로 모두 체크할 수는 없다 최소 비즈니스 로직에.. React & TypeScript/React 2021. 8. 25.

• 

  리액트 SEO - 검색엔진(네이버, 구글)에서 검색되도록 고치는 방법 / robots.txt 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com robots.txt 고치기 public 폴더에 robots.txt 파일을 만든다. 아래와 같이 코드를 만든다. Sitemap: https://share.beautifulstore.org/sitemap.xml // 제작된 sitemap 경로 User-agent: * // 모든 검색엔진 (AdsBot 크롤러는 직접 입력해주어야 함) Allow: / // 모든 페이지 접근 허용 네이버, 구글 웹마스터 도구에 사이트 주소를 .. React & TypeScript/React 2021. 7. 20.

• 

  여러개의 state 값을 1개의 객체로 관리하는 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 코딩하다가 check 에 관한 컴포넌트 여러개의 check 여부를 1개의 state로 관리할 수 있을 것 같았다. 방법은 간단했다. 아래와 같이 useState 안에 배열, 그 안에 객체를 넣으면 된다. 순서는 컴포넌트 순서겠지? 미리 세팅해두면 된다ㅎㅅㅎ 이렇게 하면, 어떤 check 컴포넌트가 선택되었을 때, Re-Rendering 이 될 필요가 있으면, Re-Rendering 할 수 있게 된다. const [ch.. React & TypeScript/React 2021. 6. 17.

• 

  [React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 에러 메시지 antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`. 작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다. 초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다. const [data, setData] = useState({ res.. React & TypeScript/React 2021. 4. 28.