본문 바로가기

전체 글

 (108)
[React] 리액트를 사용하는 이유에 대해 살펴보자. 저자 velog 블로그, 리액트를 사용하는 이유를 옮긴 글입니다. 프론트앤드 공부를 시작하게 되고, 리액트를 사용하게 되었습니다. 왜 사용하게 됐는지에 대한 질문을 받는다면 '매우 인기 있는 라이브러리', '많은 기업에서 요구하는 스펙'이라는 솔직한 답변은 프론트앤드에서 겪고 있는 고충을 해결하기 위해 만든 리액트를 사용할 자격이 불충분하다고 생각하게 되었습니다. 그래서, 이번 글에서는 리액트는 어떤 문제를 해결하고자 나왔고, 리액트의 철학과 추구하는 방향, 그리고 많은 개발자분들이 느끼고 있는 리액트의 공통적인 장점과 특징을 간접적으로 정리해보고자 합니다. 🧐 프론트앤드 라이브러리와 프레임워크의 등장 배경 프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리..
[ES6] 이터레이션, for...of 에 대해 알아보자. 이 글은 이터레이션과 for... of 문, 제네레이터를 참고하여 작성된 글입니다. 🤝 이터레이션 프로토콜 이터레이션(iteration) 은 ES6에서 새롭게 추가된 프로토콜로 데이터 컬렉션을 순회하기 위한 프로토콜이다. 이터레이션 프로토콜은 이터러블 프로토콜과 이터레이터 프로토콜로 구성되어 있다. 이터레이션 프로토콜을 준수한 객체는 데이터 제공자로서 for... of 문과 spread 문법의 피연산자로 사용될 수 있다. 🤝 이터러블 프로토콜 이터러블 프로토콜을 준수한 객체를 이터러블(iterable)이라 한다. 이터러블은 Symbol.iterator 메서드를 구현하여 소유하고 있거나, 프로토타입 객체로부터 상속받았다면 이터러블 프로토콜을 준수한 객체로 이터러블이라 한다. ES6에서 제공하는 빌트인 이터..
[CS, 자료구조] Array, LinkedList에 대해 알아보자. 🤔 Array란 무엇일까? 가장 기본적인 자료구조인 Array (배열)은 논리적 저장 순서와 물리적 저장 순서가 일치한다. 이는 순차적으로 저장되어 있는 원소들의 순서가 논리적으로 생각했을 때 시작점에서의 상대적인 원소 위치가 일치한다는 뜻이다. 그렇기 때문에 배열은 index 로 접근할 수 있다. 🧐 Array의 탐색, 삽입, 삭제 시간 복잡도는 어떻게 될까? 즉, 탐색하는 과정에서 random access가 가능하기 때문에, Big O(1) 시간 복잡도를 가진다. 삽입, 삭제 시간 복잡도는 어떻게 될까? 우선, 삽입, 삭제의 대상을 탐색하는 과정이 필요하다. 이 과정은 Big O(1) 시간 복잡도로 탐색이 가능하다. 가령, 삽입을 한다면 삽입할 위치의 값부터 순차적으로 저장되어 있는 원소들을 뒤로 한..
[네트워크] 동일 출처 정책과 허용 방안을 알아보자. 🤔 동일 출처 정책 (Same-Origin Policy), 왜 등장하게 된 걸까? 기존에 웹 브라우저는 하나의 서버에게 요청하고, 서버는 HTML 파일을 반환해주게 되고 추가 요청을 한다 해도 어디까지나 같은 도메인에서 이루어지는 일이었다. 당연시 여겨지는 일이었기 때문에 다른 도메인에서 접근하는 것은 악성 접근이나 악의적인 행동으로 간주될 수밖에 없었고, 같은 도메인이 아니면 요청 자체를 막는 선택을 하게 되었다. 이러한 정책은 '동일 출처 정책'이라 한다. 즉, 웹 보안을 위해 프로토콜, 호스트, 포트번호가 일치하는 서버로만 요청을 보낼 수 있게 하는 정책이다. 😟 하지만! 오늘날, 웹 사이트가 애플리케이션 수준으로 성장하게 되고, 단순히 문서 제공만 하는 것이 아니라 다양한 편의정보들을 제공하게 된..
[네트워크] TCP, UDP는 무엇인가? 이 글은 TCP, UDP를 참고하여 작성된 글입니다. 📤 전송 계층 전송 계층은 앤드 포인트 간에 신뢰성 있는 데이터 전송을 담당하는 계층이다. 데이터를 순차적이고, 안정적인 전달을 가능케 하며, 해당되는 포트의 프로세스에 데이터를 전달하는 역할을 한다. 이러한 역할을 하는 전송계층이 없다면, 송신자가 보낸 데이터의 순서가 보장될 수 없다. 또한, 송신자의 데이터 전달 속도와 수신자의 데이터 수신 속도가 맞지 않는다면, 데이터가 누락될 수 있으며, 네트워크의 데이터 속도가 느리다면 이 또한 혼잡 문제를 일으킬 수 있다. 이를 흐름 문제, 혼잡 문제라 한다. 🧐 TCP (Transmission Control Protocol) 란 무엇일까? 앤드 포인트간에 신뢰성 있는 데이터를 전송할 수 있도록 하기 위한 ..
[네트워크] 브라우저 주소창에 URL 입력시 일어나는 일들 👨‍💻 브라우저 주소창에 URL을 입력하면 일어나는 일들을 순서대로 알아보자. 웹 브라우저 주소창에 URI를 입력한다. 웹 브라우저가 URI를 해석하고, URI의 형식과 다르다면 기본 검색 엔진으로 검색한다. 올바른 URI 형식이라면, URI의 호스트 부분을 인코딩한다. HSTS (HTTP Strict Transport Security) 목록에 있다면 HTTPS, 없다면 HTTP로 요청을 보낸다. 여기서 HSTS란 요청한 웹 서버가 HTTPS로 설계되어 있다면, 클라이언트 웹 브라우저에게 HTTPS로 요청하라고 알리는 보안 기능이다. 요청한 도메인이 웹 브라우저, 로컬에 캐싱되어 있는지 확인한다. 캐싱되어 있다면, 캐싱되어 있는 데이터를 참조한다. 캐싱되지 않았다면, DNS(Domain Name Serv..
[네트워크] 쿠키와 세션에 대해 알아보자. 이 글은 쿠키와 세션을 참고하여 작성된 글입니다. 🧐 쿠키, 세션이 왜 필요할까? HTTP의 특징 중 하나인 무상 태성은 클라이언트의 요청을 각각의 독립적인 것으로 여기는 특징이 있다. 즉, 서버는 클라이언트의 상태를 저장하지 않기 때문에 클라이언트의 상태에 맞게 자원을 전달하는 것이 불가능하다. 클라이언트의 상태를 저장하지 않는다는 것은 만약 로그인되어 있는 상태에서 새로고침을 했다면, 다시 로그인 절차를 유지하게 된다. 쿠키와 세션은 이러한 단점을 보완하기 위해 생겨났다. 🤔 쿠키란 무엇일까? 쿠키(Cookie)는 클라이언트 로컬에 저장되는 데이터 조각이다. 이는 키(key)와 값(value)으로 구성되어 있다. HTTP 응답 해더에 set-Cookie 속성을 통해 서버에 요청을 보낸 클라이언트에게 ..
[네트워크] URI, URL, URN 그 차이를 알아보자. 🤔 URI 란 무엇일까? Uniform Resource Identifier의 약자로 통합 자원 식별자라 한다. URI에는 자원의 위치를 표현한 URL(Uniform Resource Locator)과 자원의 고유한 이름을 표현한 URN(Uniform Resource Name)이 있다. 즉, URL과 URN은 URI의 포함된 관계이다. 🤔 URL 이란 무엇일까? URL은 위에서 언급한 바와 같이 자원의 위치를 표현하고, 해당 위치에서 어떻게 자원을 얻을 것인가에 대한 정보가 포함되어 있다. 이는 그 자원의 위치를 담고 있기 때문에 유일하게 그 곳에 존재한다면, 그 자원을 식별할 수 있는 식별자로서의 역할도 가능하다. 하지만, 그 위치에 여러 자원이 함께 있다면, 위치만으로 자원을 유일하게 식별할 수 없게 된..

티스토리툴바