본문 바로가기

전체 글

 (82)
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; }
event delegation, 버블링, 캡쳐링 이벤트 위임 이벤트 흐름을 관리 해준다 버블링 아래 => 위 클릭시 하위요소 => 상위 요소 차례대로 발생 ​ 캡쳐링 위 => 아래 클릭시 상위요소 => 하위 요소 차례대로 발생 ​ // 대부분 버블링 사용 이벤트 전파 중지 event.stopPropagation(); 현재껀 실행되고 다음껄 막음 이벤트 리스너 옵션 기본 => 버블링 true => 캡처링 참고자료 https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​​
HTTP, JSON ,AJAX - HTTP HyperText Transfer Protocol 텍스트 기반의 통신 규약 클라이언트와 서버간의 통신에서 많이 사용되는규약 //세계적으로 웹 상에서 가장 흔하게 쓰이는 규약 서버: 자료에 대한 접근을 관리하는 네트워크 상의 시스템 클라이언트 : 그 자료에 접근할 수 있는 프로그램 //웹 , 핸드폰 어플 ex) 클라이언트 (회원가입정보 전송) => 서버 (회원 정보 저장) 클라이언트 , 서버간의 교류 => HTTP 규약 이용하여 발생 Request : 요청 클라이언트가 서버에게 값을 달라고 요청 Response : 응답 서버의 요청에 대한 응답을 클라이언트에게 보냄 - JSON Javascript Object Notation 데이터 저장, 전송시 많이 사용되는 데이터 형식 서버와 클라이언트간의..

티스토리툴바