본문 바로가기

Web Development/Front-end

(22)
[Zerocho-13] 자스스톤 (Call by Value, Constructor, this, 엄격모드) 안녕하세요. 오늘은 이전시간에 배운 내용과 연계해서 이론을 조금 더 깊게 들어가보는시간을 가지겠습니다. 우선 지난 시간에 했던 1단계 복사와, 2단계 깊은 복사에 대해서 잠깐 복습하고 넘어갈꼐요! //1단계 복사 let obj = { a: 1, b: 2 }; let copy = Object.assign({}, obj); console.log(copy === obj); //다중단계 복사. *단, 프로토타입은 복사할 수 없음. let obj2 = { a: 1, b: {c:2} }; let copied = JSON.parse(JSON.stringify(obj2)); console.log(copied === obj2); 객체(객체,배열,함수) 는 이런식으로 복사 할 수 있다고 했었습니다. 1. Call by V..
[Javascript] TodoList 그냥 공부하다보니, 혼자 프로젝트해보는 경험이 계속 필요하겠더라구요. 클론코딩이던 뭐던 강의에서 익힌것이 100% 머리에 남아 활용할 수 없으니깐요. 그래서 이번엔 '투두리스트'를 한번 만들어봤습니다. TodoList ㅋㅋ 뭔가 디자인이 어정쩡하죠? ㅠㅠ 디자이너가 아닌 제 한계인듯요 ㅋㅋ.. 아무튼, 어떻게 만들었을까요? 일단 순서도를 그렸어요. 제로초강의에서 배웠던것처럼요. ㅋㅋ 만들다보니 순서도대로 완벽히 간 것 같진않은데, 확실히 코드쓰다보면 어? 이거다음 뭐해야하지? 할 때 유용하더라구요. 자 그럼 만든 결과물 코드를 한번 살펴보겠습니다. todo.html Blockmonkey's TodoList 제가 써놓고도 복잡시럽네요; 일단, background 배경을 넣을 태그를하나 잡고, 시계를 만들 ..
[Zerocho-12] 카드 짝 맞추기 (toggle, includes, 참조&복사, 팩토리패턴&프로토타입) 안녕하세요. 오늘은 카드 짝맞추기 게임을 하면서 배웠던 주요 내용들을 다뤄보며 복습하는 시간을 가지려고 합니다. 바로 시작하겠습니다. 1. classList.toggle('ClassName'); 토글은, classList.add() 와 classList.remove() 두 함수를 묶은 것입니다. 즉, 클릭하면 클래스를 생성해주고, 다시 클릭하면 클래스를 삭제해주는 역할까지 합니다. 잘 이해가 안되시면 동영상을 참조해주세요. toggle 코드를 한번 살펴보겠습니다. let text = document.querySelector('div'); let btn = document.querySelector('.btn'); btn.addEventListener('click', function(){ text.class..
[Zerocho-11] 틱택토 심화 ( 스코프 문제를 해결하는 3가지 방법 ) 안녕하세요 ! 틱택토에 컴퓨터 턴을 만들고, 무승부를 처리하는 코드를 추가했습니다. 그리고 이 과정에서 지난 시간에 다룬 스코프 문제를 해결하는 방법 3가지를 알게되었는데요. 이 부분에 대해 다뤄보고자 합니다. 1. 변수를 위로 빼는 방법 (스코프 문제 해결법 1) 우선 아래와 같은 코드가 있다고 가정합시다. const scope = () => { let a = 'monkey'; } scope(); console.log(a); 당연히 scope함수 내에 있기에, 스코프 문제가 발생할 것이고, console.log(a)함수는 a변수를 읽지 못할 것 입니다. 그럼 어떻게 해결할 수 있을까요? let a; const scope = () => { a = 'lion'; } scope(); console.log(a..