Ming's develop story

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

단방향 데이터 흐름이란? 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리이다. 왜 단방향으로 써야하지? 라이프 사이클과 함께 생각해보면 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각하고, 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 될것이다. 그리고 또 자식 컴포넌트가 리렌더링 되며 반복될 것이다. 네모 만들기 클래스형 컴포넌트 App.js import React from "react"; class App extends React.Component{ constructor(props){ super(props); this.state = { count: 3..