whatisthis?

우선 server.js 파일을 만들고, 아래 코드를 작성함. server.js const http = require('http'); // 서버를 만드는 모듈 불러옴 // http 모듈 내의 createServer 메소드 http.createServer((request, response) => { // 서버 만드는 createServer 메소드 console.log('server start!'); }).listen(8080); // 8080포트에 연결(listen) Node.js는 모듈 시스템을 구축하고 있습니다. ** 모듈 = 필요한 것만 불러오는 것 http 서버가 필요하니 http 모듈을 require 메소드를 통해서 불러와 http 변수에 저장하였습니다. 전 시간에 말했던 npm의 패키지가 이와 비..

Node.js는 자바스크립트를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 런타임입니다. http서버가 내장되어 있기 때문에 보통은 서버로 많이 사용합니다. 하지만 응용 프로그램을 실행하는 데 쓸 수도 있습니다. 웹팩, 바벨과 같은 도구들과 일렉트론 같이 자바스크립트로 데스크탑 프로그램을 만드는 프레임워크가 모두 Node.js를 기반으로 돌아갑니다. 흔히들 생각하기로는 서버가 엄청 복잡하다고 생각하지만, Node.js에서는 10줄도 안 되는 코드로 서버를 구동할 수 있습니다. +) 자바스크립트 문법을 사용하기 때문에, 다른 서버 언어를 배우지 않아도 돼서 부담이 훨씬 덜합니다. 어차피 클라이언트(웹 브라우저) 상에서는 자바스크립트를 쓸 수 밖에 없습니다. 그런데 서버 언어는 JSP나 PHP, A..

PropTypes 만약, 우리가 fontSize에 해당하는 prop의 값을 number로 주지 않고 text로 주면 어떻게 될까? return ( ); function Btn({ text, fontSize }) { return ( {text} ); } React는 이것을 오류라고 알려주지 않는다. 왜냐면 문법적으로는 틀린 것이 없으므로. 따라서, 우리는 propTyes라는 패키지를 다운받아서 사용할 수 있다. propTyes는 컴포넌트명.propTypes라고 하여 객체의 형식으로 컴포넌트의 prop별로 타입을 지정해줄 수 있다. 예를 들면, Btn 컴포넌트의 text 속성은 string으로, fontSize 속성은 number로 설정해준다. Btn.propTypes = { text: PropTypes.s..

React. React Js - props props를 사용하는 방법 props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식. (부모->자식) 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 props 객체가 들어가게 됨 mywebproject.tistory.com 지난 포스팅인 props의 예제를 이어서 진행함. 지난시간에 했던 것을 복습해보자. Btn 컴포넌트를 설정하는 App 컴포넌트에서 return ( ); 위와 같이 text라는 property를 주고, (text 대신 banana라고 이름 붙여도 ok. 이름은 상관 X) function Btn({text}) { return ( {text} ); } Btn 컴포넌트에서 props라는 파라미터(=객체임) 의 text를..

props를 사용하는 방법 props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식. (부모->자식) 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 props 객체가 들어가게 됨. >> 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리해서 재사용 할 수 있게됨. - 예> 우리가 버튼을 두개를 만드는데, 디자인(즉, style속성)은 같게 하고 안에 텍스트만 다르게 하고 싶을 때는 1 / 우선 Btn이라는 컴포넌트를 만든다. function Btn() { return ( ); } 2 / Btn 컴포넌트를 설정할 App컴포넌트를 만든다. function App() { return ( ); } 우선은 Btn 안에 텍스트를 다르게 설정해야하므로 Save Changes..

React. React JS - Unit Converter (CSS추가) Unit Converter (수정) React) React JS - practice. 단위변환기 (Unit Conversion) React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { retu.. mywebproject.tistory.com - km에서 mile단위 변환기 기능 추가 - select메뉴 포함하는 App 컴포넌트 - css 변경 converter.html style.css * { margin: 0; box-sizing: border-box; font-family: -apple-system, BlinkM..

Unit Converter (수정) React) React JS - practice. 단위변환기 (Unit Conversion) React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } ❗❗ 주의 우리는 jsx를 사용중인 것이지 H.. mywebproject.tistory.com index.html style.css @import "./reset.css"; * { margin: 0; box-sizing: border-box; font-family: "Noto Sans KR", sans-serif; } html { ..

React JS 기초 예제 실습 - 단위 변환기 (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } ❗❗ 주의 우리는 jsx를 사용중인 것이지 HTML을 작성하는게 아니므로 몇가지 주의할 점이 있다. 예를 들면 의 경우에는 자바스크립트에 for이라는 예약어가 이미 존재하므로 에러가 발생하게 된다. BUT > 우리가 지금 import한 react파일은 production용이라 에러는 안뜸. 만약 이걸 development로 바꿔주면 에러가 바로 발생함. class도 마찬가지.(js에 이미 class가 존재하기때문.) >> 따라서 className=""으로 작..

지난 포스팅의 예제를 이어서 진행함. 🔻 React. React Js - setState React. React Js - state (상태) / 예제 React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해.. mywebproject.tistory.com State Functions const root = document.getElementById("root"); function App() { const data = React.useState(0); const [counter, setCounter] = data; con..

React. React Js - state (상태) / 예제 React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨.. mywebproject.tistory.com 지난 포스팅의 예제를 이어서 진행함. 좌) React 사용시 (바뀌는 부분만 따로 렌더링됨) / 우) vanila JS 사용시 body와 h3가 통으로 바뀜 위 사진을 보면 리액트를 사용해서 우리는 분명 아래 코드와 같이 function render() { ReactDOM.render(, root); } Co..