react 40 [리액트] 글로벌한 웹을 향하여 (react-i18next, 다국어지원) 들어가며 이번 글에서는 글로벌한 웹을 위해서 react i18n를 적용하는 방법과 나름의 best practice에 대해 적어보겠습니다. 이 글은 아직 이제 막 프로젝트에 i18n을 던지려는 용기 있는 개발자를 위한 글이며, 더욱 위대한 웹을 위한 글이기도 합니다. 이직이 어느정도 마무리되었고, 사이드 프로젝트도 마무리하고 새로운 아이템을 찾는 피벗 중이어서 갑자기 시간이 붕 떴습니다. 그래서 이래저래 책을 읽으며 여유있는 시간을 즐기고 있는데 기존 프로젝트를 정리도 하면서 문서화를 하다 i18n에 대해 정리해보려고 이렇게 글을 작성하게 되었습니다. best practice는 아니지만 better practice이기를 바라며 react- i18n 적용하는 방법을 시작해보겠습니다. i18n 이란? i18n.. 2022. 5. 29. [개발환경] package.json 다이어트 여정기 (depcheck, npm-check) 들어가며 개발을 진행하다 보면 어느 순간 package.json이 생각지도 못하게 길어진 것을 확인할 수 있습니다. 누군가 꾸준히 package를 관리한다면 좋겠지만 막상 그렇게 하기가 쉽지 않습니다.c 또한 길어진 package.json이 서비스상에서 큰 문제가 있는가라고 물어본다면, 번들링 툴들이 tree shaking를 통해 안 쓰는 라이브러리를 제거해주기 때문에 큰 문제가 안됩니다. 하지만 배포할때에 있어서 해당 모듈을 설치 -> 빌드하는 과정을 거치기 때문에 불필요한 모듈은 제거하는 게 좋습니다. 이번 글에서는 프로젝트에서 package.json를 다이어트하는 과정을 대한 글입니다. 다이어트 방법론 라이브러리 주인찾기 일단 라이브러리 주인 찾는 방식은 간단합니다. 해당 코드를 누가 추가했는지 확.. 2022. 5. 19. [리액트] 다이나믹한 웹을 향하여 (framer-motion, lottie) 들어가며 텍스트로 이뤄졌던 웹이라는 공간이 이미지, 스타일을 넘어 동적이고 유저와 티키타카하는 공간이 되어가고 있습니다. 이런 공간을 만들어야 하는 프론트엔드 개발자로서 항상 css는 두려움과 귀찮음의 공간이기 마련입니다. 하지만 디자이너님이 뽑아준 대로 이쪽으로 나왔다 저쪽으로 들어가는 화려한 애니메이션과 이미지를 멋지게 랜더링 하고 조작할 수 있게 도와주는 좋은 라이브러리들이 있습니다. 이번 글에서는 바로 css로 하기 어려운 작업을 간단하게 도와주는 라이브러리 2개를 소개해드리는 글입니다. 바로 lottie와 framer-motion입니다. 그럼 한번 프로젝트에 적용을 하러 가보겠습니다.!! framer-motion 란? framer-motion의 공식문서상 이를 아래와 같이 설명하고 있습니다. M.. 2022. 5. 7. [플러터] 로그인 경험을 한단계 끌어올리기 (feat.웹뷰 리액트) 들어가며 사이드 프로젝트를 하면서 브라우저로 제공하던 서비스를 웹뷰형태로 확장을 했습니다. 근데 간편 로그인이 제대로 동작하지 않는 문제가 발생했고, 결국 플러터에서 로그인을 처리하여 브라우저에 넘기는 식으로 리펙토링했던 경험에 대해 살펴보겠습니다. 문제 인식 | 간편 로그인이 안되요 일단 간편 로그인이 무엇인지에 대해 살펴보겠습니다. 사이드 프로젝트에서 카카오톡을 이용한 간편 로그인을 지원하고 있습니다. 바로 아래 사진을 보면 브라우저의 경우 카카오톡으로 로그인 버튼을 누르게 되면 해당 핸드폰에 카카오톡이 설치되어 있으면 별도의 입력 없이 카카오톡으로 인증을 하고 로그인이 완료됩니다. 물론 카카오톡에서 해당 서비스(여기서는 사이드 프로젝트)에서 로그인을 허용하겠냐는 다이얼로그 창과 함께요. 쨋든 이게 .. 2022. 4. 26. 이전 1 2 3 4 5 6 7 ··· 10 다음
