전체 글 48

[cs] 네트워크 I - 패킷, 병목현상 etc.

1. 네트워크란2. 패킷이란3. 처리량이란4. 지연시간이란5. 병목현상1. 네트워크란네트워크: 노드와 링크가 서로 연결되어 있으며 리소스를 고유하는 집합노드: 서버, 라우터, 스위치 등 네트워크 장비링크: 유선, 무선 등 2. 네트워크에서 패킷이란패킷네트워크에서 데이터의 전송 단위헤더, 데이터, 트레일러 구조로 구성됨① 헤더(Header)- 목적지 주소: 패킷이 전송되어야 할 대상의 네트워크 주소- 출발지 주소: 패킷을 전송한 장치의 네트워크 주소- 프토토콜 정보: 패킷에 담긴 데이터가 어떤 프로토콜(TCP, UDP 등)을 사용했는지 나타냄- 길이: 패킷의 크기- 기타 정보: 패킷 순서, 분할 여부 등② 데이터(Payload)- 실제 전송하고자 하는 데이터 콘텐츠③ 트레일러(Trailer)- 오류 검사 ..

[React] 리액트 기술 면접 핸드북 II - 함수 컨포넌트, props, state etc.

1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이2. props와 state의 차이1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 ⭐️클래스 컴포넌트의 경우객체지향 프로그래밍의 구조를 띄고 있으며, state를 초기화하기 위해 constructor(생성자) 함수를 필요로 함생성자 함수를 통해 state를 초기화해야 하기 때문에 함수 컴포넌트에 비해 코드가 길어지고, 사이즈가 커질 수 있음state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있음render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 함함수 컴포넌트의 경우Hooks를 사용해 생성자 함수를 통해 state를 초기화하지 않더라도 사용이 가능(useState() 등)선언..

Frontend 📚/React 2024.06.27

[React] 리액트 기술 면접 핸드북 I - virtual DOM, react fiber etc.

1. 리액트는 라이브러리인가 프레임워크인가2. 리액트를 사용하는 이유3. virtual DOM이란4. 리액트 렌더링5. 리액트 파이버 6. 리액트 파이버 트리7. 리액트 파이버, DOM 그리고 virtual DOM의 관계8. 렌더 단계와 커밋 단계1. 리액트는 라이브러리인가 프레임워크인가 ⭐️라이브러리특정 기능에 대한 API(도구/함수)를 모은 집합프레임워크Application 개발시 코드의 품질, 필수적인 코드, 알고리즘, 암호화, 데베 연동 같은 기능들을 어느 정도 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진 것라이브러리 vs. 프레임워크라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어함단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐임프레임워크는..

Frontend 📚/React 2024.06.27

물품대여 서비스 개인프로젝트

https://github.com/leejaejae/S-S-F물품 대여 서비스 웹페이지 프로젝트이 포스팅에서는 React를 사용하여 구현한 물품 대여 서비스 웹페이지 프로젝트에 대해 소개하고, 설치 및 실행 방법, 주요 기능, 폴더 구조, 사용된 기술 등에 대해 설명하겠습니다.목차프로젝트 개요설치 및 실행기능폴더 구조사용된 기술라이센스프로젝트 개요이 프로젝트는 사용자가 다양한 물품을 대여할 수 있는 플랫폼을 제공하는 웹 애플리케이션입니다. 사용자는 물품을 검색하고, 선택하여 대여할 수 있으며, 관리자 페이지를 통해 물품을 추가, 수정, 삭제할 수 있습니다.설치 및 실행1. 클론 및 디렉토리 이동먼저, 프로젝트를 클론하고 해당 디렉토리로 이동합니다:git clone https://github.com/you..

Frontend 📚/React 2024.06.19

MediaPipe Holistic을 활용한 사용자 특정행동 수행 여부 감지

MediaPipe Holistic을 활용하면 이미지와 비디오에서 사용자의 포즈를 분석하고, 특정 행동을 감지할 수 있습니다. 이번 포스팅에서는 이미지를 분석하여 랜드마크를 추출하고, 비디오에서 가장 일치하는 프레임을 찾는 방법을 알아보겠습니다.1. 환경 설정 및 이미지 파일 준비2. 이미지에서 랜드마크 추출 및 표시3. 비디오 파일 설정 및 처리4. 랜드마크 비교 함수 정의5. 비디오 프레임 분석 및 결과 저장6. 결과 1. 환경 설정 및 이미지 파일 준비먼저 필요한 라이브러리를 임포트하고, 이미지 파일 경로와 출력 경로를 설정합니다.import osimport cv2import mediapipe as mpimport json# MediaPipe 설정mp_drawing = mp.solutions.draw..