Mong dev blog

전체 글206

[Effect] 메뉴 버튼 center 효과
😊 이번 시간에는 메뉴에서 활성화된 버튼을 중앙에 배치하는 효과를 만들어보았다! 1. 미리보기 See the Pen button center efffect by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html html을 보면 전체를 감싸는 .container와 .list가 여러 개의 .btn을 감싸는 구조이다. You cliked "? " apple pineapple orange pear banana tomato orange pear 2) CSS(SCSS) (1) body에 기본 스타일 지정하기 body 내부 요소들이 수직, 수평 중앙 정렬이 되도록 flex를 사용한다. body { height: 100vh; /* 수직중앙을 위해 높이 설정 필수 */ di..
2022. 5. 22.
[CSS] subgrid, 일정한 간격으로 배치하는 법(feat. 호환 대체법)
😃 이번시간에는 서브 그리드의 간격을 일정하게 만들어주는 subgrid에 대해 알아보았다. 1. grid란? grid는 우리가 여러 요소들을 일정한 열과 행으로 배치할 때 사용할 수 있다. 아래 예시는 item을 grid를 사용해 3열로 배치한 모습이다. See the Pen grid-example-1 by KumJungMin (@kumjungmin) on CodePen. 만약 2번째 아이템의 높이를 별도로 지정해주면, 첫 번째 행들이 같은 높이로 지정된다. See the Pen grid-example-2 by KumJungMin (@kumjungmin) on CodePen. 그런데 아래와 같은 구조에서 하나의 item의 높이가 높으면 row 영역은 어떻게 될까? 일반적으로 item의 제목, 설명, 이미..
2022. 5. 16.
[JS] localStorage란?(feat. 잘 쓰는 팁)
💡 이번시간에는 localStorage는 무엇이며, 어떻게 쓰는 게 좋은지 팁을 알아보았다! 1. localStorage란? localStorage(로컬스토리지)는 사용자의 로컬에 존재하는 저장소이다. 우리는 이 저장소에 특정 데이터를 저장하거나 수정하거나 삭제할 수 있다. 유사한 것으로는 session storage가 있는데, 세션 스토리지와 달리 로컬스토리지는 유효기간이 존재하지 않는다. 1) 기본 사용법 💡 로컬 스토리지는 말 그대로 로컬에서 존재하므로 서버와의 통신없이 사용가능한데, 이 로컬스토리지는 어떻게 쓰는지 간단히 알아보자 (이벤트와 팁을 보고 싶다면 다음으로 넘어가자) (1) 데이터 저장하기 우리는 로컬에 String타입의 데이터를 저장하고자한다. animal이라는 키에 cat을 담고 싶..
2022. 5. 3.
[JS] DOM을 감시하는, MutationObserver
😀 이번 시간에는 dom의 변경을 감시하는 MutationObserver에 대해 알아보았다! 1. MutationObserver MutationObserver는 특정 dom의 변경을 감시하는 기능을 제공해준다. 이 기능을 사용하기 위해서는 인스턴스를 만들고, 감시하고자 하는 dom을 등록해야 한다. 1) MutationObserver 생성자, 함수 💡 MutationObserver를 사용하기 위해서 생성자와 함수에 대해 알아보자. (1) MutationObserver 생성자 new MutationObserve를 이용해 인스턴스(observer)를 만들 수 있다. 이 인스턴스(observer)를 통해, 우리는 MutationObserver 기능을 사용할 수 있다. const observer = new Mu..
2022. 4. 17.
eslint 적용시 이슈(rules 무시, 우선순위)
👍 이번시간에는 eslint적용시 만날 수 있는 이슈와 해결방법을 알아보았다! 1. 일부 rules 무시하는 법 특정 코드에서 eslint의 rules을 무시해야할 때가 있다. 이때 우리는 파일 자체를 무시하거나, 다음 라인, 특정 범위의 코드를 무시할 수 있다. 만약 index.js의 test함수에서 no-unused-vars를 무시하고 싶다면 어떻게 해야할까? (1) 특정 파일 무시 만약 파일 차원에서 무시하려면 .eslintignore에 파일명을 추가하면 된다. 하지만 이 경우, index.js에 대해 전체 eslint를 적용하지 않는 단점이 있다. // .**eslintignore** index.js (2) 다음 라인만 무시 두 번째 방법으로 주석을 이용할 수 있다. 만약 다음 라인만 무시하고 싶..
2022. 4. 12.
[JS] Object.freeze, Object.seal의 차이
🙂 이번시간에는 객체의 변경을 막는 Object.freeze, Object.seal의 차이점에 대해 알아보았다. 0. 왜 두 함수가 필요할까? 우리는 let, var, const를 사용해 변수를 선언할 수 있다. 그리고 그 중 const로 선언된 변수는 값을 재할당할 수 없다. const name = "susan"; name = "lala"; // TypeError: Assignment to constant variable. 🤔 그렇다면 const로 선언된 객체도 값의 재할당이 불가할까? 답은 아니다. 객체에 데이터를 할당하면, 데이터 자체를 저장하는 게 아닌 데이터를 저장한 메모리의 주소값을 참조한다. 결국 객체가 참조하는 주소가 변하지 않는 한, const로 선언해도 값을 변경할 수 있다. const..
2022. 4. 9.
Array.at(), 배열 인덱스 값에 접근하는 방법
🤔 이번 시간에는 배열의 값에 접근할 수 있는 2가지 방법(index, array.at())에 대해 알아보았다! 1. index로 접근 배열에서 인덱스에 해당하는 값에 접근할 때는 arr[index]방식을 사용할 수 있다. const arr = ['apple', 'banana']; arr[1]; // 'banana' 만약 배열의 마지막 값에 접근하고 싶다면, arr.length() -1 을 사용해야 한다. const arr = ['apple', 'banana']; arr[arr.length - 1]; // 'banana' 그런데 매번 배열의 마지막 값을 접근할 때, arr.length - 1을 해야 한다니..조금 번거롭..
2022. 4. 6.
in, hasOwn, hasOwnProperty의 차이
💡 JS에서는 객체에 특정 속성이 있는지 체크할 수 있는 방법이 in, hasOwn, hasOwnProperty가 있다. 그런데, 이 메소드는 어떤 차이가 있길래 여러 개가 존재하는걸까? 이번시간에는 이 세 메소드의 차이에 대해 알아보았다.(차이점만 보고 싶다면, 바로 2.메소드 간 차이보기로 넘어가자) 1. 각 메소드 알아보기 1) in 연산자 in연산자는 특정 속성이 해당 객체에 있는지 여부를 boolean으로 리턴해준다. 속성 in 객체 (1) array의 경우 array에서 in연산자를 사용하면, 인덱스에 대해서만 체크할 수 있다. const arr = ['apple', 'orange', 'banana']; console.log(0 in arr); // ..
2022. 4. 2.
[JS] JSON.stringify, 세 개의 인자
💡 이번시간에는 JSON.stringify의 세 가지 인자(value, replacer, space)를 알아보았다! 1. JSON.stringify 기본 사용법 JSON.stringify는 값을 JSON 문자열로 변환해준다. 아래 예시는 obj객체를 JSON 문자열로 변환한 모습이다. const obj = { id: 12, name: 'john', }; JSON.stringify(obj); // {"id":12,"name":"john"} 2. 두 번째 인자, replacer 🤔 그런데, 만약 JSON 문자열로 변환하려는 값을 변형하고 싶을 때는 어떻게 해야할까? 이 경우에는 JSON.stringify의 두번째 인자(replacer)를 이용하면 된다. 두 번째 인자는 함수나 혹은 JSON화 ..
2022. 3. 30.

티스토리툴바