개발자연습노트

리액트는 원래 좀 자유롭습니다. 이미지 넣는 법도 서너개 있습니다.    강의에서 사용하는 신발 이미지 URL  https://codingapple1.github.io/shop/shoes1.jpghttps://codingapple1.github.io/shop/shoes2.jpghttps://codingapple1.github.io/shop/shoes3.jpg     대문만들기 심심하니까 메인페이지에 큰 사진 하나 넣어봅시다. 하나 넣고 css 파일에서 디자인넣으면 될 것 같은데   (App.css).main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : cen..

이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성하신 후 그걸 올려야합니다. 왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 리액트의 이상한 state, JSX 이런거 전혀 못알아듣습니다. 그래서 리액트 프로젝트를 build 라는걸 하시면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다.그리고 그걸 어딘가 서버에 올려야 사용자들이 여러분의 사이트를 구경할 수 있는 것임  우리도 build를 해본 후 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 해보도록 합시다. 빨리 github.com 들어가서 계정을 먼저 ..

컴포넌트 만들 때 function 쓰면 된다고 했는데 예전 리액트에선 class 문법을 사용했습니다. 옛날엔 어떻게 했는지 알아봅시다. 지금은 그냥 function 쓰라고 권장하기 때문에 참고만 하셔도 됩니다.     class 문법으로 컴포넌트 만드는 법  class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 안녕 ) }}1. class 어쩌구 작성하고 컴포넌트 이름 작명합니다.2. constructor, super, render 함수 3개 채워넣습니다. 기본 템플릿같은 것임 3. 컴포넌트는 길고 복잡한 html 축약할 때 쓴다고 했습니다. return 안에 축약할 html 적..