프론트엔드 기초 개념 1. 브라우저의 동작 순서 HTML 마크업을 처리하고 DOM 트리를 준비한다. CSS 마크업을 처리하고 CSSOM 트리를 준비한다. DOM과 CSSOM을 결합하여 렌더링 트리를 만든다. 렌더링 트리에서 각 요소의 최종 위치와 크기를 계산하는 과정을 거쳐 박스 모델을 생성한다. 화면에 페인팅한다. 2. CORS 자바스크립트는 필요한 데이터를 어디서든 받아올 수 있다. 웹페이지를 만든 서버는 물론이고 다른 서버에서도 당연하게 데이터를 받아올 수 있다. 이 때, 다른 도메인으로 리소스를 요청하는 것을 이라고 한다. 그런데 교차 출처 HTTP 요청은 보안 문제를 일으킬 수 있다. 악의적인 의도를 가진 사람들이 이 기능을 이용하여 사용자의 개인 정보를 훔치는 등 데이터를 훔칠 수 있기 때문이다. 그래서 브라우저들은 원칙적으로 정책을 통해 이런 요청을 제한한다. 이 정책을 라고 부른다. 따라서, 기본적으로 자바스크립트는 자신과 같은 출처에서만 데이터를 받아올 수 있다…

호이스팅 이전에 변수 호이스팅 관련하여 정리한 적이 있었는데, 자바스크립트 개념을 다시 공부하면서 이해도가 달라져 다시 정리해야할 필요성을 느꼈다. 이번에는 실행 컨텍스트의 관점에서 정리를 해보았다. 1. 실행 컨텍스트 먼저 자바스크립트의 동작을 알기 위해서는 실행 컨텍스트를 알아야한다. 실행 컨텍스트 관련해서는 따로 정리를 했다. 2. 실행 컨텍스트와 호이스팅 위의 코드는 호이스팅에 의해 에러가 아니라 라는 값이 출력된다. 2-1. 자바스크립트 엔진의 동작 순서 자바스크립트 엔진은 콜 스택을 통해 코드 실행을 한다. 콜 스택은 LIFO 방식으로 동작하기 때문에 가장 마지막에 푸시된 컨텍스트가 가장 먼저 실행된다. 엔진이 코드를 읽어 들이면서 전역 실행 컨텍스트를 생성하고 콜 스택에 올린다. 콜 스택이 전역 실행 컨텍스트를 실행하던 도중, 함수 호출문을 만나면 해당 함수의 지역 실행 컨텍스트를 생성하여 콜 스택에 푸시한다. 엔진은 전역 실행 컨텍스트 실행을 멈추고 지역 실행 컨텍스…

소프트웨어 테스트와 TDD 이미지 출처: (https://www.fitaacademy.in/blog/why-do-we-need-software-testing/) 1. 소프트웨어 테스트 소프트웨어 테스트라는 것은 소프트웨어가 정상적으로 동작하는지 확인하는 것을 의미한다. 이전에는 개발자는 개발만하고 테스팅 과정에는 큰 관여를 하지 않았지만, 최근에는 개발자가 자동화 할 수 있는 소프트웨어 테스트를 구현하고 실행하는 것이 보편화 되어가고 있다. 코드를 통해 테스트를 자동화한다면 이점이 생긴다. 사람이 실행하는 것 보다 빠르다. 정해진 스크립트에 의해 일관성있게 동작하기 때문에 휴먼 에러를 기피할 수 있다. 피드백을 빠른 주기로 개발중에 받을 수 있다. 따라서, 소프트웨어 테스트를 통한 테스트의 자동화는 개발자의 생산성을 향상시킬 수 있다. 1-1. Unit Test 유닛 테스트는 테스트중에 가장 Low Level이고 가장 작은 범위를 테스트한다. 개별 함수, 메서드, 클래스, 컴포넌…

원티드 프리온보딩 프론트엔드 인턴십 4주차 회고 4주차에는 코드 리뷰, 소프트웨어 테스트, 실행 컨텍스트와 클로저에 대해 배웠다. 1. 코드 리뷰 1-1. Default Value 설정 함수를 호출할 때 기본값을 설정하는 것 보다 Parameter의 기본값을 설정하여 사용하는 것이 함수 호출 시에 매번 기본값을 설정하지 않아도 되고 코드 가독성에도 좋다. 1-2. Debounce value vs function Debounce를 구현한 로직이 onChange를 통한 값의 변화를 Debounce 시키는 방법과 요청을 보내는 함수 자체를 Debounce 시키는 방법으로 나뉘었었다. 이 중 더 효율적인 방법은 함수 자체를 Debounce 하는 방법이다. value를 debounce 하는 방법은 state를 하나 더 사용해야한다. 불필요한 렌더링이 일어난다. 연쇄적인 변화 방법을 사용하기 때문에 로직 파악이 어려워진다. 목적 자체가 결국 함수의 실행을 debounce 처리하는 것이기 때문…