react12 썸네일형 리스트형 [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][PayPal] 페이팔 버튼(subscription) 연결 + 태그라인 없애기 현재 구현하고 있는 웹의 결제 기능을, 페이팔을 사용해서 구현하기로 했다.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.. 웹 개발/Nextjs 142024. 5. 8. [Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript] Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c.. 웹 개발/소소한 팁, 버그 해결2024. 3. 22. [Typescript] 변수 타입 확인 방법 [Javascript] 변수가 boolean인지, string인지, 아니면 number인지 확인하고 싶을 때가 있다. 그럴 땐 아래와 같이 string 형태로 확인하면 된다. switch (typeof variable) { case "boolean": // variable is a boolean break; case "string": // variable is a string break; case "number": // variable is a number break; default: break; } 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 20. 이전 1 2 다음
