4전 4전

웹 애플리케이션과 시스템들은 다양한 서비스와 데이터를 공유하며 상호작용합니다. 이러한 상호작용을 가능하게 하는 핵심 기술 중 하나가 바로 REST API입니다. REST API는 다양한 플랫폼과 언어에서 사용할 수 있는 유연성을 제공하며, 웹 기반 서비스의 개발을 간소화하고 표준화합니다. | REST(Representational State Transfer) 등장 배경 HTTP 프로토콜은 GET, POST, PUT, DELETE 같은 다양한 메스드를 지원합니다. 서버가 이런 HTTP 메서드를 기존 설명과 맞지 않게 사용하더라도 프로그램 개발은 가능합니다. 하지만 이러면 소통과 협업에 문제가 발생할 수 있어서 이를 해결하기 위해 REST라는 아키텍처 스타일이 제안되었습니다. | REST의 이해 REST는 ..

컴퓨터 과학에서 명령어의 구조는 기본적이고 필수적인 지식인 거 같습니다. 이번에 공부를 통해 간단하게 이 구조에 대하여 알아보려 합니다. | 명령어의 기본 구조 명령어는 크게 연산 코드(op-code)와 오퍼랜드(operand) 두 부분으로 나뉩니다. 연산 코드는 덧셈, 뺄셈과 같은 산술 연산이나 데이터 전송 같은 데이터로 수행할 동작을 의미하고, 오퍼랜드는 이러한 연산의 대상이 되는 데이터를 말합니다. 이런 오퍼랜드는 피연산자라고 할 수도 있고, 이는 데이터가 직접 명시되기도 하고, 레지스터 이름, 메모리 주소 같은 대상의 위치가 명시되기도 합니다. 또한 같은 코드를 실행하는 명령어의 개수는 오퍼랜드의 개수에 따라서 달라질 수 있습니다. | 연산 코드의 종류 연산 코드는 크게 데이터 전송, 산술 / 논..

웹 개발을 하다 보면, 사용자의 정보를 유지하고 관리해야 하는 경우가 있습니다. 이때 기본적으로 사용되는 기술이 쿠키(Cookie)와 세션(Session)입니다. | 쿠키(Cookie) 쿠키는 HTTP의 일종으로 사용자가 웹 사이트를 방문할 때, 사용자의 컴퓨터에 저장되는 작은 기록 파일입니다. 이 파일에 사용자가 사이트를 어떻게 이용했는지에 대한 정보가 담겨 있어서 사용자가 다시 사이트를 방문했을 때 이를 참고하여 개인화된 서비를 제공할 수 있습니다. 주요 특징 1. Key-Value쌍으로 구성되어 있습니다. 2. 도매인 당 20개의 쿠키를 가질 수 있습니다. 3. 하나의 쿠키는 4KB(4096byte)까지 저장 가능합니다. 4. 쿠키 이름, 값, 만료시간, 경로 정보 등으로 구성되어 있습니다. 5. ..

흔히 웹 사이트에 접속할 때 우리는 웹 브라우저 프로그램을 사용합니다. Chrome, Firefox, Safari와 같은 웹 브라우저들이 있고, 이는 사용자와 인터넷 사이의 중요한 다리 역할을 합니다. 이번에 이런 웹 브라우저의 기본적인 동작 원리와 구조를 살펴보려 합니다. | 서버(Server)와 클라이언트(Client) 인터넷 통신의 기본 구조는 서버와 클라이언 모델을 따릅니다. 클라이언트가 요청(request)을 보내면 서버가 응답(response)을 합니다. 서버로 요청을 보낸 뒤에 응답이 도착할 때까지 기다리고, 서버는 클라이언트로부터 받은 요청을 처리해 응답을 전송합니다. 응답을 받으면 서버의 응답을 처리하여 화면에 출력합니다. | HTML과 HTTP HTML은 웹 문서를 작성하기 위해 사용하..

단축평가란 표현식을 평가하다가 결과가 확정되면 나머지 과정을 진행하지 않고 결과를 반환하는 것을 말합니다. 이를 통해 자바스크립트에서 평가를 최소화하고, 조건부 로직을 간결하게 작성할 수 있습니다. | OR (||) OR연산자는 왼쪽 피연산자가 falsy값 일 때 오른쪽 피연산자의 값을 반환합니다. 반대로 왼쪽 피연산자가 truthy값이면 왼쪽 값을 그대로 반환합니다. let name = null; let user = name || "yi"; console.log(user); // yi 출력 이처럼 name이 null이므로 falsy값이기 때문에 "yi"라는 오른쪽 값을 반환합니다. | AND (&&) AND연산자는 왼쪽 피연산자가 truthy값 일 때 오른쪽 피연산자의 값을 검사하여 반환합니다. 반대로..

최근에 리액트로 프로젝트를 하면서 한 번에 여러 컴포넌트들을 불러오게 되면서 웹 성능이 떨어지는 일이 있었습니다.이에 React.lazy를 통한 코드 스플리팅으로 성능을 개선해보고자 했습니다.| 코드 스플리팅리액트에서 개발을 하고 배포할 때 빌드를 하게 되는데 이때 보통 단일 Javascript 파일로 번들링 하게 됩니다.이 방식은 애플리케이션의 크기가 커지면 초기 로딩 시간이 길어지는 문제를 야기할 수 있어서 코드 스플리팅을 통해 전체 번들을 더 작은 크기로 나누고, 이를 비동기적으로 로드할 수 있게 함으로써 로딩 시간을 개선하게 해주는 것을 코드 스플리팅이라 합니다.| React lazy리액트의 lazy와 Suspense로 필요할 때에 컴포넌트를 로드할 수 있도록 하려면 아래와 같이 코드를 작성하면 ..

next.js로 프로젝트를 진행하면서 리스트에서 어떤 아이템을 클릭하면 해당하는 아이템의 상세 페이지로 이동하는 기능을 구현하였습니다. 이때 상세페이지로 첫 진입 시 next.js서버에서 데이터를 불러온 후 페이지로 이동되면서 아이템을 클릭하면 즉각적으로 페이지로 이동되는 것이 아닌 아래 이미지와 같이 딜레이가 생기는 현상이 있었습니다. 클릭하면 즉각적인 반응이 없기 때문에 클릭된 건지 안된 건지 헷갈리기도 하고 마치 렉이 걸린 듯하여 사용자 경험이 매우 떨어진다고 생각해 이를 개선하고자 했습니다. | 전역 상태 관리 store생성 먼저 아이템을 클릭했을 때 클릭했다는 상태를 저장하기 위해 전역에 상태를 저장해 줍니다. 해당 프로젝트에서는 zustand라는 라이브러리 사용하였습니다. // useLoadi..

컴퓨터 네트워크 프로토콜 디자인과 통신을 7개의 계층으로 나타낸 국제표준화기구에서 개발한 모델 | OSI 7 계층 1. 물리 계층 (Physical Layer) - 물리적인 매체를 통해서 비트 스트림을 전송 - 전기 신호, 무선 신호, 케이블 등을 이용하여 0과 1의 비트를 전송 ex) 전기 신호, 광 신호, 무선 신호 등을 이용하여 데이터를 물리적인 매체를 통해 전송 2. 데이터 링크 계층 (Data Link Layer) - 물리 계층에서 송/수신되는 정보의 흐름을 관리하고 에러 체크 수행 - 이더넷 프레임, MAC주소를 기반으로 통신 ex) 물리적인 매체에 따라 MAC주소를 사용하여 데이터 전송 3. 네트워크 계층 (Network Layer) - 라우팅과 패킷 전달을 담당 - IP 주소를 사용하여 데..