1.Next.js .env파일 사용하기 프로젝트 최상단에 .env파일을 설정한뒤사용할 수 있다. 그중 순서대로 나열해보면 1-1)로컬 환경에서 env사용하기 : .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword //서버에서 사용할 시는 위와같이 사용한다. NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk //브라우저에서 사용할시는 NEXT_PUBLIC_키워드를 사용해준다. 사용하는방법 아래와같이 process.env.변수명 으로 사용할 수 있다. //서버에서 사용할시 export async function getStaticProps() { const db = await myDB.connect({ host: process.env..
"라이브러리에 패배한 나" 라는 말과 함께 시작하고 싶다. 윤달과 윤년에 대해 아는가...? 그냥 한참 전인가 언젠가 C언어 수업에서 윤달과 윤년까지 고려해 달력을만드는 알고리즘을 짰던 기억이있다. 뭐 사실 까다로울 뿐이지 불가능한 수준의 구현은 아니었다. 하지만 이런기억.. 이제는 잊는게 좋다. 프론트엔드 화면 구현중 datePicker를 사용해야 하는 상황이 있었다. 결론만 말하면 2023.07.17 - 2023.08.17 의 형태로 정확히 한달 간격의 선택을 해야하는 상황이 있었다. 시나리오로 따지면 오늘로부터 정확히 한달전 참 모호하다. 오늘이 17일이면 월만 1을 빼면되나..? 만약 31일이면 2월 31일은 없는데? 날짜가 의외로 여러 예외사항이 매우많았다. let day1 = '2023.07...
- 서론 (Next.js에서 폰트 바꿔서 사용하는 대략적인 가이드) 보통 인터넷이 연결 되어있는 상황에서는 패키지나, 구글폰트를 이용해 폰트적용을 많이 합니다. 아래와 같이 말이죠 layout.js import './globals.css' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children }) { return ( {children} ) } 위 코드는..
https://uiwjs.github.io/react-markdown-preview/ React Markdown Preview uiwjs.github.io - React Markdown Preview 라이브러리 마크다운, 코드블럭 등을 자동으로 만들어 주는 라이브러리다. 리액트에서는 사용하는데 문제가 없겠지만 Next.js 13에서 사용했을 때 작은 문제가 2가지 있었다. - 1번째 Module not found: (ESM packages .....) 에러 Next.js 공식문서를 보면 이와같은 경우에 아래와같이 해결하라고 나와있다. https://nextjs.org/docs/messages/import-esm-externals import-esm-externals | Next.js ESM package..
검정 테두리를 상위 컴포넌트로 보고 파란 테두리를 하위 컴포넌트로 본다. 그리고 그 안에 또 빨간색으로 하위컴포넌트가 있다. 위 페이지는 현재 라면랭킹 데이터가 없지만, 상위 컴포넌트에서 라면 랭킹 1~4위의 id값을 불러온다. 그리고 불러온 id값을 기준으로 1위부터 4위까지의 이름과 제조사를 4번 불러오게된다. 즉 요약하면 1. 랭킹 1~4위의 ID값을 받음 2. 그리고 그 ID값을 이용해 이름,제조사를 4번 불러오는것이다. 근데 랭킹을 이런방식으로 구현하는건 절대 좋지않다고 생각하지만, 지금 백엔드 개발파트친구의 일정상 어쩔 수 없다고 생각한다. 예를들어 랭킹 100위까지 있다면? 사용자 한명당 한페이지에서 100번의 API요청이 필요한거다. 백엔드에서 1~4위의 아이디 + 이름,제조사 까지 한번에..
Next.js같은 경우는 Image태그를 사용하라고 권장하지만 react와 next.js에서 img태그를 사용할 시에 대체 이미지 처리하는 방법을 기록해둔다. 상단의 이미지와같이 존재하지 않는경우 대체이미지를 띄우게 할 수 있는데 단순 삼항연산자 조건문으로 설정해도 되겠지만 그래도 혹시나 파일이 없을 때 대체 이미지를 띄우는 방식을 알아두자, 특히 외부 링크로 사진을 가져올 때 필요할것 같다. 이와같이 사용한다고 치면 src = 이미지링크 alt = 이미지가 없을시 나타내줄 설명 그리고 onError 부분이 본 링크 이미지가 없을때 대체 해서 실행해주는 부분이다. react와 next.js에서는 따로 함수를 만들어 사용해준다. const default_img = "ramen/default.png"; co..
약 400~500개의 라면 데이터가 있는데, 100개정도의 데이터는 사진파일이 존재하지 않았다. 그래서 사진파일이 없는경우, onError로 처리해주다가 500에러 문제로 좀더 근본적으로 처리하려고 했는데 현직 개발자 분에게 상담했더니 이런경우는 백엔드에서 데이터가 없는파일은 없다고 처리를 해주는게 맞다고 하신다. 근데 지금 프로젝트 진행과정상, 다시 데이터 정리하기도 시간이 얼마없고 백엔드 담당하는 친구가 거의 한명인 상황 급하게 사진파일이 없는 녀석을 처리해줄 필요가 있었다. 500에러를 신경쓰지 않으면 그냥 진행하면 되지만, 그 에러가 보기싫어 사진파일이 없는 데이터를 배열로 만들어주어 처리했다. 그 때 사용한 export문법 data.js let doc = [ "7가지 채소가득 우리밀라면.png"..
이와같이 반응형 창에서 각 이미지의 간격 픽셀을 다르게 주고싶었다. 보면 좌우 좌우를 반복하면서 약간의 지그지그 형태로 배치해 주었는데, 핸드폰 화면에서 더 넓게 배치하면 이미지가 겹쳐 보기힘들어지고, 큰화면에서 좌우 간격을 좁게 배치하자니 좀 보기가 좋지 않았다. 그래서 화면별로 지그재그 간격을 다르게 해주기 위해 사용한게 변수로 css설정을 해주자! 였다. const [reactive, setReactive] = useState('40px') const [reactive2, setReactive2] = useState('80px') useEffect(() => { if (size.width 768) { // setSizeon(false) setReactive('40px') setReactive2('8..