Javascript12 [JavaScript] ReactJS: Create React App node js를 다운로드 받아 설치하기 https://nodejs.org Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org styles.css를 import: styles.css에서 작성한 서식이 index.js 전체에 적용된다 => 바람직하지 않음 🤔 css 모듈화🤓: style들도 modular가 될 수 있다! 1) Button.module.css 파일 만들기 (파일명을 'ㅇㅇㅇ.module.css'로) 2) Button.js에서 import하여 적용 3) style.btn 서식을 다른 파일에서도 사용할 수 있다! 2024. 10. 25. [JavaScript] ReactJS: Props / React.memo 컴포넌트 = 함수대체로 맞는 말함수형 컴포넌트는 React에서 가장 기본적인 컴포넌트 유형 중 하나 React 컴포넌트는 JavaScript 함수처럼 작동 props를 매개변수로 받아 UI를 반환 Btn 컴포넌트는 2개의 props를 받음: {text, big} App 컴포넌트는 3개의 Btn 컴포넌트를 사용하여 3개의 버튼을 생성 App 컴포넌트는 Btn 컴포넌트를 재사용하여 여러 버튼을 쉽게 생성할 수 있음 부모 컴포넌트 변경이 자식 컴포넌트에 어떤 영향을 미칠까? : 기본적으로 React는 부모 컴포넌트가 재랜더링(re-rendering)되면 자식 컴보넌트들도 전부 다시 렌더링 React.memo - 이전 props와 새로운 props를 비교하여 동일한 경우 해당 컴포넌트를 다시 렌더링하지 .. 2024. 10. 24. [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: STATE(1) ReactJS에서 'State'State(상태): 컴포넌트 내부에서 관리하는 데이터 / 컴포넌트의 동적 상태를 반영 / 변경 가능 Props(속성): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값 / 컴포넌트 외부에서 설정 / 읽기 전용 ex. '버튼 클릭 수(counter)'를 state로 관리할 수 있다 1. 수동 렌더링: 새롭게 바뀐 부분(클릭 수)만 rendering - 새 Container 컴포넌트를 생성하는게 X - 전체를 재생산하지 않고, 변경된 부분만 업데이트한다Container: JSX로 정의된 함수형 컴포넌트 2. 자동 렌더링: 데이터가 바뀔 때마다 Container를 rerendering & refresh UI(권장) - 위 방법의 단점: 데이터가 바뀔때마다 렌더링 함.. 2024. 10. 21. [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. 이전 1 2 다음
