JavaScript 검색 결과

해당 글 77건

TDD-view

view 테스트하기 이전에 우리는 데이터를 담당하는 모듈인 ClickCounter모듈을 만들었었다 이제 데이터를 화면에 출력을 담당하는 ClickCounterView모듈을 만들 차례다 테스트 코드 describe('ClickCountView 모듈', () => { describe('updateView()', () => { it('ClickCounter의 getCounter() 실행결과를 출력한다', ()=> { }); }); });테스트 코드 명세를 받긴 했는데 어떻게 짜는 걸까..? 우선 데이터는 ClickCounter모듈에서 담당하고 있으니 일단 ClickCounter에 의존해야할 것 같다 가져온 데이터를 화면에 붙이려면 돔 엘리먼트가 필요하니 엘리먼트도 하..
JavaScript/Test 2020. 11. 26. 11:51

TDD 2

increase() 이번에 구현할 기능은 increase다 increase메소드를 실행하면 value의 값이 1증가하게된다 테스트 코드 테스트 코드를 먼저 만들어 보자 describe('increase()', ()=>{ it('increase는 값을 1 증가시킨다', ()=>{ const counter = App.ClickCounter(); counter.increase(); expect(counter.getValue()).toBe(1); }); }); 저번 포스팅에 봤던 테스트 코드 바로 밑에 추가한 것 이제 실제 코드를 짜러 가 보자 실제 코드 App.ClickCounter = ()=>{ let value = 0; return { getValue() { return value; }, increase(..
JavaScript/Test 2020. 11. 25. 17:25

TDD 1

카운터 프로그램 우리는 버튼을 누르면 값이 올라가는 매우 흔하고 아주 간단한 프로그램을 만들 건데 내가 만드는 난잡하고 조잡한 코드에서 TDD강의를 보고 만들게 되면 코드가 어떻게 달라질지 한번 봐야겠다 우선은 화면에 보이지않는 부분인 데이터 부분을 만들어보자 클릭 카운터 모듈 말 그대로 클릭했을 때 데이터들의 변동을 관리하는 모듈이다 // in ClickCounter.spec.js describe('ClickCounter', ()=> { describe('getCounter()', ()=> { it('초기값이 0인 카운터 값을 반환한다', ()=> { const counter = App.ClickCounter(); expect(counter.getValue()).toBe(0); }); }) }) 위는 ..
JavaScript/Test 2020. 11. 24. 17:13

API 사용하기

api 사용 html, css, 자바스크립트만을 이용해서 작은 프로젝트들을 따라서 해보고 있는데 환율 사이트의 open api를 이용해 간단히 돈의 환전액을 알려주는 사이트를 만들고 있었다 초안 처음에는 사이트를 켰을 때 환율 데이터를 받아와서 그 값을 저장한 뒤 내가 원하는 나라에 맞게, 내가 가진 나라의 돈을 입력하면 저장한 데이터를 이용해서 환율을 계산하려고 했다 function getRate() { const request = new XMLHttpRequest(); request.onreadystatechange = function (){ if(request.readyState === XMLHttpRequest.DONE){ if(request.status === 200){ const data = ..
JavaScript 2020. 11. 22. 14:24

자바스크립트 TDD

테스트 주도 개발 (TDD) TDD는 대학에서 교수님이 자바를 가르쳐주실 때 잠깐 배워본게 다 였는데 '실패하고 성공하는 과정에서 성취감을 더 잘 느껴져서 그런지 초록불이 들어오는게 재미있었다'가 느낀점의 전부였다 TDD의 필요성과 효능에 대해서는 다른 블로그에서도 잘 찾아볼 수 있고 나는 아직 현업 개발을 해본적이 없기 때문에 자세히 설명하지 못하겠지만 강의를 따라가면서 잊어먹지 않기 위해 조금씩 기록을 남겨보려고 한다 프레임 워크 자스민 버전 2.7.0을 따라간다 https://github.com/jasmine/jasmine/releases/tag/v2.7.0 기본 설명 describe 는 테스트 유닛들을 모아놓는 함수 it은 테스트를 할 수 있는 가장 작은 단위 expect(기댓값)로 기댓값을 정하..
JavaScript/Test 2020. 11. 20. 16:07

name space

네임 스페이스 네임 스페이스란 말 그대로 이름을 쓸 수 있는 공간?정도로 해석된다 작업중인 프로젝트에서 현재 내가 쓰는 변수나 함수의 이름과 다른 사람, 혹은 먼 미래에의 내가 코드 작업을 할 때의 이름들이 겹치게되는 불상사가 일어나는 상황을 방지하기 위해 만드는 공간이라고 보면 된다 var A = {} A.introduce =function (){ console.log('mynameisA'); } var B = {} B.introduce = function (){ console.log('mynameisB'); } A.introduce();// mynameisA B.introduce();// mynameisB자바스크립트에서는 이렇게 빈 객체를 생성한 뒤에 그 공간 안에 변수와..
JavaScript 2020. 11. 19. 15:53

Number() vs parseInt()

나는 문자열을 숫자로 바꾸는 함수는 parse시리즈만 있는 줄 알았는데 이번에 강의를 보면서 Number()도 있다는 것을 알게되었고 그러면서 이게 무슨 차이가 있을까? 라는 의문이 들어서 알아보았다 Number() const str = '1000'; const str1 = '1000원'; const str2 = '약1000원'; console.log(Number(str)); console.log(Number(str1)); console.log(Number(str2)); Number를 사용할 경우 문자열에 숫자로 변환할 수 없는 문자가 끼어있으면 NaN을 반환한다 parseInt() const str = '1000'; const str1 = '1000원'; const str2 = '약1000원'; con..
JavaScript 2020. 11. 16. 21:04

form event

change change이벤트는 요소의 변경이 끝날 때 발생한다 텍스트가 수정될 때 마다 발생하지 않고 input이나 textarea에서 포커스를 잃을 때 발생 inputBox 위의 예제에서 inputBox에 입력 후 커서를 다른 곳에 찍어 포커스를 잃을 시에 로그가 출력된다 input input이벤트가 오히려 change의 이름을 가지면 어땠을까 싶다 inputBox inputBox안의 내용이 달라질 때 마다(입력,삭제) 로그를 출력하는 예제이다 copy, paste, cut 이 3개는 동작이 동일하다 복사, 잘라내기, 붙여넣기 시에 발생하는 이벤트이다 inputBox inputBox안에서 복사를 시도하려고 할 때 경고문을 띄우고 preventDefault로 복사를 막는 코드 paste, cut도 동일..
JavaScript 2020. 11. 12. 23:56

Ajax

Ajax Ajax는 Asynchronous JavaScript and XML의 약자로 자바스크립트로 서버와 비동기적으로 통신하면서 데이터를 주고받는 방식을 얘기한다 이름이 XML이라 XML데이터를 주고받아야 할 것 같지만 굳이 XML만을 사용하지 않아도 되고 요즘은 JSON을 주로 사용한다 이 Ajax는 XMLHttpRequest객체를 사용해서 서버와 통신하는데 페이지를 새로고침하지 않고 서버에 요청 데이터를 받고 작업을 수행 할수 있다 메소드 const request = new XMLHttpRequest();우선 서버와 통신할 XMLHttpRequest 객체를 변수에 담아둔다 request.open('method','url',boolean);open 메소드는 서버에 요청하는..
JavaScript 2020. 11. 8. 15:37