코딩정비소

SELF FIRE(명언) : 고객센터

늘푸른개발자 — Sat, 8 Feb 2025 18:20:14 +0900

댓글로 문의 사항이 있으면 남겨주세요. 확인되는데로 답변드리도록 하겠습니다. 감사합니다

React-native-calenders 원더윅스 앱 만들기

늘푸른개발자 — Wed, 25 Dec 2024 19:51:03 +0900

이번시간에는 앱에 캘린더를 추가해 보도록 하자. 먼저 expo에서 제공하는 켈린더가 있는지 확인하자.

expo-calender를 검색하니 최상단에 https://docs.expo.dev/versions/latest/sdk/calendar/ 검색결과가 나온다.

검색 결과에 따라 들어가면 SDK 가 나온다. SDK는 Software Development Kit로 개발 키트라고 생각하면 된다. 무튼 expo-calender에서 제공하는 기능은 캘린더, 이벤트, 알림 레코드랑 상호작용하는 SDK인데. 우리가 원하는 기능은 UI를 만들어 주는 컴포넌트를 원했기 때문에 설치하지 말자. 다만 나중에 알람 기능을 만들 때 필요할 수 있으니 알아두자.

다른 검색 결과로 react-native-calenders가 나온다 문서를 확인해보니. 내가 원하는 기간표시도 가능하다.

React-native-calendars

https://www.npmjs.com/package/react-native-calendars

react-native-calendars

React Native Calendar Components. Latest version: 1.1307.0, last published: 3 months ago. Start using react-native-calendars in your project by running `npm i react-native-calendars`. There are 184 other projects in the npm registry using react-native-cale

www.npmjs.com

yarn add react-native-calendars

expo를 사용하고 있으니

npx expo install react-native-calendars

위 방식으로 설치를 시작하자 설치가 완료되면 모듈을 추가하자.

공식 문서를 읽고 예시에서 제공되는 Period Marking를 사용하면 좋겠다.

위주로 찾아보면 공식사이트에서 쉽게 사용하는 방법을 알려준다. 따라서 작업을 진행해보자

https://wix.github.io/react-native-calendars/docs/Components/Calendar#calendar-examples

Calendar | RNC

Calendar component

wix.github.io

1. 모듈 및 옵션 확인해서 추가하기

import { router } from "expo-router";
import { Button, Text, View } from "react-native";
import { Calendar } from "react-native-calendars";

export default function Home(){
  const handleModalButton = () => {
    router.push('/userInputModal')
  }

  return <View>
    <Text>Home </Text>

    <Calendar
      markingType={'period'}
      markedDates={{
        '2024-12-20': {textColor: 'green'},
        '2024-12-22': {startingDay: true, color: 'green'},
        '2024-12-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
        '2024-12-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
      }}

      enableSwipeMonths={true}
      hideArrows={false}
    />
    <Button title="모달" onPress={handleModalButton}></Button>
  </View>
}

markingType을 period로 세팅
markingDates '2024-12-25': {selected: true, endingDay: true'}, '2024-12-26': {selected: false, endingDay: true'}, 형식으로 맞춰주자
enableSwipeMonths를 true 스와이프 기능 제공

https://github.com/ckdtjs505/wonder_weeks/commit/40687cef16918189c0afadfd735923a73c5cc98a

feat: 캘린더 추가하기 · ckdtjs505/wonder_weeks@40687ce

ckdtjs505 committed Dec 25, 2024

github.com

2. 월, 일 표시를 한국어로 변경하기

LocaleConfig.locales['ko'] = {
  monthNames: [
    '1월',
    '2월',
    '3월',
    '4월',
    '5월',
    '6월',
    '7월',
    '8월',
    '9월',
    '10월',
    '11월',
    '12월',
  ],
  dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
  dayNamesShort: ['월', '화', '수', '목', '금', '토', '일'],
  today: "오늘"
};

LocaleConfig.defaultLocale = 'ko';

https://github.com/ckdtjs505/wonder_weeks/commit/d03bc8a07961cfd9f7a217739dd51604c9da3f27

feat: 캘린더 한국어로 변경 · ckdtjs505/wonder_weeks@d03bc8a

