전체 글
-
원티드 프리온보딩 프론트엔드 챌린지 사전미션 [테스트]카테고리 없음 2023. 7. 26. 19:27
유닛테스트 vs 통합테스트 vs E2E테스트 유닛테스트란? 실행 가능한 유닛 단위 테스트 유닛 테스트는 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다. 즉, 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차를 말한다. - 위키백과 우리가 작성한 코드가 의도한 대로 작동하는지 검증하기 위한 절차로 문제를 방지하는 기능도 있지만, 부수적으로 코드 변경에 의한 사이드 이펙트를 최대한 줄일 수 있는 예방책이 되기도 한다. 또한, 서비스 요구사항 변경이나 리팩토링으로 인해 코드 수정이 필요한 상황에서 더 유연하고 안정적으로 대응할 수 있게 되고, 테스트 코드를 작성하는 과정에서 자연스럽게 코드의 모듈화를 고민하게 되는 등의 부수적인 이점들도 가지고 있다. 하나..
-
require와 import차이점카테고리 없음 2023. 7. 26. 18:19
require, import란? 모듈을 로드하는데 사용되는 두가지 다른 문법이다. require (Node.js 환경) Node.js에서 'require'는 모듈을 로드하는데 사용되는 키워드이다. CommonJS방식을 따르며, Node.js에서 주로 사용된다. 기본적으로 동기적으로 동작하며, 로드한 모율 객체를 반환한다. 서버 측 개발을 할 때, Node.js에서 모듈을 로드하고 재사용해야 할 때 사용한다. CommonJs란? Node.js 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템 이다. 모듈을 외부에서 사용할 수 있도록 내보낼때는 exports, module.exports와 같은 키워드를 사용하며 외부에서 모듈을 불러올 떈ㄴ required를 사용한다. import(모던 Java..
-
모던 자바스크립트 (스터디) 12.1~4장[함수]카테고리 없음 2023. 7. 25. 23:40
함수 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. // f(x, y) = x + y function add(x, y) { return x + y; } // f(2, 5) = 7 add(2, 5); // 7 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 한다. 또한 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구..
-
모던 자바스크립트 (스터디) 11장카테고리 없음 2023. 7. 25. 19:15
원시 값과 객체의 비교 원시 타입의 값 객체(참조) 타입의 값 변경 불가능한 값 객체는 변경 가능 한 값 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달 이라 한다. 원시값 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. 변수와 값은 구분해서 생각해야 한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙..
-
모던자바스크립트 22장 this카테고리 없음 2023. 7. 25. 15:02
전역공간(브라우저) window(전역객체) 전역공간(Node.js) global 일반 함수 호출 시 window(전역객체) 메서드 호출 시 메서드 호출 주체 (마침표(.)연산자 앞에 기술한 객체) 생성자 함수 호출 시 생성자 함수가(미래에) 생성할 인스턴스 this란? 자신이 속한 객체를 가리키는 변수 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arhuments객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments객체를 지역 변수처럼 사용..
-
HTTP 메시지 구조카테고리 없음 2023. 7. 24. 23:01
HTTP란? 인터넷에서 데이터를 주고받을 수 있는 프로토콜 프로토콜은 규칙이라고 생각하면되며, 규칙을 정해두었기 때문에, 모든 프로그램이 이 규칙에 맞춰 개발해서 서로 정보를 교환할 수 있게 된 것 이다. HTTP는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. 주로 TCP를 사용하고 HTTP/3부터는 UDP를 사용하며, 80번 포트를 사용한다. 1996년 버전 1.0, 그리고 1999년 1.1이 각각 발표되었다. 위키백과 HTTP 메시지란? 서버와 클라이언트 간에 데이터가 교환되는 방식이다. 메시지 타입에는 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔하는 요청, 요청에 대한 서버의 답변인 응답이 있다. HTTP 요청(Request) 메시지 구조..
-
페이지 라우팅(Page Routing)카테고리 없음 2023. 7. 22. 19:38
router이란? 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 route + ing 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 페이지 라우팅 이란? 단순히 어떠한 요청에 따라서 어떤 페이지를 돌려줄지 일컫는 말 MPA vs SPA 리액트에서는 MPA(Multi Page Application)가 아닌 SPA(Single Page Application)를 따르게 된다. MPA는 서버에 페이지 자체를 요청해서 mypage.html을 받아서 보여주게 되는데 SPA는 서버에게 포스트를 요청하는게 아닌 리액트가 페이지를 업데이트 시킨다. 서버와는 데이터만 주고받게 된다. 리액트는 단일페이지(SPA)로 구성되고 CSR로 페이지를 렌더링 한다. CSR(Client Side Rend..
-
캐시카테고리 없음 2023. 7. 21. 10:58
캐시란? 캐시는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 위키백과 장점 캐시에 데이터를 미리 복사해 놓으면, 계산이나 접근 시간 없이 더 빠른 속도로 데이터를 접근 할 수 있다. 반복적으로 동일한 결과를 돌려주는 경우(특정 이미지 or 썸네일) 사용하거나 접근 시간에 비해 원래 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고자 하는 경우에 사용한다. 단점 메모리 저장공간은 속도가 빠를 수록 용량이 작고 가격이 높다. 그래서 가격때문에 캐시에 저장할 적은 양의 정보를 잘 선택하는 것이 비용도 절약하고 효율..