공유/기타 검색 결과

해당 글 31건

글로벌 웹 서비스를 다시 만든다면 실수하지 않을 것들

글로벌 웹 서비스를 다시 만든다면 실수하지 않을 것들다국가를 지원하는 글로벌 웹 서비스를 구현하면 생각하지 못 한 많은 문제를 겪을 수 있습니다.아래 게시글은 만약 제가 처음부터 다시 개발한다면 어떻게 할까? 라는 생각을 가지고 작성하였습니다.하나의 국가만 지원한다면 상관없지만 다국가를 지원하는 경우 한번 읽어보시는 것도 좋을 것 같습니다.제가 정답이라는 것은 아니고 이러한 방법도 있다 라는 생각으로 읽어주시면 감사하겠습니다.다국어 처리페이지, 기능 등 여러 단위로 다국어 파일을 관리할 수 있습니다.위처럼 진행하면 처음에 구현할 떄는 문제가 없을 수 있습니다.그러나 점점 서비스가 커지고 페이지, 기능이 많아지면 동일한 뜻을 가진 로케일 키가 기하급수적으로 증가합니다.따라서 제가 생각할 때는 동일한 뜻을 ..
공유/기타 2024. 8. 22. 19:23

SSR로 동작하는 지 확인하는 방법

SSR로 동작하는 지 확인하는 방법SEO에 도움이 되기 위해서는 CSR보다는 SSR을 활용하는 것이 좋습니다.그런데 지금 페이지가 정상적으로 SSR로 동작하는 것을 어떻게 확인할 수 있을까요?현재 프로젝트가 어떻게 동작하는 지 정확하게 이해하고 있으면 어디까지가 SSR이고 아닌 지 파악할 수 있습니다.그러나 모르는 경우 내가 이 부분은 SSR, 이 부분은 CSR이라고 생각하고 구현을 했을 때,내가 원하는 방향으로 동작하는 것을 확인할 필요가 있습니다.아래 게시글은 크롬 기준으로 작성되어 있습니다.SSR 동작 확인하는 방법SSR 동작을 확인하는 방법은 매우 간단합니다.JavaScript 동작을 없애면 됩니다.아래 사이트는 제가 사이드 프로젝트로 진행하고 있는 사이트입니다.• 다이싸 이동하기검색에 도움되게 ..
공유/기타 2024. 8. 8. 12:52

VSCode 엔터 키, 정규식 검색하기

Visual Studio Code 내에서 코드내에서 엔터 키를 검색하고 싶었습니다.정규식을 이용하면 쉽게 해결할 수 있습니다.우선 정규식을 검색할 수 있도록 설정해줍니다.검색 아이콘을 클릭한 후 제일 오른쪽에 있는 * 모양을 클릭해줍니다.해당 모드가 정규식 검색 모드입니다.그 다음 엔터를 검색하고 싶으면 \n\n를 입력하시면 됩니다.위처럼 입력하시면 모든 엔터 키를 검색하실 수 있습니다.주의해아할 점은 개발 시 들여쓰기를 한다는 점입니다.아래 예시를 확인해봅시다.// tmp.ts file{ @Query(() => Boolean) getUser() {} @Mutation(() => Boolean) updateUser() {} @Query(() => Boolean) getUser() {} @Lo..
공유/기타 2024. 8. 2. 12:30

headless 컴포넌트 도입

회사에서 material-ui를 사용하였습니다.그 이유와 왜 지금은 사용하지 않는 지?그리고 어떻게 하다 headless 컴포넌트를 도입하게 되었는 지 적어보려고 합니다.headless에 대한 설명은 따로 없습니다.material-ui를 사용한 이유실력 부족시간 부족프로젝트 초창기에는 material-ui를 사용하여 개발을 했었습니다.팀원들은 웹 개발하던 사람들이 아니었어서 react는 물론 css도 처음 접하는 사람들이었습니다.따라서 그 당시 유명한 material-ui를 이용하여 빠르게 구현을 하였습니다.material-ui를 벗어난 이유커스텀 하기 어려움자체적으로 구현하고 싶은 욕망프로젝트 기획, 디자인이 고도화 되며 컴포넌트를 커스텀하게 변경해야하는 필요가 생겼습니다.이것은 매우 불편하고 어느 정..
공유/기타 2024. 7. 31. 18:12

[개선] 프로젝트 분리하여 빌드 속도 개선

[개선] 프로젝트 분리하여 빌드 속도 개선참고해당 게시글은 이전에 제가 빌드를 개선했던 방법 중 한가지를 소개하기 위해 작성했습니다.너무 예전에 진행하였어서 동일한 환경이 아니고 비슷한 환경을 억지로 만들어서 진행했습니다.프로젝트 개선프로젝트를 개선하는 방법이 많이 있습니다.이미지 캐싱코드 스플릿빌드 속도 개선사용하는 패키지를 더 좋은 것으로 변경등등등이번 게시글에서는 빌드 속도를 개선한 사례를 작성해보도록 하겠습니다.NextJS 기준으로 작성되어 있으나 다른 프레임워크에서도 비슷하게 할 수 있을 것 같습니다.번들 사이즈 측정 방법NextJS에서 번들 사이즈 측정하는 방법은 간단합니다.next.config.js 파일에서 아래 설정을 해줍니다.ANALYZE 값이 true인 경우만 분석도구를 실행하기 위함입..
공유/기타 2024. 7. 15. 18:35