ckdtjs505 committed Dec 25, 2024

github.com

3. 원더윅스 계산해서 마킹하기

export const getWonderweeks = ({day, color } : any) => {
    const birthDate = new Date(day);
    
    // 주차별 범위 정의 (시작 주 ~ 종료 주)
    const weekRanges = [
        { weeks: 1, start: 4, end: 6 },
        { weeks: 2, start: 7, end: 10 },
        { weeks: 3, start: 11, end: 14 },
        { weeks: 4, start: 15, end: 20 },
        { weeks: 5, start: 23, end: 27 },
        { weeks: 6, start: 34, end: 38 },
        { weeks: 7, start: 42, end: 47 },
        { weeks: 8, start: 51, end: 55 },
        { weeks: 9, start: 60, end: 65 },
        { weeks: 10, start: 71, end: 76 },
    ];
    
    const result = {};
    
    for (const range of weekRanges) {
        // 시작 날짜와 끝 날짜 계산
        const startDay = new Date(birthDate);
        startDay.setDate(startDay.getDate() + range.start * 7 ); // 주 시작일로 맞추기
    
        const endDay = new Date(birthDate);
        endDay.setDate(endDay.getDate() - 1 + range.end * 7); // 주 종료일로 맞추기
    
        // 현재 주차 범위의 날짜를 순회하며 객체 생성
        for (
        let currentDate = new Date(startDay);
        currentDate <= endDay;
        currentDate.setDate(currentDate.getDate() + 1)
        ) {
    
            const currentDateStr = currentDate.toISOString().split('T')[0]; // ISO 형식으로 날짜 키 생성

            if( currentDateStr )
            // 각 날짜를 객체에 추가
            result[currentDateStr] = {
                startingDay: currentDate.toDateString() === startDay.toDateString(),
                endingDay: currentDate.toDateString() === endDay.toDateString(),
                color : color
            };
        }
    }
    
    return result;
}

원더윅스 계산 함수를 만들어 호출하자.

export default function Home(){
  const handleModalButton = () => {
    router.push('/userInputModal')
  }

  const wonderweeks = getWonderweeks({
    day : '2024-11-11',
    color : '#71C9CE'
  });

  return <View>
    <Text>Home </Text>

    <Calendar
      markingType={'period'}
      markedDates={{
        ...wonderweeks
      }}

      enableSwipeMonths={true}
      hideArrows={false}
    />
    <Button title="모달" onPress={handleModalButton}></Button>
  </View>
}

https://github.com/ckdtjs505/wonder_weeks/commit/3c959dd6cd8b1f2a3bbfcfa7963d019b70038037

feat: 원더윅스 계산 후 마킹하기 · ckdtjs505/wonder_weeks@3c959dd

ckdtjs505 committed Dec 25, 2024

github.com

정리

React-native-calenders를 사용하여 RN에서 쉽게 캘린더를 구현 할 수 있다
wonder weeks를 표시하는 markedDate를 값을 넣어 원더 윅스 값을 표현할 수 있다.

마무리

calenders 공식 문서를 제대로 살펴보면 없는게 없다.

React-native 생년월일 입력을 위한 DateTimePicker 추가하기

늘푸른개발자 — Wed, 25 Dec 2024 11:40:51 +0900

아이의 생년월일을 입력하기 위해서 직접 string으로 입력하는 방법도 있지만, 다른 앱들을 살펴보면 달력이 나와서 달력을 클릭하면 클릭한 값을 넣어준다. 웹개발자라면 input에 type만 설정해도 달력이 나와서 설정할 수 있다. React-native에도 비슷한 기능을 하는 라이브러리나 메서드가 있지 않을까?

먼저 인터넷에서 찾아보자.

DateTimePicker

https://docs.expo.dev/versions/latest/sdk/date-time-picker/

DateTimePicker

A component that provides access to the system UI for date and time selection.

docs.expo.dev

expo에서 제공하는 라이브러리가 있음을 알 수 있다.

공식 문서에 따라 설치를 진행하자

npx expo install @react-native-community/datetimepicker

1. 모듈 추가하기

import DateTimePicker from '@react-native-community/datetimepicker';

2. DateTimePicker 추가하기

