소소한 기록 방

보통 우리가 페이지 이동을 구현 할 때 를 사용하여 만들었을 것이다. 하지만 a 태그를 사용 했을 때 문제가 있다. 는 페이지가 이동 할 때 js와 css 모두 다시 다운로드 한다는 문제점이 있다. React Application은 SPA 방식으로 한 번 다운로드 하고 나선 다운로드 하지 않기 때문에 react-router-dom을 이용하여 Link를 사용해주어야 한다. App.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import Profile from './pages/Profile'; import About from './pages/About'; import No..

다이나믹 라우팅이란? 여기서 말하는 다이나믹 라우팅이란 다음과 같다. http://localhost:3000/profile - 이런 방식의 라우팅만 커버하고 있지만 http://localhost:3000/profile/1 - 원래 있던 라우팅 되는 path 뒤에 또 다른 값이 붙었을 때 처리하는 방식을 말한다. Dynamic Routing by ID import { BrowserRouter, Route } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; function App() { return ( /*새로 추가된 코드..

React가 나오기 전 전통적인 방식은 다음 그림과 같다. url이라고 불리는 단위를 바탕으로 해당 페이지의 html, css, js를 서버에게 url에 해당하는 html을 받아왔다. React로 넘어오면서 url을 받아오는 것이 아니고, 큰 앱 전체를 받아왔다. 각각의 페이지를 요청하는 것이 아닌 전체(Single Page Application)을 받아오는 방식을 사용하기 시작했다. SPA의 라우팅 과정 브라우저에서 최초에 '/'(root) 경로를 요청하면 서버에서 React Web App을 내려준다. 내려 받은 React App에서 '/' 경로에 맞는 컴포넌트를 먼저 보여준다. React App에서 다른 페이지로 이동하는 동작을 수행하게 된다면 새로운 경로의 컴포넌트를 보여준다. React 범주에서 ..

Class Component 작성법 위와 같이 작성하면 Class Component를 사용할 수 있다. Class Component 정의하기 class ClassComponent extends React.Component{ //React안에 Component라는 클래스를 상속 받음 render(){ //render 메서드는 정의 되어야하고 return 값이 꼭 있어야 함 return Hello; } } ClassComponent라는 이름의 클래스 컴포넌트를 React 라이브러리 안에 있는 Component 클래스로부터 상속받았다. Component 클래스 안에는 render() 메서드 값이 필요하며 render 값에는 꼭 return 값이 있어야 한다. Class Component 사용하기 ReactDO..

협업 해야 할 일들이 점점 생겨나면서 Git flow정도는 기본적으로 알아 둬야 차질 없이 개발 할 수있을 거 같은 느낌을 받았다. Git으로 협업 하는 것이 왜 좋은지 Git Flow에 대한 개념이 뭔지 알아보자.git-flow는 Vincent Driessen의 branching model을 적용하여 저장소를 관리 해주도록 하는 확장된 방법론을 의미한다.Branch는 feature - develop - release - hofixes - master로 나누어 코드를 관리하는 전략을 말한다.master (main)사용자에게 배포 되고, 기준이 되는 브랜치를 의미한다. master 브랜치의 HEAD에는 소프트웨어의 최신 배포판의 소스코드 버전이 들어있다. 배포 해도 될 만큼 안정성있는 코드들만 병합 되는 ..

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저가 렌더하는 방식들을 의미하는 단어들이다. CSR Client Side Rendering의 약자이다. 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다. 과정 설명 어떤 특정 도메인, 즉 웹 서비스에 접속 하게 될 때 그 웹 서비스에서 html을 먼저 다운로드하게 되고 html 화면을 보여주고, html 안에 있는 DOM 요소가 보이거나 CSS가 적용된 스타일이 보인다. React에선 html은 빈 껍데기 html만 내려오게 되고 Browser가 JS 파일을 요청하게 됩니다. (React는 JS파일이 모두 존재 해야 UI가 그려진다) JS 파일 안에는 React Web A..

TCP는 체증제어(Congestion Control)을 하는데 다음과 같은 상황에서 발생한다. 데이터가 많이 몰려 막혔을 때 어떠한 패킷에 Time out 발생 시 Duplicated ACK가 3개 이상 왔을 때 처리 방법은 대표적으로 3가지가 있다. 첫째, AIMD AIMD(Additive Increase / Multicaticve Decrease) 방식은 네트워크에 별 문제가 없을 때 전송속도를 더 빠르게 하려고 한다면 혼잡 윈도우의 크기를 1씩 증가 시키지만 이때 데이터가 유실되거나 응답이 오지 않는 등 혼잡 상태가 발생하면 혼잡 윈도우 크기를 반으로 줄인다. 둘째, Slow Start(SS) AIMD와 비슷한 방식으로 윈도우 크기를 지수함수꼴로 증가 시키다가 혼잡이 감지되면 윈도우 크기를 1로 줄..

첫째, TCP 연결시엔 3-way Handshaking을 사용한다. 클라이언트가 TCP 연결을 위하여 SYN 패킷을 보내어 연결을 요청한다. 서버가 SYN 패킷을 받고, 클라이언트로 받았다는 신호인 ACK와 SYN 패킷을 전송 해 준다. 클라이언트는 SYN + ACK 신호를 받았다는 의미로 ACK 패킷을 서버에 다시 보내어준다. 이러한 방식으로 TCP 연결이 설정된다. 3번의 과정을 거치기 때문에 TCP 3 way HandShaking이라고 불린다. 둘째, TCP 연결 해제시엔 4-way Handshaking을 사용한다. 클라이언트는 서버에게 TCP 연결 종료를 위하여 TCP 헤더 flag에 있는 FIN을 보낸다. 서버는 FIN을 받고, 남은 데이터 저장을 위한 ACK를 클라이언트에게 보낸다. 그 이후,..