멍멍이코더

Next.js 다국어(i18n) 라이브러리 Next.js에서 다국어 설정을 위한 라이브러리는 여러개 있다. 많이 사용하는 라이브로리로는 react-i18next next-i18next next-translation 이렇게 3가지 정도가 있는 듯하다. react-i18next React 애플리케이션에서 다국어 지원을 위한 널리 사용되는 라이브러리 i18next 라이브러리에 기반하여 구축되었으며, 번역 리소스를 JSON 파일로 관리한다. 컴포넌트 기반의 API를 제공하여 쉽게 다국어 지원 구현할 수 있다. 다양한 기능과 확장성을 제공하며, 플러그인 시스템을 통해 기능 확장이 가능하다. 단일 페이지 애플리케이션(SPA) 및 서버 사이드 렌더링(SSR) 모두 지원한다. 다국어 리소스를 동적으로 불러올 수 있는 ..

비 오는 연휴... 다들 어디 다녀오셨나요~?😭 저는 비를 피해 판교 현대백화점을 다녀왔는데요! 역시나 현백에는 많은 사람들이 방문을 했더라고요. 밥은 현백 지하 식당가에서 해결했지만 카페는 좀 한적한 곳을 가고 싶어서 근처에 아방베이커리 판교카카오점을 가보았습니다! . . 위치 아방베이커리 판교카카오점은 카카오 본사에 입점해 있어요. 그래서 건물 내부로 들어가면 귀여운 카카오 캐릭터들이 곳곳에서 반겨준답니다🤗 참, 그거 알고 계신가요? 판교 현대백화점을 비롯하여 근처 건물 4개는 모두 판교역과 연결되어 있다는 사실!! 그래서 아방베이커리도 현백에서 비를 맞지 않고 바로 지하로 바로 갈 수 있었어요~ 아방베이커리는 이마트 옆에 위치해 있어요~ 매장은 오픈형으로 되어있고, 규모는 크지 않습니다! 대략 30..

✍️ 문제 recoil duplicate atom key "{atom key}". this is a fatal error in production. but it is safe to ignore this warning if it occurred because of hot module replacement. 개발 환경에서 Recoil을 사용하면 파일이 변경되어 다시 빌드되는 과정에서 atom으로 만든 state가 재선언된다. key는 항상 고유값을 가져야하는데 재선언되는 과정에서 이미 key로 선언된 값을 key로 사용해서 문제가 발생한다. Next.js 개발 중 recoil을 사용할 때 발생하는 고질적인 문제인 것 같다. 기능적으로는 문제가 없다고 한다. 공식가이드 💡 해결방법 방법 1) Recoil에서 ..

✍️ 문제 next.js의 .env파일에 있는 환경변수가 undefined로 나옴 💡 해결방법 Next.js Version 9.4 이상 환경변수 이름에 NEXT_PUBLIC_을 프리픽스(prefix) 붙여주면 사용가능해진다. # .env 변경 전 API_BASE_URL=http://localhost # .env 변경 후 NEXT_PUBLIC_API_BASE_URL=http://localhost 이렇게 설정하고 아래와 같이 사용하면 된다! const BASE_API_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL}/api`; Next.js Version 9.4 미만 next.confg.js에 사용할 환경변수를 설정해준다. # .env API_BASE_URL=http://l..

지난 주말에 여의도에 위치한 차이797에 다녀왔어요~ 차이797 여의도점은 IFC몰 건너편에 있습니다! 사실 처음엔 차이797을 가려고 했던 건 아니고 같은 건물에 있는 을지다락을 가려고 했는데요! 을지다락에 웨이팅이 많이 있더라구요🫢 그래서 급하게 옆에 있는 차이797을 가게 되었습니다. (오히려 좋아~) 아주 깔끔하쥬~? 자리도 넓은데 사람이 별로 없어서 북적이지 않아 너무 좋았어요! 특히 끝에는 룸도 있어서 가족 모임이나 회식도 가능하겠더라구요. 👍 캐치테이블로도 예약이 가능하니 다들 대기 없이 방문해보세요~ 영업시간 메뉴 저희는 남자짜장(15,500), 탕수육(34,000), 딤섬플래터(12,500) 이렇게 3개 주문했어요~ 그중에서 남자짜장은 불맛 가득한 돼지고기구이를 듬뿍 올린 짜장면이라고 해..

지난 일요일에 을지로에서 최근에 가장 핫하다는 맛집 올디스타코에 다녀왔어요!! ✌️ 저는 웨이팅 하면서 먹는 걸 별로 안 좋아하는 편인데요~ 을지로 3가쪽에 볼 일이 생겨서 올디스타코 쪽에 한번 가보자 해서 갔는데 생각보다 웨이팅이 적은 거예요 🫢 그래서 일단 무작정 기다렸는데 10분 정도 지나도 길이 줄어들지 않아서 그냥 가려던 찰나에..!!! 갑자기 줄이 쭉쭉빠지면서 앞쪽에서 주문 같은 걸 받더라고요? 알고 보니.. 제가 웨이팅 한 시간은 4시쯤이었고 이 줄은 주문을 위한 것이 아니라 5시 저녁 오픈을 위해 웨이팅을 걸어놓는 캐치테이블을 등록하는 줄이었어요..하하 현장에서 아이패드로만 웨이팅 대기가 가능하다네요! 모르셨던 분들은 꼭 알고 가세요~ 저처럼 줄이 짧다고 좋아하시면 안 돼요🥹 아이패드에 전..

지난번 '산과들에 - 다크초코프로틴아몬드'를 구입하면서 '브런치 라이트' 하루견과도 함께 구입했었다. ⬇️⬇️⬇️ 2023.05.08 - [일상/다이어트] - 다이어트 간식 - '산과들에 다크초코프로틴아몬드' 내돈내산 후기 다이어트 간식 - '산과들에 다크초코프로틴아몬드' 내돈내산 후기 평생 유지어터이자 빵순이인 나는 항상 두 가지 토끼를 잡을 수 있는 군것질을 사냥하러 다닌다..😇 그중 하루견과를 자주 먹곤 하는데 산과 들에 하루견과를 쇼핑하던 중 내 눈에 초코라는 단 dogcoder.tistory.com 산과들에 사이트에 들어가면 이렇게나 많은 종류의 견과류 종류가 있다 🫢 결정장애인 나로서는 도저히 그냥 고를수가 없어서 꼭 고려해야 하는 항목 몇 가지를 추려보았다. ✔️ 당이 너무 높지 않을것 ✔️..

1. 상태 관리의 중요성 우선 상태관리가 왜 필요한지 알아야 했다. 리액트는 단반향으로 바인딩을 하는 라이브러리이기 때문에 부모 -> 자식 방향으로만 state를 props로 전달할수 있고, 자식의 props를 부모에게 전달하는 방법은 존재하지 않는다. 대신 자식 컴포넌트에서 부모 컴포넌트의 state를 바꿀 수 있는 방법들이 존재한다. 1. 자식에게 부모의 state를 modify 할 수 있는 setState 함수를 props로 넘겨준다. 2. React 에서 자체적으로 제공하고 있는 Context API 3. State Management Tool(redux, recoil, ...) Parent.js import React, { useState } from "react"; import Children..