본문 바로가기

분류 전체보기

 (32)
Expo 주요 개념 정리 Expo 주요 개념 정리 🗝️  Key concepts of ExpoExpo app:Expo tools을 사용한 리액트 네이티브 앱Expo app과 Expo 도구를 사용하지 않는 리액트 네이티브 앱은 개발 프로세스가 어떻게 다른가?Expo는 다양한 도구와 서비스를 제공하며, 이들은 독립적으로 사용할 수 있습니다. 따라서 사용하려는 도구에 따라 개발 과정이 달라질 수 있습니다. 대부분의 Expo에서 제공하는 기능은 Meta(React Native 공식 팀)에서 제공하는 도구와 비교할 수 없는 것들이 많습니다. Expo가 제공하는 기능 중 많은 부분은 Meta의 기본 React Native 도구에서는 제공되지 않거나 비슷한 도구가 없다는 의미입니다.Expo와 Expo Application Services ..
Prisma ORM: 기본 개념과 동작 원리 Prisma ORM: 기본 개념과 동작 원리 Prisma ORM이란?Prisma ORM은 차세대 오픈소스 ORM입니다.ORM은 "Object-Relational Mapping"의 약자로, 객체-관계 매핑을 의미합니다. ORM은 데이터베이스의 테이블과 프로그래밍 언어의 객체 사이의 매핑을 자동화하여, 데이터베이스와의 상호작용을 더 쉽고 효율적으로 만들어줍니다. 왜냐하면 개발자가 객체 지향 언어로 데이터베이스의 데이터를 더 쉽게 조작할 수 있게 해 주기 때문입니다. ORM을 사용하면 SQL 쿼리 없이 데이터를 데이터베이스에 저장하고 관리할 수 있습니다.다음과 같은 구성 요소로 이루어져 있습니다.Prisma Client: 자동 생성되고 타입 안전한 Node.js 및 TypeScript용 쿼리 빌더Prisma ..
[Redux] Next.js(app router)에서 Redux Toolkit 사용하기 Next.js(app router)에서 Redux Toolkit 사용하기 Next.js는 React에서 널리 사용되는 서버 측 렌더링 프레임워크로, Redux를 올바르게 사용하기 위해서는 몇 가지 고려해야 할 점들이 있습니다. 아래와 같은 내용인데요. 하나씩 살펴보겠습니다.요청별 안전한 Redux 스토어 생성: Next.js 서버는 동시에 여러 요청을 처리할 수 있습니다. 따라서 각 요청마다 Redux 스토어를 생성해야 하며, 요청 간에 스토어를 공유해서는 안됩니다.SSR 친화적인 스토어 초기화: Next.js 애플리케이션은 서버에서 먼저 렌더링 되고, 이후 클라이언트에서 다시 렌더링됩니다. 클라이언트와 서버에서 동일한 페이지 내용을 렌더링하지 않으면 'hydration error'가 발생할 수 있습니다..
[Redux] Redux Overview and Concepts Redux Overview and Concepts Redux란?Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 컴포넌트 각각에서 상태가 수정될 경우에는 언제, 어디서 버그가 발생한 건지 추적하기 어렵습니다. 물론 앱의 규모가 작다면 어렵지 않겠지만요. Redux는 흩어져 있는 상태 관리 로직을 중앙화하여 디버깅과 테스트가 쉬워지게 합니다. 이것이 Redux를 사용하는 이유입니다. Redux는 애플리케이션의 여러 부분에 걸쳐 필요한 "전역" 상태를 관리하는 데 도움이 됩니다. Redux에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지, 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 쉽게 파악할 수 있습니다. R..
[React Native] React Native에 대해 알아보기 React Native에 대해 알아보기 Learn once, write anywhere.리액트 네이티브의 슬로건은 "한 번 배우면 어디서든 쓸 수 있다(Learn once, write anywhere)"입니다. 이 말이 의미하는 바가 무엇인지, 그리고 실제로 리액트 네이티브를 어디에서 어떻게 활용할 수 있는지 알아보겠습니다.React Native리액트 네이티브는 리액트의 강점을 네이티브 개발로 확장하여, 리액트를 아는 개발자들이 쉽게 네이티브 앱을 만들 수 있게 도와줍니다. 또한, 네이티브 개발자들은 React Native를 통해 공통 기능을 한 번만 작성함으로써 다양한 네이티브 플랫폼 간의 기능을 일관되게 유지할 수 있습니다.리액트 네이티브는 자바스크립트로 작성되며, 네이티브 코드로 변환되어 렌더링 됩..
Canvas로 그림 그리기 기능 구현: 이슈와 해결 과정 Canvas로 그림 그리기 기능 구현: 이슈와 해결 과정 Canvas를 활용해서 그림 그리는 기능을 구현해 보았습니다. 이 과정에서 발생했던 이슈들을 정리해보고자 합니다. 📍 Canvas란 무엇인가?Canvas는 HTML5의 일부로 도입된 강력한 그래픽 인터페이스입니다. HTML 문서에 태그를 사용하여 그래픽 영역을 만들 수 있으며, 이 영역에서 JavaScript를 사용해 동적으로 그림을 그리거나 애니메이션을 생성할 수 있습니다. Canvas는 래스터 그래픽을 다루기 위한 도구로, 픽셀 단위로 그래픽을 조작하는 데 매우 유용합니다.래스터 그래픽래스터 그래픽은 픽셀, 즉 작은 점들의 집합으로 이루어진 이미지 형식을 말합니다. 각 픽셀은 고유한 색상 정보를 가지고 있으며, 이 픽셀들이 모여 전체 이미지..
[git] 브랜치와 git merge 방법 브랜치와 git merge 방법 그동안은 git merge만 사용했는데, 이번 기회에 다양한 merge 방법에 대해 정리하고 비교해보려고 합니다. 몇 가지 방법과 각각의 차이점에 대해 알아보겠습니다. 🔍 브랜치란?git merge 방법에 대해 알기 위해서는 먼저 브랜치와 커밋 히스토리에 대한 이해가 필요합니다.  Git 브랜치 - 브랜치란 무엇인가를 참고해서 정리해 보겠습니다.✅ 브랜치는 원래 코드와 상관없이 독립적으로 개발을 진행하기 위한 것입니다. 원래 코드와 동일하지만, 분리되어 있기 때문에 부담 없이 작업할 수 있습니다. ⭐ Git이 데이터를 다루는 법git의 동작 방식에 대해서도 알아보겠습니다.💡Git은 데이터를 Change Set이나 변경사항(Diff)으로 기록하지 않고 일련의 스냅샷으로 ..
[Next.js] Next.js Routing(app router) Next.js Routing(app router) ✅ Next.js란? Next.js의 공식문서를 참고해 작성했습니다. Next.js는 풀스택 웹 애플리케이션을 위한 리액트 프레임워크입니다. 리액트는 UI 개발을 위한 라이브러리인데요. 리액트 컴포넌트로 UI를 구축하고, Next.js를 사용해 추가 기능과 최적화를 수행합니다. 어떤 기능이 있고, 어떤 방식으로 최적화를 한다는 것인지에 대해서도 좀 더 자세히 알아보겠습니다. Next.js는 리액트를 사용하기 위해 필요한 도구들을 추상화하고 자동으로 설정합니다. 이는 개발자가 설정(configuration)에 시간을 소비하는 대신 애플리케이션 구축에 더 집중할 수 있게 해 줍니다. 1인 개발자이든 큰 규모의 팀에 소속된 개발자이든 상관없이, Next.js는..

티스토리툴바