React16 [ React ] 웹사이트 성능을 점검하는 필수 도구 Lighthouse 웹 페이지를 만들고 나면, "이 사이트 잘 만들 걸까?, "사용자들이 사용하는데 느리진 않은가?"라는 의문들이 들 수 있다.이때 Lighthouse를 통해 성능 체크가 가능하다. Lighthouse란?Lighthouse는 웹 애플리케이션의 성능, 접근성, SEO, PWA(Progressive Web App)등을 자동으로 분석해 주는 Google에서 제공하는 성능 진단 도구이다. Lighthouse를 사용하는 이유?웹페이지의 아래와 같은 항목들을 자동으로 분석해 점수와 개선 방법을 알려준다:Performance (성능)Accessibility (접근성)Best Practices (웹 표준)SEO (검색엔진 최적화)PWA (Progressive Web App 지원 여부)Lighthouse는 웹사이트의 품.. 2025. 4. 24. [ Ant Design ] React + Ant Design + React Router Dom으로 사이드 메뉴 라우팅 구현하기 이 글에서는 React 프로젝트를 처음부터 셋업 하고,Ant Design의 메뉴 컴포넌트를 활용해 사이드바 라우팅 UI를 구현하는 과정을 단계별로 정리해 보겠습니다. 1. React 프로젝트 생성원하는 위치에 React 파일을 생성합니다.npx create-react-app 프로젝트이름cd 프로젝트이름 2. Ant desgin 설치Ant design의 메뉴를 사용하기 위해서 아래의 명령어로 Ant design을 설치합니다.npm install antd# 또는yarn add antd 3. React Router 설치페이지 이동 기능을 구현하기 위해 React Router를 설치합니다.npm install react-router-dom# 또는yarn add react-router-dom 4. 파일 구조.. 2025. 4. 18. [ React ] 콘솔 경고들 수정하기 프로젝트 개발 중에 생긴 콘솔 경고들을 해결해 보았다. 경고 수정 #1 Form.Item을 사용하기 위해서는 Form 태그에 감싸주어야 한다.Warning: Cant not find FormContext. Please make sure you wrap Field under From. 경고문에서 수정 힌트를 주니 좋다. 원래 코드 {inputtype === 'ColorPicker' ? setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null} {inputtype === 'ColorPicker' ? null : setMeta(meta => ({ ...meta, name: e.target.value }))} />} 수정 코드아.. 2024. 6. 4. [ React ] Ant design Layout 적용해보기 아래 링크로 이동하면 다양한 구조로 적용이 가능하다.https://ant.design/components/layout Ant design 설치npm i antd 제일 심플한 구조인 Header, Content, Footer 구조로 만들어 보자. App.jsimport './App.css';import { Layout } from 'antd'; // Ant design의 layout을 가져온다.const { Header, Content, Footer } = Layout; // layout안에 Header, Content, Footer을 가져온다.function App() { return ( Logo content .. 2024. 5. 21. [ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25. [ React ] React Datepicker 원래 React Calendar을 사용하려 했는데 React Calendar는 달력이 바로 떠서 useState로 true일 때 보여주고 false일 때 닫히게 했다. 하지만 이때 문제가 내가 원하는 위치에 달력을 뜨게 하려니 fix를 사용하게 되는데 이렇게 했을 때 유저가 달력을 킨 상태에서 화면사이즈를 변경하니 달력이 잘렸다. 조금 더 검색하던 중 React Datepicker을 알게 되었다. React Calendar와 다르게 날짜 박스를 클릭하면 달력이 바로 아래에 생긴다. https://reactdatepicker.com/ React Datepicker 설치 npm install react-datepicker --save Import DatePicker Library import DatePick.. 2023. 2. 9. [ React ] React Calendar React Calendar 저번에는 직접 달력을 구현해 보았으니 이번에는 리액트에서 제공하는 달력을 사용해서 구현해 보았다. 훨씬... 간단하다🫠 그래도 그렇게 만들어본 덕분에 라이브러리에 더 감사해지는 것 같다. 설치 import Calendar from 'react-calendar'; 달력 선언 결과물 Calendar CSS 아래 한 줄 import 해 왔는데 저렇게 이쁘게 바뀌었다..! import 'react-calendar/dist/Calendar.css'; setSelectedDate(true)}/> 2023. 2. 8. [ React ] Hooks의 useState 1. Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 2. useState useState는 가장 기본적인 Hook이다. 함수형 컴포넌트에서도 상태를 가지고 있을 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다. 3. useState를 사용한 예제 버튼을 누르면 숫자가 바뀌는 컴포넌트를 만들며 useState를 익혀보았다. Counter.js import React, { useState } from 'react'; cons.. 2023. 1. 31. [ React ] 하나의 modal로 버튼에 따라 다른 내용 출력하기 modal 창 하나로 수정 버튼에 따라 그에 맞는 내용이 modal 창에 뜨게끔 구현을 해보았다. MyPage.jsx - 수정 버튼 import EditModal from '../../components/MyPage/EditModal/EditModal'; import { Fragment, useEffect } from 'react'; import { MyPageContainer, MyInfoContainer, MyPageTagTitle, MyInfoInput, MyInfoEditButton, NickNameContainer, GithubContainer, MyPageTabsContainer, InputCheckContainer, } from './style.js'; const MyPage = () => .. 2023. 1. 24. 이전 1 2 다음 728x90
