반응형

개발/프론트엔드 10

[개발상식] 간단하지만 헷갈리는 개념들 (클래스, 객체, 인스턴스)

이전에 노션에 작성했던 글들을 복습하며 노션에만 남겨두기 아쉬워, 작성 했던 글들을 블로그에 업로드 하려 한다. 쉬운내용이지만, 나뿐만 아니라 다른 개발자들도(?) 간간히 헷갈릴 때가 있을 것이라 생각되어 '클래스', '객체', '인스턴스' 에 대해 알아보려 한다. 클래스 객체를 정의하고 만들어 내기 위한 설계도 혹은 틀 클래스 안에는 객체를 만들어내기 위해 필요한 변수와 메서드들이 존재 객체 클래스에 선언된 모양 그대로 생성된 실체를 말하며 ‘클래스의 인스턴스’라고 한다 인스턴스 클래스를 통해서 구현된 대상(객체)이 실제로 구현된 구체적인 실제 즉, 객체를 소프트웨어에 실체화 하면 그것을 ‘인스턴스’라고 부른다. 실체화된 인스턴스는 메모리에 할당된다. 예를들어 붕어빵을 만든다고 상황을 가정해보자. 여기..

[네트워크] 3way handshake & 4way handshake

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

[네트워크] HTTP 0.9 vs HTTP 1.0 vs HTTP 1.1 vs HTTP 2.0

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..

[Front-end] URL, URI 비교하여 알아보자

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

[Front-end] CSR / SSR (with Next.js)

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

[Firebase] 파이어베이스 호스팅

파이어베이스를 통해 호스팅하기 위해 좌측 메뉴에서 호스팅을 찾아 들어간 후 시작하기를 누른다. 순서대로 진행을 해보겠다. 설치가 완료된 화면이다. 2. Google에 로그인 명령어를 실행하게 되면 아래와 같은 화면이 나오게되고 yes를 입력하면 새창에 계정 선택화면이 나오게 된다. 허용을 누르면 성공적으로 로그인을 완료 할 수 있다. firebase init 명령어를 작성하여 프로젝트를 시작한다. 3. 4. 5.

[Firebase] 파이어베이스 호스팅

파이어베이스를 통해 호스팅하기 위해 좌측 메뉴에서 호스팅을 찾아 들어간 후 시작하기를 누른다. 순서대로 진행을 해보겠다. 설치가 완료된 화면이다. 2. Google에 로그인 명령어를 실행하게 되면 아래와 같은 화면이 나오게되고 yes를 입력하면 새창에 계정 선택화면이 나오게 된다. 허용을 누르면 성공적으로 로그인을 완료 할 수 있다. firebase init 명령어를 작성하여 프로젝트를 시작한다. 3. 4. 5. ...

반응형