웹/React

[React JS] 영화 웹 서비스(5)

이번 포스팅에서는 본격적으로 CSS 파일 작업을 하기 전의 전처리를 해주겠습니다. 현재 ./src 경로에 위치한 파일은 index.js, App.js, Moive.js 3개의 javascript 파일입니다. index.js 파일은 App.js 리액트 component를 참조해 React DOM을 통해 렌더링하고 업데이트하고 있습니다. // src/index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render( , document.getElementById("root") ); 그리고 App.js에서는 Movie.js 파일을 참조하여 받고 있고 영화 웹 사이트에서 API 데..

[React JS] 영화 웹 서비스(4)

이번 포스팅에서는 어떻게 javascript에서 API 데이터들을 불러올 수 있는지 확인하겠습니다. [ Axios ] axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 가능하게 해 주며 return을 promise 객체로 하기 때문에 response 데이터를 다루기 쉽다. HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환해준다. 브라우저 호환성이 뛰어나다. // axios post method axios({ method: 'post', url: '/user/12345', data: { firstName: 'Yongseong', lastName: 'Kim' } }); [ Fetch ] fetch는 ES6부터 j..

[React JS] 영화 웹 서비스(3)

저번 포스팅에서 간략하게 설명하고 넘어간 클래스형 component에 대해서 조금 더 다루어 보기로 합시다. [ class component ] class로 정의하고 render() 함수에서 JSX를 반환한다. 함수형 component와 달리 state 기능 및 life-cycle 기능 사용이 가능하다. // class component import React from 'react'; class App extends React.Component { render() { return Hello World!; } } export default App; 함수형 component가 아닌 클래스형 component를 사용하는 이유 중 하나는 state라는 기능 때문입니다. (1) State 기존 props은 부모 ..

[React JS] 영화 웹 서비스(2)

[ JSX ] 이제 react에서 새롭게 등장한 개념인 JSX를 알아봅시다. JSX는 JS를 확장한 문법이며 JS안의 HTML과 JS의 모든 기능을 구현할 수 있으며, UI가 실제로 어떻게 보일 지를 설명하고 있습니다. 또한 JSX는 Babel에 의해서 React.createElement() 호출로 컴파일 합니다. const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 위의 두 예시는 동일한 기능을 가지며, React.createElement() 컴파일은 다음과 같은 js object로 변합니다. const element = { type: 'h..

[React JS] 영화 웹 서비스(1)

[ SET UP ] (1) NodeJS Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 노드를 통해 다양한 JS 앱을 실행할 수 있으며 주로 서버를 구축하는 데 사용된다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램임. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임이다. Node.js는 서버 사이트 스크립트 언어가 아님. 프로그램(환경) 임. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램 제작을 위해 만들어졌다. 콘솔을 통해 현재 로컬에 node.js가 설치되어 있는지 확인 가능합니다. > node -v v16.13.0 만약 설치가 되어 있지 않다면 아래의 공식..