생각하다 생각하다

React에서 Link와 useNavigate로 페이지 이동하기 오늘은 페이지 이동을 위한 리액트 hook을 알아볼게요 🧐 크게 Link 태그와 useNavigate() 함수가 있습니다. 리액트에서 Link와 useNavigate는 React Router 라이브러리를 사용하여 다른 페이지로 이동하는 데 사용됩니다. 각각의 사용법과 둘의 차이를 공부해 보겠습니다. 🍊 React Router란? React Router는 React 애플리케이션에서 브라우저 라우팅을 관리하는 라이브러리입니다. 브라우저 라우팅은 주소 표시줄의 URL을 변경하고 해당 URL에 대한 페이지를 렌더링하는 것을 의미합니다. React Router는 주소 표시줄의 URL을 변경할 때 React 컴포넌트를 렌더링하므로, 사용자가 다른 페이..

IPC 공유 메모리(Shared Memory)로 채팅 프로그램 구현하기 이번 운영체제 과제가 리눅스 환경에서 IPC 기술을 이용한 채팅 프로그램을 만드는 거였어요. 🍊 Shared Memory와 관련된 함수 puts() puts는 문자열을 출력하는 함수입니다. puts 함수는 인자로 받은 문자열을 화면에 출력하고, 마지막에 자동으로 개행문자(\n)를 추가해줍니다. getpid() getpid()는 C언어에서 사용되는 함수 중 하나로, 현재 프로세스의 ID(Process ID, PID)를 반환하는 함수입니다. getpid() 함수는 unistd.h 라이브러리에 선언되어 있습니다. shmget() 공유 메모리(segment)를 생성하거나, 이미 생성된 공유 메모리를 얻는데 사용됩니다. 공유 메모리는 여러 프..

교착 상태(Deadlock) 해결 방법 지난 포스팅에서 프로세스 교착 상태에 대해 배웠습니다. 운영체제는 교착 상태를 회피할 수도 있고 예방할 수도, 검출 후 회복할 수도 있습니다. 오늘은 교착 상태를 해결하는 각각의 방법에 대해 공부해볼게요. 🧐 교착 상태 예방 교착 상태가 발생하려면 필요 조건이 네 가지가 있었죠. 프로세스들에 자원을 할당할 때 상호 배제, 점유와 대기, 비선점, 원형 대기 네 가지 조건이 모두 만족되었을 때 교착 상태가 발생할 가능성이 생깁니다. 교착 상태를 예방하는 것은 이 네 가지 중 하나라도 만족시키지 않게 할당하는 것입니다. 🍊 상호 배제 없애기 자원의 상호 배제를 없앤다는 말은 모든 자원을 공유 가능하게 만든다는 말고 같습니다. 다만 이 방식대로 이론적으로는 교착 상태를 없..

데드락과 자원 할당 그래프 오늘은 프로세스 실행 과정에서 발생하는 데드락에 대해서 알아보고 자원 할당 그래프, 교착 상태의 발생 원인을 알아봅시당. 🧐 🧶 데드락이란? 일어나지 않을 사건을 기다리며 진행이 멈춰 버리는 현상을 데드락(dead lock)이라고 합니다. 예를 들어, 게임 프로세스는 자원 A를 점유한 채 웹 브라우저 프로세스가 점유하고 있는 자원 B의 사용이 끝나길 기다리고, 웹 브라우저 프로세스는 자원 B를 점유한 채 게임 프로세스의 자원 A 사용이 끝나길 기다리는 상황을 교착 상태라고 볼 수 있습니다. 두 프로세스는 상대방이 가진 자원을 기다리기만 하다가 멈춰버리는 것입니다. 🧶 자원 할당 그래프 교착 상태는 자원 할당 그래프(resource-allocation-graph)를 통해 단순하게..

TypeScript를 사용하는 리액트 컴포넌트의 스토리 작성하기 🗒 story book이란? story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다. UI 테스트뿐만 아니라 컴포넌트 문서화의 도구로도 사용할 수 있습니다. 스토리북은 React와 Vue, Angular 등의 다양한 프레임워크와 사용할 수 있습니다. 🗒 스토리북 사용하기 아래 버튼 중에서 선택 완료 버튼 컴포넌트를 만들고 스토리를 작성해 보면서 UI 테스트를 해 볼겁니당 📁 SaveBtn.tsx import React, { useState } from "react"; import Button from "@mui/material/Button"; export interface Sav..

SwipeableViews와 MobileStepper를 통해서 슬라이드형 뷰어 구현하기 캡스톤 개발 중 슬라이드 뷰어를 구현할 일이 있어서 공부해 보았습니다. React UI tool 중 하나인 MUI 라이브러리를 이용해서 구현해 보겠습니다. 먼저 슬라이드형 뷰어를 만들때 필요한 컴포넌트는 와 두 가지입니다. 🍊 컴포넌트 mui의 SwipeableViews 컴포넌트는 터치스크린 기반의 슬라이드형 뷰어를 쉽게 구현할 수 있도록 도와주는 컴포넌트입니다. 🍊 의 속성 알아보기 index: SwipeableViews 컴포넌트에서 현재 활성화된 패널의 인덱스를 설정합니다. 이 값은 외부에서 제어할 수 있으며, 해당 값을 변경하면 SwipeableViews 컴포넌트가 자식 컴포넌트를 이동시킵니다. onChangeI..

[OS] Linux IPC 프로세스간 통신에 대해서 알아보자 오늘은 리눅스 IPC에 대해서 알아볼겁니당. 운영체제 수업 과제이기도 해서 겸사겸사 자세히 알아보겠습니다 🧐 IPC란? IPC는 "Inter-Process Communication"의 약어로, 프로세스 간에 데이터를 주고받는 기술이나 방법을 말합니다. IPC는 동일한 컴퓨터 내에서 또는 네트워크 상에서 실행 중인 다른 프로세스와 데이터를 주고받을 수 있게 해줍니다. IPC를 사용하면 프로세스 간에 데이터를 안전하고 효율적으로 공유하거나 서로 통신할 수 있습니다. 예를 들어, 운영 체제에서 실행 중인 여러 개의 프로세스가 있을 때, IPC를 사용하여 이러한 프로세스 간에 데이터를 전송하거나 공유할 수 있습니다. IPC의 종류 1) PIPE (익명..

프로세스 동기화 기법 지난 포스팅에서 프로세스 동기화에 대해 알아보았습니다. 오늘은 프로세스 동기화를 위한 대표적인 도구들인 뮤텍스 락, 세마포, 모니터를 알아볼게요 🧐 🧶 뮤텍스 락 뮤텍스 락은 임계 구역(동시에 접근하면 안되는 자원)에 동시에 접근하지 않도록 만드는 도구입니다. 즉, 상호 배제를 위한 동기화 도구입니다. 임계 구역에 진입하는 프로세스는 뮤텍스 락을 이용해 임계 구역에 자물쇠를 걸어둠으로써 자신이 현재 임계 구역에 있음을 알립니다. 다른 프로세스는 임계 구역에 잠겨 있다면 기다리고, 잠겨 있지 않다면 임계 구역에 진입할 수 있습니다. 뮤텍스 락 단순하게 구현하기 자물쇠 역할 - 프로세스들이 공유하는 전역 변수 lock 임계 구역을 잠그는 역할 - acquire 함수 임계 구역의 잠금을 ..