목록CodeStates (214)
Jieunny의 블로그
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/pQZVa/btrULOrdpxl/ApB8kd0oolZLnkq9SimzVK/img.png)
📣 DOM Document Object Model HTML 요소를 Object처럼 조작할 수 있는 Model이다. -> JS를 사용하면 DOM으로 HTML을 조작할 수 있다. HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다! 📣 HTML에 JS 적용하기 웹 브라우저는 코드 해석 과정에서 요소를 만나면 HTML 해석을 멈추고 요소를 먼저 실행한다. 🚨 요소는 등장과 함께 실행된다 ✔️ 요소 추가하는 방법 1️⃣ 안쪽에 삽입 ➰ HTML 태그를 만나기 전에 요소가 실행되서 HTML태그를 제대로 불러오지 못한다. 2️⃣ 요소 끝나기 전에 삽입 ✔️ HTML 레이아웃을 컴퓨터에게 전달하기 자바스크립트에서 DOM은 document 객체에 구현되어 있다. console.dir 로 DOM 구조를 조회하..
📣 Jest : 자바스크립트에서 사용할 수 있는 테스트 툴 테스팅 라이브러리 여러가지 상황들을 설정하고, 그 상황에 맞는 결과가 나오는지 자동으로 테스트 한다. 📣 JavaScript Koans 을 사용해서 문제를 해결해라. ✔️ expect ➰ expect(n).toBe(기댓값) : n === 기댓값인지 확인한다. ➰ expect(n).toBeTruthy() : n === true 인지 확인한다. ➰ expect(n).toEqual(기댓값) : n === 기댓값인지 확인한다. 🚨 toBe() 와 toEqual() 의 차이점 ➰ toBe() 는 같은 객체를 가리키고 있는지 확인한다. -> 객체의 내용이 같더라도 다른 메모리에 있으면 False ➰ toEqual() 은 객체의 내용이 같은지 확인한다. ✔️..
➰ 9일차 JavaScript Koans 이라고 배우지 않은 부분을 스스로 찾아보고 학습하는 것인데, 코드스테이츠에서 제공하는 테스트 파일이 있어 실습을 시작했다. lexical scope와 closure를 같이 사용하는 문제가 이해가 잘 안되서 다시 차근차근 해봐야겠다. 새로운 페어님이랑 계산기 목업하는 시간이었는데 내가 해결하지 못했던 부분을 위해서 열심히 해주셔서 감사했다. 나도 내성적이고 페어님도 내성적이라 상당히 어색했지만.. 어쩔수 없는 거 같다😂 이번 주말은 크리스마스 이브 + 크리스마스니까 열심히 놀아야지. 다음주도 열심히 하려면 주말에 스트레스 받지말고 푹 쉬어야한다는 걸 점점 깨닫는 중이다..
📣 ES6 (ECMAScript ): JS의 표준 ✔️ 2015년에 출시됬지만 가독성과 유지보수성이 뛰어난 문법이 많이 추가되었다. ✔️ let, const, 템플릿 리터럴 등 📣 spread/rest 문법 ✔️ spread 문법 배열을 풀어서 인자로 전달하거나, 각각의 요소로 넣을 때 사용 function sum(x, y, z) { return x + y + z; } const numbers = [1. 2. 3]; sum(...numbers)// 6을 리턴 ➰ 배열 앞에 ...을 사용해서 x, y, x에 각각 1, 2, 3 을 전달한다. ✔️ rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용 function sum(...theArgs) { return t..
📣 클로저 함수 ✔️ 화살표 함수 const add = (x, y) => x + y; add(5, 7)// 12 ✔️ 화살표를 두 번 사용 const adder = x => y => x + y; adder(5)(7);// 12 typeof adder(5)// 'function' adder(5)//y => x + y 얘 자체가 리턴값임. 함수의 호출이 두 번 발생한다. adder(5)의 리턴 값이 함수임을 의미 -> (y => x + y) 자체가 adder(5)의 리턴값이다. ✔️ 클로저 함수의 기본 형태 const adder = function(x) { return function(y) { return x + y; } } 1️⃣ 함수를 리턴하는 함수 2️⃣ 클로저의 핵심은 '스코프를 이용해서 변수의 접근..
➰ 8일차 쉬면서 하려고 매시간 50분마다 알람 맞춰놨다.. 50분 집중 - 10분 휴식 10분은 너무 짧아 오늘은 JS 배열, 객체 문제풀고 unit9 학습하는 중 코플릿 문제가 아직까지는 잘 풀려서 다행인가.. 오래 고민하지 않고 보면 거의 바로 풀리는 편이다. 저번주는 이틀이어서 몰랐는데 4일 연속으로 하니까 지친다🥹 50분 집중하는 동안에는 모르는데 하고 나면 진이 빠진다 그래야 되나 그래도 매 시간 열심히 하자는 마음으로 임하고 있다. 내일도 파이팅..