자바스크립트
-
[JavaScript] 자바스크립트 localStorage 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2024. 1. 5. 20:52
LocalStorage란? LocalStorage는 웹 브라우저에서 클라이언트 측에서 데이터를 저장할 수 있는 여러 메커니즘 중 하나로, 특정 네트워크 요청을 통해 값을 저장하고 불러오는 것이 아니라 키-값 쌍을 사용하여 온전히 브라우저의 리소스만을 사용해서 데이터를 저장하고 불러올 수 있다는 특징이 있다. 심지어 브라우저를 종료하고 다시 열어도 유지된다. LocalStorage 다루기 로컬스토리지(LocalStorage)를 다루는 방법은 간단하다. localStorage라는 객체를 그냥 사용하면 된다. localStorage의 각 메서드를 활용하면 손쉽게 저장하고 불러오고 삭제하고 초기화 할 수 있다. 저장하기 저장은 setItem 이라는 메서드를 활용한다. 두 개의 파라미터를 가지는데, 키-값 순서대..
-
[JavaScript] 자바스크립트 includes 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2023. 10. 1. 18:55
includes 메서드란? includes 메서드는 배열이나 문자열에 특정한 값을 포함하는지 여부를 확인하는 메서드다. 특정한 값을 포함하는지에서 유추할 수 있듯이, includes 메서드는 boolean 타입의 값을 리턴한다. 문법 문법은 생각보다 간단한 형태로 사용되는데, 배열이나 문자열 뒤에 includes 메서드를 실행시키고 첫 번째 파라미터에 확인하고 싶은 특정한 값을 아규먼트로 전달해 주면 된다. // 1. 배열에서 includes() 메서드 사용 예시: const array = ['제우스', '카나비', '쵸비', '룰러', '케리아']; console.log('1. 배열에서 includes() 메서드 사용 예시:'); console.log(array.includes('쵸비')); // ? ..
-
[JavaScript] 자바스크립트 every 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2023. 9. 4. 01:14
Every 메서드란? every 메서드는 배열의 요소들이 특정 조건을 모두 만족하는지를 확인하는 배열(Array)의 메서드다. 문법 역시 some과 마찬가지로 forEach, map, filter와 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받지만, 앞의 메서드들과는 다르게 boolean 타입의 값을 리턴한다. 문법 const values = [1, 2, 3, 4, 5, 6]; const isPositive = values.every((currentElement, index, currentArray) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(currentArray); return cu..
-
[JavaScript] 자바스크립트 reduce 메서드 이해하기프로그래밍 이야기/JavaScript 공부 2021. 5. 5. 19:35
Reduce 메서드란? 영한사전에서 reduce는 줄이다.라는 의미로 해석된다. 배열의 요소들을 하나씩 줄여가면서 연산하기 때문일까, 다양한 배열의 값들이 하나의 값으로 줄기 때문일까..? reduce 메서드는 map, forEach와 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드이지만, map과 forEach와는 조금 다른 부분들이 있다. 문법 // reduce const numbers = [1, 2, 3, 4]; numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => { return 다음누산값; }, 초기누산값); reduce 메서드는 위 코드와 같이 두 개의 파라미터를 가지고 있다. 1. 콜백 함수 첫 번째는 map과 forEach처럼 콜백 함수를 ..
-
[JavaScript] 일반적인 달력 만들기 - 영상만학도 프로젝트/JavaScript Calendar 2021. 4. 16. 11:45
자바스크립트로 간단한 달력 만들기에 이어서 일반적인 달력 만들기를 영상으로 녹화해봤습니다. 의도치 않게 오랜시간이 지나서야 이 영상을 제작하게 되었는데, 막상 시간이 지나서 제가 작성한 코드를 보니 개선해야 될 부분들이 많이 보이더라고요 ㅎㅎ 따로 수정은 하지 않았지만 이번에 촬영하면서 느꼈던 저의 부족한 부분들을 좀 더 보완해서 다음 프로젝트에 녹여보도록 하겠습니다. 여담이지만 이번엔 영상 길이가 생각보다 길었는데요, 생각보다 이거 그냥 틀어놓고 1,20분 집중할 때 노동요(?)로 써도 괜찮은 것 같더라구요. 나중에 영상들이 늘어나서 재생시간이 1,2시간 정도가 쌓이면 재생목록으로 묶어서 진짜 노동요로 써볼까도 고민 중입니다..ㅎㅎ 아무튼 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분..
-
[JavaScript] 일반적인 달력 만들기 - 스타일 입히기만학도 프로젝트/JavaScript Calendar 2020. 8. 6. 00:42
지난 포스트까지 해서 필요한 날짜 데이터는 다 불러왔으니깐, 일단 가볍게 스타일을 좀 주도록 하겠습니다. 왜냐하면 지금 너무 못생겼거든요..ㅎㅎ(?) 자, 그러면 일단은 index.html에서 css파일 링크를 걸어줍시다. ... MHDP Full Calendar ... 그러고 나서 간단하게 전체적인 태그들의 margin, padding을 없애주고, 지난번과 마찬가지로 calendar를 가운데 정렬하기 위해서 body부분에 display: flex를 주고 min-height 값을 100vh 만큼 주도록 하겠습니다. * { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } body { display: flex; justify..
-
[JavaScript] 일반적인 달력 만들기 - 날짜 가져오기만학도 프로젝트/JavaScript Calendar 2020. 8. 5. 01:03
HTML 뼈대를 잘 잡았으니, 이제 우리가 필요한 날짜 데이터를 만들어 봅시다. 날짜 데이터니깐 Date객체를 활용해야 되겠죠? const date = new Date(); const viewYear = date.getFullYear(); const viewMonth = date.getMonth(); 그리고 년도와 월은 중간중간에 몇 번 더 사용해야 돼서 메서드를 자꾸 호출하는 것보다는 미리 값을 가지고 있는 게 더 좋을 것 같다는 생각에 변수 두 개를 따로 만들어 줬습니다. 성능에는 큰 영향은 없을 것 같긴 하지만, 필요한 부분에 메서드를 호출하는 것 보다는 이렇게 호출된 값을 미리 만들어 두고 사용하는 게 가독성 측면에서 좀 더 좋은 것 같아서 이렇게 작성해 봤습니다. 혹시나 이 부분에 데해서 좋은 ..
-
[JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript Calendar 2020. 8. 3. 03:30
만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일반적으로 생각하는 Full Calendar를 만들어 볼까 합니다. 이번에도 지금까지 정리했던 slice, concat, forEach, for.. of, Object.keys(), 전개 구문들을 활용해서 작업을 해볼 예정이고, 역시 가장 먼저 해야 될 일은 기획이겠죠? 어떤 달력을 만들어볼까 고민하던 중에 처음에는 예쁘게 디자인된 달력을 만들어볼까 하다가, 저의 디자인 감각이 따라주지도 않을뿐더러 프로젝트 내에서 css 영역에 내용도 많아 질 것 같아 조금 가벼운 마음으로 이번에도 역시 그냥 맥북의 기본 캘린더의 모양을 좀 가져와서 그려봤습니다. 1. 왼쪽 위에는 년도와 월, 2. 그리고 오른쪽 ..