Frontend(Web)3 다국어 서비스 적용 회고 이 글은 서비스에 다국어를 적용하는 과정에서 들었던 고민을 정리한 글입니다. 제가 정답은 아니지만 다국어를 처음 적용하려고 하거나 적용중인분한테 도움이 될꺼라고 생각합니다. 프로젝트 시작전 고민 다국어 서비스를 구현하기 위해서는 두가지 방법에 대한 고민이 있었습니다. 첫 번째는 라이브러리 없이 사용하는 경우입니다. 라이브러리 없이 전역 상태에 locale값을 선언해 이 상태값을 기준으로 조건문으로 영어와 한국어를 넣는 방법에 대해서 처음에 고민을 해봤습니다. 하지만 이 방법은 컴포넌트에 JSX가 길어져 가독성에 좋지 않겠다는 생각이 들었습니다. 그리고 영어 한국어 이외에 추가적인 언어를 지원하게 되는 경우 조건문이 복잡해지고 코드가 더러워져 가독성에도 좋지 않고 확장성에도 좋지 않다는 생각이 들었습니다... 2024. 1. 16. 크로스 브라우징 이슈는 어떻게 대응할 수 있을까? 이 글은 현업에서 개발을 하다 생긴 크로스 브라우징 이슈에 대해서 공유하고 어떻게 해결하는게 좋을지를 고민한 글입니다. 문제 상황 위에 화면은 모두 1920x1080 해상도의 모니터이고 모두 100% 상태입니다. 그리고 px로 정적으로 단위를 기입해서 크기를 지정했습니다. 하지만 실제로 화면상에는 두 화면이 다르게 보입니다. 왜 그런걸까요? 결론부터 얘기하면 디스플레이의 차이입니다. 위에 맥 OS의 경우 운영체제가 맥이라서가 아닌 레티나 디스플레이기 때문에 같은 크기의 px이라도 다르게 렌더링을 시켜줍니다. 디자이너분이 레티나 디스플레이에서 1080 환경을 기준으로 디자인을 주게 되면 일반 디스플레이에서는 상태표시줄 때문에 실제 1080 모니터라도 실제로는 900대 크기의 높이를 가진 디스플레이처럼 렌더.. 2024. 1. 11. [React] Rendering Phase 와 Commit Phase란 무엇일까? 시작하기에 앞서 한상훈님의 React 리렌더링에 관한 영상을 보다가 모르는 부분이 있어 공부도 하고 생각도 정리할 겸 글을 작성하려고 한다. 회사에서 리액트를 자신있게 사용하고 있지만 영상을 보던 중 react에 rendering phase와 commit phase의 단계가 있다는 사실을 알게 됐다. 사실 두 단계가 무엇인지 모르고 키워드조차 처음들어서 다시 한번 공부를 더욱 해야 함을 느끼는 시간이기도 했다. 바로 공부한 내용을 정리해보자!! Render Phase와 Commit Phase란? Render Phase란 함수 컴포넌트를 기준으로 얘기하면 함수 컴포넌트가 호출되어 JSX를 통해 Virtual DOM을 만들고 이전에 만들었던 Virtual DOM과 비교하는 diff 알고리즘을 통해 달라진 부.. 2023. 11. 29. 이전 1 다음
