분류 전체보기 35

스프링 핵심 원리의 이해 2 - 객체 지향 원리 적용

1. 새로운 할인 정책 개발원래는 고정 할인 정책이었지만, 기획자가 갑자기 정률 할인으로 바꾸자고 한다. 하지만 괜찮다! 우리는 객체 지향 원칙에 맞게 구현했기 때문이다.이미 DiscountPolicy 인터페이스가 있으니 이걸 가지고 RateDiscountPolicy 클래스를 구현하면 된다. DiscountPolicy 인터페이스 public interface DiscountPolicy { int discount(Member member, int price);} RateDiscountPolicy 구현 클래스 VIP이면 10% 할인을 해주는 `discount()`를 만든다. public class RateDiscountPolicy implements DiscountPolicy { private..

스프링 핵심 원리의 이해 1 - 회원의 주문과 할인

1. 새 프로젝트 생성 스프링 프로젝트 파일 만들기 https://start.spring.io/ 에 들어가서 프로젝트 파일 .zip을 만든다. 인텔리 제이에서 프로젝트 열기다운받은 그 폴더에서 build.gradle 파일을 연다. 그리고 설정에 들어가서 "다음을 사용하여 ~ 실행"을 Gradle 대신 Intellij IDEA로 설정해준다. 이렇게 하면 조금 더 빠른 실행을 할 수 있다. 프로젝트 실행하기 CoreApplication.java프로젝트 폴더 `src > main > java > hello.core > CoreApplication.java` 파일에 들어가서 어플리케이션을 실행한다. package hello.core;import org.springframework.boot.SpringA..

캘린더 구현하기: react-native-calenders

리액트 네이티브에서는 `react-native-calenders`라이브러리로 간단하게 가져와서 활용할 수 있고 가장 널리 이용되는 방법이다.https://github.com/wix/react-native-calendars 캘린더 라이브러리 설치하기 설치하기npm install react-native-calendars 사용하기라이브러리를 import하고, ``컴포넌트로 불러와 사용한다. 이 라이브러리가 제공하는 다양한 프로퍼티로 디자인 또는 기능을 조작할 수 있다. onDayPress : 달력의 특정 날짜를 클릭했을 때 호출되는 함수markedDates : 달력의 틀정 날짜에 시각적인 마크를 추가하는 속성import {Calendar, LocaleConfig} from 'react-native-calen..

SafeArea: 화면의 안전 영역 보장

Safe Area 란?https://reactnative.dev/docs/safeareaview SafeAreaView · React NativeThe purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.reactnative.dev SafeArea는 ios 디바이스를 위해 나왔으며, 기기의 안전 영역 경계 내에서 콘텐츠를 렌더링하는 것이다.현재 ios 버전 11 이상을 사용하는 기기에만 적용된다. SafeAreaView는 중첩된 콘텐츠를 렌더링하고, 네비게이션 ..

클린 아키텍처 - Todo CRUD 실습

전에는 아키텍처를 생각하지 않고 데이터베이스 코드를 짰었다. 2025.06.05 - [[App] React Native/[TAVE] Snal 프로젝트] - Clean Architecture2025.06.25 - [[App] React Native/Study] - SQLite, DB Inspector로 데이터베이스 확인하기여기에서 이제 이전에 배운 클린 아키텍처를 이용해서 Todo 를 추가, 업데이터, 삭제, 전체 불러오기 기능을 리펙토링해보자. 프로젝트 구조 클린 아키텍처를 적용한 코드 구조는 다음과 같다. ℹ️ ts 확장자 데이터베이스 관련 코드는 모두 `.ts`확장자로 구성되었다. 왜 그래야 할까?클린 아키텍처에서는 React 컴포넌트나 JSX(XML-like syntax for React) 문..

객체 지향 설계와 스프링

스프링이란?스프링이라는 단어는 문맥에 따라 다르게 사용될 수 있지만, 스프링 빈을 관리하는 등의 DI 컨테이너 기술이며, 스프링 프레임워크 자체를 말하기도 한다. 크게 보면 스프링 부트, 스프링 프레임 워크 등을 모두 포함한 스프링 생태계이다. 스프링의 핵심 개념스프링은 자바 언어 기반의 프레임워크이다. 자바는 객체 지향 언어여서, 스프링은 좋은 객체 지향 애플리케이션을 개발할 수 있게한다. 좋은 객체 지향 프로그래밍이란?객체 지향 프로그래밍은 다음 특징을 갖는다. --> 1. 추상화, 2. 캡슐화, 3. 상속, 4. 다형성 객체 지향 프로그래밍이란 .. 컴퓨터 프로그램을 "객체들의 모임"으로 보고, 객체들이 서로 메시지를 주고 받으면서 협력하는 것이다. 컴퓨터 부품을 갈아 끼우듯이 개발할 수 있어..

SQLite, DB Inspector로 데이터베이스 확인하기

라이브러리 설치하기 https://github.com/andpor/react-native-sqlite-storage리액트 네이티브에서 SQLite를 사용하려면 `react-native-sqlite-storage`라이브러리를 사용해야한다. react-native-sqlite-storage 설치하기 1. 설치하기 npm install --save react-native-sqlite-storage# typescript 인 경우 추가 설치npm install --save-dev @types/react-native-sqlite-storage 2. ios 추가 설정하기cd ios && pod install SQLite 로 데이터베이스 만들기 여기서 모든 코드는 비동기 함수로 작성되어있다. 비동기로 데이터베이스 작업..

Vector Icons 사용하기

Vector Icons 을 사용하는 이유 해상도 독립성: 벡터 아이콘은 수학적 공식으로 정의되어서 아무리 확대해도 깨지지 않는다. 경량성: 아이콘 폰트는 .ttf 파일 하나에 수백, 수천 개의 아이콘 정보를 담을 수 있어서 이미지 파일보다 앱 용량을 줄일 수 있다. 쉬운 스타일링: 벡터 아이콘은 텍스트처럼 css를 다룰 수 있다. (color, font-size, text-shadow 등)수많은 아이콘 제공 접근성: title과 같은 속성으로 스크린 리더 사용자를 위한 설명을 제공할 수 있다. Vector Icons 설치하기1. 설치하기 : https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-..

React Navigation (3) - Tab

탭 네비게이터는 화면 상단이나 하단에 탭을 생성해서 터치 시에 해당 스크린으로 이동하게 한다. https://reactnavigation.org/docs/bottom-tab-navigator Bottom Tabs Navigator | React NavigationA simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.reactnavigation.org Tab NavigatorTab Navigator 설치하기npm i..

React Navigation (2) - Drawer

Drawer Navigation 은 화면 좌측이나 우측에서 튀어나오는 새로운 스크린이다. Drawer Navigationhttps://reactnavigation.org/docs/drawer-navigator Drawer Navigator | React NavigationDrawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.reactnavigation.org Drawer Navigation 설치하기 1. 설치하기npm install @react-navigation/drawer 2. reanimated 설치하기 React Native 앱의 애니메이션 및..