분류 전체보기 검색 결과

해당 글 251건

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

slider menu

사이드 메뉴 클릭하면 사이드 메뉴가 옆에서 튀어나오게끔 구현하고 싶었다 초안 처음에는 modal 팝업을 구현하는 것 처럼 클릭하면 사이드바의 display를 none에서 block으로 바꾼 후 transform을 이용해서 왼쪽에서 나오게 구현하려했다 css부분 .sidebar{ display: none; width: 20vw; height: 100vh; position: absolute; left : -20vw; top: 0; background-color: rgba(237 ,238 ,241, 0.7); box-shadow: 0 0 8px 1px #737171; transition: 2s; } .move{ transform: translateX(20vw); }js의 클릭 이벤트 부분 function si..
CSS 2020. 11. 23. 17:30

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

modal

modal modal은 로그인이나 알림 내용으로 표현되는 팝업창을 나타낸다 특별한 기술인 줄 알았는데 알고보니 그냥 3d 인덱스를 우선순위로 정해놓고 새로운 엘리먼트를 화면에 띄우는 것이었다.. html pop-up × this is modal ×은 html엔티티로 x를 나타낸다 css 이 포스팅의 카테고리를 css로 할까 js로 할까 고민했는데 js는 기초적인 이벤트만 들어가고 css분량이 더 커서 css로 했다 .modal{ z-index: 1; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; background-color: rg..
CSS 2020. 11. 21. 16:32

자바스크립트 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

Effect Hook

Effect Hook Effect Hook도 State Hook처럼 클래스형 컴포넌트에서 사용할 수 있는 메소드를 함수형 컴포넌트에서도 사용가능하게 만들어 주는데 바로 class의 생명주기 메소드들을 사용하능하게 해준다 아래에서 알아보자 사용법 import React, {useEffect} from 'react';State와 같이 임포트를 해주어야 함수형 컴포넌트 내에서 사용이 가능하다 State Hook에서 사용했던 코드에 useEffect만 살짝 추가해보자 function Counter(){ const [count,setCount] = useState(0); useEffect(()=>{ document.title = `You clicked ${count} times`; }); const..
React 2020. 11. 18. 02:09

State Hook

State Hook 우리는 컴포넌트 내부에 변수를 저장하려할 때 클래스형 컴포넌트를 만들어서 state를 사용했다 하지만 hook이 나오고 나서는 따로 클래스형 컴포넌트를 작성할 필요가 없이 hook 기능을 사용하면 된다 사용법 import React, {useState} from 'react'; 함수형 컴포넌트에서 state를 사용하기위해선 우선 useState를 임포트해야한다 function Counter(){ const [count,setCount] = useState(0); ---- 1 const handleClick = ()=>setCount(count+1); ---- 3 return ( Count {count} + ---- 2 ) } 위 컴포넌트는 버튼을 누르면 숫자가 올라가는 매우 간단한 컴..
React 2020. 11. 17. 22:25