본문 바로가기
728x90
반응형

source-code229

JaveScript _ Ajax 맛보기 비동기 방식을 사용하기 위해 Ajax의 맛을 봐보자! 전체적인 흐름! 하나하나 무슨 소리인지 알아보자. js가 Ajax를 사용할 때 쓰는 객체인 XMLHttpRequest를 생성! 객체이므로 new를 통해 만들어 준거다! XMLHttpRequest 객체의 open() 메서드를 사용해 해당 요청의 전송 방식, 전송 위치, 방식 을 지정해준다. 배치 순서는 → open(전송 방식 , 전송 위치 , 방식) 형태로! 역시 XMLHttpRequest 객체의 send() 메서드를 통해 XMLHttpRequest를 보낼 수 있다! 성공적으로 보내질 경우 responseText란 속성으로 답이 오는데, 요 녀석도 XMLHttpRequest 객체의 속성! 아하... 이를 통해 지난번 PNU Quiz에서 사용된 Ajax .. 2021. 2. 6.
JavaScript _ 문서 객체 모델 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다! 1. DOM 관련 용어 문서 객체 모델(DOM)! 그런데 태그니, 문서 객체니, 노드니 하는 용어가 등장한다. 우선 태그는? 우리에게 익숙한, HTML 페이지에 존재하는 , 같은 녀석들! 이 태그를 js에서 이용할 수 있는 객체로 만들면? → 요놈이 문서 객체다! (var header = document.getElementById('header')시 header가 문서 객체! document 객체를 사용한걸 이제 안다!) 마지막으로 노드 란... HTML 페이지는 위 그림처럼 트리 모양으로 나타낼 수 있다. 이 때 그림 속 각 요소들을 노드 라고 부른다! 노드는 요소 노드와 텍스트 노드로 구분할 수 있는데, 요소 노도는 .. 2021. 2. 5.
JavaScript _ 브라우저 객체 모델 브라우저 객체 모델(BOM)이란? 웹 브라우저와 관련된 객체의 집합! 그림처럼 최상위의 window, 하위의 location, navigator, history, screen, document 객체가 있다! 이중 document 객체와 관련된 객체의 집합을 DOM이라 부르는 것! 1. window 객체 브라우저 기반 js의 최상위 객체인 window 객체! open() 메서드를 통해 새로운 window 객체를 생성할 수 있으며, 만들어진 객체에 접근할 수도 있다. 역시나 다양한 기본 메서드를 제공하고 있으며, 위 예시처럼 작성하면... 새로운 window 객체가 뜨며, 1초마다 왼쪽으로 10px 아래쪽으로 10px씩 이동한다! 참말로 신기하고만. 2. screen 객체 다음은 운영체제 화면의 속성을 가지.. 2021. 2. 5.
JavaScript _ 기본 내장 객체 JavaScript에 내장된 객체 중 가장 기본적인 내장 객체를 살펴보자! 1. 기본 자료형과 객체의 차이 변수 primitiveNumber은 기본 자료형 숫자, 변수 objectNumber은 객체에 해당한다. 이 둘을 출력해보면... 같은 값이다! 심지어 속성과 메서드는 객체가 가질 수 있는 것인데... 기본 자료형에도 속성과 메서드가 존재한다. 이게 어찌 된 일? 기본 자료형의 속성이나 메서드를 사용하면 기본 자료형이 자동으로 객체로 변환되기 때문! 예를 들어 기본 자료형 숫자의 속성이나 메서드를 사용할 때는 자동으로 Number 객체로 변환된다. 따라서... 기본 자료형과 객체의 차이점은 찾기 어렵다! 굳이 굳이 찾자면 기본 자료형은 객체가 아니므로 속성과 메서드를 추가할 수 없다는 점. 따라서 기.. 2021. 2. 5.
JavaScript _ 객체지향 프로그래밍 1. 객체 js에서는 python의 list와 유사한 배열(array)이란 개념을 사용할 수 있었다. 배열에는 인덱스 와 요소 가 있는데, 각 배열 요소를 사용할 때는 인덱스를 통해 접근(array[0])했다. 이러한 배열은 객체를 기반으로 만들어졌기 때문에 이 둘은 굉장히 유사한 개념! 차이점이라면 배열은 인덱스를 통해, 객체는 키를 통해 요소에 접근한다! 여기서 eat의 속성은 함수 자료형이므로 특별히 eat() 메서드 라고 부른다! 아니, 속성이니 메서드니 함수니 변수니 하는 말이 다 뭐람?? → 매번 헷갈렸는데... 드디어 정리한다. 단독 사용 다른 식별자와 함께 사용 식별자 뒤 괄호 X 변수 (ex input) 속성 (ex Array.length) 식별자 뒤 괄호 O 함수 (ex alrert('.. 2021. 2. 4.
JavaScript _ onload vs ready PNU Quiz의 result페이지에는 로딩바 기능이 있었다. result.html이 띄워질 때 메인 콘텐츠를 숨겨뒀다가 n초 뒤에 나타나게 하고, 로딩바는 n초 뒤에 사라지게 함으로써 유저가 로딩바를 n초 동안 봤다가 메인 콘텐츠를 볼 수 있게끔 만들었다. 해당 코드는 다음과 같다! 얼핏 보기에는 정상적으로 작동하나 싶었는데... 문제 발생. '익명 님의 성적표~~'에 해당하는 부분(메인 콘텐츠)은 분명 .hide()를 통해 숨겨뒀다. 하지만 웬걸, result.html이 뜨고 약 0.3초 정도 동안 이 녀석들이 나타나는 게 아닌가! 지금 생각해보면 당연한 일이지만 어째서 이런 일이 발생했는지, 어떻게 해결할 수 있는지 알아보자. 1. onload() ? result.js는 window.onload().. 2021. 2. 2.
PNU Quiz App _ django로 퀴즈 구현하기3 심심한 페이지를 벗어나기 위해(?) js 소스를 뿌려준다. 우리가 원하는 기능은 2개! 1. result 페이지를 띄워주기 전 로딩 화면을 띄워준다. 2. 유저의 점수와 전체 유저의 점수 평균을 비교해주는 그래프를 띄워준다. 출동! 1. result 페이지를 띄워주기 전 로딩 화면을 띄워준다. 우리가 원하는 화면. 요 로딩바를 3초가량 보여준 후 진짜 result 페이지의 내용이 뜨면 된다! js로 로딩 화면을 만드는 데는 여러 가지 방법이 있는데... 여기서는 setTimeout 함수를 이용해 2.5초가 지나면 result 페이지 내용이 뜨도록 만들 예정. result.html 로딩바 이미지와 글귀를 담은 div를 loading으로, result 페이지 내용을 담은 div를 result_content로.. 2021. 2. 1.
PNU Quiz App _ django로 퀴즈 구현하기2 얼마 전 만든 PNU Quiz App. 실제 배포 환경에서 기존 방법에 어마 무시한 문제가 있어... 기능을 아예 새롭게 작성했다. 처음부터 이게 맞는 방향이었을 것 같은데... 괜히 쉬운 길을 택하려다 낭패를 봤다. 어쨌든 이렇게 작성한 코드를 리뷰해볼 예정! 1. 기존 방법 수정하기. 기존에는 유저가 각 보기를 클릭하고, 다음 버튼을 누르면, 해당 버튼의 value(보기의 내용)를 url에 담아 전달해주는 방법을 사용했다. 즉 어딘가에 저장되는 것도, 실제 선택이 제출되는 것도 아니었다! (그냥 url에 담긴 value를 받아와 view에서 해당 value를 list안에 넣어주기만 했다) 이렇게 작성하고 나니... 유저의 정답이 담긴 list는 각 응답을 저장할 때, 그리고 점수를 매길 때 사용돼야 .. 2021. 2. 1.
Django REST Framework _ 인증 기능 구현하기2 2021/01/25 - [django] - Django REST Framework _ 인증 기능 구현하기 Django REST Framework _ 인증 기능 구현하기 모든 웹 API에서 빼놓을 수 없는 인증 기능. 우리의 친절한 DRF에서는 이러한 인증 기능을 쉽게 사용할 수 있는 도구들을 만들어뒀다. www.django-rest-framework.org/tutorial/4-authentication-and-permissions/.. 23life.tistory.com 지난번 내용! User에 대한 정보를 볼 수 있도록 DRF에 추가해줬다. 하지만 이렇다고 해서 우리가 원하는 기능이 구현된 건 아니다! 지금은 User와 Post가 각기 따로따로 존재하기 때문. 진정한 인증 기능을 위해 User와 Post.. 2021. 1. 29.
728x90
반응형

티스토리툴바