본문 바로가기

JS37

[JavaScript 30일 챌린지] : 15일차 15일차 최종 코드 체크 박스가 있는 메모를 추가할 수 있는 프로젝트를 만들었다. 새로고침을 해도 초기화 되지 않고 로컬 저장소에 저장이 되게끔 만들었다. localStorage.setItem('items', JSON.stringify(items)); 로컬 저장소에 저장할 때 문자열 JSON 형식으로 저장해야 한다. 2022. 2. 11.

[JavaScript 30일 챌린지] : 14일차 배열 복사와 참조에 대해 공부하는 코딩이다. 배열 참조는 복사한 결과물을 업데이트하면 둘 다 같은 배열을 가르키고 있기 때문에 원본도 수정이 된다. 하지만 새 배열을 만들고 이전 배열을 결합하는 형식으로 복사본을 가져가면 복사본을 업데이트 해도 원본은 업데이트가 되지 않는다. 2022. 2. 10.

[JavaScript 30일 챌린지] : 13일차 스크롤을 내리거나 올릴 때 이미지가 글 가운데 슬라이드로 껴 들어오는 코드를 작성했다. 이미지 칸이 스크롤을 내리기 전에는 비워져있다. 스크롤을 내리면 이미지가 슬라이드로 채워진다. 다시 스크롤을 올리면 이미지가 사라지게 된다. 2022. 2. 9.

[JavaScript 30일 챌린지] : 12일차 이번에는 시크릿 키를 정해두고 해당 키를 눌렀을 때 액션이 일어나도록 하는 JS 코딩이다. console.log(e.key); 를 통해 방향키를 눌렀을 때 로그를 남길 수 있다. 배열에 누적되어 들어간다. 시크릿 키는 wesbos로 정해두었고 콘솔이 아닌 화면에 입력하면 숨겨진 기능이 나오게 된다. 이렇게 다른 문자를 입력하면 나오지 않고 지정해둔 시크릿 키를 입력했을 때 화면에 나오게 된다. 2022. 2. 8.

[TIL] : 104 일일 배움을 위한 Today I Learned ! Spring Boot 스프링 부트 김영한님 강의를 들으면서 코딩하고 복습하면서 노션에 기록하고 해당 내용을 블로그에 복붙으로 옮겼다. 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 반복문 사용 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 if, unless, switch문 사용 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : 주석 2022.02.07 - [Framework/Spring Boot] - [Spring Boot] : block 2022.02.07 - [Framework/Sp.. 2022. 2. 7.

[JavaScript 30일 챌린지] : 11일차 const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player.querySelectorAll('[data-skip]'); const ranges = player.querySelectorAll('.player__slider'); function togglePlay(.. 2022. 2. 7.

[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.

[TIL] : 99 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 6일차를 완료했다. 2022.02.02 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 6일차 완료 SpringBoot 김영한님 강의에서 mvc1탄을 마지막으로 간단한 프로젝트를 만들어 보는 것을 진행하고 있는 중이다. 2022.02.02 - [Framework/Spring Boot] - [Spring Boot] : 요구사항에 맞춰 상품 도메인을 개발하고 테스트 코드를 작성하기 2022.02.02 - [Framework/Spring Boot] - [Spring Boot] : thymelef, 타임리프 간단 사용법 질문 노트 오랜만에 질문 노트를 작성했다. 따로 궁금해서 .. 2022. 2. 2.

[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] : 96 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 이번주에 휴식을 조금 갖기로 했지만 30일 챌린지는 지켜야하기 때문에 간단하게 JS 공부를 마쳤다. 미해결한 부분이 있지만 일단 핵심 기능은 작동하는 것을 확인했다. 2022.01.30 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 3일차 2022. 1. 30.

[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.

[JavaScript 30일 챌린지] : 2일차 .hand { width: 50%; height: 6px; background: black; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); CSS에 transform-origin: 100%부터 넣어줬다. 화면에서 시계가 움직이도록 설정해 주는 프로젝트였다. 각각 초, 분, 시간을 구하고 값을 넣어주어 동작시켰다. 2022. 1. 29.

[TIL] : 92 일일 배움을 위한 Today I Learned ! 프로그래머스 프로그래머스에서 행렬의 덧셈을 파이썬으로 풀어봤다. 알고리즘 풀이는 익숙해 지지가 않는다.. 매우 매우 노력이 필요한 부분이 될 것 같다.. 2022.01.26 - [Algorithm/프로그래머스] - [프로그래머스] : 행렬의 덧셈 파이썬 풀이 JavaScript 자바스크립트 노마드코더 강의를 듣고 있다. 아직 기초 부분이지만 내가 아직 Java도 완벽하지 않기 때문에 혹시 놓치는 것이 있을까봐 꼼꼼하게 듣는 중이다. 때문에 아직은 기초 파트만 갈고닦고 있다. 2022.01.26 - [프로그래밍언어/JavaScript] - [JavaScript] : Object 기초 실습 2022.01.26 - [프로그래밍언어/JavaScript] - [J.. 2022. 1. 26.

[JavaScript] : 자바스크립트 기초 파트 const a = 5; const b = 2; let myName = "juhyeon"; console.log(a + b); console.log(a * b); console.log(a / b); console.log("hello " + myName); myName = "Oh JU HYEON" console.log("Your new name is " + myName); const는 값을 바꿀 수 없다. let은 값을 변경할 수 있다. 업데이트가 허용되야 하는 변수는 let, 그 외 변수는 const를 사용한다. 주로 const를 사용하길 추천하고 가끔은 let도 괜찮다. 하지만 가능하면 var는 안 쓰는 게 좋다. 왜냐하면 코드에서 무엇을 원하는지 알기가 어려워진다. let something; conso.. 2022. 1. 24.

이전 1 2 다음

티스토리툴바