Mong dev blog

개발 기술/사소하지만 놓치기 쉬운 개발 지식87

[JS] 원본을 바꾸지 않는 Array 메소드 (feat. TC39 3단계)

🙂 JS의 ECMAScript 표준은 TC39위원회에 의해 결정된다. 이번 시간에는 TC39에서 3단계(ECMA-262 표준에 편입하고자하여 명세가 거의 마무리 된 상태)에 도달한 Array 메소드에 대해 알아보았다! (TC39제안서 보기) 해당 메소드는 포스팅 시점에는 표준화되지 않았지만 이 기술이 추가될 가능성이 높으므로 미리 알아두자! 1. toReversed() reverse()는 배열의 순서를 반대로 뒤집어준다. 단, reverse()를 사용하면 원본 배열도 변경되는 특징이 있다. const arr = [1, 2, 3, 4, 5]; const reversedArr = arr.reverse(); console.log(arr); // [5, 4, 3, 2, 1] console.log(reversed..

[CSS] 반응형 웹 구현에 좋은 min(), max(), clamp()

💡 이번 시간에는 반응형 웹 구현할 때 사용하기 좋은 min, max, clamp 함수에 대해 알아보았다. 1. min()는 어떻게 쓸까? (1) max-width, width 우리는 max-width, width를 사용해 요소의 너비 범위를 지정할 수 있다. 아래 예시는 target의 기본 너비를 parent의 50%이나, max-width를 사용해 최대 너비를 200px로 지정했다. .target { width: 50%; max-width: 200px; } See the Pen max-width by KumJungMin (@kumjungmin) on CodePen. (2) min() ❓ 그런데, 조금 더 간단하게 그리고 width 말고 padding에도 최솟값을 지정할 수 없을까? 바로 min()함수..

[JS] event.target, event.currentTarget의 차이(feat. 이벤트 버블링)

이번 시간에는 이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보았다! 1. 이벤트 발생 요소에 접근하는 법 우리는 js에서 dom.addEventListener(이벤트, 핸들러)로 요소에 이벤트를 걸거나 html에서 onEvent(ex. onClick)를 사용해 이벤트를 적용할 수도 있다. 만약 버튼에 클릭이 발생할 때마다 특정 로직을 실행하고 싶다면 두가지 방법을 쓸 수 있다. 나는 버튼이야 const btn = document.querySelector('.btn'); btn.addEventListener('click', (event) => { // click발생시 실행할 로직 } ) 나는 버튼이야 function..

[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의 제목, 설명, 이미..

[JS] localStorage란?(feat. 잘 쓰는 팁)

💡 이번시간에는 localStorage는 무엇이며, 어떻게 쓰는 게 좋은지 팁을 알아보았다! 1. localStorage란? localStorage(로컬스토리지)는 사용자의 로컬에 존재하는 저장소이다. 우리는 이 저장소에 특정 데이터를 저장하거나 수정하거나 삭제할 수 있다. 유사한 것으로는 session storage가 있는데, 세션 스토리지와 달리 로컬스토리지는 유효기간이 존재하지 않는다. 1) 기본 사용법 💡 로컬 스토리지는 말 그대로 로컬에서 존재하므로 서버와의 통신없이 사용가능한데, 이 로컬스토리지는 어떻게 쓰는지 간단히 알아보자 (이벤트와 팁을 보고 싶다면 다음으로 넘어가자) (1) 데이터 저장하기 우리는 로컬에 String타입의 데이터를 저장하고자한다. animal이라는 키에 cat을 담고 싶..

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

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을 해야 한다니..조금 번거롭..

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); // ..

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

이전 1 2 3 4 5 6 7 8 ··· 10 다음

티스토리툴바