1. 에러가 왜 생길까? 여러 페이지를 구분하지 않고, 똑같은 페이지를 불러오면 이런 에러가 난다. key가 필요해~ key~~ 심지어 결과물을 돌려주지도 않는다... 원래였으면, product 폴더 아래 자동으로 실행되는 product > index.js가 실행되어야 하는데 말이다... function ProductPage(){ return 상품 상세 페이지 } export default ProductPage; 이 h1 태그가 안나온다. 만약 링크 조차 넘어가지지 않을 경우에는 리액트가 가장 먼저 켜질 때 실행되는 index.js의 태그를 지우면 잘 나온다. 2. 제품 상세페이지의 각 페이지를 구분해서 보여주자 리액트를 실행시키면 index.js로 먼저 가고, 여기서 App.js를 실행시킨다. [App..
git 수업이 지나고 다시 돌아온 리액트 관련 수업... 잘 기록하고, 나중에 까먹을 때 다시 와야지 ㅠ 1. react-touter-dom? 리액트에서 화면 전환을 하기 위한 라이브러리이다. 2. react-touter-dom 설치 [설치] npm install react-router-dom@5.2.0 옛날 강의들은 대부분 5버전을 쓴다. 최신버전은 안되는 기능들이 있기 때문에 혼란을 막고자 해당 버전을 쓴다. 나는 성격이 급해서 바로 깔아가지고, 최신버전을 설치했었는데, 그럴 경우는 지우고 다시 깔면 된다. [삭제] npm uninstall router-react-dom 5.2버전 설치완료된 모습이다. packge.json에서 확인할 수 있다. 3. react-touter-dom > BrowserRo..
postman을 이용해 mock서버를 만들어주고, mock서버에 get방식으로 요청하면 JSON형식으로 응답 데이터를 넘겨줄 수 있게 했다. (강의 - Postman 이용하기 편) 이를 react에서도 사용해보겠다. 1. axios 다운 상품 정보를 홈페이지에 나열할 것이다. 근데, 네트워크 통신으로 결과를 받아서 동적으로 상품 정보를 받아올 것이다. 때문에 네트워크 통신에 필요한 axios를 다운받는다. 이것 또한 npm에게 시킨다. npm install axios 잘 설치가 되었다면, package.json에 dependencies에 axios명과 설치된 버전이 기록된다. 혹은 node_modules에서도 axios 파일을 확인할 수 있다. 2. axios 사용 function MainPage(){ ..
1. jsx (A syntax extension to javascript) jsx는 리액트를 사용할 때 필수적으로 사용해야하는 문법이다. javascripts xml로 자바스크립트에 xml을 확장한 문법이다. 즉, 자바스크립트 + xml/html인 것이다. 예를 들면 이런식으로 사용할 수 있는 것이다. const element = Hello react; 리액트에서 js에 html 태그를 작성할 수 있었던 이유는 jsx 문법을 사용하기 때문이다. 사실 리액트의 정식 명칭도 리액트.js라는 것! (ㄴ 0 ㄱ) function ChildComponent(props){ const {name, age} = props; return 이름은 {name} 이며, {age}살 입니다. } export default Ch..
1. node_modules npm에서는 외부 모듈들을 다운받고 관리해준다. 다운 받은 외부 모듈들이 node_modules에 들어간다. 2. package.json 프로젝트의 설정들이 들어간다. 외부 모듈을 다운받으면 dependencies에 모듈명과 버전들이 기입된다. 외부 모듈 다운 시 package.json에 모듈 정보가 기입되고 node_modules에 특정 모듈이 설치된다. scipts에 start부분을 보면 react-scripts start가 있는데, 이는 우리가 리액트를 동작시키기 위해 npm start를 치면 해당 코드가 동작하는 것이다. 3. public > index.html public은 주로 이미지 파일을 추가할 때 사용한다. src폴더에서 코딩을 하게 될 것이다. css, js..
1. 기본지식 1) node.js 자바스크립트는 브라우저에서만 실행되는 언어였다. 점점 자바스크립트가 널리 사용되면서 '웹 개발 말고 다른 곳에서도 사용할 수 있지 않을까'라는 이야기가 나오게 되었다. 그래서 브라우저에서 뿐만 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술이 node.js이다. node.js는 서버 프로그램을 개발할 때 많이 사용된다. node.js는 화면을 그려주는 역할이 없기 때문에 웹 빌드 도구 (Babel, webpack)을 이용해서 브라우저가 이해할 수 있는 언어로 바꾸주는 작업이 필수적으로 들어간다. 2) npm node package manager의 약자로 node 프로젝트의 패키지(외부 라이브러리)를 관리해주는 저장소 역할을 한다. 브라우저의 경우 자바스..
