이번 주는 정말 새로 배운 부분들이 정말 많았다. 솔직히 정규시간에 공부할 때에는 바로 이해하기 어려운 것 같다. 계속 틀려보고 시도해본 뒤에 복습을 해야 이해가 되는 느낌이랄까. 정규시간에 배울 때에는 '내가 이해를 못하는 건가, 따라가지 못하고 있는 건가' 이런 생각도 했지만, 복습하면 이해가 되면서 또 재밌다. 참 아이러니하다.
코딩공부는 나랑 밀당하는 것 같다. 처음부터 다 이해시켜주지 않고, 스스로 터득하면서 좀 재밌어질 때 쯤 이해가 안되는 것을 또 알려주고, 나중에 재밌게 느끼게 해준다.
나보다 잘하는 사람들이 많으신 것 같은데 거기에 휘둘리지 않고 내 페이스를 유지하면서 공부해야겠다는 생각을 했다. 조급해서 좋을 것은 없기에. 내 장점은 끈기니까 힘내보자구.
4주차 배운 내용 중 정리하고 싶은 내용
[JS/브라우저] DOM
-
DOM: 프로그래머 관점에서 바라본 HTML로 HTML 문서의 구조와 관계를 객체로 표현한 모델
=> 자바스크립트를 이용해 HTML을 조작 [HTML에 이미 작성되어 있는 엘리먼트를 접근하거나 새로운 엘리먼트를 생성/삭제 가능]
=> DOM은 javascript가 아니며, 이를 이용하여 접근하는 것
-
HTML에 JavaScript 적용:<body>태그가 끝나기 전 -></body>바로 앞에 작성
ex)<script src = "myScriptFile.js"></script>
document 객체에서 body찾아보기
ex)console.log(document.body) -> console.dir(document.body)
console.dir은 DOM의 객체의 모습(object)으로 출력
children(자식) 찾아보기
ex)document.body.children
parent(부모) 찾아보기
ex)document.body.children[1].parentNode
따로 변수 선언으로 정보 저장
ex)let newsContents = document.body.children[1]
console.dir(newsContents)
HTML에 새로운 element작성하고 넣기
새로운 element 만들기
=> document.createElement('div')
할당하기
=> const tweetDiv = document.createElement('div')
트리구조와 연결
=> document.body.append(tweetDiv)
생성한 엘리먼트를 마지막 자식 엘리먼트로 추가
=> const container = document.querySelector('#container')
container.append(tweetDiv)
비어있는 엘리먼트에 내용입력 & class지정
=> tweetDiv.textContent = '입력할 내용';
tweetDiv.classList.add('tweet')
-
엘리먼트 삭제
ex)tweetDiv.remove()
-
여러개의 자식엘리먼트 삭제
ex)document.querySelector('#container').innerHTML ='';
innerHTML은 element <div>와 같은 걸 사용하게 되면 인식하여 작성되기에 유의해야함
querySelector: HTML엘리먼트 정보조회 / 첫번째 인자로 셀렉터를 전달
ex)const oneTweet = document.querySelector('.tweet')=> class이름이 tweet인 엘리먼트 중 첫번째를 조회
const tweets = document.querySelectorAll('.tweet')=> 여러개를 한번에 유사배열로 나타냄 [for문은 사용 가능하지만 배열은 아님]
아이디가 "javascript"이고 내용이 "awesome"인 a태그 생성
let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.testContent = 'awesome'
부모노드.insertBefore(parent, child, n): parent노드에 n번째 자식노드로 child노드 삽입
[parent = 삽입하려는 node, child = 삽입기준이 되는 node, n = 몇번째(없어도 무방)]
부모노드.cloneNode( ): 노드복제
부모노드.appendChild( ): 한번에 하나의 노드만 마지막 자식으로 추가 가능 [console.log로 return값 반환] -> append는 여러개 가능하지만 return 값 반환하지 않음
부모노드.prependChild( ): 노드에 맨 첫번째 자식으로 추가
ex)document.body.children
중요한 내용
- js에서 입력값 설정/ 얻어낼 때 .value를 작성
- 엘리먼트는 존재하지만 보이지 않게 하기 위해서는 css에서 display:none 사용
function handler () {
console.log('버튼이 눌렸습니다!');
}
btn.onClick = handler; => 함수 그 자체로 작성해야함
[JS/Node] 고차함수
-
고차함수: 함수를 리턴할 수 있는 함수 / 인자로 함수를 받을 수 있는 함수 => 실행이 안된 함수를 반환할 수 있음 [실행이 되었는지 확인 유무는 ( )]
=> 콜백함수(callback) : 인자로 받아지는(불러진) 함수
-
내열고차함수(배열 내장 메소드): 배열 메소드 중에 콜백함수[조건을 직접 작성할 수 있음]를 써야하는 메소드 존재 -> 배열을 0부터 한번씩 훑고, 훑으면서 취하는 액션이 존재
-
내장 고차함수
- 고차함수 map : 하나의 데이터를 다른 데이터로 맵핑 => 즉, 다 돌면서 원하고자 하는 값만 남김
- 고차함수 filter : 조건에 맞는 데이터만 분류. 매개변수는 항상 Boolean값으로 true의 값만 출력
- 고차함수 reduce : 여러 데이터를 하나의 데이터로 응축 [배열->문자열, 배열->객체, 내용 추가, 비교에 사용가능]
- 함수들을 입력받아 함수들이 입력된 차례대로 결합된 새로운 함수 리턴
ex) pipe(func1, func2, func3) / output(num) -> func1값 -> func2값 ->func3값 -> 결과
function pipe(...funcs) {
return function(num) {
let result = num;
for (let i = 0; i < funcs.length; i++) {
result = funcs[i](result);
}
return result;
};
}- 정수를 요소로 샂는 배열과 정수를 입력받아 num을 배열에 추가하고 정렬한다고 가정하면, num의 인덱스를 리턴
ex) ([5, 4, 1, 3], 2); -> 1 / ([10, 5, 1, 3], 13); -> 4
function getIndex(arr, num) {
return arr.filter(function(el) {
return el < num ;
}
}).length;
}
화살표함수로 변경 시
return arr.filter(el => el < num).length; 2차원 이상(배열안에 배열)배열을 단일배열로 변경 : arr.flat
- number 타입을 요소로 갖는 배열을 입력받아 배열의 모든 요소의 합을 리턴
ex) [1, 2, 3] -> 6
return arr.reduce(arr, cur) {
return acc + cur;
}
},0);
화살표함수로 변경 시
return arr.reduce((acc, cur) => acc + cur, 0);
[React] 기초
-
React: 프론트앤드 개발을 위한 javascript 오픈소스 라이브러리. 선언형, 컴포넌트 기반
[JSX문법을 사용하며 javascript XML의 줄임말로 확장문법]
-
React 중요 문법
style 속성을 class 대신 직접 넣을 때
=> <div style = { { color: 'blue', fontSize: '30px' } }>
*객체로 적용해야 하며, 숫자는 그냥 기입 가능*
App.js에서 다른 곳에서 필요한 내용을 불러올 때
=> import 불러올 내용 from "주소"
=> import { } from "react-router-dom" [돔에서 불러올 경우]
=> import styles from "주소" [css에서 불러올 경우]
함수 실행시킬 때
=> export default 함수이름 [가장 마지막 부분에 작성]
=> export default function 함수이름 () {
return 실행코드
};
함수 시작
=> const 함수이름 = () => {
return (
);
};
function을 작동하고 const로 선언한 내용을 한 컴포넌트에 작성시 map 사용
=> {선언이름.map((별칭) => {
return (
<div id={tweet.id} key={tweet.id}>
코드작성
</div>
);
})}
*가장 첫 줄에 key와 id값 부여 => 주로 데이터에서 제공하는 id로 할당*
*<div>로 안묶고 가장 첫줄에 묶여있는 곳에서 key와 id값 부여 가능*
