react3 리액트 프로젝트 시작하기 프로젝트 생성$ npx create-react-app [appname] # npm 아님 주의! 라우터 설치$ npm install react-router-dom 프리티어 설치 $ npm install --global prettier CSS 라이브러리 설치 (styled-components)$ npm i styled-components +) 프리티어 기본 설정 코드 (파일 위치: 프로젝트 제일 상단 (src와 동등 위치))이거 추가해도 안 되는 경우 vscode 등 auto 설정 확인해보기 // prettierrc.json{ "tabWidth": 2, "semi": true, "singleQuote": true, "trailingComma": "all", "printWidth": 150.. 2024. 5. 21. [React] pathname 변경에 따라서 헤더 CSS 바꾸기 내가 하고 싶었던 것: 헤더에서 내가 선택한 부분의 CSS를 바꾸고 싶었다 처음에는 const page = window.location.pathname();을 사용해서 하려고 해보고 안돼서 [page, setPage]로 선언해서도 해보고 useLocation도 써봤는데 클릭 시점에 state를 변경하면 return부분 렌더링 시점과 맞지 않아서 한박자씩 늦게 변경됐다 아무튼 그래서 열심히 방법을 찾던 끝에 NavLink를 사용해서 완성했다. 코드는 대략 다음과 같다. (isActive ? "selected" : "")}> 📚 기초 개념 isActive는 NavLink의 고유 속성(boolean)으로 사용할 수 있는 듯 하다. pathname 관련 속성 해당 링크로 이동하는 경우 selected라는 클래스.. 2023. 5. 15. [React-JavaScript] 게이지바 만들기 전체 값에서 현재 값의 비율을 나타내는 그래프를 만들고 싶었는데, 뭔가 모듈을 사용해야 하나 싶었지만 이런 간단한 형태는 div의 CSS값 조정으로 간단하게 할 수 있다는 걸 알았다. 전체 코드 import React, { useEffect, useState } from "react"; import styled from "styled-components";// 리액트의 styled-components 모듈 사용 // 테두리 코드 const StyledBase = styled.div` height: 26px;// 게이지 부분의 높이에 border 높이의 2배를 더해준다. border: 3px solid; margin-right: 15%;// 페이지에서 원하는 부분만큼 자유롭게 설정 margin-left: .. 2022. 8. 14. 이전 1 다음 728x90
