반응형 분류 전체보기703 [ReactJS] dangerouslySetInnerHTML가 뭘까? Next.js 환경에서 개발을 시작한 지 꽤 지났지만 최근까지도 나는 dangerouslySetInnerHTML 이게 innerHTML을 XSS로부터 보호해 주는 내장된 innerHTML이라고 생각했었다. 충격적이게도 innerHTML이랑 전혀 다를 게 없었다. 공식문서 내용을 가져와보자. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따.. 2024. 2. 15. Smart App Banner란? 스마트 앱 배너란? 스마트 앱 배너는 애플 앱스토어에서 앱을 홍보하는 표준 방식을 의미한다. iOS에서 공식지원하는 Smart App Banner는 웹 페이지의 최상단에 위치하게 된다. 안타깝게도 안드로이드 환경에서는 따로 제공해 주는 게 없기 때문에 Smart App Banner와 비슷하게 따로 구현해줘야 한다. Smart App Banner는 iOS에서 공식 지원한다는점, 해당 App이 사용자 Device에서 지원가능한지 여부를 자체 판단하여 배너를 보여주고 안 보여주는 점, 기타 구현과 대응에 힘을 쏟을 필요가 없다는 점 등등 다양한 장점을 가지고 있다고 생각된다. 그렇다면 무조건 Smart App Banner를 쓰는게 좋은 게 아닐까? 꼭 그렇지는 않은 게, 커스터마이징이 힘들다는 점이다. 특히 .. 2024. 2. 4. [Lodash] 배열에서 false인 요소들 제거하기 (ft. compact) compact lodash에서 제공하고 있는 compact() 메서드의 경우 배열에서 false인 요소들을 제외할 때 사용되는 메서드이다. _.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3] 이런 식으로 배열 요소 중 자바스크립트에서 false로 간주되는 것들을 제거한 배열을 반환해 준다. 근데 이렇게만 보면 굳이 사용할 필요가 있나? 싶기도 하다. const array = [0, 1, false, 2, '', 3] array.filter(v => v) // => [1, 2, 3] 이렇게 filter만 사용해도 크게 복잡하지 않게 사용이 가능하기 때문이다. 실제로 나 같은 경우에는 특수한 경우가 아니면 filter 메서드를 사용하는 편이고, api 응답 데이터를 .. 2024. 1. 24. [JavaScript] console API에 대해 얼마나 알고있을까? console 자바스크립트 환경에서 코드의 결괏값을 출력하거나 테스트를 하기 위해 아마 나를 포함하여 대부분의 사람들이 console.log() 를 주로 사용하고 있을 것이다. 뭐 사실 현업에서도 그렇고 console.log()만을 사용함에도 딱히 불편함을 느끼거나 하는 것은 없다. 단순하게 console.log()만으로 충분해서 그것만 사용하는 걸까? 아니면 그것밖에 모르기때문에 그것만 사용하는걸까? 개인적인 생각으로는 그것만 아는 사람보다는 "익숙하지 않아서" 사용하지 않은 경우가 더 많다고 생각된다. 콘솔 API의 모든 기능을 알 필요는 없다고 생각되며, 가볍게 이런 게 있구나 정도로만 알아두는 것도 나쁘지 않다 생각된다. log level 딱! 이 정도만 알아둬도 일하는데 지장 없을 정도의 로그.. 2024. 1. 9. [NextJS] 빌드/운영 배포 시 console.log 제거하기 NextJS 빌드 시 console 제거하기 로그라는 게 서비스할 때 로그가 노출되면 위험한 부분이 있겠지만, 아무래도 개발을 하는 도중에는 로그를 살려두고 작업을 하는 게 매우 편리하다. 당연하게도 "빌드"시에만 콘솔을 제거해주는 기능을 Nextjs 자체적으로 제공하는 중이다. ▷ next.config.js module.exports = { compiler: { removeConsole: true, }, } console.* 와 일치하는 모든 콘솔을 제거해 달라는 설정이다. 공식문서에서는 babel-plugin-transform-remove-console와 비슷하다고 명시되어 있다. (일전에 NuxtJS에서 동일한 주제로 정리한 글이 있는데 거기서도 babel-plugin-transform-remove.. 2024. 1. 9. [ES6+] arr.(findLast/findLastIndex) - 특정 조건에 맞는 배열의 값이나 인덱스 가져오기 이전부터 존재했던 배열 메서드인 .find() / .findIndex() 가 존재하였는데, 메서드명에서부터 알 수 있듯이 앞에서부터 스캔하는 게 아니라 뒤에서부터 스캔하는 방식이다. 재밌게도 최근에 나온 메서드이다.(ECMAScript 2023) find() / findIndex()와 사용방식이 다를 게 없기 때문에 상황에 맞게 사용만 해주면 된다. 원래 쓰던 것과 동일하므로 구문 설명은 생략하고 바로 예제만 보도록 하자. ▷ 예제 1) Array.prototype.findLast/findLastIndex 기본 사용법 const array1 = [5, 12, 50, 130, 44]; const found = array1.findLast((element) => element > 45); console.lo.. 2023. 9. 10. [ES6+] arr.with() - 특정 인덱스에 위치한 값 변경하기 배열의 특정 인덱스에 위치한 값을 바꾸는 Array.prototype.with() 메서드에 대해 알아보자. 이 함수는 ECMAScript 2023에 소개된 배열 메서드이다. 이 메서드의 역할은 제목과 본문 첫 줄에 적혀있는 것과 마찬가지로 지정된 인덱스에 위치한 값을 대체하고 새 배열을 반환하는 기능을 제공한다. 사실 무슨 기능인지는 알겠는데 어디서 활용할 수 있을지 감이 안 잡힌다. ▷ 구문 arr.with(index, value) index : 변경할 인덱스의 값을 의미하며, 음수로 사용 시 배열의 끝부터 역산한다. value : index에 위치한 값을 대체할 값을 의미한다. ▷ 예제 1) Array.prototype.with() 기본 사용법 const arr = [0, 1, 2, 3, 4, .. 2023. 7. 21. [Lodash] 객체에서 특정 프로퍼티만 뽑아서 사용하기 (ft. pick) pick lodash에서 제공하고 있는 pick() 메서드의 경우 객체에서 특정 프로퍼티만 사용하고자 할 때 사용된다. 일반적으로 어디서든 omit을 소개할때 같이 소개되는 메서드이기도 하며, omit과 마찬가지로 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. // _.pick(object, [paths]) const object = { 'a': 1, 'b': '2', 'c': 3 }; const result = _.pick(object, ['a', 'c']); console.log(result) // { 'a': 1, 'c': 3 } pickBy pickBy() 메서드는 특정 프로퍼티만 뽑아 사용하는것은 동일하나 특정 조건.. 2023. 6. 18. [Lodash] 객체에서 특정 프로퍼티 제외하기 (ft. omit) omit lodash에서 제공하고 있는 omit() 메서드의 경우 객체에서 특정 프로퍼티를 제외할 때 사용되는 메서드이다. omit이라는 명칭은 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. 특히 typescript의 유틸리티 타입에서도 흔하게 볼 수 있다. // _.omit(object, [paths: string|string[]]) const object = { 'a': 1, 'b': '2', 'c': 3 }; console.log(_.omit(object, ['a', 'c'])); //{ 'b': '2' } 특정 객체를 기준으로 제외하고 싶은 프로퍼티의 키 배열을 넣어두면 제외된 나머지 객체가 반환되는 형식이다. omi.. 2023. 6. 13. 이전 1 2 3 4 5 ··· 79 다음 반응형
