일단 시작하고 보자

개발자는 단순히 개발만을 잘하면 되는 것이 아니라 항상 '왜' 라는 키워드와 함께 성장해야한다고 생각한다. 개발 기술면접 단골문제이자 프론트엔드 개발자가 필수적으로 알아야하 는 CRP(critical rendering path) 이전에 서버와 클라이언트가 연결되고 연결이 종료되는 과정인 3way handshake & 4way handshake에 대해 알아보자! 3-Way handshake는 TCP의 연결을 초기화 할 때 사용 양쪽 모두 데이터를 전송할 준비가 되었다는 것을 보장하고, 실제로 데이터 전달이 시작하기전에 한쪽이 다른 쪽이 준비되었다는 것을 알수 있도록 한다. [STEP 1] A클라이언트는 B서버에 접속을 요청하는 SYN 패킷을 보낸다. 이때 A클라이언트는 SYN 을 보내고 SYN/ACK 응답..

채용 공고를 보다보면 HTML5와 CSS3 라는 키워드를 볼 수 있다. HTML과 CSS는 아는데.. 이번기회에 우리가 사용하는 HTML, CSS와 HTML5, CSS3는 무슨관계가 있을지 알아 보도록 하겠다. HTML5 HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다. HTML5는 2014년 확정된 차세대 웹 표준 멀티미디어 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원 그래픽 SVG, 캔버스를 사용한 2차원 그래픽과 CSS. WEBGL을 사용한 3차원 그래픽을 지원 통신 지금까지의 HT..

HTTP 0.9 💡 원-라인 프로토콜, 요청은 단일 라인으로 구성 , 단순 그 자체 HTTP 초기 버전에는 버전 번호가 없었다. HTTP/0.9는 이후에 차후 버전과 구별하기 위해 0.9로 불리게 되었다. GET /mypage.html GET 메서드만 지원함 A very simple HTML page 간단한 HTML 객체만 받아 오기 위해 만들어짐 MIME 타입 , 헤더 , 상태 코드 없음 HTTP 1.0 💡 확장성 요청에 버전 정보가 추가 되었음 GET /mypage.html HTTP/1.0 HTTP 헤더, 추가 메서드 , 상태 , MIME 타입 추가 HTML 파일 외에 다른 문서들도 전송 가능 GET /mypage.html HTTP/1.0 User-Agent: NCSA_Mosaic/2.0 (Windo..

일반적으로 URL와 URI를 혼용하는 경우가 있지만, 이 둘의 차이점에 대해서 정확하게 알아보려고 한다! 결론 부터 말하자면 URI 가 URL을 포함하고 있다 URI는 식별하고, URL은 위치를 가르킨다. URL(Uniform Resource Locator) 흔히 말하는 웹 주소와 같은 말이며, 통합 자원 식별자로 인터넷에 있는 자원을 나타내는 유일한 주소. (자원이 실제로 존재하는 위치를 가리킨다) URI(Uniform Resource Identifier) 네트워크 상에서 자원 위치를 알려주기 위한 규약이다. URI의 구조 scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment] 간단히 정의를 알아보았고 예시(?) 를 통해서 마지막으로 이해..

CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점은? 초기에는 빈 HTML을 가지고 있고, 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식을 의미한다. (React, Angular, Vue) 장점 변경되는 부분만 다시 렌더링 되므로 화면 깜빡임이 없음 초기 로딩 이후 구동 속도가 빠름 TTV와 TTI 사이 간극이 없음 필요한 데이터만 서버에 요청하므로 서버 부하를 줄임 단점 초기 로딩시 모든 정적 리소스를 다운받아야 하므로 초기 로딩 속도가 느림 초기에 빈 HTML파일을 가지고 있으므로 SEO 불리 (구글 크롤러봇은 JS도 실행가능하긴 하지만 다른 크롤러봇들은 대부분 JS를 이해못하는 경우가 많음) 단점 보완 초기 로딩 속도 보완 code splitting tr..

프론트엔드 개발자 공고를 찾다보면 React, ReactNative, Flutter를 볼 수 있다. HTML, CSS, JS를 공부하면 프론트엔드 개발자로 일 할 수 있지 않을까? 라고 생각 할 수 있지만 그렇다면 저 3개는 도대체 무엇일까? 자세한 React에 대한 설명은 다른 글에서 더 자세히 다루는 것으로 하고 3가지에 대해 간단한 비교를 통해 알아보도록 하자! React? 💡 페이스북에서 만든 프론트엔드 JavaScript 라이브러리입니다. React-Native? 💡 React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크입니다. 우선 react와 react native 둘의 공통점은 둘다 js 언어기반 이기에 문법이 같다. 그리고 react를 사용하던 유저라면 rea..

툴체인이란? 💡 툴체인(toolchain)은 주로 다른 컴퓨터 또는 시스템의 소프트웨어 제품을 만드는 데 사용되는 컴퓨터 프로그램 개발 도구들의 집합이다. 일반적으로 여기에 포함된 개발 도구들은 연쇄적으로 사용된다. 즉 어느 한 개발 도구의 출력은 다른 개발 도구의 입력이 된다. React 팀의 추천 방법 React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App. 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요.. 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요.. 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 한다면 더 유연한 툴체인. (숙련자에게 추천) CRA는 webpack, babe..

리액트 공식 홈페이지에 따르면 리액트는 자바스크립트 라이브러리다. 컴포넌트 리액트의 경우 컴포넌트 단위로 뷰들을 관리하는데 이를 통해 상태를 관리하고 불필요한 리렌더링을 최소화 할 수 있다. 컴포넌트, 뷰 이런 용어들에 대해서는 따로 정리를 하도록 하고, 쉽게 말해, 재사용성이 뛰어나고 유지보수, 추후 관리가 수월 하다는 점이 장점이다. 가상돔(Virtual DOM) 예전에 자바스크립트 공부를 하며 DOM에 대해 살짝 알아봤는데, 가상돔이라니 머리가 아프지만 왜 가상돔이 장점인가에 대해 알아보겠다. 리액트의 경우 render → 가상돔에 결과물을 저장 → 원래 돔과 가상돔의 결과를 비교 → 달라진 점을 최종 돔에 저장 이라는 프로세스를 거친다. 이는 매번 변화되지 않은 부분까지 렌더링을 하지 않고 달라진..