https://github.com/react-native-datetimepicker/datetimepicker

GitHub - react-native-datetimepicker/datetimepicker: React Native date & time picker component for iOS, Android and Windows

React Native date & time picker component for iOS, Android and Windows - react-native-datetimepicker/datetimepicker

github.com

위 방식으로 사용하면 된다고 한다. 시도해보자

너무 쉽게 들어갔다. ^^

3. DateTimePicker 선택한 값 사용하기

다음으로 유저가 선택한 날을 받아서 넣어줘야 한다. 이 또한 공식문서에서 제공한다.

onChange 함수에서 제공하고 있다. 내용을 보면 event type이 set인 경우에 값이 세팅이 되는 경우이지 않을까? 구현 보고 확인해 보자

취소 버튼 클릭 시 type - dismissed

확인 버튼 클릭 시 type - set

type이 set인 경우에만 birthday값을 setting 해주자.

            <RNDateTimePicker 
            value={new Date()}
            onChange={ ({type}, day) => {
                if( type === "set" && day){
                    setBirthDay(day.toISOString().split('T')[0]); // yyyy-MM-dd 형식으로 저장
                }
            }}
            />

birthday에 값이 정상적으로 들어가진다. wow!

정리

react-native에서 제공하는 DateTimePicker를 사용하여 아이의 태어난 날을 입력할 수 있다.
DateTimePicker의 취소 확인 버튼시 동작은 onChange함수로 사용 가능하다

마무리

DateTimePicker를 활용하여 태어난 날, 타이머, 등 다양한 기능을 사용할 수 있다.

전체 코드 확인

태어난 날 클릭 시 DateTimePicker을 show, hide 하는 방식은 생략했다. 자세한 건 아래 코드에서 확인 가능합니다

https://github.com/ckdtjs505/wonder_weeks/commit/28221615ea5aab79226f376af03fb3c1e3a0f949

feat: 태어난 날 클릭시 달력 클릭 한 값으로 동작 되도록 UX 개선 · ckdtjs505/wonder_weeks@2822161

ckdtjs505 committed Dec 25, 2024

github.com

React-native AsyncStorage로 로그인 정보 로컬에 저장하기

늘푸른개발자 — Wed, 25 Dec 2024 08:21:46 +0900

react-native에서 local에 저장하는 기능이 있을까? 한번 찾아보자.

react-native localstroage 입력하는 바로 결과가 나온다.
https://docs.expo.dev/versions/latest/sdk/async-storage/

AsyncStorage

A library that provides an asynchronous, unencrypted, persistent, key-value storage API.

docs.expo.dev

문서에 따라서 설치를 진행해 보자

npx expo install @react-native-async-storage/async-storage

AsyncStorage

설치가 완료 되었으면 사용법을 보고 진행해 보자.

https://react-native-async-storage.github.io/async-storage/docs/usage/

Usage | Async Storage

Async Storage can only store string data. In order to store object data,

react-native-async-storage.github.io

1. 모듈 추가하기

import AsyncStorage from '@react-native-async-storage/async-storage';

아이 정보를 넣어주는 userInputModal.tsx에 넣어주자

2. 입력 완료 버튼을 누르면 로컬에 저장하기

로컬에 저장하는 방법은 제공하는 AsyncStorage.setItem('baby-info', value) 이런 식으로 만들어짐을 알 수 있다. 동일한 구조로 해보자

    // 데이터 저장 함수
    const storeData = async () => {
        try {
            const jsonValue = JSON.stringify({ name, birthDay });
            await AsyncStorage.setItem('baby-info', jsonValue);
        } catch (e) {
            console.error('저장 실패:', e);
        }
    };

    const handlePress = () => {
        storeData();
    }

저장하기 버튼을 누르면 name, birthday 값을 가져다가 그려주도록 하자.

3. 불러오기

