2025_04_30 Java 풀스택 수업

 

public :

public 은 src 와 동일파일내 존재하며 index.css가 관리하며 대용량 다량의 정적인 파일관리에 적합하다

assets :

assets 는 src 의 하위파일에 존재하며 직접 import 하여 사용하며 소량의 정적인 파일관리에 적합하다

로드속도에서 약간의 차이가나는 모습 asset 의 파일이 먼저 로드되고 public이 다음이된다

import grade01 from "../assets/grade1.png"
import grade02 from "../assets/grade2.png"
import { getGradeImgById } from "../Util/Util";


const ImgExam = () => {

  return(
    <div>
      {/* asset 폴더의 이미지 가져오기 */}
      <img src={grade01}/>
      <img src={grade02}/>
      {/* public폴더의 이미지 가져오기 */}
      <img src="/child.jpg" />
      <img src="/child1.jpg" />
      {/* 이미지 파일을 함수로 정의하서 import로 받기 */}
      <img src={getGradeImgById(1)} />
      <img src={getGradeImgById(2)} />
      <img src={getGradeImgById(3)} />
    </div>
  );
}

간단하게 만든 이미지 jsx 파일과 출력이미지

 

라우팅 :

Route(경로) + ing(~하는) 으로 합쳐진 단어로 경로를 지정하는 과정이라는 뜻을 담고있다

 

페이지 라우팅 :

요청에 따라 해당하는 페이지를 반환하는 것

 

리엑트의 페이지 라우팅 :

https://reactrouter.com/home

React Router Home | React Router

 

 

서버 사이드 렌더링 :

웹브라우저에 표시할 페이지를 웹 서버에 만들어 전달하며 검색엔진을 최적화한다

속도가 빠르다는 강점이 있다 다만 사용자가 많아지면 이동할때마다 새로운 페이지를 로드해야하기 때문에 연산이 많아지며 이는 서버에 부하가걸릴 가능성을 높힌다

 

클라이언트 사이드 렌더링 :

html 파일이 하나뿐인 SinglePageApplication

html 파일이 하나이기 때문에 서버 사이드가 아닌 클라이언트 사이드렌더링으로 페이지를 라우팅한다

사용자가 보는 페이지를 웹 서버가 아닌 브라우저가 완성하는 방식으로 브라우저는

처음 접속시에만 서버에게 데이터를 요청하며 페이지 이동시 별도의 요청을 하지 않는다  다만

서버에 처음 접속할 때는 랜더링 속도가 느리다는 단점이있지만 그 이후는 브라우저에서 페이지를

직접 교체함으로 속도가 빨라진다

 

React Route / Routes

 

Routes : 하나로 묶어주는것

return (
    <div className='App'>
      <Routes>
          
      </Routes>      
    </div>
  )

Routes 사이는 전부 경로설정으로 인식한다

	<Routes>
        {/* <Route path = '/경로' element={컴포넌트}/> */}
        <Route path='/' element ={<Home />} />
        <Route path='/new' element ={<New />} />
        <Route path='/editor/:id' element ={<Editor02 />} />
    </Routes>

기본 페이지인 ' / ' 페이지와 new Page 그리고 :id 로 번호를 구분하는 editor Page

<div className='link'>
        <Link to={'/'}>Home</Link>
        <Link to={'/new/?name=홍길동&age=20'}>New</Link>
        <Link to={'/editor/2'}>Editor</Link>
      </div>

Link를 사용하여 정보를 전달할수도 있다

주소로 정보를 넘겨 NewPage가 받는것

id 값으로 해당 페이지를 보여주는방법

 

이 부분을 끝으로 React는 마무리한다