본문 바로가기

내배캠 4기 React - TIL

 (64)
221214 TIL {todos .filter((item) => { if(item.isDone === false) { return item; } }) .map((item) => { return ( {item.title} {item.contents} 완료 삭제 ) }) } // todos를 돌면서 item의 isDone이 false이면 그 item을 리턴해주고 // 그 리턴된 item들을 map으로 또 돌면서 return 안의 형태로 반환해줘라 // map은 전체 div를 리턴하기 때문에 몇 번째 div 인지 알기 위해 key 값을 줘야 함 ==> if문을 삼항연산자로 바꾸면 {todos .filter((item) => { return item.isDone === false ? item : null; }) } // isDon..
221213 TIL filter와 map 완벽 마스터! map은 값이 있든 없든 무조건 배열의 요소 개수만큼 반환하고 filter는 말 그대로 필터링, 조건에 맞는 것만 걸러내서 반환한다. 그래서 map의 length는 5개, filter의 length는 2개임!!
221212 TIL 날 그렇게 애먹이던 yarn 버전 .... 컴퓨터에선 잘 됐는데 노트북은 안돼서 노트북이 문젠가 했지만 역시나 해답은 공식 문서..!!! yarn 버전이 자꾸 옛 버전으로 돌아간다면 터미널에 다음과 같이 작성해주면 된다. (node.js 18.6 이상이면!) corepack prepare yarn@stable --activate 너 때문에 정말 애 많이 먹었다..그래도 해결해서 뿌듯!! 하지만 아직 넘어야 할 산이 하나 더 있다는 거.. 엘리 언니 리액트 강의를 보고 yarn을 시작한 사람이라면 무조건 이 에러를 만날 것이다. 엘리 언니 말씀에 의하면 create react-app과 yarn에서 발생하는 충돌 때문에 이러한 에러가 발생한다고 한다. 그래서 [eslint] 관한 걸 우리가 수동적으로 설치해..
221209 TIL Redux 특강 Redux : 상태를 관리하기 위한 도구(라이브러리) 리액트 개발하는 방법 1. index.html 2. id가 root인 div를 index.js에서 코드로 가져옴 3. App.jsx가 작업공간! 리덕스가 필요한 이유 : 상태(state) 관리가 필요하기 때문! store 안에는 state와 reducer가 있다 state -> 컴포넌트 단위!! state ->전역(global 1. 전역 state : Redux store에 있는 것들 2. 컴포넌트 state : props로 전달되는 것들 Reduer는 state와 action을 받는다 후발대 강의 - todolist 리액트는 사용자가 만들어놓은 .jsx 코드를 렌더링 함 state와 props의 변화에 따라 동적으로 렌더링! useS..
221206 TIL 내배캠 시작한 지 이제 한 달 됐는데 초반부터 너무 달렸던 탓인지 번아웃이 온 거 같다.. 마구 쏟아져오는 공부량을 더 이상 받아낼 수 없는 한계에 도달한 거 같다... 열심히 하고싶고 잘하고 싶은 내 마음과 달리 내 머리의 한계를 느껴서일까 마음은 조급한데 따라주지 않으니 힘들 만도... 솔직히 진짜 열심히 공부했는데 공부하는 방법이 틀려서인 건지 내가 너무 부족한 건지 모르겠다 어제부터 진짜 아무것도 하기가 싫어졌다 자바스크립트 강의도 아직 많이 남았고 리액트도 시작했으며 하루하루 해쳐가야 하는 것들이 있는데 큰일이다 허허 오늘은 원장님 보충 of 보충 강의를 듣고 어느 정도 이해를 한 뒤 리액트 과제를 시작했는데 난 왜 css에 집착을 하고 있는 걸까..ㅋㅋㅋㅋ 내가 하고 싶은 틀이 있는데 이리저리..
221205 TIL React import // 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역 const~ // 자바스크립트를 쓸 수 있는 영역 return~ / HTML, JSX 문법 영역 export // 내가 만든 컴포넌트를 밖으로 내보내는 영역 props : 부모 컴포넌트로부터 가져온 데이터 / 부모 -> 자식 방향으로만 전달 가능 props Drilling , propTypes 찾아서 학습하기! 컴포넌트 반복 -> map 함수 사용 : key값 꼭 넣기 리액트 화면을 랜더링 하는 기준 -> props, state 변경이 있을 때! useState로 묶어준 변수([state, setState])들이 변경됐을 때 리액트가 변경을 인지함 밑으로 내려가면서 값을 전달해주는 것을 props라고 함! 컴포넌트 태그 사이에 ..
221202 TIL - 보충 강의 원장님과 함께하는 보충강의 배열(array) 배열 ☞ let arr = []; 배열 = 객체, 인덱스가 자동으로 부여된 객체라고 볼 수 있다. 배열에는 '.'과 '[]'를 이용해 접근, 제어를 할 수 있다. 제어에는 []를 쓴다. 객체에는 속성과 메서드가 항상 존재한다! 메소드와 함수는 비교가 되어야 함. 메서드 : 호출의 주체가 명확함. ex) people.test() 함수 : 호출의 주체가 없다. ex) test() 배열에는 length라는 속성이 있다. length라는 속성은 배열의 최대 인덱스 +1을 의미할 뿐이다. Queue (큐) : FIFO (First In, First Out) Stack (스택) : LIFO (Last In, First Out) 스택에는 값을 추가하는 push와 삭제하는 ..
221201 TIL - DOM 기초 강의 DOM 브라우저가 HTML을 해석하면서 object로 만드는 것을 parsing이라고 한다 object로 만드는 이유는 자바스크립트가 해석할 수 있도록 하기 위해서! 해석한 결과가 DOM Tree를 구성 DOM이란? Document (= HTML) 을 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 거! DOM이 브라우저에 내장되어 있기 때문에 우리가 HTML 파일의 내용을 JS로 접근, 제어 할 수 있다 모든 DOM의 node들은 속성과 메소드를 가지고 있다. (node : 마디, 교점) 메소드 : 어디에 접근해서 제어하기 위한 것, 호출의 주체(.앞에 있는 객체)가 있다! 함수는 주체가 없다! childNodes로 가려면 인덱스를 항상 지정! *직접적으로 접근하려면 선택..

티스토리툴바