JavaScript 검색 결과

해당 글 77건

논리 연산자

논리 연산자 이 때까지 자바스크립트를 공부하면서 논리 연산자라는 소단위의 제목을 보면 바로 건너뛰어서 다음 공부를 진행했다 논리 연산자라는게 어느 언어에서나 똑같이 작동하기 때문에 공부할 필요가 없다고 생각했기 때문이었다 하지만 다른 사람의 코드를 보다 보니 '이게 뭐지..?'싶은 코드들이 있었는데 역시나 이 포스팅의 시발점이었다 자바스크립트의 논리 연산자 자바스크립트에서는 논리 연산자의 피연산자가 3개 이상이 되면 그 때부터 다르게 작동한다 바로 참과 거짓 찾기를 수행하는데 아래의 예시를 보자 || 의 경우 ||의 경우 참을 찾을 때까지 연산을 수행한다 const value1 = false; const value2 = false; const value3 = true; console.log(value1|..
JavaScript 2020. 12. 24. 15:01

if, else 줄이기

if else 줄이기 어디서 읽었는진 모르겠는데 코딩 스타일에 관한 글을 읽다가 'if문과 else문을 난발하는 것을 굉장이 싫어한다'라고 하며 map에 데이터를 넣어두고 코드를 깔끔하게 하는 것을 보고 '오... 코드 깔끔한데?'와 막연하게 고수의 스타일같아서 따라해보기로 했다 왜 줄여야 하는가? 가독성 사방팔방으로 찾아봤지만 가장 큰 이유는 가독성인 것 같다 const input = 'c'; if(input==='a'){ console.log(1); } else if(input==='b'){ console.log(2); } else if(input==='c'){ console.log(3); } 보다는 const map = new Map(); map.set('a',1); map.set('b',2); m..
JavaScript 2020. 12. 23. 19:53

비트 연산자

비트 연산자 아래의 3개는 번역이 덜 되어있는데 >> , >>는 위와 같이 지정한 비트 수만큼 오른쪽으로 이동시키는데 이때 부호를 신경쓰지않고 새롭게 나타나는 비트들은 0으로 채운다 비트 연산은 기본적으로 2진수로 바꿔서 연산한 뒤 다시 10진수로 반환한다 & console.log(7^9);7과 9를 2진수로 바꾼 뒤에 &연산을 해주는데 대응되는 비트들이 같으면 1 그렇지 않으면 0을 반환한다 // 0111 // & // 1001 // 0001값은 1 | 대응되는 비트 중 하나라도 1이면 1 그렇지 않으면 0 console.log(7|9); // 0111 // | // 1001 // 1111값은 15 ^ 대응되는 비트가 서로 일치하지 않으면 1을 반환 일치하면 0 console.log(7^9); // 0..
JavaScript 2020. 12. 19. 02:27

history

싱글 페이지 만들기를 연습하는데 모르는 개념들이 있어서 기록 history객체는 읽기 전용 객체로 사용자의 방문 기록을 스택 형태로 저장하고 있다 기본 메소드 history.back() 인터넷 브라우저의 뒤로 가기 버튼과 동일 history.forward() 인터넷 브라우저의 앞으로 가기 버튼과 동일 history.go(n) 현재 페이지에서 n 위치만큼에 저장돼 있는 페이지로 이동한다 history.go(-1) 은 history.back() 와 같고 history.go(1) 은 history.foward()와 같다 pushState, replaceState 앞서 말했듯이 history는 기록을 가지고 있는 스택이다 페이지에 처음 들어서고 내가 이동한 만큼 history객체에 내 이동 기록이 쌓이고 쌓인 ..
JavaScript 2020. 12. 12. 04:10

slice() vs substring()

문자열 자르기 문자열을 자르는 방법에는 자주 쓰이는 두가지가 있다 slice(start,end), substring(start,end) sub substr도 있지만 mozilla에서는 언제든 없어질 수 있는 메소드라고 해서 사용하지 않는 것이 좋을 것 같다 slice(start,end) 음수를 사용하면 문자열의 길이에서 뺀 크기만큼 변환해서 반영된다 const s = '123456789'; console.log(s.slice(s.length-2)); console.log(s.slice(-2)); 위 코드에서 볼 수 있듯이 end 인덱스를 생략하면 start 인덱스부터 문자열의 마지막까지 잘라낸다 console.log(s.slice(3,1));// result : '' start인덱스가 end보다 크다면 ..
JavaScript 2020. 12. 3. 14:21

TDD-데이터 주입

데이터 주입 이제 +버튼을 클릭하면 카운트가 올라가고 뷰가 업데이트되게 구현했다 하지만 여기서 요구사항이 늘어난다면 어떻게 될까? 만약 값이 감소하는 버튼을 만들어달라고 한다거나 값이 제곱이되는 버튼, 2의 배수로 늘어나는 버튼... 데이터를 변경하는 기능이 추가될 때마다 각 모듈이 추가되어야한다 그렇게 모듈을 추가하게 되면 모듈간에 데이터를 공유해야하는데 그렇게 하기위해선 데이터를 주입해주어야한다 테스트 코드 describe('App.ClickCounter',()=>{ ... it('초기값을 주입하지 않으면 에러를 던진다', () => { }) ... ...ClickCounter describe의 내부에 데이터를 주입하지 않았을 때 에러를 발생시키는 테스트 코드를 먼저 작성..
JavaScript/Test 2020. 12. 2. 01:40

TDD-Event

이벤트 테스트하기 처음에 만들기로 한 프로그램은 클릭했을 때 숫자가 올라가게 하는 것이었으니까 클릭 이벤트만 구현하면 되겠다 테스트 코드 클릭 이벤트는 어떻게 테스트 해야할까? button 엘리멘트가 있어야할 것 같다 그럼 뷰에 데이터를 표시하기 위해 엘리먼트를 주입해서 데이터를 출력한 것과 비슷하게 clickCountView 모듈에 버튼 엘리먼트를 주입한 뒤에 거기에 클릭 이벤트를 구현하면 될 것 같다 clickCountView 모듈의 주입 구현은 beforeEach부분에 있으니 거기서 버튼 엘리먼트에 대한 의존성을 추가해보자 let clickCounter,updateElem,clickCountView,buttonElem; beforeEach(()=>{ clickCounter = App.ClickCou..
JavaScript/Test 2020. 11. 30. 17:25

TDD-spyOn

실행 확인 테스트 실질적으로 필요한 기능의 메소드는 다 작성했다 하나하나 호출하고 있을 순 없으니까 이 메소드를 한번에 담아서 실행할 메소드 또한 필요하다 이제 그 메소드인 increaseAndUpdateView를 테스트해야한다 테스트 코드 increaseAndUpdateView에 들어가는 increase와 updateView는 앞서 이미 테스트를 끝냈기 때문에 검증할 필요가 없다 그래서 우리는 increaseAndUpdateView안에서 이 메소드들이 호출되었는지만 확인하면 되는데 spyOn(Object,'method') 라는 함수를 사용한다 인자에서 볼 수 있듯이 첫 인자는 객체를, 두번째 인자로는 실행되었는지 확인할 메소드를 적어준다 (_자세한 설명은 이곳에 https://www.tutorialsp..
JavaScript/Test 2020. 11. 29. 03:07

TDD-error

에러 기대하기 저번 포스팅에서 clickCountView에 두개의 인자를 넣어서 테스트하는 코드를 작성했다 하지만 이 때 주입된 객체들이 제대로 되었는지 확인하는 테스트가 생략되었다 이번엔 잘못된 의존성 주입을 했을 때 에러값을 기대하는 테스트 코드를 작성해보고 에러를 던져보자 테스트 코드 describe('의존성확인',()=>{ it(('clickCounter가 없다면 에러'),()=>{ const clickCounter = null; const actual = ()=> App.ClickCountView(clickCounter,updateElem); expect(actual).toThrowError(); }); it('updateElem이 없다면 에러', ()..
JavaScript/Test 2020. 11. 27. 02:02