본문 바로가기
728x90
반응형

프로그래밍&IT/React & CSS

 (38)
[Fast Campus , React] 5. JSX , TicTacToe 앱 만들기 (1) JSX (Javascript Syntax Extension) 자바스크립트 확장 문법 리액트에서는 이 JSX를 이용해서 UI가 보이는 모습을 표현해 준다. JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현할 수 있다 JSX 사용이 의무는 아니지만, 자바스크립트 안에서 UI 작업을 하는데 편리하기에 리액트를 사용할 때는 거의 모든 사람들이 JSX를 사용한다. 원래 리엑트에서 화면을 그리는 방식 React.createElement API를 사용해 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장. 그리고 ReactDom.render 함수를 사용해서 실제 브..
[Fast Campus , React] 4. SPA React 파일 렌더링 순서 현재 App.js 파일의 소스코드를 변경하면 변경한 부분이 화면에 적용이 된다. 이게 어떤 순서대로 실행되고 있는지 봐보면, public/index.html HTML 템플릿파일. root를 div로 선언해 놓음 You need to enable JavaScript to run this app. 웹브라우저의 렌더링 소스 (html)를 보면 root가 App의 내용이 추가되어 있음 src/index.js 자바스크립트 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아주며, 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다 onst root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); M..
[Fast Campus , React] 3. 프로젝트 설치와 구조 원래 리액트 앱 설치 위해서 필요했던 것들. Webpack? 오픈소스 자바스크립트 모듈 번들러. 여러 개로 나뉘어 있는 파일들을 하나의 자바스크립트 코드로 압축, 최적화하는 라이브러리 Babel? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서, 최신 자바스크립트 문법을 구형 브라우저에서도 쓸 수 있게 변환시켜 주는 라이브러리 이젠 npx create-react-app [폴더 이름] 으로 쉽게 설치 가능 리액트 앱을 만들 폴더 생성 터미널 실행 npx create-react-app ./ (현재 디렉터리) npx? Node.js를 통해 Node패키지 실행을 도와주는 도구. create-react-app 이란 npx 레지스트리에 있는 패키지를 react-todo-app폴더에서 실행해서 리액트를 설..
[Fast Campus , React] 2. 가상돔 Virtual Dom , 가상돔? 브라우저가 그려지는 원리 및 가상돔 React의 주요 특징 중 하나는 가상돔을 사용한다는 것. 왜 가상돔을 사용하는지 알기 위해 브라우저가 렌더링 하는 과정을 알아봐야 한다. - 돔 (DOM, Document Object Model, 문서객체) html, head, body같은 태그들을 javascript가 이용, 수정할 수 있는 객체 의미 - 가상돔. Virtual Dom 실제 DOM에서 처리하는 방식이 아닌, 가상돔과 메모리에서 미리 저장,처리하고 실제 DOM과 동기화하는 개념 웹 페이지 빌드 과정 (Critical Rendering Path, CRP) 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰포트에 표시하는 과정 - 뷰포트 (viewport) 컴퓨터 그..
[Fast Campus , React] 1. React란? React란? 사용자 인터페이스 (UI)를 만들기 위한 Javascript 라이브러리 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용. Vue.js나 Angular.js와 많이 비교하게 된다 Angular, Vue는 프레임워크. React는 라이브러리 React 나무위키 링크 Framework vs Library 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다 라이브러리는 어떠한 특정 기능들을 모듈화 해놓은 것 React가 라이브러리인 이유는 전적으로 UI를 렌더링 하는데 관여하기 때문 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용 상태 관리를 위해선 redux, mobx 등 빌드를 위해선 webpack, npm 등 테스트를 위해서는 Jest, Mocha 등 ..
Coding Apple, React 강좌 내용 정리.20 - PWA PWA (Progressive Web App) 웹사이트를 모바일 앱처럼 설치해서 사용할 수 있다. 설치 마케팅 비용이 적다. (앱 스토어 유도 안하고 바로 등록하게 만들 수 있다.) 아날로그 유저들 배려 html, css, js만으로 앱까지 푸시알림, 센서 등 웹브라우저 이용해서 이용 가능 PWA가 셋팅된 리액트 프로젝트를 생성해야 한다. 터미널에서 아래의 명령어를 기입한다. npx create-react-app 프로젝트명 --template cra-template-pwa ex) npx create-react-app my-app --template cra-template-pwa [기존 프로젝트를 PWA로 못만든다고..] 조건 manifest.json service-worker.js public / man..
[CSS 기본] 선택자 CSS 기본 , 기초 내용들 선택자 종류 종류 사용 예 속성 전체 선택자 * { 속성 : 값; } 전체 요소 선택할 때 사용 요소명 선택자 요소명 {속성: 값;} ex) h1 { color: red; } 태그 이름(요소명)으로 선택할 때 id #id명 {속성: 값;} id를 가진 요소 선택시 (단독 사용) class .class명 {속성: 값;} class 가진 요소 선택시 (반복 사용할 때) 가상 클래스 a:link {속성: 값} link 걸린 텍스트 a:visited {속성: 값} 링크 방문을 했던 텍스트만 a:hover {속성: 값} 링크걸린 텍스트에 마우스 올렸을 때 a:focus {속성: 값} 링크걸린 텍스트에 포커스 생성시 a:active {속성: 값} 링크걸린 텍스트에 마우스 눌렀을 때 수도..
Coding Apple, React 강좌 내용 정리.19 - lazy loading / React devtools, memo (재렌더링 방지) lazy loading / React devtools 1. 되도록이면 함수나 오브젝트는 별도로 선언해서 사용. 메모리문제를 어느정도 보완이 가능하다 ex) function Clicked() { ... } lazy , Suspense 이용 import {lazy, Suspense} from 'react' let Detail = lazy( ()=> { return import('./Detail.js') } ); //아니면 이렇게 쓰기도. lazy( ()=> import('./Detail.js') ) → Detail를 호출/사용할 때 import 시킨다. 대부분 Suspens라는 걸 같이 쓰는데 => React Dev Tools 크롬 확장 프로그램으로 설치가능. React 내부 구조 보기 데이터 조작 렌더링 ..
Coding Apple, React 강좌 내용 정리.18 - 3.Redux : dispatch 재확인 등 dispatch 등, 기본내용 추가 dispatch()로 수정요청할 때, 데이터를 보낼수도 있다. dispatch( {type: ~ , payload: 전송할 데이터} ) 보낸 자료는 액션 파라미터에 저장되어 있다. // dispatch 전송 : id를 전송한다 { props.dispatch( {id:p.id, type:'수량증가'} ) } }>+ // reducer 관련 function reducer(state=초기값, 액션) { if (액션.type ==='수량증가') { let copy = [...state]; copy[액션.id].quan++; return copy; } else if (액션.type === '수량감소') { let copy = [...state]; if (copy[액션.id].q..
Coding Apple, React 강좌 내용 정리.17 - 2.Redux redux관련 저번 내용 Coding Apple, React 강좌 내용 정리.17 - Redux.1 2. Redux 다시.. Redux를 쓰는 이유? 1. 복잡한 props 사용을 줄일 수 있다. 모든 컴포넌트가 직접 데이터를 쓸 수 있다. 2. 데이터 수정이 용이하다 : state 데이터 관리가능. [여러 콤포넌트에서 사용하는 데이터를 한 번에 처리/관리] reducer 1. reducer만들기 : state의 수정방법을 미리 정의한다고 이해하자. 수정된 state를 리턴하는 함수라 이해. 단 무조건 state를 리턴해야 한다. 2. store만들때, reducer를 만들어서 넣으면 된다. 3. 데이터를 수정(요청)을 할 때는 dispatch() 를 쓴다. 조그만 사이트라면 오히려 React쓰는게 안 ..
반응형

티스토리툴바