보호되어 있는 글입니다.
study/TIL
리액트의 동작 방식 React는 UI의 상태를 추적하고 변화가 일어난 요소들의 빠른 업데이트를 위해 Virtual DOM이라는 가상의 DOM 객체를 활용한다. Virtual DOM은 실제 DOM의 사본같은 개념인데, 리액트는 이 가상의 DOM 객체에 접근하여 변화 전과 후를 비교하고 바뀐 부분을 실제 DOM에 적용한다. 🤔 왜 Virtual DOM을 사용하지? Real DOM (DOM) * Real DOM은 브라우저에서 생성되는 Document Object Model을 가리킴. Virtual DOM과 구분하기 위해 Real DOM이라고 칭함. DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델을 말한다. 객체화 된 DOM은 JavaScript와 같은 스크립팅 언어가 DOM AP..
번들링(Bundling) 여러 제품이나 코드, 프로그램 등을 묶어서 패키지로 제공하는 행위. 프론트엔드에서 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 말한다. 번들링을 하지 않았을 경우 발생할 수 있는 문제 여러개의 .js 파일에서 같은 변수 / 함수를 사용하고 있어서 변수 / 함수간 충돌 발생 파일 용량이 커서 인터넷 속도가 느릴경우 사용자의 불편함 유발 파일 용량을 줄이기 위해 공백을 모두 삭제했는데 가독성이 떨어짐 배포코드가 너무 읽기 쉬운 경우 사용자가 프론트엔드 애플리케이션을 임의로 조작하는 문제 발생 => 파일의 용량을 줄이고 파일을 하나로 통일하는 툴링작업이 필요하다. 번들링을 했을 경우의 장점 여러개의 파일들을 하나로 묶어 제공함으로 사용자는 애플리케이션을 더 빨리 다운..
1. Tree 정의 그래프의 여러 구조 중 단방향 그래프의 한 구조. 하나의 뿌리로부터 가지가 사방으로 뻗은 형태. 나무를 거꾸로 뒤집어놓은 듯한 모습이다. 계층적 자료구조 : 데이터가 바로 아래에 있는 하나 이상의 데이터에 한개의 경로와 하나의 방향으로만 연결 비선형 구조 : 하나의 데이터 아래에 여러개의 데이터가 존재할 수 있음 사이클이 없음 : 계층적으로 표현되고, 아래로만 뻗어나가기 때문에 하나의 연결 그래프라고 할수있음 💡 사이클(Cycle) 시작 노드에서 출발해 다른 노드를 거쳐 시작노드로 돌아올 수 있는지. 그렇다면 => 사이클이 존재한다. 용어 노드(Node) : 트리 구조를 이루는 모든 개별 데이터 루트(Root) : 트리 구조의 시작점이 되는 노드 부모 노드(Parent Node) : ..
1. 자료구조 데이터(Data) : 문자, 소리, 숫자, 그림, 영상 등 실생활을 구성하는 모든 값. 분석하고 정리해 활용해야만 의미를 가짐. => 데이터의 특징을 파악하고 체계적으로 정리하면 데이터 활용하는데 유리함 자료구조는 여러 데이터의 묶음을 저장하고 사용하는 방법을 정의한 것이고, 자료구조에 대해 잘 알면 데이터에 적합한 자료구조를 빠르고 정확하게 적용하여 문제를 해결하고 데이터를 더 효율적으로 다룰 수 있다. 자료구조의 분류 선형 구조 : 데이터가 선의 형태로 순서를 갖고 줄지어 저장되는 형태. (스택, 큐) 비선형 구조 : 데이터가 일렬로 나열되지 않고, 자료의 순서도 불규칙적으로 저장되는 형태. ( 트리, 그래프) 💡 자료구조 시각자료 사이트 https://www.cs.usfca.edu/~..
http 프로토콜의 특징 http 프로토콜의 특징으로는 클라이언트-서버 구조, 서버가 상태정보를 저장하지 않는 무상태성과 요청을 주고받을때만 연결을 유지하는 비연결성이 있습니다. http는 클라이언트가 서버에 요청을 보내고 서버가 그에 대한 응답을 보내는 구조로 되어있으며, 클라이언트가 요청을 보내는 방식으로만 서버와 통신할 수 있습니다. 무상태성은 서버가 아닌 클라이언트가 상태정보를 저장하고 있기 때문에 서버의 자원을 효율적으로 활용할 수 있습니다. 클라이언트의 요청이 각각 독립적으로 처리되기 때문에, 서버는 각각의 요청에 대한 응답을 처리하는 데만 집중할 수 있습니다. 또한, 서버가 클라이언트의 상태를 저장하지 않아도 되기 때문에, 서버의 부하를 줄일 수 있습니다. 또 응답 서버를 쉽게 바꿀 수 있으..
OAuth 인증을 중개해주는 매커니즘. 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜이다. 즉, 사용자가 이미 사용하고 있는 서비스로 다른 서비스에 인증을 할 수 있도록 중개해주는것. 이미 사용자 정보를 가지고 있는 웹서비스가 사용자의 인증을 대신해주고, 접근 권한에 대한 토큰을 발급한 후 이를 이용해 서버에서 인증이 가능해지는것이다. 예시로는 소셜 로그인을 들 수 있다.(카카오로 로그인, 네이버로 로그인...) OAuth 작동 매커니즘 OAuth의 주체 Resource Owner 사용자. Resource는 사용자의 이름, 전화번호 등의 정보를 뜻한다. Resource Server & Authorization Server Resource Server : 이미..
1. Hashing 가장 많이 쓰이는 암호화 방식 중의 하나. 다른 암호화 방식들은 복호화가 가능하지만, 해싱은 암호화만 가능하다.(단방향 암호화 방식) 해시 함수(Hash Function)를 사용하여 암호화를 진행함. 해시 함수의 특징 항상 같은 길이의 문자열을 리턴 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 리턴 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 리턴 해싱의 목적 데이터 자체를 사용하는 것이 아니라 동일한 값의 데이터를 사용하고 있는지의 여부를 확인하는 것. 정확한 값을 알지 못해도 해싱한 값이 일치한다면 정확한 데이터를 입력했다는 것을 알 수 있다. => 민감한 데이터를 다루는 상황에서 데이터 유출의 위험성은 줄이고, 데이터의 유효성은 검증할..
1. Cookie 서버가 웹 브라우저(클라이언트)에 정보를 저장하고 불러올 수 있는 수단. 서버는 클라이언트의 쿠키를 이용해 데이터를 가져올 수 있음. 해당되는 도메인에 쿠키가 존재할 경우, 웹 브라우저는 도메인에게 http 요청시 쿠키를 함께 전달한다. 쿠키를 이용한다 => 서버에서 클라이언트에 쿠키를 전송 / 클라이언트에서 서버로 쿠키를 다시 전송 쿠키의 사용 예시) 장기간 저장해야하는 옵션을 클라이언트에 저장하기 적합. 장바구니, 30일 동안 로그인 상태 유지, 테마, 로그인/로그아웃을 위한 인증정보... 쿠키의 특징 서버가 클라이언트에 특정 데이터를 저장할 수 있음 단 데이터를 저장한 이후 특정 조건이 만족되어야만 서버가 클라이언트에서 데이터를 가져올 수 있음 조건들은 쿠키 옵션으로 작성한다 쿠키..
1. TCP / IP 1) 회선교환 방식 vs 패킷교환 방식 회선교환 방식 통신 회선을 설정하여 데이터를 교환하는 방식 연결하려는 회선이 다른 회선과 연결중인 경우 현재 연결된 회선과의 연결이 끝나야만 연결할 수 있음 (여러개의 회선을 동시에 연결할수 없음) 특정 회선이 끊어질 경우 처음부터 다시 연결해야함 패킷교환 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 특정 회선이 전용선으로 할당되지 않음으로 빠르고 효율적으로 데이터 전송이 가능 현재의 IP 기반 네트워크는 미 국방성에서 1969년 진행했던 아르파넷(ARPANET) 프로젝트에서 시작됨. 당시 냉전시대에서 핵전쟁을 대비하기 위해 추진되었고, 이때 패킷교환 방식으로 네트워크를 구축했다. => 현재의 인터넷 통신 방식의 기반이 됨 2) ..
