SPA(Single Page Application)
: 기존의 웹클라이언트와 웹서버의 사이의 상호작용을 할때는 똑같은 페이지라도 조금만 업데이트 된 데이터가 있으면 그 데이터포함하여 전체파일을 request하고, 서버가 클라이언트에게 응답을 해서 비효율적이였지만, 1990년대 후반에 html 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JS가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였습니다. spa는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹사이트를 말합니다.. (json파일로 준다는 건 무슨 말일까?)
장점 : 빠름(왜?), 서버과부화문제 저하, 전체페이지 렌더링 필요 무 더나은 유저경험제공
단점 : spa경우 js파일의 크기가 크다, 때문에 이 js파일을 기다리는 시간으로 인해 첫화면 로딩시간이 길어진다. 검색 엔진최적화(SEO)가 좋지 않다.
wireframe은 wire(선)으로 frame을 만든다라고 생각하면 쉽다. 즉 하드코딩으로 동적으로 기능 작동되진 않지만 디자인적으로 페이지를 만든 목업 전에, 대략 wire로 frame을 만든다고 생각하면 될 것 같다.
그래서 와이어 프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다라는 말은 컴포넌트 안에도 여러 컴포넌트가 있으니 그것들을 고려해 효율적으로 컴포넌트을 구분하라는 얘기같다.
BrowseRouter 라우터역활
Switch 경로를 매칭해주는 역활
Route 경로를 매칭해주는 역활
Link 경로를 변경하는 역활Link를 통해서 Switch로 가져와서 route로 길이 정해진다.
Link를 눌러서 Switch가 작동되고 swich가 그 path를 가져와서 route로 길이 정해짐
link은 주소를 변경해주는 친구 , 경로를 바꿔주는 친구 exact는 구체적으로 몰라도 되는데 일단 해야한다..? 왜 머지
Switch는 라우터를 감싸서 그중 경로 일치하는 단하나의 라우터만 렌더링을 시켜주는 역활, 하나만 보여주게 하는친구
route는 .. 길을 실제로 경로를 실제로 바꿔주는 친구
<BrowserRoute>
<Link to="/"><HOME /></Link>
<Link to="/mypage"><HOME /></Link>
<Switch>
<Route exact path="/">
<HOME />
<Route/>
<Route path="mypage">
<Mypage />
<Route/>
</Switch>
</BrowserRoute>BrowserRoute, Switch, Route, Link를 쓰기 위해선 react-route-dom을 사용해하는데 우선
npm install react-route-dom
란 명령어를 사용후 자신이 react-route-dom을 불러와서 사용할 파일에
import {BrowserRoute, Switch, Route, Link} from 'react-route-dom';을 상단에 위치시킨다.
또한 App.js파일에 여러 js파일을 import시키면서 상대경로와 절대경로도 맛봤는데 이는 터미널, CLI에서도 많이 사용하므로 이번 기회에 친숙해져야겠다는 생각을 했다.
쉽게말해.. (쉽게 말하지도 못하면서..)
상대경로는 자신의 위치기준으로 경로를 나타내는 것이다, 예를들어 같은 폴더에 있는 Mypage.js 안에 Mypage라는 컴포넌트를 불러와서 사용하고 싶다면 코드는 다음과 같다.
Import Mypage from './Mypage'
// 우리 폴더 어딘가에 있는 Mypage 찾아와줘~
<Mypage />; // 이렇게 컴포넌트 사용가능코드스테이츠 선생님의 말씀을 빌리자면..
(자신이 마포구 도화동에 살경우..)
상대경로 : 친구야 너 거기 도화동 어딘지 알지? 글로와?
절대경로: 인천 도화동, 혹은 서울 마포구 도화동 (정확?)
또한 절대경로는 모든 이의 기준으로 경로는 나타내는 것이라 생각하면 쉽다. 즉 말그대로 '절대'경로이다. 예를 들어 '~/Desktop/codestates'란 폴더에 App.js란 파일이 있고 Desktop에서 Mypage.js파일안에 Mypage라는 컴포넌트를 불러오고 싶을 경우의 코드는 다음과 같다.
import Mypage from '../codestates/Mypage';
// 우리 폴더 위에있는(정확한 위치?) Mypage찾아와줘
<Mypage />; // 이렇게 컴포넌트 사용가능또한 컴포넌트얘기가 나와서 말인데..
컴포넌트도 인자를 받아서 사용가능하다. 만약 컴포넌트에 객체의 요소를 가진 배열을 map을 써서 사용하고싶다한다면 코드는 다음과 비슷할 것이다.
// arr는 객체요소를 가진 배열
{arr.map((el) => (
<Arr key={el.id} content={el} />
))}그냥 DOM을 배우다가 React를 사용하니까 굉장히 편했다. 또한 어떤 기능을 구현하기가 좀 편리했다. 이는 리액트가 선언형을 추구하기 때문이다. (바퀴를 재발명하지 마라..라는 말처럼)
거인의 어깨에 올라타는 일은 즐겁고 감사한일이다. 호국영웅들의 희생으로 대한민국이란 우리나라가 존재하는 것처럼. 리액트를 오픈소스로 개발하고 자바스크립트와 같은 오픈소스문화가 정착해서 편리하게 개발할 수 있게 된 것처럼
그저 더 열심히 배우고 깨닫고싶다.
내 곁에 좋은 사람들과 배움을 할 수 있기에 정말 감사한 것 같다...
이번주도 나름 열심히 산 것 같은 데,, 아쉬운 점이 많다. 문제도 몇번 더 풀어서 알고리즘이 몸에 익고싶은 욕심도 있고...
다음주부터는 더 열심히 살아봐야겠다...!
