주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

실행 컨텍스트는 실행한 코드에 제공 할 환경 정보들을 모아놓는 객체라고 생각하자. 콜 스택에 쌓아서 전체 코드를 관리하고 있어서 환경과 순서를 보장한다. 동작 실행 컨텍스트는 크게 3가지 동작을 한다. 내부 환경 정보 기록: 실행컨텍스트가 활성화 되는 시점(실행)에 선언된 변수를 수집한다. 외부 환경 정보를 구성한다. this 값을 설정하는 동작 구성 수집 정보 - 자바스크립트 엔진이 활용할 목적으로 생성할 뿐, 개발자가 코드에 접근 할 수 없다. Variable Environment 선언 시점의 Lexical Environment의 스냅샷이므로 변경사항이 반영되지 않는다. Variable Environment를 생성하여 정보를 담고 복사하여 Lexical Environment를 만든다. Lexical ..

사용자 동작을 나열하며 간략히 공부해보자. >>> 사용자 동작 시작 1. https://okayoon.tistory.com/ 를 검색한다. 2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다. - 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다. 3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다. >>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작 4. DOM Tree 구축을 위해 HTML을 파싱한다. - DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 ..

브라우저 구조에 대해 간략히 공부해보자. 1. User Interface (사용자 인터페이스) 사용자가 접근할 수 있는 모든 영역을 말한다. 즉, 페이지를 보여주는 창(사이트)을 제외한 나머지 모든 부분을 말한다. ex: 주소표시줄, 이전이나 다음 혹은 새로고침 버튼등. 2. Browser Engine (브라우저 엔진) User Interface와 Rendering Engine 두 사이의 동작을 제어한다. (연결 부분이 된다.) 자료 저장소(Data Storage)를 참조하고 있어서 로컬에 데이터 저장 및 읽기 등의 작업을 할 수 있다. 3. Rendering Engine (렌더링 엔진) 웹 서버로 부터 받은 자원을 브라우저 상에 표시하기 위한 작업을 한다. 즉, *HTML과 CSS을 파싱하는 동작을 한..

기존 작업자가 작업해 둔 코드가 있었고, 요구 조건에 따라 이슈가 전달되어왔다. 기존 코드 function addComma(value) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 요구 조건은 아래와 같았고.. 1. 숫자 천 단위마다 콤마 추가 2. 소수점에서는 콤마 추가하지 않아야 함 기존 코드에서는 소수점에서도 콤마가 추가되고 있었다. function addComma(value) { return value.toString().replace(/\B(? 잘되는 듯 했지만, 크로스브라우징 이슈가 있었다. safari에서 흰페이지로 뜨는 것이었다. 두둥.. 그리고 SyntaxError: Invalid regular expression..

할일 목록을 만들면서 Vue3 배워보자 - 01 할일 목록을 만들면서 Vue3 배워보자 - 02 > 할일 목록을 만들면서 Vue3 배워보자 - 03 이번에는 Store를 통해 작업을 진행해보겠습니다. 기존에는 vuex를 사용해서 작업을 했었는데, vue3에서는 공식적으로 pinia 라이브러리를 사용하기를 권고하고 있습니다. Pinia - Vuex를 대체할 새로운 Store! 사실 Pinia 는 Vue의 코어팀에서 활동하는 Eduardo 가 Vuex 5 의 RFC 에 따라 Vuex 5 의 구현체로 Pinia 를 작성한 것이다. 공식문서에 따르면 Vue 의 철학을 충실하게 따르면서 Pinia 를 개발중이며, 추후에 Pinia 와 Vuex 5 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 ..

할일 목록을 만들면서 Vue3 배워보자 - 01 > 할일 목록을 만들면서 Vue3 배워보자 - 02 할일 목록을 만들면서 Vue3 배워보자 - 03 먼저 Store 없이, emits을 통해서 데이터 통신하는 방식으로 개발해보겠습니다. Style 영역은 01과 달라진 부분이 없으므로 코드에 나타내지 않겠습니다. 기능 개발 - 01 등록하기 views/App.vue 데이터 정의는 ref를 사용합니다. 1. App.vue가 가장 최상위 파일이므로 todoList 데이터를 만들어줍니다. TodoItem에 대한 interface도 작성해줍니다. 이때, status는 string으로 해도되지만 'active'와 'clear'만 사용할 것이므로 문자열로 적어줍니다. (vue에서 props받을 때, validator ..