본문 바로가기

Dev Notes/FE2

[React] 리액트에서 생각하기 리액트로 프론트 개발을 하다보면 백에서 하던 것과 조금은 다른 플로우로 코드를 짜게 된다. 리액트스러운 코드란 무엇일까 고민을 하다가, 리액트 공홈에 있는 "Thinking in React"라는 글을 정리해보고자 한다. 이 글에서는 리액트 코드를 짤 때의 바람직한 순서를 제시하고 있다. 원문: https://react.dev/learn/thinking-in-react Thinking in React – React The library for web and native user interfaces react.dev 먼저 API에서 받아오는 JSON이 있고, 디자이너로부터 받은 설계도가 있다고 가정한다. Step 1. UI를 컴포넌트 계층으로 분해한다. 디자인에 있는 각 컴포넌트와 하위 컴포넌트에 이름을 붙.. 2023. 5. 28.
[React] 특정 디렉토리 내의 파일 불러오기 요즘 리액트를 만져보는 중이다. 그날그날의 팁 또는 조각 지식들을 적어보려고 한다. (그날 썼던 코드를 적어두는 것이니 혹시 더 좋은 방법이 있다면 알려주세요..) 디렉토리 내의 파일을 불러올 때 파일 경로를 라이브러리 임포트 하듯이 불러와야했고, 안그러면 에러도 뜨지 않고 조용히 에러가 발생했다. 본인의 경우에는 tsv와 이미지 파일을 불러와야 했다. tsv 파일 불러오기 import { useEffect, useState } from 'react'; import DB from "./db.tsv" ... useEffect(() => { async function fetchData() { const response = await fetch(DB); const text = await response.tex.. 2023. 5. 3.