전체 글

1. 프로젝트 소개 1-1. Co-Labor : 외국인 근로자 서포트 플랫폼외국인 근로자들이 한국에서 안정적으로 정착하고 적응할 수 있도록 돕는 플랫폼일자리, 정보 부족, 법률 등 외국인 근로자들이 겪을 수 있는 다양한 문제 해결에 도움을 줌프로젝트 인원 : 4명 ( 백엔드 3명, 프론트 1명)개발기간: 2024.07.01 ~ 2024.07.22 / 2024.07.30 ~ 2024.08.02 / 2024.10.03 ~ 2024.10.18  이 프로젝트는 사회적 약자 지원에 대한 주제에서 외국인 근로자도 사회적 약자에 포함되지 않을까? 에서 시작된 프로젝트이다. 우리나라는 아시아 최초로 다민족 국가로 지정될 정도로 외국인이 많이 거주하고 있다. 사회는 점차 저출산을 향해가며, 이에 따라 일손은 부족해지고 ..

1. 라이브러리 관리React를 사용한 프로젝트를 하는 과정에서 기획이 정확하지 않고, react의 숙련도가 많이 높지 않을 때였다. 하나의 기능을 구현하는 과정에서 npm으로 많은 라이브러리들을 설치하고 개발을 하게 되었다.예를 들어 캘린더 기능을 구현해야 할 때 react-calender를 제외한 무수히 많은 캘린더가 존재하며, 라이브러리마다 내부 css 수정과 기능에 대한 내용이 달라 여러 개를 시도해보기도 한다. 이러한 과정들이 있는 이후 마주친 내 package.json은 처참했다. 내가 사용하고 있는 라이브러리가 무엇인지, 사용하지 않는 라이브러리는 무엇인지 확인하기 너무 어려운 것이 아닌가. 한번에 편하게 사용하지 않는 라이브러리들을 찾을 수는 없을까?   2. npxnpx를 통해 쉽게 사용..

@@@결과 미리보기@@@ 1. 구현 1. 기본 로직 problemsData는 데이터 배열이다! - 현재 페이지 state, 한 페이지에 몇 개의 아이템을 보여줄지, 전체 페이지 수 const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 10; const totalPages = Math.ceil(problemsData.length / itemsPerPage); currentPage를 통해 현재 페이지를 useState로 선언해 주고, 한 페이지에 몇 개의 항목이 들어갈지 itemsPerPage를 통해 지정한다. 이후 전체 페이지 수를 구하기 위해서 (데이터/한 페이지에 몇 개의 항목이 들어갈지)를 올림 하여 계산한 totalP..

1. 문제 상황 서버와 클라이언트가 데이터를 주고받는 과정에서 recv()나 send() 함수가 예상대로 작동하지 않을 때가 있다.데이터가 정상적으로 수신되지 않거나, 데이터 크기가 다르다는 오류가 발생하는 것이 대표적이다.이 문제는 주로 서버와 클라이언트가 서로 다른 데이터 타입 크기를 사용하기 때문인데, 특히 윈도우와 리눅스처럼 다른 운영체제에서 통신할 때 자주 발생한다.  리눅스에서 서버를 열고, 윈도우에서 클라이언트가 cmd로 SSH를 통해 접속하여 데이터를 주고받는 상황을 가정하자. 서버와 클라이언트 모두 C 언어로 작성되었으며, 동일한 구조체를 사용하고 있다고 생각할 수 있다. 하지만 데이터 타입의 크기가 운영체제마다 다르기 때문에 실제로는 구조체 크기가 달라지고, 이로 인해 통신 중 오류가 ..

필자의 경우 다른 오류들 검색하면 태반으로 나오는 virtual box에 우분투를 등록하여 사용하는 경우의 오류가 아니다. 이 위에 처럼 Microsoft Store에서 간단히 다운 받아서 쓰는 WSL용 Ubuntu 배포판을 사용할 때 발생하는 문제점에 대해 다룬다.   1. 오류 상황 노트북를 ubuntu를 켜둔 상태로 노트북 화면 덮고 다음날 노트북을 열어 봤더니, 배터리가 5%남아서 충전하라고 떴다.충전을 하고 컴퓨터를 다시 켜보니 우분투가  멈춤.그냥 멈춤. 켜도 아무 반응도 없고 커서만 깜빡이고 있었다. 하..,., "어라리요 다음주 프로젝트 발표인데 날라가지 않겠지" 라는 불안한 마음을 가지고 백업이라도 하려고, filezlia로 들어가서 파일을 빼려했더니 서버는 정상적으로 켜져있네??? 엥 ..

