프론트엔드 개발

varaible * mutable = 값을 계속 변경될 수 있는, all objects type * immutable = 값을 변경할 수 없는, primitive type var 1. 값을 재선언 및 재할당 할 수 있다 console.log(age); //undefined age = 4; console.log(age); //4 var age; 첫 줄에서 변수는 정의되어있지만, 값이 안 들어가 있다는 의미. 값을 할당하고 console.log를 찍어보면 값인 4가 반환된다. => var hoisting 호이스팅은, 어디에서 선언하는 것과 상관없이 제일 위로 끌어올려주는 것. 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, functi..

앞서 CSR과 SSR을 비교해 보면서 정리해보면, 각 브라우저의 크롤러들이 해당 페이지에서 내용을 찾게 될 때, SEO적인 측면에서 SSR을 고려해볼 필요가 있다고 생각하였습니다. SEO 뿐만이 아니라 html을 먼저 뿌려주기 때문에, 유저가 처음 들어왔을 때, 빠르다고 느끼다고 생각할 수 있습니다. React에서, SSR을 적용하려면 몇 개의 프레임워크들이 있습니다. https://jthcast.dev/posts/gatsby-versus-nextjs/ 이글에서Gatsby와 Next.js의 차이를 알 수 있습니다. 저는 SSR과 SSG방법을 모두 사용 가능한 Next js를 선택하겠습니다. Next.js는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크입니다. Next js는 ..

CSR 동작 방식 처음에 웹서버에 요청할 때, 서버는 데이터가 없는 문서를 반환한다. HTML 및 static파일들이 로드되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다. Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering 한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring 한다. SSR 동작방식 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식. SSR과..

3 Way-Handshake 란 전송 제어 프로토콜(TCP)에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정, 방법 TCP / IP Model의 Transport 계층에는 크게 TCP(Transmission Control Protocol) 와 UDP(User Datagram Protocol) 2가지 프로토콜이 있다. TCP 연결지향적이며 오류제어, 흐름제어, 혼잡제어, 타이머재전송 등의 기능을 하며 연결지향이란말은 데이타를 전송하는 측과 데이타를 전송받는 측에서 전용의 데이타 전송 선로(Session)을 만든다는 의미이다. 데이타의 신뢰도가 중요하다고 판단될때 주로 사용된다. UDP 비연결지향이며, 최소한의 오류제어 기능만 수행한다. 단순히 데이타를 받거나, 던져주기만 하는 프로토콜이다...