IT Dev Log

Angular 앱- 9. Quiz 앱의 질문과 보기 불러오기 시작하기 전에 기존에 실습하기 위해 만들었던 예제를 다음과 같이 정리한다. 질문과 답 1개만 남기고 모두 삭제한다. 진행상태바에서 했던것 처럼 question 클래스에도 ng-repeat 를 적용한다. 모든 문제에 대해서 반속에서 화면에 보여주기 위해서 ng-repeat 를 추가한다. 이제 각각의 루프에서 필요한 변수를 찾아서 화면에 표시해 주면된다. 다시 json 변수를 확인해 보고 question & answers 에 대한 내을 확인해서 html 에 적용한다. json 데이터의 answers 또한 반복된 구조로 되어 있기 때문에 ng-repeat 를 사용해서 이 부분을 호출해 온다. 현재까지 적용하고 화면을 확인해도 변경된 내용은 없다. 코..

Angular 앱- 8. Angular 를 이용해서 진행상태 구현 이전 포스팅에서 테스트 했던 totalQuestion 변수를 지우고 다음과 같이 div 태그를 추가한다. ng-repeat 는 배열로 가지고 있는 question 에 대해서 반복실행하는 구문이다. 반복시 각각의 데이터는 myQuestion 으로 접근가능하다. 화면을 다시 리프레시 하자. 그럼 5개의 데이터를 반복실행하면서 5개의 원이 그려진것을 볼수있다. ( ng-repeat ) intro 클래스 작업하기 intro 클래스의 경우, activeQuestion 의 값이 0 보다 작은 경우에만 보여지고, 그렇지 않으면 Qustion 에 대한 질문과 답이 보여지고 intro 클래스는 사라지게 한다. 이를 구현하기 위해서는 javascript 의..

Angular 앱- 7. Model_JSON 데이터 준비하기 퀴즈앱을 위해서 질문과 답을 관리하는 quiz_data.json 파일을 프로젝트 폴더에 생성한다. 잠시 여기서 JSON 파일 형식에 대해서 알아보자. JSON은 자바스크립트에서 object 를 관리하기 위해서 만들어졌지만, 현재는 모든 언어에서 공통으로 사용하는 하나의 인터페이스 사용되고 있다. 이제 실제도 quiz 앱에서 사용될 JSON 파일을 만들어보자. 같은 방식으로 모든 데이터를 입력한다. ( snippet.txt 파일에서 데이터 복사 ) json 파일에 대해서 검증해 주는 online 웹사이트가 있다. ( https://jsoneditoronline.org/ ) 전체 데이타를 복사해서 왼쪽에 넣으면, json 포맷에 맞는지 확인해서 오..