title

라우팅을 들어가기진 리엑트의 특성을 알아보자 React를 사용하지 않은 일반적인 html은 url에 해당하는 html페이지를 그대로 불러온다. 그러나 리엑트는 index.html만 사용한다. detail 페이지를 component로 만들어놓고 페이지를 부르면 index.html페이지를 비우고 컴포넌트를 보여준다. 이를...

React에서 이미지 경로를 설정하는 방법 1. src 폴더에서 이미지를 import 1-1. src 폴더 밑에 이미지 넣기 src 폴더 안에 넣는다고 자동적으로 image가 import 되지 않음 js 안에 import 경로 설정해야...

까먹지말자

[React] 까먹지 말아야할 것을 글로 정리해보자 Public폴더는 App.js에서 바로 접근가능하다. <img src="/logo192.png"> 위와같이 바로 접근이 가능하다 참고) build시에 public안에 있는 파일은 압축하지 않는다. 추후 서버에 올라갈때 이미지경로는 process.env.PUBLIC_URL을 붙여야한다. 이제까지...

title

Ubuntu Typora 설치 방법

Typora란 Markdown 편집기중 가장 인기가 있는 편집 툴 중에 하나로 편집 중에 마크다운 문법을 바로 적용한 모습을 확인할 수 있어 마크다운 글을 작성할때 바로바로 모습을 확인하면서 편집이 가능한 툴이다. 특히...

13강 빌드해서 배포 하기

하위경로에 배포하고 싶다면 package.json을 오픈 hompage에 추가경로를 기입 "homepage": "http://localhost/blog", 리엑트 라우터가 설치되어있으면 basename=”“속성을 추가하는게 라우팅이 잘됨 자세한 내용은 https://create-react-app.dev/docs/deployment/#building-for-relative-paths 별 문제가없다면 html cs js파일로 바꿔주는 build를 해야한다. npm run...

12강 이전 react 문법 (class 기반)

특징 예전에는 class로 컴포넌트를 만들었다. 기존 state는 기존 state를 갈아치우는게아니라 변경점만 딱 변경해준다 component에서 무보가 보낸값(props) 사용가능 constructor(생성자)에 들어온다.

11강 input 다루기

input 사용하기 종류가 여러개 text, textarea 등등 비슷한 내용으로 selectbox도 있다. 입력한 값 가져오기 <input onChange={(e) => {함수}> e.target: 이벤트가 발생한 html 태그 e.target.value: 입력한 비고 이벤트가 상위 요소로 퍼지는...

10강 props를 활용한 상세페이지

동적 UI 3스탭 복습 html css디자인 state저장 state에 따라 어떻게 보일지 작성

9강 Props 사용 방법

Props 란 <App> - 부모 componenet <Modal> - 자식 component status 가 전달이 가능하다 -> props how? 자식 컴포넌트 노출 코드목 <자식컴포넌트 작명={state이름}> 보통 작명 이름은 state이름과 동일하게 한다 참고할점...