Lpla 개발 블로그

React

[React] 튜토리얼 자습하기 (2)

주요 개념 1. Hello World React에서 Hello Word를 출력하는 방법은 아래와 같다. ReactDOM.render( Hello, world!, document.getElementById('root') ); 2. JSX 소개 React는 마크업과 로직을 분리하지 않고 둘 다 포함하는 컴포넌트 단위로 이루어진다. a. JSX에 표현식 포함하기 중괄호에 변수를 감싸는 방법으로 JavaScript 표현식을 사용할 수 있다. const name = 'Ji Woon'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); b. JSX도 표현식이다. JSX 자체에 JavaScript 조건문..

React

[React] 튜토리얼 자습하기 (1)

설치하기 a. 웹사이트에 React 추가하기 (1) 1분 내로 React 추가하기 HTML 1분 내로 React 추가하기 javaScript 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return '좋아요를 클릭하셨습니다.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, '좋아요' ); } } const domContainer..

React

[React] ReactJS로 영화 웹 서비스 만들기 (7) 完

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) 이번 시간에는 라우터의 기본 기능을 익히며 리액트 기초 강의를 마무리하도록 하겠다. 라우터 설치 및 준비 라우터는 한 페이지 내에서 명령에 따라 필요한 컴포넌트를 불러오는 형태를 말한다. 우리는 2개의 라우터를 만들 것이다. 이전 시간까지 만든 영화 페이지를 Home 탭에, 사이트를 소개하는 내용을 About 탭에 만드는 것이 목적이다. npm i react-router-dom으로 라우터를 설치한다. 그리고 src폴더 안에 com..

React

[React] ReactJS로 영화 웹 서비스 만들기 (6)

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (7) #5 정리 Github에 배포하기 우리는 [React] ReactJS로 영화 웹 서비스 만들기 (2)에서 git에 커밋/푸시하는 법을 배웠다. 작업 중간중간 커밋/푸시를 해왔다면 깃허브에 소스코드가 온전히 존재할 것이다. 덕분에 소스코드는 깃허브에서 볼 수 있지만 웹 페이지 형태로 배포하려면 추가작업이 필요하다. 터미널에 npm i gh-pages를 입력하여 gh-pages를 설치한다. 다음 git remote -v를 입력하면 깃..

React

[React] ReactJS로 영화 웹 서비스 만들기 (5)

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (6) ReactJS로 영화 웹 서비스 만들기 (7) #4 Making the Movie App 이번 포스팅이 영화 웹 서비스 만들기의 핵심이 되는 파트이다. fetch 자바스크립트는 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아올 수 있다. 일반적으로 fetch()를 사용하지만 여기선 Axios를 사용한다. Axios는 npm install axios로 설치한다. YTS API 영화 데이터는 YTS에서 만든 API를 사용한다. 구글에 YTS를 검색하여 공식 사이트로 ..

React

[React] ReactJS로 영화 웹 서비스 만들기 (4)

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) ReactJS로 영화 웹 서비스 만들기 (7) #3 STATE 클래스형 컴포넌트(Class Component) state는 객체(Object)이고 동적 데이터를 작업할 때 사용한다. 이전에 사용한 함수형 컴포넌트(function component)는 값을 return 한다. import React from 'react'; function App(props) { return 이것은 function 컴포넌트이다. } export default App; 클래스형 컴포넌트는 retu..

React

[React] ReactJS로 영화 웹 서비스 만들기 (3)

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) ReactJS로 영화 웹 서비스 만들기 (7) #2 JSX & PROPS 컴포넌트(component) index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); app.js function App() { return ( 안녕하세요. ); } export default Ap..

React

[React] ReactJS로 영화 웹 서비스 만들기 (2)

ReactJS로 영화 웹 서비스 만들기 (1) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) ReactJS로 영화 웹 서비스 만들기 (7) #1 SET UP 설치가 제일 힘든 법 Win+R 로 cmd(명령 프롬프트) 를 실행시키고 프로젝트를 시작할 경로로 이동한다. 여기선 ‘내 문서’로 정했다. cd documents 다음으로 npx create-react-app + 프로젝트 폴더명을 입력한다. npx create-react-app movie_app_2021 movie_app_2021 폴더 안에 create-react-app이 설치된다. 몇 분 후, 설치가 끝나면 V..

React

[React] ReactJS로 영화 웹 서비스 만들기 (1)

ReactJS로 영화 웹 서비스 만들기 (2) ReactJS로 영화 웹 서비스 만들기 (3) ReactJS로 영화 웹 서비스 만들기 (4) ReactJS로 영화 웹 서비스 만들기 (5) ReactJS로 영화 웹 서비스 만들기 (6) ReactJS로 영화 웹 서비스 만들기 (7) 강의 선택 작년부터 내년(2021년)엔 프론트엔드 공부를 시작하기로 다짐했고 기념비적인 첫 강의를 무엇으로 할 지 고민을 많이 했다. velopert의 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 nomad coder의 ReactJS로 영화 웹 서비스 만들기 zerocho의 웹 게임을 만들며 배우는 React 먼저 velopert님 강의는 목소리와 발음이 좋고 강의 내용도 입문자들이 듣기에 좋아 보였지만, 2018년..