본문 바로가기

전체 글

 (121)
TIL) (React) Router: Switch 사용자가 미리 정하지 않은 주소로 들어온 경우, Not Found 페이지로 보내주기 1. NotFound.js 파일 만들고 빈 컴포넌트 만들기 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js 에서 import 해 줌 import NotFound from "./NotFound"; 3. Switch를 추가해주고, 4. NotFound컴포넌트를 Route에 주소 없이 연결하면 끝! ... import {Route, Switch} from "react-router-dom"; ... return ( ... < S..
TIL) 내 버킷리스트 만들기 - 라우팅, React 버킷리스트의 목록을 누르면, 상세페이지로 이동하게 만들기 힌트: 1. Detail.js라는 파일 하나를 만들고 컴포넌트를 만드세요! 2. 어떤 버킷 리스트 항목을 눌러도 그 페이지로 가게 해볼거예요! 3. history.{}를 써봐요! ({}엔 뭐가 들어갈까요?) 4. 꼭 코드스니펫을 복사해서 써주세요. 5. 버킷리스트 컴포넌트에서는 useRef를 쓰는 대신 element에 직접 onClick을 줘서 해봅시다! 순서: 1. index.js 에 import {BrowserRouter} , 2. Detail.js file 만들고 import React, function Detail() , return 안에 태그로 상세페이지 입니다! 출력되도록 export default Detail; 3. App.js에서 i..
TIL) 라우팅이란? 라우팅이란? SPA방식. 서버에서 주는 html이 1개 뿐인 어플리케이션. 전통적 웹사이트는 페이지 이동 때마다 서버에서 html, css, js (=정적자원들) 을 내려준다면, SPA는 딱 한번만 정적자원을 받아옴. 왜 html을 하나만 줄까? 사용성 때문에. 페이지를 이동시마다 서버에서 주는 html로 화면을 바꾸다보면 상태유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적. MPA (Multiple Page Application) 방식은 상태값 유지가 안됨. 유저가 불편함. SPA의 단점은 모든 정적자원을 다 가져오기 때문에 로딩속도가 느려질 수 있음. 그렇지만 이후 페이지를 왔다갔다 하는 속도는 빠름. 이미 자원을 다 가지고있기 때문에. react-router-dom package 설치..
TIL) eventListener eventListener 클래스형 컴포넌트에서 eventListener 구독하기, mouseover 시에 색깔 바뀌게 하기 import logo from './logo.svg'; import './App.css'; import React from "react"; import Text from "./Text"; class App extends React.Component{ constructor(props){ super(props); this.state = {}; this.circle = React.createRef(null); } hoverEvent = (e) = > { console.log(e.target); // 이 이벤트가 발생한 요소가 뭔지 보여줌 console.log(this.circle.curr..
TIL) Ref Ref 은 이름표다! 클래스형 컴포넌트에서 만드는 방법 예) this.text = React.createRef(); (=텍스트에 Ref를 만들어 주자) 그러면 타겟인 "text" 가 있는 div옆에 (적용 끝) component DidMount() 로 ref 적용이 잘 되었는지 확인 해 줄 수 있다. ... this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"] }; this.text = React.createRef(); } componentDidMount() { console.log(this.text); } return ( ...중략... ); } } ... 콘솔을 보면 {current: input} 이라고 뜸. console.log(this.text.current..
TIL) React 키워드 정리 1. 자바스크립트에서 유사배열과 배열의 차이는? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까? 유사 배열은 배열처럼 보이지만 사실 key가 숫자이고 length값을 가지고 있는 객체이다. { 0: div.text, 1: div.text, 2: div.text, 3: div.text, length: 4, } 이런식으로 배열에 담기지만 객체의 성격을 갖는다. 배열의 forEach, map, filter, reduce같은 메서드를 사용할 수 없기 때문에 요소 수정방법이 다르다. Array.from() 메서드를 사용하여 변경 해야한다. Array.from()메서드는 유사 배열 객체나 반복가능한 객체를 얕은 복사를 통해 새로운 객체를 만든다. 2. 부모 컴포넌트 A와 자식 컴포넌트 B가 있다. 컴..
3주차: React로 My To Do List 만들기- onChange, onSubmit, props, state, methods 개념 정리 React 입문 주차 개인 과제 구현해야 할 기능 UI 구현 Todo 추가 Todo 삭제 Todo 완료 상태 변경하기 (완료 진행중) 과제 요구 사항 디자인은 취향대로, 화면 구성은 동일하게 1. 제목, 내용 입력후 [추가하기] 버튼 클릭시 working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 2. Todo의 isDone 상태가 true이면 상태 버튼의 라벨을 취소, isDone이 false면 라벨을 완료로 조건부 렌더링. 3. Todo의 상태가 working이면 위쪽에 위치, done이면 아래쪽에 위치하게. 4. Layout의 최대 넓이는 1200px, 최소 넓이는 800px 으로 제한, 전체 화면의 가운데로 정렬. 5. 폴더 구조, 컴포넌트 구성도 나..
WIL : JavaScript의 ES란?, ES5/ES6 문법 차이 - 2022.08.15 자바스크립트의 ES란? ES는 ECMA Script의 약자이다. 자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자 MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라 표준이 필요했다. 표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신 시스템의 비영리 표준기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다. ES5는 ECMA Script5의 규격을 따른다고 생각하면 된다. 현재는 ES6 ECMA Script6의 규격을 따르고 있다. 즉..
반응형

티스토리툴바