준영의 지식 블로그 준영의 지식 블로그

들어가며위키백과에 따르면, 전세계에는 약 7,139 개의 언어가 있다고 합니다.다양한 언어를 사용하는 유저들을 타겟으로 하는 서비스라면, 국제화는 빼놓을 수 없는 요소입니다.그리고 그런 서비스가 성장할수록, 서비스 내에서 제공해야 하는 다국어 텍스트도 많아질 수밖에 없는데요.점점 많아지는 다국어 텍스트가 사용자 경험과 개발자 경험에 어떤 영향을 미칠 수 있는지를 알아보고,다국어 텍스트를 효율적으로 관리할 수 있는 방법을 소개합니다.TL:DR자주 추가, 수정될 여지가 있는 다국어 텍스트는 소스 코드와 별개의 장소에서 관리하자. (for 개발자 경험)그러나 웹앱이 실행될 때에는 실행 환경과 가까운 곳에 위치해야 한다. (for 사용자 경험)따라서 웹앱의 빌드 타임에 다국어 텍스트를 불러와 소스 코드에 위치하..

들어가며현재 개발중인 서비스에서, 이미지와 관련된 프론트 개발을 여럿 진행했습니다.그중 개발 과정에서 고생도 많이 하고, 배운 점도 많았던 기능이 바로 이미지 크롭 기능이었는데요.이번 포스트에서는 이미지 크롭 기능을 서비스에 도입하면서 배운 점들과 고민했던 것들, 고려해야 했던 것들, 마지막으로 개선할 점들을 적어보고자 합니다.TL:DR라이브러리는 요구사항을 충족하면서 가능한 용량이 작은 것을 선택하자.이전 페이지와 독립적이라면 페이지, 아니라면 모달로 구현하자. 이미지 크롭의 경우에는 모달이 적절하다.이미지와 캔버스는 픽셀 단위의 래스터 이미지로, width 나 height 값으로 소수점을 갖지 않음에 주의하자.이미지 크롭의 역할은 로컬 이미지 선택과 이미지 적용의 중간에 있다. 사이드 이펙트 뿐만 아..

Next.js 기반 프로젝트에서 외부 라이브러리를 설치한 컴포넌트를 로드하는데, 아래와 같은 에러가 떴다. 알아보니, 서버에서는 앞의 id 를 사용했지만, 클라이언트에 그려질 때는 뒤의 id 를 사용했다는 것 같았다. 그래서 크롬 개발자 도구에서 id 를 확인해봤다. 브라우저는 클라이언트로 알고 있었는데, 서버측의 id 를 보여주고 있는게 조금 이상했다. 이 부분은 나중에 좀 더 공부해보자. 아무튼, Next.js 의 렌더링 방식이 클라이언트 사이드 렌더링과 서버 사이드 렌더링으로 나뉘어있어서 생기는 문제라고 가설을 세웠다. 가설을 검증하기 전에, 우선 같은 에러를 마주한 사람이 있을 것 같아서 에러를 그대로 구글에 검색해봤다. 검색 결과, 내가 세운 가설과 비슷한 답변을 한 사람이 있었다. 요약하면, ..