javascript

💪REST API 설계 원칙

- REST: URI를 통해 자원을 표시하고, HTTP Method를 이용하여 해당 자원의 행위를 규정하여 그 결과를 받는 것을 의미한다. - REST API: REST를 기반으로 서비스 API를 구현한 것을 의미한다. - 자원(URI), 행위(HTTP 표현 메서드), 표현(페이로드)의 세가지 요소로 구성됨 👊 REST의 특징 1) Uniform: URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍쳐 스타일을 의미한다. 2) Stateless: 작업을 위한 상태정보를 따로 저장하고 관리하지 않으며, 서버로 들어오는 요청만 단순히 처리하면 된다. 3) Cacheable: HTTP라는 기존 웹 표준을 그대로 사용하고 있기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용할 ..

[JavaScript] addEventListener에서의 this 바인딩

오늘은 20 web Projects중 hangman을 VanillaJS 로 구현하고, Component형식으로 바꾸던 와중. this바인딩 때문에 고생했던 기억을 이겨내고자 정리를 해보려고한다. Code 먼저 html에서 module type으로 index.js를 받아오기로 했다. // index.js import App from './App.js'; const app = new App(document.querySelector('.App')); window.addEventListener('keydown', app.handleKeyDown); 이렇게 index.js 에서 window.addEventListner를 호출하고, 'keydown' 이벤트가 일어나면. App.js의 handleKeyDown 메소드..

[JavaScript] JavaScript 로 TDD 및 테스트 코드 작성 하기 (cypress)

👊 오늘의 공부 - Cypress 강의 듣기 => 자바스크립트로 E2E 테스트 코드를 작성함으로써 사용자 중심의 흐름으로 ‘검증’ 가능한 앱을 만들 수 있다. *cypress 깔고 열기 npm install cypress --save-dev ./node_modules/.bin/cypress open 1)Counter 앱 테스트 코드 작성 2)계산기 앱 테스트 코드 작성 => 테스트 코드의 두려움 극복하기 -> 자신감으로 바꾸기 💪 테스트를 작성해야 하는 이유 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위 DB에 데이터를 입력하는 API를 개발 -> API 호출 -> DB 값 검증 디자인 시안에 맞게 HTML/CSS를 작성 -> 브라우저에서 실제 렌더링한 결과를 확인 새로운 기능을 추가하기 위..

JavaScript로 알고리즘 준비하기(1) - 정규 표현식(문자열 갖고놀기)

알고리즘을 풀면서 가장 필요했던 부분들과 부족한 부분들 정리를 해볼까 한다. (1) 정규 표현식 정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식이다. (이런걸 형식 언어, formal languange라고 합니다.) 따라서 문자열 비교나 바꾸기 등에 많이 사용되서 알고리즘에 매우 효율적이라고 생각한다. 정규 표현식을 만드는 방법 정규 표현식 리터럴 const exam = /abcd/ RegExp 객체의 생성자 호출 const exam = new RegExp('abcd') 정규 표현식의 사용법 (리터럴) : /패턴/플래그 - 슬래시 사이에 매칭시킬 패턴을 써준다. - 슬래시 다음에 옵션을 설정하는 플래그를 써준다. 1) 정규표현식 패턴 - 정규 표현식의 패턴은 크게 세 가지 분류로 나뉜다. 1...