본문 바로가기
반응형

JS30일챌린지9

[JavaScript 30일 챌린지] : 12일차 이번에는 시크릿 키를 정해두고 해당 키를 눌렀을 때 액션이 일어나도록 하는 JS 코딩이다. console.log(e.key); 를 통해 방향키를 눌렀을 때 로그를 남길 수 있다. 배열에 누적되어 들어간다. 시크릿 키는 wesbos로 정해두었고 콘솔이 아닌 화면에 입력하면 숨겨진 기능이 나오게 된다. 이렇게 다른 문자를 입력하면 나오지 않고 지정해둔 시크릿 키를 입력했을 때 화면에 나오게 된다. 2022. 2. 8.
[JavaScript 30일 챌린지] : 10일차 체크 박스를 만들어서 체크가 되면 선이 그어지도록 만들었다. 이런식으로 작동하게 된다. 2022. 2. 6.
[JavaScript 30일 챌린지] : 8일차 8일차에서는 그림판을 만들었는데 붓의 크기가 지정한 값 만큼 커졌다. 작아지고 색상도 자동으로 변경이 쭉 되도록 만들었다. canvas 요소는 웹 페이지에서 무언가 그릴 때 사용된다. getContext() 메서드를 호출해서 랜더링 컨텍스트와 그리기 함수들을 사용할 수 있다. 아래 canvas 튜토리얼을 통해 기능을 확인할 수 있다. 캔버스 튜토리얼 - Web API | MDN 2022. 2. 4.
[TIL] : 100 🎉 일일 배움을 위한 Today I Learned ! TIL 100 번째 TIL !! SpringBoot 김영한님 강의 MVC1 편을 완강했다. 강의 시간에 비해서 오래 걸렸지만 얻어가는 것도 많았다. 나중에 필요한 부분을 다시 듣지 않을까 싶다. 2022.02.03 - [Framework/Spring Boot] - [Spring Boot] : 상품 상세 페이지 타임리프 적용 및 목록으로 가기 구현 2022.02.03 - [Framework/Spring Boot] - [Spring Boot] : 상품 등록 처리 @ModelAttribute 사용하기 2022.02.03 - [Framework/Spring Boot] - [Spring Boot] : 상품 수정 구현하기 2022.02.03 - [Framework/.. 2022. 2. 3.
[JavaScript 30일 챌린지] : 7일차 constpeople= [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name: 'Lux', year: 2015 } ]; constcomments= [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nice Nice!', id: 542328 } ]; constpeople와 constcomments에 대한 코드를 제공한.. 2022. 2. 3.
[JavaScript 30일 챌린지] : 6일차 constendpoint= ''; constcities= []; fetch(endpoint) .then(blob => blob.json()) .then(data =>cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { const regex = newRegExp(wordToMatch, 'gi'); return place.city.match(regex) || place.state.match(regex) }); } function numberWithCommas(x) { return x.toString().replace(/\\B(>=(\\d{3})+(?!\\d))/g, ','); } fun.. 2022. 2. 2.
[TIL] : 98 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 JS 챌린지 오늘도 했다. 사실 이해하면서 코드를 치는 것 같지가 않다. 일단 꾸준하게 훈련을 한다는 것에 의미를 두고 아무래도 노마드코더 기초 강의를 먼저 듣고 와야 할 것 같다. 그래도 나중에 기능이 필요할 때 참고하면서 사용할 순 있을 것 같아 다행이다. 2022.02.01 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 5일차 Spring Boot 인프런 강의 진도를 나가기 시작했다. 저번 주차의 정리와 복습을 간단히 하고 새로운 프로젝트 생성과 앞으로 무엇을 할 것인지 요구사항 분석을 해 보는 시간을 가졌다. 2022.02.01 - [Framework/Sprin.. 2022. 2. 1.
[JavaScript 30일 챌린지] : 4일차 // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventors => (inventors.year >= 1500 && inventors.year `${inventors.first} ${inventors.last}`); con.. 2022. 1. 31.
[JavaScript 30일 챌린지] : 3일차 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } .hl { color: var(--base); } CSS에 이런 코드를 주고 JavaScript에 이렇게 코드를 적어줬다. 불러온 그림의 크기를 조절할 수 있고 블러를 설정할 수 있는데 아직 베이스 컬러를 해결하지 못 했다. 완료 코드를 작동시켜도 베이스 컬러 조절이 안 되는데 방법은 따로 찾아봐야 할 것 같다. 2022. 1. 30.
반응형

티스토리툴바