Nomad Coders23 [JavaScript] ReactJS: STATE(2) 💻미션: Unit Conversion(minutes -> hours) App 만들기💻 DOM(Document Object Model) - 웹페이지 HTML elements를 트리 구조로 표현한 것 - DOM 구조 내 원하는 element에 접근해서 수정 가능 Virtual DOM - 실제 DOM의 복사본 - JavaScript의 메모리에 저장된 JavaScript 객체에 불과: 실제 UI에 영향을 미치지 못함 - Reconciliation(재조정): 변경된 element만 실제 브라우저 화면에 적용 - 항상 2개의 가상DOM이 존재: 변경 이전 & 변경 이후 - 매번 DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 그릴 필요가 없음 https://ko.legacy.reactj.. 2024. 10. 22. [JavaScript] ReactJS: Basics 💻미션: 클릭하면 클릭 수 세는 버튼 만들기 💻 Vanilla HTML 1) HTML 만들기2) JavaScript에서 가져오기3) listen for the event4) update the data & HTML ReactJS:애플리케이션이 interactive하도록 만들어주는 라이브러리 ReactDOM(Document Object Model) : 모든 React 요소들을 HTML body에 둘 수 있도록 해주는 라이브러리 (React 애플리케이션을 브라우저에 렌더링) (React elements -> HTML) 1) ReactJS, ReactDOM import하기 2) body 안에 empty 만들기: 나중에 여기서 ReactDOM이 React elements를 가져다놓는다 3) .. 2024. 10. 21. [JavaScript] 크롬 앱 만들기: Weather 1) 현재 위치 확인2) https://openweathermap.org/ 에서 API 받아오기 3) fetch로 브라우저에 정보 보내기 fetch()네트워크 요청을 수행하기 위해 사용하는 최신 API Promise를 반환 fetch()가 서버에 GET 요청 -> 서버 응답 -> JSON으로 파싱 2024. 9. 11. [JavaScript] 크롬 앱 만들기: To Do List JSON.stringify()JavaScript 객체나 array를 문자열로 변환 JSON.parse()문자열을 JavaScript 객체로 변환 array 안에 있는 item에 대해 각각 function을 실행할 수 있다 JavaScript 객체(Object)'key-value pair'로 구성된 데이터 구조 arrow function filter()array 내의 요소를 조건에 따라 필터링하여 새로운 array를 반환 ex) function myFilter(item){return item !== 3} : 아이템이 3이 아니면 true를 반환(3이 아니면 array에 그대로 남겨두고 3이면 제외함) filter를 이용하여 ToDoList 각 항목의 해당 id를 제외하고 array를 만들어.. 2024. 9. 11. [JavaScript] 크롬 앱 만들기: Quotes and Backgrounds 랜덤 이미지를 출력하는 작업은 html에서 할 수 없다JavaScript에서 이미지를 만들고 이걸 html에 추가해야! 2024. 9. 10. [JavaScript] 크롬 앱 만들기: CLOCK setInterval()일정한 시간 간격마다 함수를 반복적으로 실행(주기적인 작업) ex) 타이머, 주가 업데이트 등 setTimeout()일정 시간 후에 어떤 동작을 수행할 때(특정 시간 후 한 번만 함수를 실행하도록 예약) ex) 페이지가 로드된 후 몇 초 뒤 경고메세지 보내기 padStart()문자열이 두 자리 수가 되도록 하는 메서드 ex) 2:12 -> 02:12 2024. 9. 10. 이전 1 2 3 4 다음 반응형
