Dev
[React] 컴포넌트의 타입 관리, prop-types
React props의 타입 문제 React는 props에 매개 변수를 넘길 때 타입 검사를 하지 않는다. 나는 Number 자료형으로 넘겨 받고 싶지만, 만약 String이 넘겨와도 문제가 되지 않는다 HTML 삽입 미리보기할 수 없는 소스 const Age = (props) => { return {props.age} } const App = () => { return( ) } 위와 같은 경우가 생기기에, 좀 더 타입을 명확히 해주기 위해서 PropsTypes 기능을 사용한다. //prop-types 모듈을 설치한다. npm install prop-types Proptypes 사용 방법 이제 을 사용하게 되면 타입이 맞지 않아 문제가 된다. const Age = (props) => { return {p..
[React] 함수형 컴포넌트에서 props 사용하기.
props란? 컴포넌트를 빌드할 때, 컴포넌트를 생성하는 함수의 매개 변수로 전달이 가능한 기능 아래의 코드는 input tag의 상태를 useState로 관리하여 그 값을 Btn 컴포넌트 props에 넘겨주는 코드 입니다. HTML 삽입 미리보기할 수 없는 소스 props에 넘길 수 있는 값 props에는 일반적으로 데이터를 넘기지만, 함수 등 다양한 값을 넘길 수 있다. const Test = ({name, click}) => { return( {name} ) } const App = () => { const onClick = () => { window.alert("Click Success") } return( ) }
[JavaScript] ES6 문법(1)
ES6란? ECMAScript 2015 혹은 ECMAScript 6는 ECMAScript의 표준 버전이다. 문법의 해당 사항으로는 아래와 같다. 변수 선언, const & let 화살표 함수, Arrow Function 템플릿 리터럴, Template Literals 기본 매개 변수, Default parameters 배열, 객체의 비구조화, Array & object destructing 가져오기 및 내보내기, import & export 프로미스, promise 클래스, Class 나머지 매개 변수 및 확산 연산자, Rest parameter & Spread operator 변수 선언, const & let const와 let은 변수 선언을 위한 새로은 ES6의 키워드다. //기존 변수 선언 var ..
[Node JS] http 모듈
Http 모듈을 이용하여 서버를 활성화 하자 http 모듈은 내장 모듈로, 별도의 설치 없이 이용 가능하다. //http 모듈 추출 const http = require("http") //http.createServer 이용하여 서버 객체 생성 const server = http.createServer((req, res) => { //Get반응으로 "/" 경로 요청시 Hello Node JS 반환 if (req.url === "/" && req.method === "get") { res.statusCode = 200 res.end("Hello Node JS") } }) const port = 8080 server.listen(port, () => console.log(`Server on port : ${..
[React] CDN으로 시작하기
React CDN React, ReactDom, Babel을 사용하기 위한 CDN이다. /* react cdn */ /* babel cdn */ JS를 이용하여 Counter 페이지 만들기 Btn을 클릭할 시 Total 횟수가 증가하는 Page를 JS를 이용하여 만들어보자. HTML 삽입 미리보기할 수 없는 소스 Click Total : 0 React를 이용하여 Counter 페이지 만들기
[React] 컴포넌트 빌드하기
01. src 폴더 안에 components 폴더 생성 후 Hello.js파일 생성 cd src mkdir components cd components touch Hello.js 02. Hello Function 생성 후 Tag 반환 export default function Hello () { //1 return( Hello React ) } //1 export default 설정을 해두면 해당 파일을 읽을 때 기본적으로 해당 함수(Hello)를 호출한다. 03. App.js에서 호출하기 import Hello from "./components/Hello"; //1 export default function App() { return ( //2 ) } //1 import from을 사용하여 Hello ..
[React] create-react-app을 이용한 프로젝트 생성
01. Node JS 설치 아래의 링크로 들어가 Node JS를 설치한다. 이 때 LTS 버전으로 설치하자. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 02. npx react-create-app "폴더 이름" npx create-react-app pinoReact 03. 생성된 폴더에서 vscode를 실행시키면 아래와 같은 폴더 구조로 이루어짐 04. 프로그램 실행 아래의 명령어를 이용하여 프로그램을 실행한다. npm start 실행하면 아래와 같은 화면이 나오면 성공이다.