본문 바로가기

Nextjs 1417

[CSS] 이미지 위에 gradient 넣기 + 틈 없애기 다음 페이지로의 자연스러운 전환이나, 이미지 스크롤러의 양 끝에 자연스럽게 이미지가 사라지는 효과를 위해 background를 gradient로 설정한 div 태그 등을 넣기도 한다. 이때, graident 컴포넌트가 생기기는 하는데 이미지 뒤에 있는 경우에는 z 값 조정 대신 position 속성을 absolute로 설정하면 해결된다.아래는 예시 코드. (나는 tailwind css 사용 중이라 아래처럼 입력했다).gradient-edge { @apply absolute inset-0 left-0 right-0 top-0 bottom-0; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.00) 25.. 웹 개발/소소한 팁, 버그 해결2024. 11. 22.
[Next.js 14] router.push에서 query만 변경 시 스크롤 유지하기 [Scroll Restoration] 웹사이트를 구현할 때 popup modal을 query에 값을 확인해서 해당 값이 있으면 overlay로 현재 화면 위에 뜨는 방식으로 구현했다.그런데 이렇게 구현하다 보니 팝업을 띄우는 버튼을 눌렀을 때 router.push를 이용하는데,이게 쨌든 url을 바꾸다 보니까 계속 뒤에 있는 화면 스크롤이 처음으로 올라갔다. 근데 이게 굉장히 거슬린달까...팝업을 켰다가 끄면 응당 원래 화면 위치가 보일 것을 기대하는데, 갑자기 처음으로 올라가는 것이 부자연스러웠다. 이를 해결하기 위해 scroll restoration이라는 키워드로 검색을 해보았다.스크롤 유지 기능을 검색해보았을 때, 뒤로가기를 했을 때 전 페이지의 스크롤 유지하는 방법만 발견했다. (심지어 실험적인 기능)module.exports = {.. 웹 개발/Nextjs 142024. 11. 21.
[Next.js 14] .env 파일 생성 및 환경변수 설정 [AWS Amplify] 코드를 작성하다보면,API Key나 Client Token과 같이 소스코드에 포함시키기 민감한 정보를 다뤄야 하거나개발 환경마다 다른 변수를 사용해야 할 때가 존재한다. 이럴 때 사용하는 것이 환경변수이다.기존에 Node.js에서 이 환경변수를 이용하기 위해서는 dotenv 패키지를 사용해야 했는데,Next.js에서는 별도의 패키지 없이 환경변수를 사용할 수 있다. (React도 마찬가지)살짝 주제엔 벗어나지만 혹시나 싶어, 환경변수는 빌드 파일에 포함되므로 누구나 볼 수 있다는 사실을 한번 짚고 넘어가겠다. 암튼 이번 포스팅에서는 Next.js 프로젝트에서 환경변수를 생성하고,이를 AWS Amplify로 배포할 때 적용하는 방법을 정리해보고자 한다..evn 파일 생성 및 환경변수 할당프로젝트의 바로 아.. 웹 개발/Nextjs 142024. 5. 8.
[Next.js][React] 숫자 3자리마다 , 찍기 var n = 1234567890;String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')// "1,234,567,890" 웹 개발/소소한 팁, 버그 해결2024. 5. 8.
[Next.js 14] 사용자 데이터 csv로 변환 및 파일로 다운로드 웹을 개발하다보면, 웹 관리자에게 필요한 기능을 추가해야 하는 경우가 있다.이 포스팅 제목처럼 사용자 데이터를 csv 파일로 변환하고 다운로드하는 기능이 그 예시인데,이 기능은 사용자 통계를 내거나 마케팅 메일 수신을 동의한 사용자에게 메일을 일괄 전송할 때 유용하다.마케팅 팀에서 홍보 메일을 전송하기 위한 사용자 리스트를 요청했을 때,다른 추가 작업 없이 관리자 모드에서 버튼 하나만 달칵 -> (수신 동의한) 메일 리스트가 나열된 csv 파일이 다운로드 된다면엄청 편하지 않겠는가! (물론 db에서 메일 리스트를 가져와 메일 수신 동의 여부로 필터링해서 보내주는 api가 사전에 구현되어 있어야 하긴 함) 암튼 서론이 길었는데, 코드를 보자.const UserListDownloadButton = () =>.. 웹 개발/Nextjs 142024. 5. 8.
[Next.js 14] Link나 a 태그 없이 외부 링크로 연결하기 Link나 a 태그 없이 웹 내부의 다른 페이지로 가기 위해서 next/navigation의 useRouter()을 이용하면 된다. const router = useRouter(); router.push('/main'); 이때 기타 옵션을 정해줄 수도 있지만 일단 넘어가고, 외부 링크로 연결하는 경우를 살펴보자. 일반적으로 Link나 a 태그의 href 속성으로 외부 링크를 입력해주면 되는데, 개발하다보면 button의 onClick에 연결해야 하는 등의 상황이 있다. 그럴 땐 window.open()을 사용하자. window.open("https://www.google.com")} /> 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 24.

티스토리툴바