다국어 이상형 월드컵 프로젝트4 다국어 지원 번역파일 db 설계(planetscale, prisma) 왜 데이터베이스를 설계해야 할까? 비용 효율적이기 때문이다 그렇다면 좋지 않는 설계는 ➡️ 많은 시간과 비용이 소요되어 비효율적이다 예) 작은 부분이 변경되었음에도 불구하고 기존 db에 많은 변경이 일어나야한다. → 작은 변경을 수용하기 위해 많은 시간과 비용 소요 예) 고객이 서비스를 이용하는데 시간이 너무 많이 걸려 서비스 이탈 → 수익 감소로 이어짐 비용적으로 가장 효율적으로 운용하기 위해서는 각 상황에 맞은 효율적인 데이터베이스가 필요하다 좋은 데이터베이스 설계란? 효율적인 데이터베이스 설계를 위해서 고려해야될 사항들은 다음과 같다. 무결성 : 데이터베이스 내에 모든 값은 언제나 정확한 값을 유지해야한다. 유연성 : 데이터베이스 구조는 요구사항 변화에 대해 수정이 쉬워야 한다. 확장성 : 데이터베.. 2023. 10. 1. Planet Scale + Prisma 도입과정 🌱 Planet Scale이란? MYSQL과 호환되는 데이터베이스 플랫폼. 서버리스 DB 플랫폼이라서 우리가 서버를 관리하고 유지보수할 필요가 없다. 그 외에 non-blocking, autoscaling, git과 비슷한 브랜치 기능등을 지원하여 유용하다. Planet Scale의 대표적인 기능 Non-blocking 스키마 변경 Branching workflow Non-blocking 스키마 변경 이 기능은 데이터베이스나 테이블을 블록하거나, 잠그거나, 속도를 늦추는 스키마 변경을 방지한다. 스키마 변경과정 → production(main) 브랜치가 development branch에서 적용하고 → schema diff를 확인한 후, deploy request를 열어 변경사항을 적용하게 된다. 사용하.. 2023. 9. 5. tailwind css 컴포넌트 크기 조정하기, 자동 줄바꿈 ✅ 적용 목적 grid-cols-4 속성으로 인해 컴포넌트가 고정되어 있었고 이로 인해 사용자 입장에서 보기 불편할 것 같다는 피드백을 받았다. css가 grid-cols-4로 고정되어있어서 브라우저 크기를 줄이면 컴포넌트가 계속 작아졌다. 이러한 점을 개선하기 위해 브라우저가 줄어들면 한 줄에 하나의 컴포넌트만 위치하게 만들고 자동줄바꿈 속성을 넣기로 계획했다. ✅ 적용 방법 grid grid-cols-1 md:grid-cols-4 md 사이즈 까지는 한 줄에 4개씩 배치하고 md 사이즈보다 작아지면 한 줄에 하나씩 배치하는 css 속성을 적용했다. 그리고 각 게시물 개별 단위로는 max-w-2xl 속성을 주어서 게시물의 최대 너비를 제한하였다. ✅ 코드 {dataList.map((data: any) .. 2023. 7. 25. Tailwind CSS container 적용하기 ✅ 적용 목적 container를 사용하면 컨텐츠의 최대 너비를 제한할 수 있다. 즉 사용자가 사용하는 모니터의 크기와 상관없이 컨텐츠의 최대 너비가 제한되어 있어 예쁜 크기를 유지할 수 있으므로 사용하기로 했다. ✅ Container란? tailwind 공식 홈페이지에는 다음과 같이 container의 사용법을 나타내고 있다. Using the container The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying.. 2023. 7. 25. 이전 1 다음