반응형
목록
분류 전체보기 (292)
[꼼꼼한 개발자] 꼼코더
[React] - [처음 만난 리액트] - 09. JSX란?, JSX의 정의와 역할 (React.createElement 함수란?)
🧹 두서없이 적는 쉬운 정리 1. JSX는 Javascript에 XML/HTML을 추가한 JS 확장 문법 2. JSX는 내부적으로 XML/HTML 코드를 React.createElement() 함수를 통해 자바스크립트로 변환한다. 3. React.createElement() 함수 호출 한 결과는 JS 객체가 나온다. 4. 리액트에서 이 객체를 '엘리먼트'라고 부르고 이 객체로 DOM을 만드는 데 사용하고 항상 최신 상태로 유지한다. 5. React.createElement() 함수 파라미터는 3가지[ type(엘리먼트의 유형), props(속성) , children(엘리먼트의 자식 엘리먼트)] 6 JSX 를 사용하는 것은 필수는 아니다 React.createElement() 를 사용해서 개발할 수 있기 ..
[React] - [처음 만난 리액트] - 08. 리액트 연동하기 (create-react-app 사용, create-react-app이란?, CRA)
🧹 두서없이 적는 쉬운 정리 1. 새로운 웹사이트를 만들 때 리액트를 적용하려면 create-react-app이라는 것을 사용한다. 2. create-react-app은 프로젝트를 생성해 주는 도구다. 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정을 해준다. 3. create-react-app을 실행하기 위해서는 Node.js 와 npm이 필요하다. 4. 실행 순서 (npx create-react-app [프로젝트 이름] -> cd [프로젝트 이름] -> npm start) (자세한 내용은 아래 참고) 📖 이 전 내용 이 전 글에서는 기존에 있는 웹사이트의 리액트를 적용하는 방법을 사용했다. 하지만 새로운 웹사이트를 만들 때는 처음부터 리액트 가 적용되어 있는 상태로 개발을 시작한다. 그래서 ..
[ANKI] - 26. React 장점 4가지(06.29)
🙋🏻♂️ 문제 ✅ 정답 💡 느낀 점 재사용성, 렌더링 속도 부분이 매우 큰 장점이라 생각이 든다.
[React] - [처음 만난 리액트] - 07. 직접 리액트 연동하기 (기존 웹 사이트에 직접 리액트 적용하기, create-react-app 미사용)
🧹 두서없이 적는 쉬운 정리 1. 기존 웹 사이트에서 React를 추가하려면 HTML 코드 속에 DOM Container와 리액트의 자바스크립트 파일들을 추가해야 한다. 2. 컴포넌트 작성 후 리액트 DOM의 reder() 함수를 사용해서 리액트 컴포넌트를 DOM Container에 렌더링 한다. 3. HTML에서 컴포넌트를 불러오고 실행하면 끝 (자세한 내용은 아래 참고) 📺 HTML과 CSS 리액트로 연동하기 전 HTML과 CSS를 이용하여 간단한 웹 페이지를 만들어보자. ✋🏻 React 추가하기 HTML에 DOM이 들어있는 곳인 DOM Container를 추가한다. 다른 말로는 Root DOM Node라고 한다.(Viturl DOM의 시작점) 여기에서는 'root'라는 ID를 가진 태그를 추가했다...
[ANKI] - 24. JSX의 장점(06.27)
🙋🏻♂️ 문제 ✅ 정답 💡 느낀 점 확실히 코드가 간결해지는 장점이 여러 효과를 불러오기 때문에 무시 못 한다!
[React] - [처음 만난 리액트] - 06. 리액트의 장점과 단점 (렌더링, DOM, 컴포넌트, 모바일 웹 개발)
🧹 두서없이 적는 쉬운 정리 1. DOM은 웹 페이지를 정의하는 하나의 객체, 쉽게 말해 하나의 웹 사이트의 정보를 모두 담고 있는 큰 그릇. 2. 리액트는 빠른 화면 내용을 변경하기 위한 가상의 DOM인 Virtual DOM을 사용한다. 3. 화면이 업데이트된다는 말은 곧 DOM이 수정된다는 말 4. 리액트는 화면 업데이트 시 DOM을 직접 수정하지 않고 업데이트 해야 할 최소한의 부분만을 찾아서 업데이트한다. 5. 컴포넌트는 구성 요소라는 뜻이며 하나의 컴포넌트는 여러 컴포넌트로 조합할 수 있다.(마치 레고) 6. 컴포넌트는 블록 형식이라 재사용성이 뛰어나다 7. 리액트의 장점 : 빠른 업데이트 & 렌더링 속도, 컴포넌트 사용으로 인한 뛰어난 재사용성, 활발한 커뮤니티, 모바일 웹 개발 가능) 8. ..
[React] - [처음 만난 리액트] - 05. 리액트란? (리액트는 무엇인가?, React란?)
🧹 두서없이 적는 쉬운 정리 1. 라이브러리란 : 자주 사용되는 기능들을 모아놓은 것, 개발자가 제어권을 가지고 있다. 2. 사용자 인터페이스(UI) : 사용자와 컴퓨터 중간에 입력과 출력을 제어해 주는 것 3. 리액트는 '자바스크립트 UI 라이브러리'이다 4. 리액트는 spa 를 쉽고 빠르게 만들 수 있도록 해주는 도구이다. (자세한 내용은 아래 참고) 🤷🏻 리액트란? 공식문서에는 '사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리'라고 정의되어 있다. 📖 라이브러리란? 자주 사용되는 기능들을 정리해 모아 놓은 것을 의미한다. 라이브러리(일상, 프로그래밍) 일상 : 도서관에 수많은 책들이 정해진 기준에 따라서 잘 정리되어 꽂혀있는 걸 볼 수 있다. 프로그래밍 : 특정 프로그래밍 언어에서 자주 사용..