본문 바로가기

Frontend/React

 (8)
[React #8] PropTypes 종류 PropTypes와 함께 하는 타입 검사 – React A JavaScript library for building user interfaces ko.reactjs.org 자바스크립트의 유연한 특성으로 작성이 편한 대신 파일이 많아지면 생산성이 떨어져 타입스크립트를 많이 사용하는데, 자바스크립트를 이용해 앱을 개발해야하는 경우 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장. PropTypes는 부모로 부터 전달 받은 prop의 데어터 type을 검사한다. 타입 검사 방법 모든 타입 PropTypes.any Number 객체 PropTypes.number String 객체 PropTypes.string Boolean 객체 PropTypes.bool Function 객체 PropType..
[React #7] Components와 Props React 컴포넌트의 단방향 데이터 흐름 (컴포넌트에 값을 전달) props 는 Properties의 줄임말 부모 컴포넌트에서 자식 컴포넌트에 값을 전달할때 자식 컴포넌트에서 부모의 값을 받아올때 JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에 속성을 지정할 수 있다. 속성을 지정해주면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달 React 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트로 데이터(props)가 흐른다. 하위 컴포넌트는 전달 받은 props를 읽기만 가능하고 쓸수는 없다 Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org 함수 컴포넌트와 클래스 컴포넌..
[React #6] 리액트 젠코딩 Zen coding Zen coding 젠코딩은 html 코딩의 생산성을 향상시켜주는 도구 eclipse, vim, dreamweaver, editplus와 같은 에디터에 플러그인으로 설치 JSX 작성 시, emmet(html,css작성 시 시간 단축 확장기능) 활성화 방법 파일 > 기본 설정 > 설정 Window 이용자 : Ctrl + , Mac 이용자 : Command + , ​ 작업영역(WorkSpace setting) ​ Include Languages 검색 addItem 부분에 key : javascript / vaue : javascriptreact Zen coding 문법 공식주소 Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io 1. 다음 ..
[React #5] 바벨 / 웹팩 CDN 링크 – React A JavaScript library for building user interfaces ko.reactjs.org CDN은 클라이언트와 웹 사이트 서버 간에 중간 서버를 두어 효율성을 높인다. 이러한 CDN 서버는 클라이언트-서버 통신의 일부를 관리 한다. 웹 서버에 대한 웹 트래픽을 줄이고, 대역폭 소비를 줄이며, 애플리케이션의 사용자 환경을 개선 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io #바벨 Babel 은 JSX를 실습할 수 있는 환경을 제공한다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 Virtu..
[React #4] 리액트 프로젝트 생성하기 vscode - 터미널 - 새터미널 ctrl + ~ : 터미널 열기 CRA (Create-React-App) 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 https://create-react-app.dev/docs/getting-started/ Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev npx create-react-app 프로젝트명 (새로 프로젝트 생성시 입력) yarn create react-app 프로젝트명 cd 프로젝트명 (기존 파일 있을 시 입력) npm start or yarn st..
[React #3] 리액트 개발 시 필요한 확장 패키지, VS Code React Snippet 알면 시간 절약되는 vs code React Snippet 긴 코드를 줄여주는 스니펫 [ 리액트 가져오기 ] // imr → import React from 'react' [ 리액트 + Companent 가져오기 ] //imrc → important React, { Component } from 'react' [ import a default module 기본 모듈 가져오기 ] //imp → import moduleName from 'module' [ 명명된 함수 ] //nfn → const functionName = (params) => { } [ React 클래스 component 생성 (class component skeleton) ] //rcc [ React stateless component s..
[React #2] 리액트 시작 프로그램 세팅 nodejs, yarn, npm, vscode 웹퍼블리싱은 html, css, js 언어를 사용하여 프로젝트 진행하는데 편의성, 필요성에 의해 jqury, jqury UI, swiper, Bootstrap, fontawsome, 등 다양한 라이브러리를 사용하는데 이를 디펜던시스(dependencies)라고 한다. 라이브러리를 사용하기 위해서 각 사이트에 접속하여 파일을 다운하거나, CDN으로 연결하여 사용해야는데, 최신 버전의 라이브러리가 나오거나, 최신 버전의 새로운 CDN으로 연결하여 사용해야 합니다. 이러한 번거로움과 귀찮음을 덜어주는 것이 yarn - package manager 이다. Node.js : 리액트 프로젝트 준비하기 위해 필요한 webpack, babel 등의 도구들을 실행하는데 사용 Npm: 자바스크립트 패키지를 관리하기 위해서..
[React #1] 자습서 (javascript 라이브러리, javascript mdn, web_frameworks) #javascript 라이브러리 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org #javascript mdn MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org #web_frameworks Stack Overflow Developer Survey 2021 In May 2021 over 80,00..

티스토리툴바