아 그거 뭐였지

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

Q. 배열에 있는 데이터를 출력해주세요. 프로젝트를 진행하다 보면 반복적인 HTML을 출력하는 경우가 빈번하다. 상품 목록이라던지 글목록이라던지 리스트들을 출력할때 주로 사용된다. 아래와 같이 같은 html 규격을 담고 있는 div태그들이 반복적으로 나오는 것을 볼 수 있다. 상품브랜드 상품이름 상품가격 상품브랜드 상품이름 상품가격 상품브랜드 상품이름 상품가격 상품브랜드 상품이름 상품가격 상품 리스트같이 한 두 개가 아닌 데이터들을 다 저렇게 복사 붙여 넣기로 구현한다면 굉장히 비효율적이고 개발 시간도 오래 걸릴 것이다. 이런 반복적인 작업을 Angular에서는 ngFor 디렉티브를 사용해서 해결한다. 바로 사용법을 알아보자. ngIf와 마찬가지로 *을 맨 앞에 붙이고 *ngFor로 사용한다. // pr..

Q. 페이지가 렌더링 될 때마다 데이터를 가져오게 해 주세요. useEffect는 컴포넌트가 렌더링 될 때마다 어떠한 행위를 하게 하는 함수이다. 게시판을 예로 들자면 게시판 컴포넌트를 렌더링 했을 때마다 글 목록을 가져와야 할 텐데 그때 useEffect를 사용해서 서버에서 글 목록을 가져오는 함수를 실행시키면 될 것이다. useEffect는 인자로 콜백 함수와 dependency array를 받는다. 경우는 많게 세 가지로 나뉘는듯하다. 1. dependency array를 받지 않고콜백 함수만 받을 때 : 렌더링 될 때마다 useEffect가 실행된다. 2. dependency array를 빈 배열로 받고 콜백 함수도 받을 때 : 처음 렌더링 때에만 useEffect를 실행시킨다. 3. depend..

Q. 클릭했을때만 보여지게 해주세요. 조건식에 따라서 데이터를 보여지게 할 때가 많다. 버튼을 클릭했을때 보여지게 한다던가, 로그인 상태일때만 보여지게 한다던가 하는 조건들이 있을때 사용하는것이 ngIf이다. 이름에서만 봐도 이걸 사용하면 되겠다는 느낌이든다. 바로 사용 방법을 알아보자. ngIf를 사용할때는 *을 앞에다가 붙이고 I가 대문자임에 유의하자. 보여주자! 보이지롱 클릭해야 보이지롱 export class BoardComponent implements OnInit{ constructor() { } ngOnInit(): void { } //ngIf에 사용할 변수선언 isShow:boolean = false; } 사용 방법은 간단하다. 조건식을 달고싶은 html태그에다가 *ngIf를 사용해서 조건..

Q. HTML에서 동적으로 변수를 사용하게 해주세요. 프론트엔드 개발을 하다보면 화면단에서 동적으로 정보를 뿌려줄때가 많다. 앵귤러에서는 HTML에서 중괄호 안에 변수이름을 넣어주면 HTML에서 변수를 사용할수있다. 빠르게 사용법을 알아보자. {{userName}} 님 반갑습니다. 사이트의 헤더부분에 "유저이름" 님 반갑습니다 라는 것처럼 "유저이름"이라는 부분이 항상 바뀌는데 이런 경우처럼 데이터가 동적으로 변하는 부분에 사용해주면 된다. 삼항연산자 또한 가능하다. {{isLogin ? '로그인된 유저입니다.' : '로그인이 필요합니다.'}} isLogin이란 변수가 true일때 "로그인된 유저입니다"를 출력하고 false이면 "로그인이 필요합니다" 라는 문구를 출력하는 예제이다. 데이터 바인딩을 하다..

useState 어떠한 이벤트 발생시 변수의 값을 바꾸고 싶을때 useState를 사용한다. data라는 변수를 선언하고 바꾸고싶다고 하였을때 형태는 아래와 같다. // useState에는 초기화할 값을 넣어주면 된다. // setData외에 다른 변수명을 지어도 되지만, 관습적으로 변수명앞에 set을 붙인다. let [data,setData] = useState(''); return( {data} {setData("Hello")}}> ) button을 클릭하게 되면 data의 값이 Hello바뀌는 로직을 작성해보았다. onClick={ 함수로직 } 사용 방법은 이러하다. 배열 형태로의 데이터들도 핸들링이 가능하다. 사용법은 다음과 같다. let [data,setData] = useState([0,1,2..

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

Q. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 주고싶다. 이때 사용하면 되는것이 Input, Output 데코레이터이다. 본인은 자식 컴포넌트를 팝업창처럼 띄우고 자식컴포넌트에 데이터를 전달한뒤 종료했을때 종료했다는 사인을 부모 컴포넌트로 받고 팝업창을 닫을때 사용했었다. 바로 사용법을 알아보자. @Input 부모컴포넌트에서 자식컴포넌트로 데이터를 전송할때 사용한다. 자식컴포넌트에서 @Input() 데코레이터를 통해서 데이터를 전송받는다. 대문자로 시작함에 유의하자. 헤더에 타이틀이 바뀔때 @Input() 데코레이터를 통해서 컴포넌트별로 타이틀값만 넣어주는 방식으로 구현할수도있다. 코드 예제를 살펴보자 부모로부터 "insertData"라는 값을 자식으로 전달하여 출력하는 예제이다. // app-chil..