본문 바로가기

전체 글41

[React] 프론트엔드 테스트와 의존성 분리 프론트엔드와 테스트 대부분 웹 프론트엔드 개발자들은 테스트 코드의 중요성에 대해서 어렴풋이 알고는 있다고 생각합니다. 다만, 아래와 같은 이야기들로 테스트 코드 관련 담론을 무마하는 경향이 있는 것 같습니다. 프론트엔드는 코드 변경이 빈번하다던데, 웹 프론트엔드에서 굳이 테스트 코드를 짜야하나? (반박) 테스트 코드를 작성하면 변경사항이 기존 기능에 영향을 미치는지 빠르게 확인할 수 있다. (반박) 코드 변경에 따른 예상치 못한 버그를 사전에 방지할 수 있다. 프론트엔드 개발자가 직접 UI를 확인하면서 개발할텐데 테스트 코드를 굳이 작성할 필요는 없지 않나? (반박) 프론트엔드 개발자의 수동 테스트도 중요하지만, 테스트 코드는 자동화된 테스트를 통해 일관된 품질을 유지하는 데 도움이 된다. (반박) 수동.. 2023. 11. 29.
[JavaScript] 비동기 프로그래밍 자바스크립트 엔진은 작성한 코드를 싱글 스레드, 즉 하나의 메인 스레드에서 순차적으로 실행합니다. 이는 개발자가 명시적으로 멀티스레딩 방식의 코드를 작성하지 않는다면, 코드는 싱글 스레드에서만 실행된다는 의미입니다. 그러나 자바스크립트에서는 비동기 프로그래밍을 지원하기 때문에 CPU 연산이 많이 필요한 작업이 아니라면, 복잡한 멀티 스레딩 방식으로 코드를 작성할 필요가 없습니다. 자바스크립트가 처음 등장했을 때는 콜백(callback) 방식의 비동기 프로그래밍만 지원했습니다. 콜백 함수 (callback function) 콜백 함수는 특정 함수가 끝나고 나서 실행되는 함수입니다. function longWork() { // 비동기로 실행하는 함수 setTimeout setTimeout(() => { co.. 2023. 11. 26.
[네트워크] 기초 용어 정리 클라이언트와 서버 클라이언트 서버 모델(client-server model)은 서비스의 요청자인 클라이언트와 서비스 자원의 제공자인 서버 간 작업을 분리해주는 분산 애플리케이션 구조이자, 네트워크 아키텍쳐를 의미합니다. 클라이언트는 서비스를 사용하는 사용자, 또는 사용자의 단말기를 의미합니다. 클라이언트는 서버에게 서비스를 요청합니다. 서버란 서비스를 제공하는 컴퓨터이며, 다수의 클라이언트를 위해 존재하기 때문에 일반적으로 매우 큰 용량과 성능을 가지고 있습니다. HTTP 요청 메서드 HTTP에는 주어진 자원에 대해 어떻게 처리할지에 대한 요청 메서드들이 정의되어 있습니다. GET GET 메서드는 특정 자원의 표현을 요청합니다. GET을 사용하는 요청은 데이터만을 검색해야 합니다. POST POST 메서.. 2023. 11. 25.
[JavaScript] 클로저(Closure) 자바스크립트에서 클로저는 어떤 함수와, 그 함수가 선언된 렉시컬 환경의 조합입니다. 다만 이렇게 말하면 조금 추상적이라 이해하기가 쉽지 않습니다. 좀 더 말을 정리해본다면, 클로저란 상위 함수보다 하위 함수가 더 오래 살아있는 경우를 의미한다고 할 수 있습니다. 클로저의 개념 function getNumber() { const number = 5; function innerGetNumber() { return number; } return innerGetNumber; } const runner = getNumber(); console.log(runner()); // 5 위 코드를 보면, innerGetNumber 함수는 상위 실행 컨텍스트를 참조할 수 있기 때문에 number 변수를 발견할 수 있습니다... 2023. 11. 23.