4전 4전

흔히 웹 사이트에 접속할 때 우리는 웹 브라우저 프로그램을 사용합니다. 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 주소를 사용하여 데..

이번에 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 숙박 예약 서비스 만들기라는 주제로 백엔드 부트캠프 수강생들과 함께 프로젝트를 진행하였습니다. | 기능 사용자 위치 기준 숙소 추천, 인기 숙소 안내 회원가입, 로그인 숙소 타입, 장소, 추가옵션등 원하는 카테고리를 선택하여 숙소 조회 장바구니, 주문, 결제 결제 내역 확인, 숙소 찜하기 | 역할 이 프로젝트에서 저는 사이트의 장바구니 기능과 결제 완료 후 나오는 결제 완료 페이지를 담당하여 진행하였습니다. | 링크 깃허브: https://github.com/Yanolza-Miniproject/frontend 배포: https://heynolja-mini-4.vercel.app/ | 장바구니 시연 영상 | 이슈 1. 목 데이터 문제 문제: msw를 ..

리액트에서 컴포넌트는 화면에 보이기 전에 반드시 렌더링이 된다고 합니다. 그리고 이 렌더링 과정을 공식문서에는 아래와 같은 세 가지 단계로 설명을 하고 있습니다. 1. 렌더링 트리거 (Triggering a render) 2. 컴포넌트 렌더링 (Rendering the component) 3. DOM에 커밋 (Commiting to the Dom) 먼저 각 단계가 어떤 것을 의미하는지 알아보겠습니다. | 렌더링 트리거 (Trigger a render) 컴포넌트가 렌더링 되는 이유는 2가지가 있다고 하는데 아래와 같습니다. 1. 컴포넌트의 초기에 렌더링 2. 해당 컴포넌트나 상위 컴포넌트의 상태(state)가 업데이트되었을 때 1. 초기 렌더링 앱이 시작되면 초기 렌더링을 트리거하는 것이 필요합니다. 그리..

리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은 부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다. 이를 "bubbles", "propagates"라고 합니다. | 예시 import React from 'react'; import './style.css'; export default function App() { return ( { console.log('1'); }} > console.log('2')}>children ); } 이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고, 자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다. 그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고, 자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩..