General8 TCP와 UDP 개념과 특징 및 차이점 TCP & UDP TCP와 UDP는 OSI 표준모델과 TCP/IP 모델의 "전송계층" 에서 사용되는 프로토콜이다 "전송계층"은 송신자와 수신자를 연결하는 통신 서비스를 제공하며 IP에 의해 전달되는 패킷의 오류를 검사하고 재전송 요구 제어등을 담당하는 계층이다. (= 데이터의 전달을 담당하는 영역) TCP와 UDP는 1. 포트번호'를 이용하여 주소는 지정 2. 데이터 오류검사를 위한 체크섬이 존재 이 두가지 공통점을 가지고 있지만 정확성(TCP)을 추구할지 신속성(UDP)을 추구할지를 구분하여 나뉜다. TCP - 데이터를 중요하게 생각하여 확실히 주고받고 싶을 때는 TCP (Transmission Control Protocol) 사용 - TCP는 통신할 컴퓨터끼리 '보냈습니다', '도착했습니다' 라고 서.. 2021. 10. 18. 브라우저 렌더링 성능 최적화 방법 Reflow, Repainting 흐름 맨 처음 브라우저가 로딩될 때 렌더링 과정을 통해 화면이 그려짐 -> 그려진 화면은 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 재구성 됨 Reflow DOM이 추가, 삭제 되거나 DOM 요소의 너비, 높이, 위치 등의 기하학적 영향을 주는 CSS 내용이 변경될 경우 '렌더 트리'가 재구성 된다. 이것을 'Reflow(재배치)' 라고 한다. Repaint 기하학적 영향을 주지 않는 CSS 속성이 변경되었을 경우에는 Reflow 과정을 건너뛰고 Paint 과정부터 수행한다. 'Reflow'가 일어나면 전체 픽셀을 다시 계산하여 재배치하는 과정을 거치기 때문에 부하가 ↑ 'Repaint'는 재배치 과정을 건너뛰고 화면에 그리는 작업만 수행하기 때문에 .. 2021. 10. 14. [CS] 프로세스와 스레드의 차이 프로그램 (Program) ~ 프로세스 (Process) 프로세스와 스레드의 차이를 설명하기 앞서 프로그램에 대해 설명하자면 저장장치에 파일이 저장되어 있지만 메모리에 올라가 있지 않은 상태라고 말할 수 있다. 운영체제로 부터 프로그램 실행을 위한 독립적인 공간을 할당해 주지 않은 것이라고 생각하면 된다. 다시 말하면 메모리를 할당해 주지 않으면 코드묶음 정도라고 봐도 무방하다. 프로그램을 실행하는 순간 해당 코드묶음이 컴퓨터 메모리에 올라가게 되고 자신만의 독립적인 공간을 할당 받는다. 이 때의 프로그램 상태(동적인 상태)의 프로그램을 프로세스라고 한다. (실행되고 있는 컴퓨터 프로그램) 프로세스 (Process) ~ 스레드 (Thread) 과거 프로그램은 실행부터 종료까지 하나의 프로세스 만을 사용했.. 2021. 10. 5. [Nginx] React 프로젝트 배포하는 방법 리눅스 Ubuntu 환경Nginx 웹서버에 React 프로젝트를 배포해보는 방법에 대해서 알아봅니다. React Project Build 첫번째로 리액트 프로젝트 빌드 파일들이 준비되어야 겠죠 CRA(Create React App) 혹은 Webpack을 통해 번들링 및 빌드 된 파일들을 준비해주시면 됩니다. Nginx Setting 저는 AWS EC2 인스턴스에 리눅스 Ubuntu 18.04 환경을 사용하고 있습니다. 1. Nginx Install sudo apt install nginx 2. Nginx Config sudo vi /etc/nginx/sites-enabled/default 위 명령어로 Nginx 설정파일에 접근합니다. server { listen 3000; location / { root.. 2021. 4. 15. 토큰 기반 인증 시스템과 JWT (JSON WEB TOKEN) 토큰 기반 인증 시스템이란 서버 측에서 유저의 정보를 유지하지 않고, 유저가 회원인증을 할 때 식별할 수 있는 토큰(Token)을 발급해주고 유저 자기 자신임을 인증할 수 있도록 해주는 것을 말한다. 이 토큰은 유효기간과 정보를 담고 있고, 해싱 알고리즘을 통해 암호화 되어 있어 처음 서버로 부터 발급해준 토큰 정보가 변조되지 않음을 보장 해 줄 수 있다. 토큰 기반 인증 시스템을 도입하게 되었을 때의 장점 - 서버 확장 시 용이함 분산 서버로 확장하게 되어도 유저는 동일한 토큰으로 서버에 요청하면 되고 서버는 데이터베이스 조회로 필요없고 토큰이 위조되지 않았는지만 검증한 후 유저의 신뢰를 처리하면 되기 때문 - 플랫폼간 권한 공유 페이스북, 구글계정, 카카오로그인 등을 통한 소셜 로그인 구현 시에도 해.. 2021. 4. 5. 브라우저 렌더링 과정에 대한 이해 웹개발자라면 반드시 브라우저의 렌더링 과정에 대한 이해가 있어야 된다고 생각해 포스팅 하게 되었습니다. 스스로 기본기가 많이 부족하다고 생각하여 기초를 탄탄히 하기 위해 정리해보게 되었습니다. 자, 그럼 브라우저 렌더링 과정에 대해 알아보겠습니다. Browser Rendering Flow 1. 브라우저 주소창에 도메인주소(예 : www.google.com)를 입력한다. 2. 도메인주소로 해당 서버로 찾아 간다. (구글 서버) 3. 실제 서버가 어디에 있는지 알고 있는 DNS 서버가 연결해 줄 곳을 찾는다. 4. 서버 설정에 지정되어있는 Default HTML을 찾아서 클라이언트로 보내준다. 5. 브라우저는 받은 HTML을 파싱(Parsing)한다. 6. 라인 단위로 읽으면서 DOM (Document Ob.. 2020. 10. 2. 자료구조(Data Structure)에 이해 개발자에게 기본기란 무엇일까? 현업에 있으면서도 항상 생각하게 되는 질문입니다. 오늘은 이 질문에 해당하는 첫번째, 자료구조에 대해 정리해 보고자 포스팅을 하게 되었습니다. 자료구조 사전적 의미로 자료들의 집합을 의미합니다. 각 데이터들이 논리적으로 정의된 규칙에 의해 나열되고 자료에 대한 처리를 효율적으로 수행할 수 있도록 자료를 구분하여 담아 놓은 것이라고 할 수 있습니다. 자료구조를 사용하는 목적 자료를 더 효율적으로 관리하기 위해 사용합니다. 잘 선택된 자료구조는 실행시간을 단축시켜 메모리의 절약을 이끌어 낼 수 있습니다. 자료구조의 특징 효율성, 추상화, 재사용 1) 효율성 자료구조를 사용하는 목적이자 특징은 효율적인 데이터 관리와 사용입니다. 적절한 자료구조를 선택하고, 또 사용한다면 실행시간.. 2020. 9. 20. [CSS] Pre-Processor (Sass) 에 대한 이해 CSS Pre-Processor (전 처리기) CSS가 동작하기 전, 사용하는 기능으로 우리가 알고있는 CSS의 한계를 보완하기 위해 확장된 확장팩이라고 이해할 수 있다. 이제 Sass(Syntactically Awesome Style Sheets)에 대해 알아보자 어떤 기능들이 추가되었을까? 변수 사용 조건문 / 반복문 Import / Nesting(중첩) / Mixin / Extend, Inheritance 기존 CSS와 비교해 보면, 깔끔하고 간결한 표기법 협업시 발생할 수 있는 다른 팀원들과의 구문 평준화 CSS 유지보수의 편의성 향상 Sass와 SCSS의 차이점 SCSS는 CSS 구문과의 호환성 및 Sass의 모든 기능을 지원하는 CSS의 상위문법 (= SCSS는 CSS와 거의 같은 문법을 통해.. 2020. 8. 4. 이전 1 다음
