FrontEnd
-
Next.jsFrontEnd/React 2023. 12. 7. 05:00
Next.js React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. React는 SPA(Single Page Application)로 CSR(Client Side Rendering)을 하기 때문에 검색 엔진 최적화(SEO) 부분에 단점이 존재합니다. Client Side Rendering을 하면 첫페이지에서 빈 html을 가져와 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출될 일이 거의 없습니다. Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있습니다. SSR (Server Side Rendering) ..
-
React TDDFrontEnd/React 2023. 12. 6. 06:00
React Testing Library React Testing Library는 에어비앤비에서 만든 Enzyme을 대처하는 솔루션으로, 리액트 컴포넌트를 테스트하는 가벼운 솔루션입니다. Enzyme은 구현 주도 테스트(Implementation Driven Test)인 반면에, React Testing Library는 행위 주도 테스트(Behavior Driven Test)입니다. React Testing Library는 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축됩니다. DOM Testing Library란 DOM 노드(Node)를 테스트하기 위한 가벼운 솔루션입니다. Create React App으로 생성된 프로젝트는 React Testing Li..
-
Custom Hooks (useDebounce, useRef)FrontEnd/React 2023. 12. 6. 05:00
Debounce Debounce function은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킵니다. Debounce function을 사용하면, 검색어 입력 시 모든 문자에 대한 이벤트 처리를 일정 시간의 delay을 적용하여 서버로 전송되는 API 호출 수도 줄이고 성능도 향상시킬 수 있습니다. useDebounce Hooks import { useState, useEffect } from 'react' export const useDebounce = (value, delay) => { // State and setters for debounced value. const [debounceValue, setDebounceValue] = useState(val..
-
React Router DOMFrontEnd/React 2023. 12. 1. 22:00
React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있습니다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 합니다. React Router DOM 설치 npm install react-router-dom --save yarn add react-router-dom React Router 설정 앱 어디에서나 React Router를 사용할 수 있도록 src\index.js 파일을 열고 react-router-dom에서 BrowserRouter를 가져온 다음 루트 구성 요소(App 구성 요소)를 그 안에 래핑합니다. import { BrowserRouter..
-
Todo App 최적화FrontEnd/React 2023. 11. 23. 22:00
List 컴포넌트 분리하기 components 이하 List.js 파일을 생성합니다. 함수형 컴포넌트를 생성합니다. Lists.js 파일에서 UI 부분과 함수를 List 컴포넌트로 이동합니다. Lists 컴포넌트에서 List 컴포넌트를 import하고 props를 내려줍니다. List 컴포넌트에서 props를 받아옵니다. List.js import React from "react"; const List = ({ id, title, completed, todoData, setTodoData, provided, snapshot, }) => { const handleClick = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); se..
-
react-beautiful-dndFrontEnd/React 2023. 11. 22. 21:00
react-beautiful-dnd 모듈을 사용하여 TodoApp에 Drap and Drop 기능을 추가합니다. react-beautiful-dnd npm install react-beautiful-dnd --save index.js(StrictMode 제거) const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // // ); Lists.js import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; export default function Lists({ todoData, setTodoD..
-
TailwindCSSFrontEnd/React 2023. 11. 16. 21:00
TailwindCss란 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크 입니다. TailwindCSS 장점 부트스트랩과 비슷하게 m-1, flex와 같이 미리 셋팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링을 할 수 있습니다. 빠른 스타일링 작업이 가능합니다. class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 됩니다. IntelliSense 플러그인이 제공되어 금방 익숙해질 수 있습니다. Tailwind CSS 살펴보기 Todo App에 Tailwind CSS 적용 https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tail..
-
컴포넌트 분리FrontEnd/React 2023. 11. 16. 05:00
이번 포스팅에서는 ToDo App의 컴포넌트를 분리합니다. 컴포넌트를 분리할 때는 최대한 재사용이 가능하도록 합니다. ToDo App에서는 할 일 목록을 보여주는 List 컴포넌트와 할 일을 입력하는 Form 컴포넌트를 분리합니다. List Component components 폴더를 생성하고 Lists.js 파일을 생성합니다. 리스트에 관련된 UI 부분을 가져옵니다. 필요한 state, 함수 등을 가져옵니다. Lists 컴포넌트에 props를 내려줍니다. props로 필요한 데이터, 함수를 가져옵니다. Lists.js import React from 'react' export default function Lists({ todoData, setTodoData }) { const btnStyle = { ..