TIL
2022/08/09 TIL
💪 오늘의 공부 Sortable List 미니 프로젝트 해보기 이번 미니 프로젝트는 배열 고차함수 연습에 괜찮았다. map,sort,forEach등을 자유자재로 쓸 수 있게 더 연습해야 겠다. dragStart 부터 enter, leave, over, drop까지의 개념을 다시 봐야겠다. 이벤트 리스너들을 하나로 모아서 한번에 함수에 넣는 것은 복습해야겠다. DOM 요소들을 배열에 넣어 저장 및 관리하는 것도 다시 본다. Sortable List git: https://github.com/SDWoo/20_Web_Projects_With_Vanilla_JS/tree/main/Sortable%20List GitHub - SDWoo/20_Web_Projects_With_Vanilla_JS Contribute ..
2022/08/08 TIL
💪 오늘의 공부 자바스크립트 딥다이브 브라우저 렌더링 과정 공부 이번 장은 이론적인 부분이 많았다. 브라우저에서 어떤식으로 HTML,CSS,JavaScript 코드들이 쓰이는지가 자세히 나와있었다. 이론도 역시 재밌다 ㅎ New Year Timer 미니 프로젝트 이번 것은 저번에 한번 해본건가 싶을 정도로 쉬웠다. Date객체를 오랫만에 다시 써보며 복습해본 느낌이였다. 브라우저 렌더링 과정 정리 git: https://github.com/SDWoo/javaScript-Deep-Dive/tree/main/chapter/36-%20Critical%20Redering%20Path GitHub - SDWoo/javaScript-Deep-Dive Contribute to SDWoo/javaScript-Deep..
2022/08/05 TIL
💪 오늘의 공부 자바스크립트 딥다이브 33, 34, 35 공부 스프레드 문법, 디스트럭처링 할당, Set 과 Map 에 대해 공부했다. 스프레드 문법, 디스트럭처링 할당은 어제 공부했던 이터러블과 이어지는 맥락이였다. 그래서 어제 공부했던 것을 복습하는 겸 다시 보며 공부했다. Set과 Map은 배열과 객체라는 차이점 말고는 거의 비슷한 구조를 가지고 활용방식도 비슷했다. 코딩을 하거나 알고리즘을 풀 때 점점 많이 써보며 연습 해봐야겠다. Relaxer app과 Brickout-game 미니 프로젝트 해보기 Relaxer app 아주 간단한 자바스크립트로 이루어진 미니 프로젝트였다. @keyframe으로 선언한 animation을 주는 것을 연습했다. 원 주위를 도는 포인터를 만들때, 중심을 제대로 잡기..
2022/08/04 TIL
💪 오늘의 공부 자바스크립트 딥다이브 30,31,32 - String, Symbol, Iterable String은 많이 쓰는 메서드들을 다시 복습하는 느낌이였다. Symbol과 Iterable은 이어지는 느낌의 개념이 많았다. 다음파트인 스프레드 문법이나 디스트럭쳐링 할당이 Iterable과 이어지는 것 같다. 내일 다음 파트들을 공부하면서 다시 한번 복습해야 겠다. Memory Cards 미니 프로젝트 해보기 카드를 뒤집는 애니메이션이 어려웠다. 모든건 부모 요소의 perspective 로 부터 시작된다. 3d 효과를 주기 위해 transform, transition등에 3D를 위한 설정해야할 속성 perspective를 적용시킬 부분이 어딘지 판단한다. (관찰자 시점의 투영점) perspective..
2022/08/03 TIL
💪 오늘 한 공부 자바스크립트 딥다이브 Math, Date, RegExp 공부 오늘은 다들 양이 많지 않은 장이라서 3개 공부를 했다. 뭔가 복습하는 느낌이였다. 그리고 정규 표현식은 항상 새로왔다.. ㅎ Speech Text Reader 미니 프로젝트 해보기 speechSynthesis라는 객체를 처음봐서 신기했다. 사용법이 너무 다양해서 좀 안을 파고들고 싶었다. 특히 const message = new SpeechSynthesisUtterance(); 처럼 생성자 함수로 사용해서 .text, .voice, .name등을 정하고 쓰는것이 재미있었다. 여기만 해당하는 것 같은 voicechange 이벤트도 생소했다. 한번 더 해보며 감을 더 익혀 봐야곘다. 👊 느낀점 오늘은 앉아있는 연습을 많이 한 것..
2022/08/02 TIL
💪 오늘 한 공부 자바스크립트 딥다이브 28장 Number 사실 내용이 너무 적어서 너무 빨리봤다. 그래도 한번씩 적어보며 손에 익혀보는 시간을 가졌다. Typing Game 미니 프로젝트 만들어보기 이것도 오늘은 너무 쉬웠다고 생각한다. 최대한 강의 안보고 마크업을 구성하고 css도 해보려고 노력했다. js는 강의보면서도 좀 내가 생각하는 느낌으로 바꿔보려고 노력했다. 🫵 느낀점 오늘 이해가 안된 부분은 form태그의 유무에 따른 변화이다 input 태그를 form 태그로 감싸는 것은 event.preventDefault()로 기본 넘어가는 동작을 없앤다고 이해한다. 그러나 select태그를 form태그로 감싸는 것은 div로 감싸던 select를 바로 querySelector로 받아오든 같다고 생..
2022/08/01 TIL
1. 오늘 한 공부 자바스크립트 딥다이브 27장 배열 오늘은 양이 많아서 아침, 저녁으로 양을 나눠서 공부했다. 고차함수들을 최대한 사용해서 함수형 프로그래밍을 할 수 있게 노력하자 Music Player와 Infinite Scroll Page 만들어보기 progress bar에 대한 부분 복기 e.srcElement로 audio의 duration과 currentTime 받아오기 받아온 걸로 (currentTime / duration) * 100 % 해서 프로그레스 바 구성 무한 scroll 복기 scrollTop, scrollHeight, cilentHeight를 window에서 받아오기 scrollTop+scrollHeight === scrolHeight 가 되면 화면의 끝 화면의 끝이 되기 전에 L..
2022/7/31 TIL
1. 오늘 한 공부 자바스크립트 딥 다이브 26장 ES6 함수의 추가기능 딥 다이브 공부할 때 더욱 집중하고 블로그에 한번씩 더 정리를 해보려고 노력해보자. Meal Finder 미니 프로젝트 만들기 이벤트 클릭시 해당 객체의 상위 요소를 배열로 가져오는 event객체의 path와 composedPath()에 대해 배움 find()메서드: true 이면 해당 요소 가져오고 false 이면 안 가져옴 innerHTML요소에 배열 요소를 넣을 때 map을 사용하는데 많이 익숙해졌다, 마크업 언어로 화면 구성하는 것도 많이 늘었지만 더 노력해야겠다. css는 아직 부족해서 더 보고 노력 많이 해야겠단 생각이 든다. 2. 느낀점 오늘도 역시 난 부족했다. 정진 정진 정진! JS 정리 : https://gith..