seungineer

2024.06.24 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #3. TypeError: Cannot read properties of undefined - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #3. TypeError: Cannot read properties of undefined - (손 동작으로 하는 온라인 웹 테트리스 게임 만socket의 url을 가져올 수 없다.soccket 변수에 담겨 있는 url 속성을 가져와 sessionId를 parsing 하고자 하던 중 만났던 에러 중 예외처리를 해주지 않아 발생한 에러에 대해 정리하고자 한다. 제목은 'Typseungineer.tistory.com개발 중인 핸드트리스가 toy pr..

2024.06.21 - [🧭 KAIST JUNGLE/HandTris] - [HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #2. 프로토타입 통신 테스트 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)2024.06.20 - [SEUNGWOO + ENGINEER] - [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라seungineer.tistory.comsocket의 url을 가져올 수 없다.soccket 변수에 담겨 있는 url 속성을 가져와 sessionId를 pars..

2024.06.20 - [SEUNGWOO + ENGINEER] - [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기) [HandTris] #1. 모델 선정 및 프로토타입 제작 - (손 동작으로 하는 온라인 웹 테트리스 게임 만들기)Hand Pose Detection모션 기반 게임을 만들기 위해서는 웹캠으로 보이는 손의 형태를 인식하는 모델이 필요하다. 대학교 3학년 때 Object Detection을 활용하여 마스크 착용 여부를 인식하는 프로그램을seungineer.tistory.com온라인 테트리스 게임이기에 상대방의 테트리스 화면을 나의 테트리스 화면과 동시에 가져와야 한다. 이전 글에서 WebSocket으로 이를 구현한다고 하였다. 오늘..

Hand Pose Detection모션 기반 게임을 만들기 위해서는 웹캠으로 보이는 손의 형태를 인식하는 모델이 필요하다. 대학교 3학년 때 Object Detection을 활용하여 마스크 착용 여부를 인식하는 프로그램을 만드는 과제를 했던 경험이 있었기에 어떻게 시작해야 할지 막막하진 않았다. 여러 Pose Detection 모델 중 '웹 기반 게임'에 어떤 모델을 사용하는 게 적합할지 테스트해보며, 최종적으로 Tensorflow.js의 Mediapipe Handpose 모델을 사용하기로 했다. 이 모델은 성능이 좋아, 웹 브라우저에서 버벅일 수 있겠다고 생각했다. 사용자 경험을 헤칠 정도이면, OpenPose 모델을 Hand Detection만 하도록 제한해 사용하고자 하였다. 결론은 Mediapi..

어떤 웹사이트에서 form을 입력할 때 입력이 모두 완료되면 자동으로 다음 입력해야 하는 빈칸으로 넘어가도록 구현된 웹사이트가 많다. id와 pw를 입력받을 때 id를 10자 이상 입력하면 pw 입력 칸으로 바로 넘어가는 기능을 구현하던 중 React의 배치 업데이트 특성을 잘 살려서 구현되었는지 의문이 들었다.구현 App.js의 App() 컴포넌트에서 return 하는 input tag를 다음과 같이 구현할 수 있다.function App() { ... useEffect(() => { if (id.length >= 10) { pwRef.current.focus(); } }, [id]); return ( 아이디 : ..

구현을 위한 MEMOindex.html에 라이브러리 스크립트로 이미 포함되어 있기에 전역 객체로 추가되어 있음- 따로 import 하지 않아도 사용 가능// ex)const randomNumber = Random.pickNumberInRange(1, 9);import모듈에서 여러 멤버를 가져올 수 있다. 아래의 import로 현재 범위 내에 foo, bar 멤버를 포함시킬 수 있다.import { foo, bar } from "my-module.js";commit message convention(Angular JS)- 커밋 전에 확인하기!!더보기Subject lineSubject line contains succinct description of the change.Allowed feat (featur..

2024.05.19 - [🧭 KAIST JUNGLE/Pintos] - [PintOS] Virtual Memory - 들어가기(Project 3, TIL) [PintOS] Virtual Memory - 들어가기(Project 3, TIL)Virtual Memory는 왜 필요할까?가상 메모리가 없는 경우를 상상해 보자. 음악 재생 플레이어와 게임 프로세스에서 같은 물리적 메모리 주소에 각각 재생 시간과 캐릭터의 체력 정보가 담기면 어떻게seungineer.tistory.comAnonymous page페이지 타입Uninit Page(초기화되지 않은 페이지)물리 메모리에 연결되지 않은 상태로, 특정 타입으로의 변경을 기다리는 lazy loading을 위한 기본 페이지 역할사용할 준비가 되지 않은 페이지 주소를..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

2.1 const, let을 이용한 변수 선언var를 이용한 변수 선언의 문제점- 덮어쓰기 가능 : 한 번 정의한 변수에 다른 값을 대입할 수 있음(의도하지 않게 덮어써질 수 있기에 무조건 덮어쓰는 것은 좋지 않음)- 재선언 가능 : 프로그램 실행 순서에 따라 어느 변수가 사용되는지 해석하기 어려움(var가 '변수'라는 뜻이기에 둘 다 변동 가능하다고 생각, var는 자주 사용하지 않음) let을 이용한 변수 선언- 덮어 쓰기 가능- 재선언 불가능(let이 'OO이라 하자~'라는 뜻이기에 선언은 한 번 했고, 덮어쓰기는 가능한 var가 선언되었다고 생각)let v1 = 3;console.log(v1) // 3v1 = "문자열로 덮어써버리기~~";console.log(v1) // 문자열로 덮어써버리기~~t..

1.5 모듈 핸들러, 트랜스파일러리액트의 'create-react-app'을 사용하면 모듈 핸들러, 트랜스파일러 의식하지 않고도 개발할 수 있다. 하지만 복잡한 프로젝트인 경우 설정 파일을 조작할 필요가 있기에 내부 구조와 개념을 아는 것이 매우 중요하다.모듈핸들러자바스크립트는 기본적으로 '세세하게 나누어' 개발하는 것이 효율적이다. 이렇게 개발할 때 프로덕션 환경에서 로딩 횟수가 늘어나 성능이 저하되기도 한다. 그래서 개발할 때는 파일을 나누고, 프로덕션 용으로 빌드할 때는 파일 하나에 모으기 위해 js 파일이나 css 파일 등을 한데 합쳐주는 '모듈 핸들러'가 만들어졌다(세세하게 나뉘어 개발된 것을 '모듈', 이 모듈을 다뤄주는 게 '핸들러'라고 생각).트랜스파일러자바스크립트 표기법을 브라우저에서 실..

보호되어 있는 글입니다.

정글 동기들의 피드백을 받아서 블로그를 수정하고자 HTML 편집을 해보았다. 기존에는 사이드바 HTML 박스에 있던 github contribution graph를 블로그 상단으로 올리는 게 목적!사이드바의 요소를 단순히 블로그 상단의 Header Div에 위치시키면 되겠거니 간단하게 생각했는데, 제대로 되지 않았다.버그사이드바에 있던 를 그대로 가져와서 내 위치시켰으나 스크립트가 제대로 작동하지 않았다. 위 이미지처럼 요소에 기본 문구로 넣어둔 'Loading data...'만 표시되었고, script가 작동되어 요소를 알맞은 형태로 수정해줘야 하는데 그러지 못 하고 있었다.디버그이 문제의 원인은 스크립트 로딩 순서의 문제였다.HTML 문서는 브라우저에 의해서 파싱되어 DOM트리로 변환된다. HTML..

보호되어 있는 글입니다.

2024.05.19 - [🧭 KAIST JUNGLE/⭐ Pintos] - [PintOS] Virtual Memory - 들어가기(Project 3, TIL) [PintOS] Virtual Memory - 들어가기(Project 3, TIL)Virtual Memory는 왜 필요할까?가상 메모리가 없는 경우를 상상해 보자. 음악 재생 플레이어와 게임 프로세스에서 같은 물리적 메모리 주소에 각각 재생 시간과 캐릭터의 체력 정보가 담기면 어떻게seungineer.tistory.com진행 상황✅ Memory Management✅ Anonymous Page✅ Stack Growth❎ Memory Mapped Files❎ Swap In/Out Project3의 Virtual Memory를 모두 구현한 후의 동작 m..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Virtual Memory는 왜 필요할까?가상 메모리가 없는 경우를 상상해 보자. 음악 재생 플레이어와 게임 프로세스에서 같은 물리적 메모리 주소에 각각 재생 시간과 캐릭터의 체력 정보가 담기면 어떻게 될까? 물리 주소를 참고할 때마다 서로의 프로세스에서 사용하던 정보를 읽어오기에 문제가 발생할 것이다. 의도치 않게 캐릭터의 체력이 점점 증가한다던가, 캐릭터의 체력이 닳을 때 음악 재생 시간이 뒤로 이동한다던가 🙄.Virtual Memory를 도입해 위 문제를 해결할 수 있다. 각 프로세스는 Virtual Memory 주소를 가리키기에 프로세스별 같은 가상 주소를 가리킨다 하더라도 실제 물리 Memory(RAM)에 매핑되어 가리키는 곳은 다르게 된다! 이는 data security 측면에서의 Virtu..

KAIST PintOS 강의 및 Instruction, 한양대 PintOS Slides를 참고하며 학습한 내용을 정리하였습니다.학습 도중 작성한 내용이라 틀린 내용이 있을 수 있습니다.fork() 함수 구현하는 데서 시간을 너무 많이 썼다. 위 짤처럼 버그를 고치면, 다른 데서 버그가 났고, 그 버그를 고치면 이전 테스트 케이스가 통과가 안 되는 일이 엄청 많았기 때문이다. 무한 버그의 굴레 끝에 'ALL PASSED' 문구를 봤을 때의 감동을 아직도 잊지 못 하겠다(짜릿해).프로세스 계층 구조 개요Process의 정보에 부모와 자식 field를 추가하여 이를 관리하는 함수를 제작한다. 이때, project1에서 사용되었던 semaphore 개념이 사용된다. Process 관련 system call에는 ..

KAIST PintOS 강의 및 Instruction, 한양대 PintOS Slides를 참고하며 학습한 내용을 정리하였습니다.학습 도중 작성한 내용이라 틀린 내용이 있을 수 있습니다.들어가기 전에레지스터 역할 정리%rax : system call number 저장 ▶️ 운영체제가 어떤 시스템 호출을 수행할지 결정하는 데 사용됨%rdi, %rsi, %r10, % r8, %r9 : system call arguments 전달에 사용(호출에 따라 일부만 사용될 수 있으며, 순서대로 할당됨)%rcx : syscall 명령어 사용 시 %rcx 레지스터에 복귀 주소가 저장됨(일반적인 함수 호출 시에는 스택에 저장!) ⬅️ 운영체제에서 자동 처리%r11 : syscall 명령어 사용 시 현재 process stat..