또다시 새로운 주차시작.
새로운 조원들을 만났다.
12조...위치만 빼면 이츠굳....
역세권이 아니라서 주변에 사람도 없고, 우리조 밖에 없다.
그래서 조금이라도 우리의 존재를 알리려고 사람들이 모여있는 윗동네와 가까워지기 위해
칠판에 올라가있다.ㅋㅋㅋ
오후에는 공부하다 바람도 쐴겸 뱃머리에 갔다.
역시 바다에 가니 가슴도 뻥뚤리고 쉬원하네 ㅋㅅㅋ
참고로 저 다리 끝까지는 안가진다.
우리가 서있는 곳이 끝자락이다.
안전제일^^7
오늘은 리액트 공부가 본격적으로 시작되었다.
사실 시작하면 재밌을거라 생각했는데
막상 시작하니깐 진도빼기 바쁘고 막막하고 그렇다.
자기전...오늘의 필기노트를 남긴다....
es5로 바꿔주는것 : 바벨
jsx(바벨에 들어가는 순간 표준)
jsx= js + xml(html)
웹팩:자바스크립트100개를 한파일로 minify -> 압축
map file 시스템 안정화
요즘에는 sass잘안쓰고 jsx쓴다.
퍼블리셔가 css파일을 만들어주면 js파일에 임포트해주면된다.
spa single page aplication
html과 js가 함께있으니 서버가 넘어가지 않는다. 한페이지에서 해결가능
데이터만 콜
-->속도가빨라짐 -->csr 리액트
대신 화면갱신시 다시 다받아야댐
근데 자동완성이 안됨(검색기능)
그래서나온게 서버사이드렌더링--> next js
ssg웹팩이 빌드할때 수정이 적은 공지사항 같은 부분들을 디비정보를 html에 그냥 박아벌임
돔의 이벤트리스너는 브라우저가 갖고있다.
리액트에서는 리액트가 가지고 있다.
리액트작동의 핵심포인트는
값이 바뀌면 리액트가 js에 연락해서 값을 다시 가져와서 그 해당함수만 다시불러옴
새로 바꿔준다.
우리는 네오가 되어야 하기때문에 작동원리를 알아야 성능이나 디버깅이 유리해진다.
virtual dom : 리액트돔이라는 클래스(렌더) --> 돔트리가 아니라 map 의 해시테이블형태이다.
쿼리셀렉터보다 겟엘리먼트바이아이디가 훨씬 빠라ㅡ다.
리액트에서 맵 : 해시테이블 아이디가 있어야 빨리찾는다.
yarn 과 npm의 차이 조사하기
npm은 의존 관계를 가지는 다른 패키지들이 즉시 포함되도록 한다. 이런 부분이 더 편리하긴 한데 보안 문제에 있어 여러 취약점들을 불러올 수 있다고 한다.
yarn이 npm보다 더 나은 점은 다음과 같이 요약할 수 있다.
-
속도가 더 빠르다. (performance)
-
보안성이 좋다. (security)
yarn add react-router-dom
클라이언트 : 우리가 웹사이트를 보는 도구들
서버 : 우리가 보는 웹사이트에 뿌려줄것을 ㅁ나들어서 클라이언트에게 전달해주는 친구
프론트엔드의 역할: 화면을 그리고, 데이터를 보여준다.
서버리스 : 서버를 빌려서 사용 파이어베이스 백엔드가 필요없다.
돔: 문서객체모델 html단위하나하나ㅍ
돔을 속성확인은 여기서 하기!
사용하지 않는 속성도 확인가능하다.
https://developer.mozilla.org/ko/docs/Web/API/Document
htmlcollection : 유사배열 --> 이벤트에 for문을 써서 돌릴 수 있다.
get elements byclass name 은 꼭 for문돌리기
elements[0].style.color = 'green';
https://bobbyhadz.com/blog/javascript-cannot-set-property-color-of-undefined
와 이건또 처음해본다.
클래스네임에 인덱스 넘버를 모두넣어서
html온클릭에다가 파라미터를 넣고 이벤트를 준다.
완료
function successTodo(index) {
const wrap = document.getElementsByClassName("todo-box")[index];
wrap.style.backgroundColor = 'grey'
map과 filter
map : 요소를 가공해서 새로운 배열로 반환
filter : 요소를 가공할수 없다. 요소를 만족하는 배열을 반환할 수 있다.,
concat 중복요소는 제거해주지 않는다.
from :문자열의 길이만큼 배열을 만든다. split()과같다.
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
for (let i = 0; i < animals.length; i++) {
let animal = animals[i];
if (animal === "고양이") {
count += 1;
}
}
console.log(count);
이식을 맵으로 바꾸면
let count =0
let new = animals.map((x)=> if( x === "고양이"){count +=1})
굳이 배열을 반환해주는게 아니라면 리턴은 쓰지 않아도 된다.
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
let cats = [];
for (let i = 0; i < animals.length; i++) {
let animal = animals[i];
// indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 친구입니다.
// 파라미터로 넘겨준 텍스트가 없으면 -1을 반환해요!
// 즉 아래 구문은 고양이라는 단어를 포함하고 있니? 라고 묻는 구문이죠!
if (animal.indexOf("고양이") !== -1) {
cats.push(animal);
}
}
console.log(cats);
이식을 필터로 바꾸면
animals.filter((x)=> x.indexOf("고양이") !== -1 )
nvm
노듣 버전관리
jsx문법이 리액트요소
jsx에서 style은 객체로 넘겨줘야 한다.
style={{color : "orange", fontsize}}(변수쓸때 중괄호 객체라서 중괄효)
가상돔 : 가짜돔을 만들도 미리 돔을 다 만들어놓고 마지막에 진짜돔에 한번에 올린다.
진짜돔이 로딩될때 : 페이지를 새로 열었을때, 데이터가 바꼈을때
mount 진짜 돔에 얹혀지는것(화면에 생기는것)
함수형 컴포넌트
클래스형 컴포넌트 : 더이상 쓰지 마세요. 라이프사이클이있다.
state: 컴포넌트가 가지고 있는 데이터
props : 부모에서 가져온 스테이트 (데이터 변경안됨)
파일명, 컴포넌트명은 대문자, 폴더명은 소문자
.. 내가있는 폴더1개밖
폴더2개 ../../
styled components
사용방법1
<MyStyled bg_color={"true"}>
const MyStyled = styled.divwidth : 50vw; min-height:150px; background-color : ${(props) => (props.bg_color? "red": "purple")};
export default App;
이렇게 하면 div가 하나 생김
nesting
<MyStyled bg_color={"true"}>
<p>im here</p>
</MyStyled>background-color : ${(props) => (props.bg_color? "red": "purple")};
&:hover{ //나에게 효과
background-color:yellow;
}
styled-components 를 사용하면 스타일을 입력함과 동시에 해당 스타일을 가진 컴포넌트를 만들 수 있다.
만약에 div 를 스타일링 하고 싶으면 styled.div,
input 을 스타일링 하고 싶으면 styled.input 이런식으로 사용
