Ming's develop story

react-router-dom 패키지 설치하기 - 꼭 적용할 프로젝트 경로 안에서 설치하기! react-router-dom 공식 문서 페이지 전환 순서 1. index.js에 BrowserRouter 적용하기 안에 들어있는 모든 컴포넌트를 감싸주기 위해서 제일 위에있는 App을 감싸준다. 2. 세부 화면 만들기 3. App.js에서 Route 적용하기 4. exact 적용하기 만약 메인페이지에 exact를 안 붙여주면 /Cat 페이지 처럼 / (Home)을 포함하는 페이지에서 밑의 사진과 같이 된다. 5. URL 파라미터사용하기 웹사이트 주소에는 파라미터와 쿼리라는 게 있는데 우리는 그 중 파라미터 사용법을 알아보자! 파라미터: /cat/nabi 쿼리: /cat?name=nabi 파라미터 주는 방법 //..

SPA란? Single Page Application! 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이다. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다. 왜 굳이 html을 하나만 줄까? 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문이다. 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. (사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있고, 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다.) 단점은 없나? SPA는 딱 한..

이벤트 리스너란? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것이다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다! 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해보자 이벤트 리스너를 추가하는 것을 구독한다라고 한다. 이벤트 리스너를 적용시킨 부분을 선택하고 밑에 Event Listeners를 보면 다양한 이벤트리스너의 종류들을 볼 수 있다. 컴포넌트가 사라질수도 있는데 다시 생기면 이벤트리스너도 다시 생겨난다. 지웠다 만들었다를 반복하면 한번 마우스를 올렸는데 여러번 이벤트가 되는 경우가 발생할수 있다. 그래서 컴포넌트가 사라질때에는 꼭!! 이벤트리스너를 지워..

App.js import React from "react"; import logo from "./logo.svg"; import "./App.css"; import Start from "./Start"; function App() { const [name, setName] = React.useState("우민기"); return ( ); } export default App; Start.js import React from "react"; import img from "./Teemo.png"; const Start = (props) => { console.log(props); return ( 나는{" "} {props.name} 에 대해 얼마나 알고 있을까? 시작하기 ); }; export default..

App.js 원래 작성했던 버킷리스트 코드에 '추가하기'라는 버튼을 추가해주고, addBucket 함수 추가 및 css 수정 import React from "react"; import BucketList from "./BucketList"; import styled from "styled-components"; class App extends React.Component { constructor(props) { super(props); this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; this.text = React.createRef(); } componentDidMount() {} addBucket = () => { console.log(this.te..