기존 사용자의 홈 디렉터리와 설정을 새로운 사용자 계정으로 복제하는 방법을 단계별로 알아보도록 하겠다.  1. 기존 사용자의 홈 디렉터리 복사 먼저 기존 사용자의 홈 디렉터리를 새로운 위치로 복사한다.cp -r /home/user1 /home/user3이 명령어는 user1의 홈 디렉터리 전체를 user3 디렉터리로 복사한다. -r 옵션을 사용하면 디렉터리를 재귀적으로 복사할 수 있다.    2. 새로운 사용자 계정 생성 새로운 사용자 계정을 생성한다.sudo useradd -m -d /home/user3 -s /bin/bash user3 각 옵션의 의미:-m: 홈 디렉터리 자동 생성-d: 홈 디렉터리 경로 지정-s: 기본 셸 지정 (/bin/bash)   3. 비밀번호 설정새로 생성한 사용자 계정의 비..

WSL에서 SSH 서버 설정 및 LAN 환경에서 접속하기 이 글에서는 Ubuntu (WSL) 환경에서 SSH 서버를 설정하고, Windows 시스템에서 포트포워딩과 방화벽 설정을 통해 LAN(Local Area Network) 내에서 SSH 접속이 가능하도록 설정하는 방법을 포스팅하려고 합니다.    1. WSL에 SSH 서버 설치 및 설정 1-1. SSH 서버 설치 및 방화벽(UFW) 설정WSL에 SSH 서버를 설치하고, 방화벽을 설정한다.# 패키지 업데이트 및 SSH 서버 설치 sudo apt update sudo apt install openssh-server # UFW(방화벽) 설치 및 설정 sudo apt install ufw sudo ufw allow 22/tcp # SSH 포트 허용 sudo..

@@@결과 미리보기@@@  1. 구현내가 이전에 만든 웹 화면은, 바로 위 gif와 같이 창을 전체화면으로 사용하기보다 한쪽으로 화면을 축소하여 사용하는 일이 많았다. 이에 화면이 반절로 되게 되면, 웹사이트에 불편함을 느껴 반응형을 도입하여 이문제를 해결하고자 하였다.    1. display: grid 기본적으로 display:flex로 구현되어 있는 컨테이너를 반응형을 위해 grid로 변경하였다.왜 grid냐? 현재 나는 왼쪽 사진과 같이 1열로 나란히 있는 요소들을 화면의 width가 줄어들면, 오른쪽과 같이 세로로 배치되기를 원하기 때문이다. display: flex;의 경우 일반 div의 성격인 세로로 쌓이는 것이 아닌, div가 가로로 쌓이게 된다. 이러한 경우 반응형으로 가로 세로 요소의 ..

@@@ 결과 미리보기@@@ 1. 구현 데이터가 많을 때 이를 한 번에 모두 렌더링 하면 성능 저하로 이어질 수 있다. 특히 스크롤을 통해 추가적인 데이터를 보여주는 무한 스크롤 방식은, 성능 최적화를 위해 사용자와의 상호작용에 따라 데이터가 로딩되도록 하는 것이 중요하다.이를 위해 Intersection Observer API와 더보기 버튼을 활용해 특정 위치까지 스크롤이 되면 추가 데이터를 로딩하고, 버튼 클릭 시 모든 데이터를 표시하는 방식으로 컴포넌트를 구현할 수 있다. 이번 글에서는 Intersection Observer와 상태 관리를 통해 효율적으로 데이터를 로딩하고 화면에 표시하는 방법을 설명하도록 하겠다.    1. Intersection Observer 설정 const observer = ..

@@@ 결과 미리보기@@@ 1. 구현방법  1. 타이핑 기본 로직 const [webTitle, setWebTitle] = useState(''); // 웹 페이지 제목을 저장할 상태 초기화 (초기값: 빈 문자열)const [count, setCount] = useState(0); // 현재 타이핑 중인 문자의 인덱스를 저장할 상태 초기화 (초기값: 0)const completionWord = 'Co Labor'; // 완성될 타이핑 문구를 상수로 저장 webTitle이 처음 시작 문자열이고, 완성 됐을 때 문자열은 completionWord이다. 이후 count라는 state를 통해 현재 몇 번째 글자인지 구별한다.  useEffect(() => { const typingInterval = setIn..