리액트7 [문제 해결] 리액트에서 최신 상태 보장 방법 09.23.2023 1. 문제 발생 React DnD를 이용해서 드래그 앤 드랍 기능을 이용하던 도중 알 수 없는 문제를 마주쳐 거의 하루를 고민했던 것 같다. Page.tsx import { useState } from 'react'; import DragTargetLine from '/my/path'; interface Activity { id: number; planId: number; } const testData: Activity = { id: 1, planId: 1, }; function Plan(): JSX.Element { const [activities, setActivities]: (Activity : object)[] = Array.from({ length: 24 }, () => ({.. 2023. 9. 24. [React] SEO 문제의 배경과 극복하는 방법 08.05.2023 0. Background 이 글은 한 유튜브 동영상에서 영감을 받아 작성된 글입니다. 프론트엔드 개발자 지망 학생으로서 좋은 인사이트를 얻을 수 있는 동영상인데 조금 길어서 나누어 읽거나 다른 것을 하면서 편안하게 듣는 것을 추천드립니다. https://youtu.be/w6TiQJ9SlY4 1. SEO에 대한 개요 1-1. SEO 이전의 웹개발 역사 모두 아시다시피 웹개발의 초창기에는 프론트고 백엔드고 구분없이 웹개발을 했었습니다. 그 당시에는 웹이 그렇게 복잡하지 않았으니까요. 그러나 웹과 인터넷이 진화하면서 점점 사람들이 기대하는 기능과 기술들이 많아지고, 코드량도 계속 쌓이게 됩니다. 자세하게 말하자면 확장성, 자원최적화 등등이 있겠지만, 결국 한마디로 웹서비스 규모가 커진 것이.. 2023. 8. 5. [React] React Router - Link 동적 패스 지정 07.23.2023 1. 기본 Link 사용법 App.tsx에 먼저 패스 등록을 해줘야 한다. import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from 'pages/Main'; function App(): JSX.Element { return ( ); } export default App; 이 다음 해당 컴포넌트에서 이와 같은 코드를 써주면 된다. import { Link } from 'react-router-dom'; function Example(): JSX.Element { return ( Main ); } export default Example; 2. 컴포넌트에 Link 적용하기 Link는 a태그로 렌더링된.. 2023. 7. 23. 메모이제이션이란?(useMemo, useCallback) in React.js 06.26.2023 1. 메모이제이션의 정의 같은 함수가 같은 값을 계속 리턴해야할 때, 첫 번째 값을 메모리에 저장해놓고 메모리에서 값을 불러와 재사용하는 메모리 사용 기법. 2. 활용도 2-1. useMemo 예를 들어 이러한 함수형 컴포넌트가 있다고 하자. function Component () { const result = calculate(); return {result} } function calculate () { // 무거운 작업을 하는 코드 return 10; } 이 컴포넌트가 렌더링이 될 때마다 calculate은 무거운 작업을 계속해야 할 것이다. 그러나 result는 항상 10일 때, 성능이 비효율적이 될 것. 이럴 때 메모이제이션을 사용하여 해결 가능 function Compone.. 2023. 6. 26. 4. Using Variables in useEffect (useEffect에서 변수 쓰기) 03.16.2023 0. Background What I wanted to do was to use the prop as name for components and fetching data from database when props was passed in the result page from the main page. Here is what I did. 1. Store the prop as name using useState function Result(props){ const [name, setName] = useState(null); // Set name using useEffect useEffect(()=>{ if(location.state === null) setName(props.name);.. 2023. 3. 16. 2. Connect Node.js to React.js with Express and Mysql 0. Background Since none of my knowledge has anything to do with backend, I've been searching up how to connect Node.js to React.js for a quite long time.. (maybe being lazy took most of it tho). Anyway, I am making notes of how the connection has been made in this project. 1. Download Downloading is the easiest part. npm install express npm install mysql I wasn't sure cors is required but most .. 2023. 1. 2. 이전 1 2 다음
