solar_system_11 solar_system_11

아래의 예시처럼 특정 위치에 css를 다르게 적용하고 싶거나텍스트 중간에 사용자 닉네임이나 결제 예정일 등의 데이터를 포함하여 함께 Localization, 즉 다국어 지원을 해야한다면잘 찾아오셨습니다!  들어가기 앞서, 해당 글은 이전에 작성했던 i18next를 이용한 App router 기반 Localization 방법의 응용편입니다. [Next.js 14] App router 기반 Localization / Internationalization [i18next]다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다.이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.jshotsunchip.tistory.com ..

웹사이트를 구현할 때 popup modal을 query에 값을 확인해서 해당 값이 있으면 overlay로 현재 화면 위에 뜨는 방식으로 구현했다.그런데 이렇게 구현하다 보니 팝업을 띄우는 버튼을 눌렀을 때 router.push를 이용하는데,이게 쨌든 url을 바꾸다 보니까 계속 뒤에 있는 화면 스크롤이 처음으로 올라갔다. 근데 이게 굉장히 거슬린달까...팝업을 켰다가 끄면 응당 원래 화면 위치가 보일 것을 기대하는데, 갑자기 처음으로 올라가는 것이 부자연스러웠다. 이를 해결하기 위해 scroll restoration이라는 키워드로 검색을 해보았다.스크롤 유지 기능을 검색해보았을 때, 뒤로가기를 했을 때 전 페이지의 스크롤 유지하는 방법만 발견했다. (심지어 실험적인 기능)module.exports = {..

console.log일반적으로 JavaScript 프로그래밍 시 디버깅 목적으로 브라우저의 console.log 메서드를 자주 사용할 것이다.물론 콘솔 로그는 간편한 디버깅 도구이긴 하지만,보안 이슈가 발생할 우려가 있기에 실제로 배포되는 웹 어플리케이션에는 포함되지 않는 것이 좋다. ESLintESLint는 자바스크립트 코드에서 에러가 있는 부분에 표시를 해주는 정적 코드 분석 도구이다.일반적으로 Typescript, Prettier과 함께 웹 프로그래밍을 할 때 함께 설치되며, 코드의 퀄리티를 보장해준다.ESLint는 하나의 규칙으로 no-console 룰을 가지고 있는데,빌드(npm run build) 시 콘솔 로그가 포함되어 있을 경우 규칙 위반으로 처리하여 빌드가 정상적으로 완료되지 않는다. n..

코드를 작성하다보면,API Key나 Client Token과 같이 소스코드에 포함시키기 민감한 정보를 다뤄야 하거나개발 환경마다 다른 변수를 사용해야 할 때가 존재한다. 이럴 때 사용하는 것이 환경변수이다.기존에 Node.js에서 이 환경변수를 이용하기 위해서는 dotenv 패키지를 사용해야 했는데,Next.js에서는 별도의 패키지 없이 환경변수를 사용할 수 있다. (React도 마찬가지)살짝 주제엔 벗어나지만 혹시나 싶어, 환경변수는 빌드 파일에 포함되므로 누구나 볼 수 있다는 사실을 한번 짚고 넘어가겠다. 암튼 이번 포스팅에서는 Next.js 프로젝트에서 환경변수를 생성하고,이를 AWS Amplify로 배포할 때 적용하는 방법을 정리해보고자 한다..evn 파일 생성 및 환경변수 할당프로젝트의 바로 아..

웹을 개발하다보면, 웹 관리자에게 필요한 기능을 추가해야 하는 경우가 있다.이 포스팅 제목처럼 사용자 데이터를 csv 파일로 변환하고 다운로드하는 기능이 그 예시인데,이 기능은 사용자 통계를 내거나 마케팅 메일 수신을 동의한 사용자에게 메일을 일괄 전송할 때 유용하다.마케팅 팀에서 홍보 메일을 전송하기 위한 사용자 리스트를 요청했을 때,다른 추가 작업 없이 관리자 모드에서 버튼 하나만 달칵 -> (수신 동의한) 메일 리스트가 나열된 csv 파일이 다운로드 된다면엄청 편하지 않겠는가! (물론 db에서 메일 리스트를 가져와 메일 수신 동의 여부로 필터링해서 보내주는 api가 사전에 구현되어 있어야 하긴 함) 암튼 서론이 길었는데, 코드를 보자.const UserListDownloadButton = () =>..

현재 구현하고 있는 웹의 결제 기능을, 페이팔을 사용해서 구현하기로 했다.Nextjs 프로젝트에 페이팔 버튼을 넣는 건 react-paypal-js 패키지를 사용하면 쉽게 구현할 수 있다. @paypal/react-paypal-jsReact components for the PayPal JS SDK. Latest version: 8.3.0, last published: 8 days ago. Start using @paypal/react-paypal-js in your project by running `npm i @paypal/react-paypal-js`. There are 61 other projects in the npm registry using @paypal/react-pwww.npmjs.com..

404 페이지를 만들어야 하는 이유 3가지 웹사이트를 개발할 때, 사용자가 올바르지 않은 경로로 접근했을 때도 처리해주는 것도 중요하다. 일반적으로 사용자가 이상한 경로로 접근했을 때 띄워주는 것이 404 페이지인데, 이 페이지를 직접 작성해주는 것이 좋다. 그 이유에는 크게 3가지가 있다. 보안상의 이유 404 페이지를 따로 만들지 않으면, 소스코드의 일부가 사용자에게 공개될 수 있다. 404 에러가 뜨면 해당 에러가 어디서 발생했는지 코드의 위치를 알려주는 경우가 있다. 대부분의 사용자는 대수롭지 않게 생각하겠지만 일부 사람들에 의해 악의적으로 사용될 수 있으므로, 그 가능성을 미연에 방지할 필요가 있다. 사용성 향상 웹사이트와 같은 디자인 시스템을 적용한 커스텀 404 페이지를 작성하면, 디자인과 ..

얼마 전(?)에 작성한 App router 기반 Localization 기능을 자동화하기로 했다. [Next.js 14] App router 기반 Localization / Internationalization [i18next] 다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다. 이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.j hotsunchip.tistory.com 설명 지금 자동화할 부분은 구글 스프레드시트에서 단어를 가져와서 각 나라별 json으로 변환하는 부분이다. 이런 비슷한 로직을 유니티 uiToolkit 이용해서 ui 다국어 지원을 구현할 때 파이썬으로 작성했었다. 간단하게 설명하자면 exc..