VSCode에서 특정 단축키가 안돼요.

VSCode에서 특정 단축키가 안돼요.어느 순간부터 닫은 탭을 다시 오픈하는 단축키가 되지 않았습니다.저는 탭을 닫고 열고 하는 습관이 있습니다.그래서 닫은 탭을 열어주는 위 단축키가 안되는 것은 개발하는 데 너무 신경이 쓰여 해결했습니다.닫은 탭 열는 단축키윈도우 : crtl + shift + t맥 : command + shift + tVSCode 단축키 확인하기안되는 이유는 해당 단축키의 설정이 잘못 되어 있을 확률이 높습니다.아니면 중복되어 충돌 나는 경우도 있습니다.어떠한 경우인지 확인해보도록 하겠습니다.VSCode에서 아래 키를 입력해줍시다.윈도우 : crtl + shift + p맥 : command + shift + p아래와 같은 입력창이 표시되는데 Preference: Open Keyboar..
공유/기타 2024. 7. 12. 08:47

Dead Code 찾기, 사용하지 않는 파일, 변수 찾기

Dead Code 찾기, 사용하지 않는 파일, 변수 찾기JavaScript Dead Code 찾기JavaScript 사용하지 않는 파일 찾기JavaScript 사용하지 않는 변수 찾기JavaScript 사용하지 않는 export 찾기Dead Code 란Dead Code 이름 그대로 죽은 코드입니다.즉, 실행되지 않는 코드를 의미합니다.해당 코드를 계속 두는 것은 좋은 개발환경이라고 볼 수 없습니다.용량 차지빌드 속도 우려import 시 불편함파일, 코드 찾을 때 불편함코드 읽을 때 불편함등이 있을 수 있습니다.knipknip 패키지를 사용하면 dead code를 빠르게 찾아줍니다.knip을 활용하여 어떻게 dead code를 삭제하는 지 알아보도록 하겠습니다.knip 설치npm init @knip/con..
공유/기타 2024. 7. 10. 13:17

Visual Studio Code 단축키 (macOs)

Visual Studio Code 단축키 (macOs)개발할 때 어떤 IDE를 사용하더라도 단축키를 아는 것은 좋습니다.많이 알고 있을 필요도 없습니다.4-5개정도 본인이 자주 사용하는 단축키만 알아도 개발 삶의 질이 달라집니다.저는 Visual Studio Code를 사용하고 있습니다.여러 단축키가 있겠지만 제가 많이 사용하는 단축키 몇 개를 정리해봅니다.Visual Studio Code 단축키option + shift + ↓/↑ (윗, 아래 줄로 복사)option + command + ↓/↑ (여러 줄 선택하기)option + shift + 마우스 drag (여러 줄 선택하기)command + D (같은 단어 찾기) command + L (한 블록 전체 선택)command + shift + L (같은..
공유/기타 2024. 6. 24. 19:51

[다국어 처리] 다국어 처리, 관리방법 시행착오 및 개선

[다국어 처리] 다국어 처리, 관리방법 시행착오 및 개선 배경 회사에서 운영하는 서비스는 여러 국가에서 이용되고 있습니다. 각 국가별 사용성을 향상시키기 위해 다국어 처리를 진행하고 있습니다. 주요 시행 착오와 개선 사항은 다음과 같습니다. 시행 착오 1 여러 단어를 결합한 경우, 해당 로케일을 결합하여 사용하는 과정에서 문제가 발생했습니다. 예를 들어, 사용자와 정보를 합쳐서 사용자 정보로 표현할 때, 존재하지 않는 단어가 생성되는 경우가 발생했습니다. 코드로 표현하자면 아래와 같습니다. 사용자 : user 정보 : information 사용자 정보 : `${user}${information}` 국가별로 단어 사용자 정보가 사용자 + 정보 단어의 합이 아닌 경우가 있습니다. 이를 해결하기 위해 단어를 ..
공유/기타 2024. 3. 17. 16:07

yarn vs yarn tsc 차이점

yarn vs yarn tsc 회사에서 개발자마다 tsc에 대한 결과가 다르게 나타나 문제가 발생하였습니다. 조금 더 상황을 파악해보니 commit 시 husky에 작성해둔 tsc 검사 결과가 다른 것이었습니다. 원인을 알고보면 너무 당연한 결과인데 한번 알아보도록 하겠습니다. yarn, yarn tsc 원인은 husky에 작성되어 있는 tsc 명령어였습니다. yarn, yarn tsc 2개의 명령어의 차이를 이해하시면 바로 이해 가능합니다. 명령어 yarn tsc : 프로젝트(package.json)에 설치되어 있는 typescript version으로 tsc 실행 명령어 tsc : global로 설치되어 있는 typescript version으로 tsc 실행 위 2개의 차이가 있습니다. tsc 명령어..
공유/기타 2024. 3. 11. 19:20