군만두의 IT 개발 일지

목차📌 요약AI 경진대회를 준비하면서 발견한 아래 오류를 이틀 동안 고민하다가 드디어 해결했다.Caught error in DataLoader worker process 0.📌 서론제공받은 데이터와 베이스라인 코드를 실행했다. 하지만 계속 Model Train을 실행했을 때 다음과 같은 오류가 발생했다.📌 시도한 방법1. .zip 압축 해제처음에는 미련하게 데이터 파일을 계속 해제했다. 데이터 중 일부 손실된 부분이 있어 보였기 때문이다. 그래서 압축 파일을 구글 드라이브 안에 집어넣고 Colab에서 아래 명령어를 실행하여 압축을 해제했다.# 드라이브 마운트from google.colab import drivedrive.mount('/content/drive')# 압축 해제할 폴더로 이동, 압축 해..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약React 기반 SPA로 앱 버전 정보를 관리하는 Version Control System(VCS)을 구현한 프로젝트이다. Axios를 통해 REST API 서버와 통신하고, React Query와 React Bootstrap을 활용하여 데이터 추가, 수정, 삭제, 조회 기능을 구현했다.더보기 프로젝트 개요앱 버전 정보(OS, 버전, 업데이트 타입, 메시지, 패키지 정보 등)를 관리하는 SPA. EC2 서버와 REST API로 통신함.기술 스택React 18, Axios, React Query, React Bootstrap, Styled-components를 사용함.주요 기능버전 목록 조회(GET), 버전 추가(POST), 버전 수..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약JavaScript의 기본 실행 방법, 주요 데이터 타입(Number, String, Boolean), 변수 선언과 할당, 조건문(if/else), 반복문(for/while), 그리고 함수의 정의와 호출 방법에 대해 정리한다.더보기 JavaScript 기초브라우저 또는 Node.js 환경에서 실행되며, console.log()로 값을 출력함.주석(//, /* */)으로 코드에 설명을 추가할 수 있음.값(value), 표현식(expression), 연산자(operator)의 개념을 이해해야 함.데이터 타입Number: 정수·실수 표현, 산술 연산자와 Math 객체 사용 가능.String: 따옴표·백틱으로 감싸며, length·inde..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약와이어프레임과 목업, HTML/CSS 활용에서 Flexbox를 이용한 레이아웃 구성 방법과 각 속성의 적용에 대해 정리한다.더보기 와이어프레임 / 목업와이어프레임은 디자인 전 단계에서 선으로 화면의 윤곽을 잡는 작업이고, 목업은 실제 제품처럼 HTML 문서를 하드코딩하여 구성하는 방식임.HTML 구성 원칙콘텐츠 흐름(좌→우, 위→아래)에 따라 수직 분할 후 수평 분할 순서로 레이아웃을 구성함.Flexbox — 부모 속성flex-direction으로 정렬 축, flex-wrap으로 줄 바꿈, justify-content로 축 수평 정렬, align-items로 축 수직 정렬을 설정함.Flexbox — 자식 속성flex: grow sh..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약React의 단방향 데이터 흐름, State 끌어올리기(Lifting State Up), Side Effect와 순수 함수의 개념, Effect Hook(useEffect)의 사용법과 조건부 실행, 그리고 컴포넌트 내에서의 AJAX 요청 처리 방법에 대해 정리한다.더보기 데이터 흐름단방향·하향식(위에서 아래)으로 흐름. 데이터는 부모 → 자식 방향으로만 전달됨.State 끌어올리기하위 컴포넌트의 이벤트가 부모의 state를 변경해야 할 때 사용함. 상태 변경 함수(handler)를 props로 하위 컴포넌트에 전달함.Side Effect / 순수 함수Side Effect는 함수 외부에 영향을 끼치는 구현을 의미함. 순수 함수는 입력..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약React의 Props와 State 개념, 이벤트 처리 방식, 제어 컴포넌트(Controlled Component), 그리고 React의 단방향 데이터 흐름에 대해 정리한다.더보기더보기 Props부모 컴포넌트로부터 전달받은 값으로, 객체 형태이며 읽기 전용임.하위 컴포넌트에 값을 전달할 때 사용함.State컴포넌트 내부에서 변화하는 값으로, useState Hook으로 선언함.state가 변경되면 컴포넌트가 리렌더링됨.이벤트 처리HTML과 달리 React에서는 카멜 케이스(camelCase)로 이벤트를 작성하고, 함수를 직접 전달함.예) onClick={handleEvent}제어 컴포넌트사용자의 입력을 기반으로 자신의 state를 ..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약SPA와 MPA의 개념 및 차이점, 와이어프레임과 목업의 정의, 그리고 React Router를 이용한 SPA 라우팅 방법에 대해 정리한다.더보기 SPA페이지 갱신에 필요한 데이터만 받아 현재 페이지를 업데이트하는 방식임. 빠른 인터랙션과 낮은 서버 부하가 장점이나, 초기 로딩 속도와 SEO가 단점임.MPA페이지 이동마다 서버로부터 전체 HTML을 새로 받아오는 방식임.Wireframe / Mockup와이어프레임은 디자인 전 단계에서 선으로 윤곽을 잡는 작업이고, 목업은 기기 프레임을 씌워 직관적으로 표현한 디자인임.React RouterReact SPA에서 라우팅을 구현하는 라이브러리임. , , , 컴포넌트를 사용함. ⭐SPA(..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약JavaScript의 동기/비동기 개념, 비동기 제어 방법(Callback, Promise, Async/Await), Node.js 모듈 시스템, fetch API와 Axios를 이용한 네트워크 요청에 대해 정리한다.더보기 동기 / 비동기동기는 작업을 순차적으로 처리하고, 비동기는 이전 작업이 끝나지 않아도 다음 작업을 바로 실행함.JavaScript는 싱글 스레드 기반이지만, 런타임 환경에서 비동기 처리를 지원함.타이머 APIsetTimeout은 일정 시간 후 한 번 실행하고, setInterval은 일정 간격으로 반복 실행함.clearTimeout/clearInterval로 각각 종료할 수 있음.Callback / Promise..