전체 글 (166) 썸네일형 리스트형 gh-pages로 배포 npm install gh-pages --save-dev 위 명령어로 gh-pages를 설치합니다. package.json파일에 homepage옵션을 추가합니다. https://{깃허브 유저 이름}.github.io/{저장소 이름}/ 방식으로 링크를 만듭니다. scripts안에 predeploy와 deploy를 추가합니다. npm run deploy 모두 완료되면 위 명령어를 실시하면 방금 homepage옵션의 링크를 타고 들어가서 확인 가능합니다. 예산 계산기 앱 - 함수형 컴포넌트 방식 클래스 컴포넌트를 함수형 컴포넌트로 변경 左) 클래스 컴포넌트 右) 함수형 컴포넌트 클래스 컴포넌트에서 함수형 컴포넌트로 수정할 때 기본구조를 우선 변경하겠습니다. export class xx extends xx { render() { } } 부분 삭제한 후, const 파일이름 = () => { } 로 수정하면 됩니다. 左) 클래스 컴포넌트 생성자 右) 함수형 컴포넌트 함수 App.js의 생성자를 우측 사진처럼 변경해줍니다. const [value, setValue] = useState("") react문서를 보면, value는 getter고 setValue는 setter입니다. useState는 value, setValue를 리턴하고 초기 State값을 정하는 Hook이빈다. App.js에서 이미 u.. React Hooks React Hooks란 무엇인가? React Hooks는 ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능입니다. React Hooks이 필요한 이유? React Hooks는 주로 Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었습니다. React Hooks는 Functional Component를 사용합니다. Class Component Functional Component 더 많은 기능 제공 적은 기능 제공 더 긴 코드 양 짧은 코드 양 더 복잡한 코드 더 심플한 코드 더딘 성능 더 빠른 성능 React 생명주기를 기존에 함수형 컴포넌트에서 사용을 못했었습니다. React 16.8 Hooks 업데이.. 예산 계산기 앱 - 클래스 컴포넌트 방식(2) Props를 통해 컴포넌트 간 데이터 전달하기 左) App.js파일에 임위 데이터를 추가하고 사용해줍니다. 右) ExpenseList.js파일에서 해당 데이터들을 props를 통해 호출합니다. 左) 실행해보면 console에서 해당 데이터들을 두번 불러옵니다. 右) index.js파일 중 React.StrictMode때문입니다. 이 엘리먼트를 삭제하면 정상적으로 한번만 불러옵니다. Map 메소드를 사용한 지출 목록 나열 ExpenseList.js의 ul부분을 수정합니다. map메소드를 이용해서 방금 데이터의 내용을 하나 하나 출력합니다. 주의해야 할 점은 map메소드는 key값, 즉, 고유한 값으로 사용해야 에러 안 뜹니다. 여기서 각 데이터 배열을 임위로 expense라는 이름을 붙여줬습니다. Expe.. 예산 계산기 앱 - 클래스 컴포넌트 방식(1) 시작하기 import { Component } from "react"; import "./App.css"; class App extends Component { render() { return ( 예산 계산기 {/* Expense Form */} {/* Expense List */} 총지출: 원 ) } } export default App; 클래스 컴포넌트를 사용해서 작성할 예정입니다. src폴더 안에 App.js에 위와 같이 작성합니다. :root { --primaryColor: #90A959; --secondColor: #E9B872; --mainWhite: #fff; --mainBlack: #222; --mainRed: #C45151; --mainGreen: #4CAF50; } * { margin:.. 기본 구성 ES7+ 확장 프로그램을 사용해서 react를 좀 더 쉽게 코딩할 수 있습니다. rce를 입력하고 enter를 치면 기본 틀이 만들어집니다. rcc를 입력하고 enter를 치도 class component 만들어집니다. rfce를 입력하고 enter를 치도 function component 만들어집니다. JSX React를 사용할 때는 html보다 JSX를 많이 사용합니다. JSX(Javascript syntax extension)는 자바스크립트의 확장 문법입니다. JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있습니다. JSX를 사용하면서 주의해야 할 문법들(문법 규칙) JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 합니다. Props를 통해 컴포넌트 간 데이터 전달하기 this.props.데이터 이름 을 통해 불러옵니다. Key 속성 이해하기 React에서 요소의 list를 나열할 때는 Key를 넣어줘야 합니다. K.. React 기본 배우기 React란 무엇인가요? React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다. 그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교를 하게 됩니다. Angualar와 Vue는 프레임워크이며 React는 라이브러리입니다. Framework vs Library Framework는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것입니다. Library는 어떻나 특정 기능을 모듈화 해놓은 것입니다. React를 사용하는 이유 - 상대적으로 배우기 쉬운 라이브러리 - 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경 - 많은 기업들의 사용으로 검증이 된 라이브러리(.. Nuxt 보호되어 있는 글입니다. E2E 테스트 E2E Test E2E(End to End) 테스트란 애플리케이션의 처음부터 끝까지의 실제 사용자의 관점에서 사용 흐름을 테스트하는 방법. Cypress 테스트 도구를 사용할 수 있습니다. 테스트 환경 구성 npm install cypress --save-dev npm i -D eslint-plugin-cypress 위 명령어를 통해 E2E test관련 프레임과 라이브러리를 설치합니다. package.json 파일 scripts부분에 cypress를 추가합니다. .eslintrc.js 파일의 추가부분입니다. cypress.config.js파일에서 viewport의 너비와 높이 그리고 기본 url를 설정해줍니다. 첫 테스트 npm run dev npm run test:e2e 위 명령어를 통해 cypress.. 이전 1 2 3 4 5 6 7 8 ··· 17 다음
