본문 바로가기
반응형

전체 글698

[NextJS] framer-motion을 활용한 모달(Modal) 구현 framer-motion을 굳이 사용한 이유는? React에서 제공하고 있는 Portal기능만을 사용하여 모달창을 구현할 수는 있으나 "Exit Animation"을 주기가 어려웠다. React환경에서는 show/hide의 상태값을 변경하여 리렌더링 되면, 모달 컴포넌트가 보이거나 사라진다. 하지만 "리렌더링"이 되면서 보이거나 사라지기 때문에 사라질 때는 애니메이션 없이 바로 사라지는 현상이 발생한다. 라이브러리도 있는 마당에 어떻게든 구현할 방법은 있겠지만 이미 훌륭하게 제공하고 있는 라이브러리를 굳이 쓰지 않을 이유가 없었다. 그리고 라이브러리 종류 역시 많았는데 그 중에 framer-motion을 선택한 이유는, 어차피 이왕 선택해서 사용하는 거 가장 인기가 많고, 호환성이 좋다고 알려진 라이브러.. 2024. 3. 22.
[CSS] 모바일 브라우저에서 발생한 sticky 하단 고정 오류 버튼이 자유분방하게 움직인다고? 회사에서 업무를 진행하던 도중 놀랍게도 말썽꾸러기인 사파리 환경이 아니라 크롬, 삼성 브라우저에서 이슈가 발생하였다. QA팀 제보로 알게 되었는데, bottom: 0으로 박아두었던 버튼이 자유분방하게 돌아다닌다는 것이다. 놀랍게도 position: sticky / bottom: 0px 의 조합으로 구현된 footer버튼이 전혀 예상하지 못한 방향으로 동작하였다. 원인 파악 사실 이 글을 작성하는 시점에서도 정확한 원인을 알 수 없다는 게 좀 슬프다. 단지, 브라우저의 뷰포트를 잘못 인식하는게 아닌가 "추측"만 할 뿐이다. 특히 이는 본문 시작할 때 언급한 것 처럼 크롬, 삼성브라우저 중에서 유독 삼성브라우저에서 재현이 잘된다. 크롬의 경우에는 "특정 버전"에서만 stick.. 2024. 3. 22.
[SCSS] Sass Variable in calc() function Error SCSS문법을 사용하여 스타일을 주던 중 calc() 함수에 SCSS변수를 넣어 계산을 하려고 하였더니 빌드 오류가 발생하였다. 이렇게 사용하면 안 되는 건가? 싶어 레퍼런스 조사를 해보았더니 SCSS변수를 calc() 함수에 넣어서 사용하려면 "보간 문법"을 사용해야 한다고 한다. 이렇게 까지 귀찮을 일인가? 고작 변수를 가져다 계산에 사용하려는 건데 보간문법(#{})까지 써야 한다니 여간 불편한 게 아닌가 싶었다. 그리고 몇 가지 의문들이 해결이 안되었다. 참고한 레퍼런스의 sass버전을 알 수 없었다. 이게 버전 문제가 아닌가라는 의문도 들었고, 우리랑 같은 환경이 아닌 이상 언제든지 상황은 바뀔 수 있다고 생각된다. sass 개발진들이 이렇게 귀찮은 것들을 그대로 방치했을까? 말 그대로다. 빠르.. 2024. 3. 19.
[CSS] aspect ratio - 요소 가로세로 비율 지정하기 aspect-ratio? 언제 나왔는지는 모르겠으나 과거에는 css에서 비율로 요소를 조절할 수 없었다. 하나 이제부터 aspect-ratio 속성을 사용하여 비율을 지정할 수 있게 되었다. aspect-ratio 속성은 주로 이미지나 동영상을 비율대로 줄이거나 늘리는데 활용되며 매우 직관적인 특징이 있다. 해당 속성으로 인해여 이제 요소를 width/height로만 지정하던 시대가 저물지 않을까 싶다. 일반적인 사용방법은 다음과 같다. aspect-ratio: 1 / 1; aspect-ratio: 1; /* fallback to 'auto' for replaced elements */ aspect-ratio: auto 3/4; aspect-ratio: 9/6 auto; /* Global values *.. 2024. 2. 15.
[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.
반응형
TOP