웹

[스파르타코딩클럽] 💻 웹개발 종합 - 1주차

《 스파르타코딩클럽 웹개발 종합 ―1주차― 》 [ 웹의 동작 개념 ] - 웹페이지는 단지 서버에서 준비된 것을 받아서 그려주는 것이다. - 브라우저의 역할은 요청을 보내고, 받은 HTML 파일을 시각화 해주는 것 (1) 브라우저의 url을 통해 API를 해당 서버에 전달 (2) 서버는 전달받은 API를 통해 해당하는 HTML/CSS/JS등과 같은 코드를 API를 통해 브라우저로 전달 (3) 브라우저는 전달받은 코드가 담긴 API를 통해 사람이 식별할 수 있게 그려줌 [ 자주 쓰이는 단축키 ] 코드정렬 Windows: Ctrl + Alt + L macOS: option + command + L 들여쓰기 Tab 들여쓰기 취소 : Shift + Tab 주석 Windows: Ctrl + / macOS: comm..

[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..