프론트엔드/리엑트
-
리엑트 기본구조 및 작동프론트엔드/리엑트 2023. 9. 1. 17:33
구조 및 작동원리를 이해해서 효율적으로 코드를 작성해봐야겠다고 생각했다. -프로젝트 구조 현재 진행중인 프로젝트의 리엑트 구조이다. 아토믹 디자인을 최대한 활용하려고 해서, 컴포넌트, 타입, api, hook, util(axios)등 폴더를 따로 설정하여 import해오기로 했다. 리엑트 타입스크립트, 장고를 이용하여 팀 프로젝트를 진행중에 있다. root.tsx import Header from '../components/header' import { Outlet } from 'react-router-dom' const Root = () => { return ( {/* */} ) } export default Root 어플리케이션의 주요 레이아웃을 설정해준다. 헤더컴포넌트를 고정으로 상단에 설정해주어 ..
-
Next.js란??프론트엔드/리엑트 2023. 7. 18. 11:11
리엑트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크이다. 서버 사이드 렌더링(Server side rendering) 과 여러가지 기능들을 제공한다. 작동방식 Next.js는 기본적으로 서버측에서 React코드를 실행한다. React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다. 그 후, 브라우저에서 React를 사용해 웹 페이지를 완성한다. 서버 사이드 렌더링 로딩 - 클라이언트 사이드 렌더링의 경우에는 모든 js파일을 로드하고나서 사용자가 웹을 보게되는데, 이때까지 사용자는 많은 시간을 대기해야한다. 하지만 서버 사이드 렌더링을 사용하게되면 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 된다. SEO - 클..
-
[리엑트]리덕스,리듀서 이해하기프론트엔드/리엑트 2023. 7. 11. 18:03
상태관리 라이브러리이다. store에 state(변수)를 저장하고 관리한다. index.tsx import { Provider } from 'react-redux' import { createStore } from 'redux' import rootReducer from './reducers' const store = createStore(rootReducer, composeWithDevTools()) root.render( ) 사용하기 위한 import와 설정을 해준다. provider의 역할은 우리의 App이 Redux.store에 접근을 할 수 있게 도와준다. reducers/index.tsx import { combineReducers } from 'redux' import headerReduce..
-
리엑트 버튼클릭 시 컴포넌트 숨기기,나타내기프론트엔드/리엑트 2023. 6. 30. 10:40
버튼 클릭시에 랜더링을 껏다 켰다 할수 있게 구현해보기 "조건부랜더링" 이번 기능에서 중요한것은 , 논리연산자 논리곱(AND, &&)를 이용하는것이다. location_search.tsx import { TextField,Stack} from "@mui/material"; const Location_search:React.FC = () => { return( A동 B동 C동 D동 ); } export default Location_search; 버튼을 클릭시 나타날 컴포넌트를 만들어주었다. App.tsx // ./ 의 위치: frontend/src/ // ../의 위치: frontend/ import React from 'react'; import './App.css'; import { Route, R..
-
리엑트 Mui의 TextField에 아이콘넣기 , Button에 아이콘넣기프론트엔드/리엑트 2023. 6. 29. 15:10
TextField에 아이콘을 넣어야했는데, 구글링을 통해 알게 된 방법을 정리해두자! 먼저, 원하는 아이콘과 InputAdornment 를 import해준다. import {Stack,Typography,Box,Button,TextField,InputAdornment} from '@mui/material' import GpsFixedIcon from '@mui/icons-material/GpsFixed'; import LocationOnIcon from '@mui/icons-material/LocationOn'; 내가 선택한 아이콘! 그리고 이 아이콘을 적용하기위해서, ImputProps는 Mui에서 제공해주는 TextField 컴포넌트의 속성 중 하나이며, 이 속성은 TextField 컴포넌트 내부에 ..