앞서 저장하기 버튼을 눌러서 아이 이름과 생년월일을 저장했다면 모달을 생성할 때 스토리지에서 로드해서 불러오도록해보자.

    // 데이터를 불러오고 상태를 설정하는 비동기 함수
    const loadInitialData = async () => {
        try {
            const jsonValue = await AsyncStorage.getItem('baby-info');
            if (jsonValue != null) {
                const savedData = JSON.parse(jsonValue);
                setName(savedData.name || ''); // 값이 없으면 빈 문자열
                setBirthDay(savedData.birthDay || '');
            }
        } catch (e) {
            console.error('초기 데이터 불러오기 실패:', e);
        }
    };

    // useEffect로 컴포넌트가 렌더링될 때 초기 데이터 로드
    useEffect(() => {
        loadInitialData();
    }, []); // 빈 배열로 첫 렌더링 시 한 번만 실행

정리

react-native도 web처럼 localstorage가 존재하고 그 이름은 AsyncStorage이다
데이터 로드 방법은 AsyncStorage.getItem, 데이터 저장은 AsyncStorage.setItem으로
localStorage랑 사용 메서드는 같으나 promise 객체로 구성되어 있다.

마무리

웹개발자라면 AsyncStorage는
로컬 스토리지 정보를 앱 입장할 때 가져와서 props로 내려오는 구조가 좋아 보인다.
왜냐하면 localstroag를 사용하는 모든 곳에서 저 함수를 작성해야 하니 말이다. 가독성 문제다

전체 코드 확인

router를 사용하여 본창 이동 및 setState()를 사용한 유저 정보 메모리 할당하는 부분은 생략했다.

https://github.com/ckdtjs505/wonder_weeks/commit/64e560248d988837ea4c575d3670eca6af5b59a4

feat: 아이 정보 로컬에 저장하기 · ckdtjs505/wonder_weeks@64e5602

ckdtjs505 committed Dec 24, 2024

github.com

React-native 모달 만들기 - 로그인 및 유저 정보 화면

늘푸른개발자 — Sun, 22 Dec 2024 17:47:22 +0900

React-native expo 로 wonder weeks 앱 만들기 - 환경 세팅 하기

개발 환경 세팅이 모두 완료 후 실행하면 EXPO에서 생성된 애플리케이션이 실행되었다.

이번 시간에는 WONDER WEEKS에서 아이 이름과, 생년 월일(태어난날)을 입력하는 모달을 만들어 보자.

React Native modal 분석하기

앱은 대부분의 기능들이 규격화되어있다는 점을 알면, 아마도 modal도 공홈에서 제공하고 있진 않을까? 하는 마음에 찾아보았다.

https://docs.expo.dev/router/advanced/modals/

Modals

Learn how to use modals in Expo Router.

docs.expo.dev

놀랍게도 모달을 만드는 방식에 대해 세밀하게 나와다는 점을 알 수 있다.

React Native modal 분석한 내용 실행하기

1. 화면 만들기

modal.tsx라는 화면을 만들라고 한다. 필자의 경우 userInputModal.tsx로 생성했다.

