아 그거 뭐였지

Q. 실시간으로 데이터를 받아서 출력해주세요. 레이저 사격 프로젝트를 진행하던중 메인 기능이였던 격발이 완료될시 점수와 표적위치를 출력하는 기능이 필요하였다. 처음에는 setInterval로 서버에 1초마다 요청을 하면서 데이터를 받아왔지만, 사격 특성상 언제 사격이 될지 모르고 대기하는 상황에서도 계속해서 서버로 요청을 보내다보니 어떨대는 데이터를 받아오지 못하거나 웹 페이지가 느려지는 현상이 발생하였다. 이런 불필요한 요청을 하지 않고 안정적으로 데이터를 받아올 수있도록 데이터 상태변화를 감지하는 observable과 subcribe를 사용해서 구현하였다. socket을 사용하기위해서는 아래 명령어로 설치를 해주어야한다. npm install socket.io-client 바로 코드로 확인해보자. /..

Q. 정보입력시 데이터 저장해주세요. 프로젝트를 진행하다보면 로그인, 검색기능등과 같이 입력한 데이터를 사용하는 기능들을 만들어야 할 때가 있다. 그럴때 사용하는것이 ngModel이며 사용방법을 알아보자. ngModel 문법은 input태그에 [(ngModel)]="변수명" 으로 사용가능하다. ngModel은 input태그에만 사용이 가능하다. 크게 대단한것없이 저렇게만 사용하면 끝이다. 해당 input에 사용자가 데이터를 입력하면 userId라는 변수에 데이터가 저장된다. ngModel을 사용하기 위해서는 ngModel을 사용하고있는 컴포넌트의 모듈에서 FormsModule을 Import해주어야 한다. import { FormsModule } from '@angular/forms'; @NgModule(..

※ 2022년 03월 14일 내용이 너무 빈약하여 수정하였습니다. ※ Q. 뒤로 가기해도 데이터 위치 유지 해주세요 쇼핑몰 프로젝트 진행 중. 상품 리스트 클릭후 뒤로 가기 시 해당 상품으로 포커싱이 되게 해 달라는 요청이 있어 작업하게 되었다. 해당 방법외에도 여러 가지 방법이 있으니 이 코드가 정답이 아니라는것을 유의하길 바란다. 책임회피 해버리기~ 처음에는 localstorage를 사용해서 구현하였는데, 브라우저를 종료시켜도 데이터가 남아있는 경우가 있어 sessionstorage를 사용하여 구현하였다. 더보기 localstorage : 로컬에서 직접 삭제하기 전까지는 데이터가 남아있음 sessionstorage : 세션을 종료하기 전까지는 (ex_ 브라우저 창 닫기) 데이터가 남아있음 아이디어는 ..