루닛

RSS

게시글: 8
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
Transition : 쉿, 이제 안전해 나의 작은 Suspense
이 글은 React 17에 도입된 Suspense 기능과 React 18에서 새롭게 추가된 Transition API에 대해 다룹니다. Suspense는 컴포넌트 렌더링 중 발생하는 비동기 작업으로 인한 UI 멈춤 현상을 해결하기 위한 기능으로, 로딩 상태를 선언적으로 관리할 수 있게 해줍니다. 특히, Transition API는 사용자 인터페이스의 반응성을 향상시키는 데 초점을 맞추고 있습니다. 긴급하지 않은 업데이트를 'transition'으로 표시하여, 사용자 입력과 같은 긴급한 업데이트가 차단되지 않도록 합니다. 이를 통해 사용자 경험을 개선하고 부드러운 UI 전환을 구현할 수 있습니다. 글은 Suspense와 Transition API의 개념, 작동 방식, 그리고 실제 적용 사례를 통해 개발자들이 어떻게 더 나은 사용자 경험을 제공할 수 있는지 설명합니다.
ReactSuspenseTransition API
루닛·2022년 5월 20일
Backend
Lunit CARE는 왜 GraphQL을 선택했는가?
Lunit CARE 서비스는 인터페이스 프로토콜로 GraphQL과 Relay를 사용하고 있습니다. 이 글은 백엔드 팀이 GraphQL을 선택하게 된 배경과 이유를 설명합니다. 과거 RESTful API의 단점으로 문서화의 어려움, 과도한 요청, 복잡한 데이터 구조 등을 지적하며, GraphQL이 이러한 문제들을 어떻게 해결하는지 보여줍니다. 특히, GraphQL은 단일 엔드포인트로 다양한 데이터를 효율적으로 가져올 수 있고, 클라이언트가 필요한 데이터만 요청하여 네트워크 부하를 줄이며, 타입 시스템을 통해 API의 안정성과 개발 생산성을 높이는 장점을 가집니다. Lunit CARE는 Golang, Gin-Gonic, Gorm, Gqlgen 스택과 함께 GraphQL을 도입하여 개발 효율성과 만족도를 높였습니다.
GraphQLRelayAPI
루닛·2022년 4월 13일
DevOps
Travis CI로 AWS S3에 SPA 배포하기
본문 내용이 없어 분석할 수 없습니다. 제목은 'Travis CI로 AWS S3에 SPA 배포하기'이며, 이는 DevOps 카테고리에 속할 가능성이 높습니다. 예상되는 내용은 Travis CI를 사용하여 AWS S3에 Single Page Application(SPA)을 자동 배포하는 CI/CD 파이프라인 구축에 관한 것입니다. 이를 통해 개발자는 코드 변경 사항을 자동으로 빌드하고 테스트한 후, S3에 배포하여 웹 서비스를 업데이트할 수 있습니다. 다만, 실제 본문 내용이 없어 구체적인 기술 스택, 설정 방법, 발생 가능한 문제점 및 해결 방안 등에 대한 정보는 제공할 수 없습니다.
Travis CIAWS S3SPA
루닛·2019년 8월 13일
Frontend
HTML Canvas로 기가 픽셀 데이터 시각화하기
이 글은 병리학 분야의 고해상도 조직 슬라이드 이미지를 웹 애플리케이션에서 시각화하는 기술적 도전을 다룹니다. 손가락 크기의 슬라이드 하나가 27.5 기가 픽셀에 달하는 방대한 데이터를 효율적으로 처리하고 시각화하기 위해 HTML5 Canvas와 OpenSeadragon 라이브러리를 활용했습니다. 특히, React 기반의 UI에서 사용자가 자유롭게 확대/축소/이동하며 Tissue, Structure, Cell 정보를 픽셀 수준의 정밀도 없이도 원활하게 확인할 수 있도록 구현하는 과정에 초점을 맞춥니다. 데이터 포맷의 효율성 문제와 프레임 저하 최소화를 위한 최적화 기법이 논의됩니다.
HTML Canvas기가 픽셀데이터 시각화
루닛·2019년 2월 14일
Frontend
Context API가 Redux를 대체할 수 있을까요?
이 글은 React의 상태 관리 라이브러리인 Redux와 내장된 Context API를 비교하며, Context API가 Redux를 대체할 수 있는지 탐구합니다. React 16.3 버전부터 정식 지원된 Context API는 Props drilling 문제를 해결하는 대안으로 제시됩니다. 글에서는 각 기술의 특징과 장단점을 분석하고, 어떤 상황에서 어떤 기술을 선택하는 것이 효과적인지에 대한 인사이트를 제공합니다. 특히, 복잡한 상태 관리에는 여전히 Redux가 유리할 수 있지만, 간단한 상태 공유나 테마, 언어 설정 등에는 Context API가 더 간결하고 효율적인 해결책이 될 수 있음을 시사합니다. 이를 통해 개발자는 프로젝트의 규모와 요구사항에 맞춰 최적의 상태 관리 전략을 수립할 수 있습니다.
Context APIReduxReact
루닛·2019년 2월 14일
Frontend
Google Fonts + 한국어 알아보기
이 글은 Google Fonts에서 한글 폰트가 정식 출시된 소식을 다룹니다. 이전에는 Early Access를 통해서만 일부 사용할 수 있었던 한글 폰트들이 이제 정식으로 제공됩니다. 글에서는 Google Fonts의 한글 폰트 지원 현황과 사용 방법에 대해 알아봅니다. 특히, 웹사이트에서 한글 폰트를 적용하는 방법과 관련된 기술적인 내용들을 설명하며, 웹 성능 및 접근성 측면에서의 이점도 함께 언급합니다. 개발자들이 웹 프로젝트에 다양한 한글 폰트를 쉽게 적용할 수 있도록 가이드라인을 제공하는 것을 목표로 합니다.
Google Fonts한글 폰트웹 폰트
루닛·2019년 2월 14일
Frontend
Redux가 필요하다는 것을 언제 알 수 있나요?
이 글은 React 앱 개발 시 Redux 도입을 고려해야 하는 시점을 다룹니다. 초기에는 지역 컴포넌트 상태 관리로 충분했지만, 앱 규모가 커지면서 상태 변화 추적의 어려움, 함수 분산으로 인한 컴포넌트 비대화, 코드 복잡성 증가 등의 문제에 직면했습니다. 저자는 이러한 상태 관리의 복잡성이 커질 때 Redux가 해결책이 될 수 있음을 시사하며, Redux의 기본 개념과 도입 이유를 설명합니다. 궁극적으로는 애플리케이션의 상태가 복잡해지고 관리하기 어려워질 때 Redux를 도입하는 것이 효과적이라는 점을 강조합니다.
ReduxReact상태 관리
루닛·2019년 2월 14일
Frontend
당신에게 Redux는 필요 없을지도 모릅니다.
이 글은 Dan Abramov의 'You Might Not Need Redux' 글을 번역한 것으로, React 개발자들이 Redux를 사용하기 전에 고려해야 할 사항들을 제시합니다. 많은 경우 Redux는 복잡한 상태 관리를 위해 선택되지만, 실제로는 React의 내장 기능만으로도 충분히 상태 관리가 가능함을 강조합니다. 특히, 컴포넌트의 로컬 상태 관리나 간단한 전역 상태 관리를 위해 Context API와 useReducer 훅을 활용하는 방법을 소개하며, Redux의 필요성을 신중하게 판단하도록 권장합니다. 이를 통해 불필요한 의존성을 줄이고 코드의 복잡성을 낮추어 더 효율적인 React 애플리케이션 개발을 도울 수 있습니다.
ReduxReact상태 관리
루닛·2019년 2월 14일