import { Button, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

export default function userInputModal() {

    const handlePress = () => {
        console.log('press')
    }
    return <View style={styles.container}>
        <View style={styles.form}>
            <Text style={styles.label} > 아이 이름  </Text>
            <TextInput style={styles.input} placeholder='기본 아이'></TextInput>

            <Text style={styles.label}> 태어난날  </Text>
            <TextInput style={styles.input} placeholder='2024-11-11'></TextInput>
            
        </View>
        <TouchableOpacity style={styles.button} onPress={handlePress}>
            <Text style={styles.buttonText}>입력완료 </Text>
        </TouchableOpacity>
        

        
    </View>
}

const styles = StyleSheet.create({
    container : { 
        flex: 1, 
        alignItems: 'center',
        justifyContent: 'space-between', // 상단과 하단 분리
        backgroundColor: '#fff',
        padding: 20,
    }, 
    content : {
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    form : {
        width: '90%',
    },
    label : {
        fontWeight: "500",
        fontSize: 20,
        marginTop: 10,
    }, 
    input : {
        borderColor: '#ddd',
        borderWidth: 1,
        borderRadius: 10,
        margin: 10,
    },
    button: {
        backgroundColor: '#ff3a67', // 버튼 배경색 ff3a67
        padding: 10,
        borderRadius: 5,
        width: '85%',
        alignItems: 'center',
    },
    buttonText: {
        color: 'white', // 버튼 텍스트 색상
        fontSize: 16,
        fontWeight: 'bold',
    },
})

2. app/_layout.tsx에 option : modal로 설정하기

모달로 표시하려면 Stack에 넣고 option으로 presentation: "modal"로 설정하면 된다.

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import 'react-native-reanimated';

import { useColorScheme } from '@/hooks/useColorScheme';

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DefaultTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="index" />
        <Stack.Screen name="userInputModal" options={{
          presentation: "modal",
          title: '아이 정보 입력'
        }}/>
        <Stack.Screen name="+not-found" />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

3. 작업 확인하기

Home 화면에서 버튼을 클릭하면 모달을 실행하여 정상 동작하는지 확인하자.

모달을 실행하는 방식은 router.push로 실행할 수 있다.

import { router } from "expo-router";
import { Button, Text, View } from "react-native";

export default function Home(){
  const handleModalButton = () => {
    router.push('/userInputModal')  // 모달 화면으로 이동하기
  }

  return <View>
    <Text>Home </Text>
    <Button title="모달" onPress={handleModalButton}></Button>
  </View>
}

정리

Modal을 만드는 방식은 Stack Component에서 option을 Modal로 세팅
Modal을 확인하는 방법은 expo-router의 router.push로 창을 띄어줌

마무리

Modal이라는 페이지가를 추가한다는 개념으로 접근한다면 이해가 훨씬 쉬움

React-native expo 로 wonder weeks 앱 만들기 - 환경 세팅 하기

늘푸른개발자 — Sat, 21 Dec 2024 21:25:54 +0900

솔로프리너? 들어본 적 있는가? Solo + Entrepreneur의 합성어로, 1인 창업가나 1인 기업가라고 칭해지는데. 나도 한번 해보고 싶어서 도전해 본다. React Native의 expo를 선택한 이유는. 현 FE개발자로 JS랑 React가 익숙했기에 React Native에 대한 진입장벽이 낮게 느껴졌고, 개발 한 번으로 IOS, Android 둘 다 배포할 수 있다니. 군침이 싹 돈다.

expo로 개발 한 이유는 별 생각 없었고, 공식 문서를 따라가다 보면 자연스럽게... expo로 개발을...

https://reactnative.dev/docs/environment-setup 예전에는 이렇게까지 밀어주는 느낌은 못받았는데.

공식 문서를 따라 환경 세팅을 해보자.

1. React-native expo 로 프로젝트 설치하고 실행하기

npx create-expo-app@latest

실행 화면

앱 이름을 입력하라고 한다. 만들 앱의 이름은 wonder_weeks를 입력하고 앤터를 치면 알아서 폴더를 만들고 실행이 끝나면. 어떻게 해야 할지 알려준다. 하라는 명령어 그대로 실행해 보자

cd wonder_weeks
npm run android

필자의 경우 안드로이드 폰을 사용하고 있어서 android로 실행했다.

연결된 안드로이드 앱을 찾지 못해서 에러가 발생했다.

2. 앱 실행해보기

안드로이드 앱을 연결하기 위해서. 다시 공식문서로 가보자.

https://docs.expo.dev/get-started/set-up-your-environment/?mode=expo-go

Set up your environment

Learn how to set up your development environment to start building with Expo.

docs.expo.dev

본인 기기에 맞는 옵션을 선택하자. 옵션에 따른 설명이 하단에 나온다. Expo를 설치하라고 하니 설치하자.

Expo go 앱이 설치된다.

https://docs.expo.dev/get-started/start-developing/

Start developing

Make your first change to an Expo project and see it live on your device.

docs.expo.dev

실행 명령어가 바뀌었다.

npx expo start

실행해 보자.

QR 코드가 보인다. 한번 찍어보자.

앱이 실행된다.

정리

React native에서 제공하는 공식문서를 따라 개발을 진행.
npx create-expo-app@latest 를 사용해서 프로젝트를 생성
npx expo start로 생성한 프로젝트를 실행

느낀 점

React Native 개발 생각보다 해볼만 ? ㅋㅋ

FSD 프론트앤드 개발을 위한 최적화된 디자인 패턴

늘푸른개발자 — Thu, 21 Mar 2024 10:14:14 +0900

들어가기

FSD 아키텍처가 무엇인지 아는가? Feature-Sliced Design의 줄임말로 애플리케이션을 Feature(기능) 단위로 조직화하여 관리하는 방법을 말한다. 끊임없이 변화하는 비즈니스 요구 사항에 맞서서 프로젝트를 더 이해하기 쉽고 체계적으로 만든다는 점에서 매우 흥미롭게 다가왔다. 개발은 변화에 민감하다. 각 기능들은 다른 기능들에 대해 격리되어 있어야 한다. 왜냐하면 하나의 변화로 인해서 다른 기능들이 고장 나는 경우가 너무 빈번했기 때문에. 어떻게 격리벽을 세워 코드를 안전하게 작성할 수 있을지에 대한 고민이 많았다. 그리고 유지보수와 확장성에도 좋은 코드를 작성하여 팀원분들에게도 좋은 코드리뷰를 하고 싶은 마음, 그러한 기준을 찾고 있었다. 클린 아키텍처, 실전주의 프로그래머 등 다양한 책을 읽으면서 개념에 대해서 이해는 했지만, 그 개념을 직접적으로 적용하기에는 어떻게 해야 할지 막막했다. 그러던 중에 발견한 FSD이다.

FSD 아키텍처는 책에서 읽은 다양한 개념들을 집대성하여 완성한 아키텍처로 보였다. 아키텍처보다는 방법론 쪽에 가깝다는 생각이 들었다. 왜냐하면 어떻게 폴더를 배치하고, 각 폴더에는 어떤 파일들이 있어야 하는지를 꽤나 설명해 주기 때문이다.

FSD의 매력 ① - 관심사의 분리

FSD의 가장 매력적인 부분은 바로 Layer를 명확하게 설명하고 있는 점이었다. Layered architecture를 아는가? 정말 흔한 아키텍처인데 중요한 특징으로는 레이어라는 개념으로 관심사를 분리하고 있다. 레이어드 아키텍처를 보면 FE 보다는 BE에 초점이 맞춰져 있다는 느낌을 받았다. (https://xxeol.tistory.com/26) 가장 중요한 건 왜 레이어드 아키텍처가 탄생했냐 이다. 그건 바로 관심사를 분리하기 위해서이다. FSD는 FE의 필요성에 맞게 Layer를 설명한다.

app - 앱이 초기화되는 곳(진입점). provider, router, global style, global type
~~process - 여러 단계로 이루어진 페이지 처리~~
pages - 애플리케이션의 페이지. ( 로그인 페이지, 메인 페이지 등)
widgets - 페이지에 사용되는 독립적인 UI 컴포넌트
features - 비즈니스, 시나리오, 기능 ( 좋아요, 리뷰, 제품 평가)
entities - 비즈니스 엔티티 (사용자, 리뷰, 댓글)
shared - 특정 비즈니스에 종속되지 않은 재사용 가능한 컴포넌트와 유틸리티 (ui 키트, axios)

레이어들의 특징 의존성에 대해서도 설명한다.

출처 : https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj

각 레이어들의 책임과 역할에 대해 개념적으로 FE에 이렇게 맞게끔 설명한 아키텍처는 처음으로 보인다.
즉 App에서 SHARED를 가질 수 있지만, SHARED가 App을 가질 수는 없다는 의미이다. 각 계층을 관심사를 명확하게 구분 지어 놓았다.

FSD의 매력 ② - Layer의 구성

대부분 관심사들을 묶어 두는 것까지는 설명을 하지만, 어떻게 묶어야 하는지 대해 구체적으로 설명해 주는 경우는 많이 보지 못했다. 그러나 FSD의 경우에는 Layer는 어떻게 구성되어야 하는지까지 알려준다.

Layers - 앞서 설명한 데로 총 최대 7개로 이루어짐( app, pages, widgets, features, entities, shared)
slices - 특정 비즈니스의 Entities로 이루어짐(서비스별로 묶여있음)
segments - ui, model, api 등 기술적인 목적에 따라 코드가 이루어짐(기능별로 묶여 있음)

각 레이어들에 대해 서비스들이 있고, 서비스들은 세그먼츠들로 이루어져 있게 된다.

결론

FSD는 FE 개발에 사용하기 적합한 디자인 패턴이다
Layers들의 각 역할에 대해 이해하여 관심사분리가 되어야 한다
Layer는 서비스별로 slices 되어있으며 slices는 기능별로 나뉜다.

[알고리즘] BFS 그래프 탐색

늘푸른개발자 — Wed, 28 Feb 2024 19:09:29 +0900

BFS란?

BFS(Breadth-First Search, 너비 우선 탐색 )은 그래프 탐색 알고리즘이다.
시작 정점에서 가장 가까운 정점을 방문하고 멀리 떨어진 정점을 나중에 방문하는 방식으로 탐색한다

BFS 탐색 과정?

A를 탐색하고 B와 C를 탐색 리스트에 넣는다. 탐색 리스트 = [B, C]
탐색리스트에서 첫 번째 요소 B를 탐색하고 D를 탐색 리스트에 넣는다. = [ C, D ]
탐색리스트에서 첫번째 요소 C를 탐색하고 E를 탐색 리스트에 넣는다. = [ D, E ]
탐색리스트에서 첫번째 요소 D를 탐색하고 탐색 결과가 없어서 넘어간다. = [ E ]
탐색리스트에서 첫번째 요소 E를 탐색하고 탐색 결과가 없어서 넘어간다. = []

BFS의 등장 배경

A에서 E까지 가는 최단 경로를 찾고 싶다면 어떻게 할 것인가?
탐색 리스트에 넣을때가 바로 탐색한 횟수를 카운트하면 알 수 있다.
1. A를 탐색하고 B와 C를 탐색 리스트에 넣는다. 탐색 리스트 = [B, C] 1회
2. 탐색리스트에서 첫번째 요소 B를 탐색하고 D를 탐색 리스트에 넣는다. = [ C, D ] 2회
3. 탐색리스트에서 첫번째 요소 C를 탐색하고 E를 탐색 리스트에 넣는다. = [ D, E ] 3회
4. 탐색리스트에서 첫번째 요소 D를 탐색하고 탐색 결과가 없어서 넘어간다. = [ E ]
5. 탐색리스트에서 첫번째 요소 E를 탐색하고 탐색 결과가 없어서 넘어간다. = []
총 3회만에 갈 수 있다는 것을 알 수 있다.

BFS를 활용하기

알고리즘 문제로 풀어보기

2178번: 미로 탐색

첫째 줄에 두 정수 N, M(2 ≤ N, M ≤ 100)이 주어진다. 다음 N개의 줄에는 M개의 정수로 미로가 주어진다. 각각의 수들은 붙어서 입력으로 주어진다.

www.acmicpc.net

정리 및 마무리

BFS를 사용하면 최단 거리를 알 수 있다.

제네릭 이해하기

늘푸른개발자 — Tue, 27 Feb 2024 15:56:18 +0900

제네릭의 등장 배경

코드의 안정성과 재사용성을 높이기 위해
여러 종류의 객체를 다룰 수 있는 유연한 코드를 작성하기 위해
이해되나요? ㅋㅋ 저는 이해가 안 됩니다. ㅋㅋ

제네릭을 이해하기 위한 이야기

우리가 배열을 만들어야 한다고 생각해 보면, 배열에는 어떤 타입의 데이터가 들어올까요?
문자열, 숫자, boolean ... 어떤 데이터도 들어올 수 있습니다.

해결방안으로는 우리는 각각 모든 타입별로 제공하는 배열들을 만들어줘야 합니다.

예를 들면 다음과 같습니다.
string일 때 사용하는 배열 - stringarray
number일 때 사용하는 배열 - numberarray
boolean일 때 사용하는 배열 - boolarray
string이랑 number를 모두 사용하는 배열 - stringAndNumberArray

한도 끝도 없겠죠? 이러한 문제를 해결하기 위해서 등장한 것이 바로 제네릭!!.
제네릭은 사용하는 사람이 어떤 타입으로 정할지 선택할 수 있도록 의존성을 넘겼어요.
대표적인 예시가 배로 배열이죠~
```
let stringarray: Array<string> = ["hi", "hello world"];
let numberarray: Array<number> = [1, 2];
let boolarray: Array<boolean> = [true, false];
let mixarray: Array<string|number> = [1, "hi"];
```
배열을 선언할 때 타입을 지정할 수 있도록 하는 개념이 바로 제네릭!!

마무리 및 정리

제네릭을 활용하면 코드의 재사용성, 유지보수성을 향상할 수 있어요.
더 유연한 코드로 작성하고 싶다면 제네릭은 꼭 알아야 하는 개념이라는 것을 알아두세요.

[알고리즘]나머지 연산(모듈러 연산)

늘푸른개발자 — Tue, 27 Feb 2024 14:37:15 +0900

목표

나머지 연산에 대해 알아보자
나머지 연산을 이용한 문제 풀이

나머지 연산의 등장 배경

31 mod 4는 무엇일까? 너무 쉽다. '3'!
3^31 mod 12는 무엇일까? 계산기를 두드려서라도 구해보자.
3^31는 617673396283947이다. 이 숫자의 mod 12는? 머리의 한계가 온다.
컴퓨터의 도움을 받아보자
바로 결과 도출
3^200 mod 12는 무엇일까? 장난하나 너무 큰 숫자다.
이렇게 큰 나머지 숫자를 어떻게 구 할 수있을까?

나머지 연산

나머지 연산은 3가지 특징을 가진다.

출처 : https://developer-mac.tistory.com/84

나머지 연산의 특징을 활용하여 문제를 해결해 보자.
3^200 mod 12
= ( 3^200 mod 12  ) * (  3^200 mod 12 ) mod 12
= ( 3^100  mod 12  ) * ( 3^100  mod 12   ) ^2   mod 12 (1)
= (( 3^50 mod 12  ) * ( 3^50  mod 12   )^2^2 mod 12  (2)
= (( 3^25 mod 12  ) * ( 3^25 mod 12   )^2^2^2 mod 12 (3)
= (( 3^12 * 3 mod 12  ) * ( 3^12 * 3 mod 12   )^2^2^2^2 mod 12 (4)
= (( 3^6 mod 12  ) * ( 3^6 * 3 mod 12   )^2^2^2^2^2 mod 12 (5)
= (( 3^3 mod 12  ) * ( 3^3 mod 12   )^2^2^2^2^2^2 mod 12 (6)
= (( 3^1 * 3 mod 12  ) * ( 3^1 * 3 mod 12   )^2^2^2^2^2^2^2 mod 12 (7)

이제 순서대로 계산을 해봅시다.

= (9 * 9 mod 12 )^2^2^2^2^2^2^2 mod 12 (7)
  81 mod 12는 9
= (9 * 9 mod 12 )^2^2^2^2^2^2 mod 12 (6)
  81 mod 12는 9
= (9 * 9 mod 12 )^2^2^2^2^2 mod 12 (5)
  81 mod 12는 9
= (9 * 9 mod 12 )^2^2^2^2 mod 12 (4)
  81 mod 12는 9
= (9 * 9 mod 12 )^2^2^2 mod 12 (3)
  81 mod 12는 9
= (9 * 9 mod 12 )^2^2 mod 12 (2)
  81 mod 12는 9
= (9 * 9 mod 12 )^2 mod 12 (1)
  81 mod 12는 9
= 9

나머지는 9이다.

나머지 연산 활용하기

나머지 연산과 그의 특징을 활용한다면 큰 숫자의 나머지도 구할 수 있다.

코드로 알아보기

let m = 12;
let mode  = ( n, k  ) => {
    if(k == 1) { 
        return n % m; 
    };
    let _n = mode( n, Math.floor (k / 2 ));
    _n = _n * _n % m;
    if( k & 1 ) _n = _n * n % m;
    return _n;
} 

mode(3, 61740) // 9가 나온다

알고리즘 문제로 풀어보기

1629번: 곱셈

첫째 줄에 A, B, C가 빈칸을 사이에 두고 순서대로 주어진다. A, B, C는 모두 2,147,483,647 이하의 자연수이다.

www.acmicpc.net

정리 및 마무리

나머지 연산의 특징을 잘 활용한다면 어떤 큰 수의 나머지도 구 할 수 있다.

참조

https://developer-mac.tistory.com/84