본문 바로가기

Record/WIL3

WIL(20230410 ~ 20230416) Virtual DOM, props, state DOM DOM은 HTML 문서를 객체로 표현한 것이다. DOM은 HTML 문서를 트리 구조로 표현하며, 각각의 노드는 객체이다. DOM은 HTML 문서의 구조를 표현하고, CSS를 통해 스타일을 지정하고, JavaScript를 통해 동적으로 문서를 조작할 수 있다. Virtual DOM Virtual DOM은 DOM의 추상화된 개념으로, 실제 DOM에 접근하지 않고 메모리 상에서 빠르게 업데이트를 처리할 수 있다. Virtual DOM은 DOM의 상태를 가지고 있으며, 이를 통해 DOM의 변경 사항을 추적할 수 있다. 그리고 실제 DOM에 접근하지 않기 때문에 빠르게 업데이트를 처리할 수 있다. props란? props란 Component에서 Component로 전달하는 데이터를 말한다. props를 사.. 2023. 4. 17.
WIL(20230403 ~ 20230409) JavaScript의 ES란, ES5/ES6 문법 차이 # JavaScript의 ES란 ES란 ECMAScript의 줄임말로써, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 의미한다. 현재 사용하고 있는 ES6는 ES 규격의 6번째 버전이라고 보면 된다. 즉 ECMA 스크립트는 규격, 표준 즉, 스펙을 말한다. # ES5/ES6 문법 차이 먼저 두 문법 차이를 다루기 전에 왜 과거 문법에 대해서 알아야 하는지 말해보자면 1. 과거의 코드를 최신 문법으로 리팩토링 할 수 있는가? 2. 구글링한 코드의 동작을 해석해서 유지 보수 할 수 있는가? 이와 같다고 볼 수 있다. 1. let, const ES5의 var 키워드는 암묵적 재할당이 가능했다. 이러한 단점을 보완하기 위해 블록 레벨 스.. 2023. 4. 10.
WIL(20230327 ~ 20230402), 미니 프로젝트(오늘의 꿀) 기간 : 2023.03.27 ~ 2023.03.30 프로젝트명 : 오늘의 꿀 프로젝트 설명 : 오늘의집에서 사용해본 아이템을 추천하는 웹페이지 # 구현한 기능 1. 사용자가 상품 URL, 가격, 카테고리, 후기 입력 후 등록하기 버튼 클릭 시 서버와 연결해서 db에 저장 후 저장된 db를 웹페이지에 HTML 카드로 표현 2. 가격 및 카테고리 조건에 따라 검색 기능 구현 3. 구매버튼 클릭 시 해당 카드 제품의 구매 링크로 이동 4. 카드 내에 하트 버튼 클릭 시 누른 횟수만큼 하트 숫자가 1씩 카운트 되는 기능 구현 5. title 배너 클릭 시 localhost 초기 페이지로 이동 # 사용한 라이브러리 flask, pymongo, dnspython, requests, bs4 # 내가 구현한 기능 1... 2023. 3. 30.