일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- for of 문 예시
- 로지텍 MX Vertical 마우스
- javascript cookie 삭제
- 로컬스토리지 쓰기 읽기 삭제
- 로지텍 버티컬 마우스 사용 후기
- Object for in
- 로컬스토리지 객체 저장
- vscode 재설치
- input type="range"
- 접근자 함수
- vue scss
- forEach map 차이
- 접근자 프로퍼티
- javascript cookie 설정
- 검색창 autofocus
- react 검색 기능 구현
- vue scss 전역 설정
- 객체 반복문
- input range
- input range 컬러변경
- vscode 초기화
- vue sass 사용하기
- javascript cookie 얻기
- react input autofocus
- array method 요약
- next.config.mjs
- for in for of 차이점
- pip 명령 에러
- setter 함수 동기적 실행
- for in 문 예시
- Today
- Total
목록Web Development (51)
짬짬이기록하기
- blockquote : 인용문 - abbr : abbreviation(약어) ex) WAS - cite : 창작물의 제목 - code : html내 code를 출력 - sub : 아랫첨자 - sup : 윗첨자 - s, del : line-through 효과인데, 한번도 쓴 적은 없음 - u, ins : underline 효과 다시 볼까 싶긴하지만 정리한 김에 포스팅 ^^
- concat : 서로 다른 배열을 연결하여 새로운 배열 만듦 - join : 배열안의 요소를 합쳐 string을 만듦, 구분자를 지정하지않으면 기본으로 , 로 구분 요소추가 - push : 배열의 맨 끝으로 추가 - unshift : 배열의 맨 앞으로 추가 요소꺼내기 - pop : 배열의 맨 끝요소를 꺼냄 - shift : 배열의 맨 앞요소를 꺼냄 요소추가 삭제 - splice(2) : index 2번부터 마지막 요소까지 잘라냄 - splice(1,2) : index 1번부터 2개를 잘라냄 - splice(1,2,"js") : index 1번부터 2개를 잘라내고 잘라낸 자리에 "js"를 추가함 기존배열은 바꾸지 않으면서 요소를 꺼냄 - slice(1) : index 1번부터 마지막까지 꺼냄 - sli..
1. Sass 설치 npm i node-sass npm i sass-loader 2. Sass 사용 3. 전역사용 : 모든 vue파일에 일일이 import하는 번거로움을 없애기 위해서 전역으로 설정하는 방법. 프로젝트 최상단에 vue.config.js 파일을 생성해주면, (vue3에서는 CLI 생성 시 자동으로 만들어진다고 하던데, 내 경우는 없어서 생성했다) .vue파일 내 내에서 변수사용이 가능하다. module.exports = { css: { loaderOptions: { scss: { // 전역설정할 scss파일을 선언해준다. additionalData: ` @import "@/assets/_variable.scss"; `, }, }, }, };
for in => 객체 순환 시에 사용한다. 객체에 for of를 사용하면 "Uncaught TypeError: obj is not iterable" 타입에러가 발생한다. 즉 for of는 순번이 있는 index값을 가지는 객체에 사용할 수 있다. (*iterable : 반복가능한) let obj = { a: 1, b: 2, c: 3 }; for (let item in obj) { console.log(item) // a, b, c ==> item은 프로퍼티명, 즉 key를 의미함 console.log(obj[item]) // 1, 2, 3 } for of => 배열 값 순환 시에 사용한다. let array = [1, 2, 3]; for (let item of array) { console.log(it..
function GetCookie() { let hasCookie = document.cookie console.log(hasCookie) } function SetCookie(){ let myDue = new Date(); // 현재시간(객체) myDue.setDate(myDue.getDate() + 10) //일자를 구해서(숫자타입) 10을 더해준 것을 다시 일자로 지정함(객체) myDue.toUTCString() //UTC 표기방식(string타입) let myCookie = "name=hong; expires=" + myDue; //키와 밸류의 조합으로 생성함 document.cookie = myCookie } function DelCookie() { document.cookie = "name=;..
const obj = { name: 'jang', weight: 99, address: 'seoul' } document.getElementById("btnInput").addEventListener("click", () => { for (let key in obj) { const value = obj[key] console.log(key) console.log(value) localStorage.setItem(key, value) } }) 로컬스토리지에 객체의 내용을 key,value 값으로 저장하는 코드 예시

LocalStorage 브라우저의 로컬 스토리지(저장) 공간. key와 value가 한 쌍으로 저장된다. - 쓰기 window.localStroage.setItem('key', value) - 읽어오기 window.localStorage.getItem('key') - 삭제 window.localStorage.removeItem('key') TodoList 만들 때 활용했었고, 웹사이트 사용자 테마 지정 시에도 유용하게 쓸 수 있다.
flex container의 속성들 - flex-direction: row;(기본값) / column, row-reverse, column-reverse - flex-wrap: nowrap;(기본값) / wrap, wrap-reverse - flex-flow : row nowrap; (direction과 wrap을 한줄로 표기) - align-items : baseline (텍스트를 기준으로 균등하게 정렬) - align-content: (row라면 수직축, 즉 반대축을 기준으로 정렬) flex-wrap:wrap 일 경우 사용이 가능함 flex item의 속성들 - order : 순서를 지정할 수 있음 (잘쓰진않음, 아이템의 모든 순서를 정해야 원하는대로 출력가능, order:0부터 시작) - flex-..