본문 바로가기

분류 전체보기

 (92)
Container Presenter Pattern Container date , state가지고 , api 불러옴 //모든 로직을 처리 //데이터 Presenter 데이터들을 보여주는 역할 //스타일 Index Container를 import Route path에서 :가 의미하는건 id이다 //뭐든 와도 됨 //path="/show/:id" //path="/show/:potato"
Axios Axios instance 설정가능 // baseURL, headers, timeout 여러곳에서 반복 작성하지 않아도 됨 버전으로 다운로드 yarn add axios@0.18.1 axios.create로 변수에 공통된 주소 , 주소의 속성들인 key, language 설정 api.get(api 불러올 쿼리)로 값을 가져옴 ex) 1 2 3 4 5 6 7 const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "10923b261ba94d897ac6b81148314a3f", language: "en-US" } }); 절대경로 / baseURL 덮어쓴다 상대경로
React에서 CSS 적용하기 1. css 파일 만들고 import 2. css 모듈 className임의로 생성해서 css가 global이 아닌 lcoal 작은 프로젝트에 유용 이름 뒤에 .module 붙여서 사용 ex) Header.module.css - 단점 className 기억해서 사용해야 함 - 사용하려면 [" "] ex) styles["navList"]; 3. styled-components 다운로드 yarn add styled-components css 초기화 yarn add styled-reset withRouter 다른 컴포넌트를 감싸는 컴포넌트 Router에게 정보를 준다 어떤 컴포넌트와도 연결 가능
Router 라우팅 주소에 따라 다른 뷰를 보여주는것 리액트엔 기능이 없어서 react-router-dom 사용 Router Header.js 에서 링크 클릭시 url로 이동 => Router.js 에서 해당 url에서 보여질 파일을 연결해줌 path: 주소창 component: 실행 될 파일 Link (Header.js 에서 사용) 는 Router 안에 있어야 한다. ex) 1 2 3 4 5 6 path 뒤에 exact 붙으면 : 주어진 경로가 정확해야 컴포넌트로 이동 ex ) path="/" exact component={Home} Redirect Route 중에서 일치하는게 하나도 없으면 어느 페이지든 받아서 / (Home)으로 보내줌 fragments 참조 블로그 https://velog.io/@ki_blan..
ES2015 , ES6 Arrorw Function - 인자가 1개면 소괄호 안씀 //두개 이상이면 필요 - 중괄호가 없으면 리턴을 함축하고 있다. - 인자가 없을때 default 값 설정 가능 Structuring , Object Destructuring 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const info = { name: "nathan", lastName: "Jo", age: "25", favFood: { breakFast: "kimchi", lunch: "cake", dinner: "papaya" } } const { name, lastName } = info; //info 객체에서 name , lastName 속성을 찾아 //새로운 name ,lastName 변수에 ..
var, let, const 차이 let Block 스코프 안에서만 유효 // 괄호안에서만 유효 글로벌 객체에 입력되지 않는다. 호이스팅된다. //엑세스는 불가능 const let과 동일하나 재할당 불가 -------스코프 var => function scoped 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정 // 코드 블록 내의 변수는 전역변수 ex) { var nathan = 123; } console.log(nathan); // 123 함수 내 선언된 변수 => 함수 내에서만 유효 함수 외부에선 참조 불가 => 지역변수 전역함수 외부에서 생성한 변수 => 전역변수 //전역 변수를 남발할 가능성 높다 //주의해서 사용 let, const => block scoped 블록 레벨 스코프 값이 스코프 안에 있을때만 유효하다 // 코..
component, Component Life Cycle, state , setState 키워드 npm npx virtual DOM jsx component create-react-app PropTypes class es6 state extends life cycle method mounting Updating Unmounting axios async await setState component HTML을 반환하는 함수 이러한 HTML과 Java script의 사이의 조합 : jsx //javascript 안의 HTML component 만들때 import 꼭 적기 //이곳에 있는 jsx가 component 사용함 application에 하나의 component만 렌더링 가능 //많은 component import해서 사용 가능 첫글자 대문자로 클래스 컴포넌트 state render 사용 함..
스크롤바 투명하게 div에 넣기 -ms-overflow-style: none; css에 넣기 ::-webkit-scrollbar { display:none; }

티스토리툴바