Frontend (12) 썸네일형 리스트형 [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.. [JavaScript #2] data types, let const, hoisting, ES6 hoisting 제일 위로 올려준다 var (변수, 위험 부담이 커서 잘 사용하지 않음) let (변수, 값이 변한다) const 상수 (값이 변하지 않는다) **ctrl + shift + 방향키 ** 가로줄 선택 //1. Use strict (js에 적고 시작, 코드 오류를 console 에서 바로 볼 수 있다) //constants 값이 변경되지 않음 상수 //use this for valina Javascript. 'use strict' //2. Variable 변수 값이 변경된다 //let (add in ES6=Javascript) let name = 'yu'; console.log(name); name = 'hello'; console.log(name); let globalName = 'glob.. [JavaScript #1] BABEL, script async와 defer의 차이 JavaScript 입문 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io ECMAScrit 최신버전 코드 작성 후 모든 브라우저에서 동일하게 배포해주기 위해 코드를 변환해주는것 Babel은 JSX를 실습할 수 있는 환경을 제공합니다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 Virtual DOM을 구성하는 JavaScript 코드가 출력되는 것을 확인할 수 있습니다. SPA(Single Page Application) 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기.. [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.. 이전 1 2 다음
