crontab -e crontab을 열어줍니다.

특정한 시간에 또는 특정 시간 마다 어떤 작업을 자동으로 수행하게 해주고 싶을 때 사용하는 명령어가 cron입니다. cron은 특정한 시간에 특정한 작업을 수행하게 해주는 스케줄링 역할을 하는데 이 cron작업을 설정하는 파일을 crontab파일이라고 합니다.

매 시간마다 캐시메모리를 비워주려면

0 **** sync && echo 3 > /proc/sys/vm/drop_caches # 매 시간 캐시 비우기 지정한 시간에 캐시메모리를 비워주려면

40 3 *** sync && echo 3 > /proc/sys/vm/drop_caches # 매일 오전 3시 40분에 캐시 비우기 crontab 안에 작성해주면 됩니다.

crontab의 파일형식은 다음과 같습니다.

첫번째 : 분 0-59 두번째 : 시 0-23 세번째 : 일 0-31 네번째 : 월 1-12 다섯번째 : 요일 0-7 (0 또는 7=일요일, 1=월, 2=화,…) 여섯번째 : 명령어 실행할 명령을 한줄로 쓴다. 캐시메모리를 잘 관리하여 리눅스 느려짐을 예방합시다.

자동 모드 업데이트는 앱을 업데이트하는 가장 간단한 방법이며 최종 사용자에게 가장 침습적인 환경이 가장 적습니다.

codePush.sync();

업데이트를 사용할 수 있는 경우 다음에 앱을 다시 시작할 때 자동으로 다운로드되고 설치됩니다(최종 사용자 또는 OS에 의해 명시적으로). 그러나 개발자는 매개 변수를 사용하여 설치 동작을 수정할 수 있습니다.installMode

직접 실행: 업데이트가 실행 중인 애플리케이션에 즉시 적용됩니다. 애플리케이션은 새 콘텐츠로 즉시 다시 로드됩니다. ON_NEXT_RESTART: 업데이트가 다운로드되었지만 즉시 설치되지는 않습니다. 새 콘텐츠는 다음에 애플리케이션이 시작될 때 사용할 수 있습니다. ON_NEXT_RESUME: 업데이트가 다운로드되었지만 즉시 설치되지는 않습니다. 새 콘텐츠는 다음에 애플리케이션이 다시 시작되거나 다시 시작될 때 사용할 수 있으며, 어떤 이벤트가 먼저 발생하든 관계없이 사용할 수 있습니다. 예를 들어 업데이트를 즉시 다운로드하고 설치하기 위해 개발자는 다음과 같이 매개 변수를 installMode 사용할 수 있습니다.

코드푸시 업데이트 완료 후 앱 강제 재실행시 rollback 이슈

https://velog.io/@beanlove97/react-native-codepush-rollback-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%8A%88

외래키를 통한 데이터 동시 삭제

테이블 생성시 CONSTRAINT 로 외래키를 연결해주어야함 이미 자동으로 테이블이 생성되었거나, 생성한 상태라면 아래 쿼리문으로 수동으로 외래키 연결을 해주었습니다.

첫번째 시도

ALTER TABLE review
ADD CONSTRAINT fk_store_idx
FOREIGN KEY (store_idx) REFERENCES store(idx);

java.sql.SQLException: Cannot delete or update a parent row: a foreign key constraint fails (`flambus`.`review_tag`, CONSTRAINT `fk_review_tag_idx` FOREIGN KEY (`review_idx`) REFERENCES `review` (`idx`))

자식까지 함께 삭제할 수 없다고 하네요. 외래키를 걸때 "CASCADE" 옵션을 추가해야 된다고 합니다.

근데 이미 걸었던 외래키 조건을 어떻게 삭제해야하나.. 추가적으로 막 걸면 안될꺼같은데 조건이름도 막무가내로 해서 기억도 안나고 좀 당황스러웠습니다.

현재 테이블의 외래키 조건을 확인하기

-- 제약조건을 확인하고싶다면
SHOW CREATE TABLE review_like;

해당 테이블의 정보를 확인 할 수 있어요!

사진 하단에 보면 CONSTRAINT '조건명' 보이시나요? 내가 추가했던 외래키 조건명을 알았으니 이제 지워봅시다!

외래키 조건 삭제

-- 제약조건 삭제
ALTER TABLE review_like
DROP FOREIGN KEY fk_review_like_idx;

정상적으로 삭제가 됐는지 한번 더 확인해주세요

-- 제약조건을 확인하고싶다면
SHOW CREATE TABLE review_like;

CASCADE 옵션을 추가해서 외래키 걸기

-- review_like 테이블에 외래 키 제약 조건 추가
-- CASCADE 조건을 함께 걸어주면 삭제할때 자식까지 같이 삭제됨.
ALTER TABLE review_like
ADD CONSTRAINT fk_review_like_idx
FOREIGN KEY (review_idx)
REFERENCES review(idx)
ON DELETE CASCADE;

다시 로직에서 JPA 코드를 실행하게되면 review.idx 와 연결되어있는review_like.review_idx,review_tag.review_idx 가 함께 삭제된다!

 reviewRepository.deleteById(reviewIdx);

참고 레퍼런스

https://jydlove.tistory.com/50 https://creamilk88.tistory.com/158

현재 진행중인 사이드 프로젝트 "Flambus(플램버스)"는 내 근처 맛집을 탐험하며 아케이드 형식 게임 방식으로 맛집을 탐방하며, 맛집 정보를 공유하는 플랫폼 입니다

대학생 디자이너 3명, 취준 프론트엔드 개발자 1명, 백엔드개발자 2명과 함께 진행하고 있습니다. 저는 백엔드 개발로 참여했지만, 회사에서는 ReactNative 앱을 개발하고 있기 때문에 프론트엔드 개발자인 "섭우"님에게 많이 배우기 위해 앱 개발도 조금씩 참여하기러 했습니다!

서비스의 아키텍쳐와 ERD 등 개발의 관련된 글은 정리해서 또 포스팅할 예정이에요

현재 저희 프로젝트는 섭우님이 카카오맵 기반의 웹뷰로 맵을 구현하고 앱과 통신 브릿지를 통해 웹뷰와 앱이 통신시키는 방식으로 개발을 진행중입니다 몇일 전 섭우님에게 카톡을 통해 해당 이슈를 파악하게 되었어요.

(텍스트에서도 빡침이 느껴네요)

저도 너무 궁금해서 원인을 파악하고싶은 맘에 칼퇴근을 하고 호기롭게 에뮬레이터를 킨 순간 IOS에서만 웹뷰 화면에서 백지가 출력되었습니다.

물론 사파리, 혹은 PC크롬으로 웹서버 접근시 정상적으로 맵이 출력이 되는데 말이죠.

1차 시도

일단 카카오 SNS 로그인을 구현할때도 https:// 인증 관련한 이슈가 많았기 때문에 로컬 http://localhost로 리다이렉팅 되는게 문제인거 같아서 "mkcert" 를 이용해 로컬 https 인증 도메인을 달면 해결되겠지 생각했습니다.

mkcert 로컬 환경에서도 https:// 보안 인증서를 사용할수있어요 ! https://github.com/FiloSottile/mkcert

https://도메인을 달고도 IOS 화면에서는 백지가 계속 출력되었습니다.

다른 플랫폼들에서는 정상동작 하기에 확실히 IOS 정책상 인증되지않은 도메인을 차단하는것이라고 생각했는데 안되서 당황했습니다.

2차 시도

2차 시도까지 오기에 1~2시간 가량의 삽질이 있었습니다. 로컬이 아닌 실제 서버에도 웹서버를 올려도 봤지만 결과는 FAIL 그래서 "근본적인 문제"를 해결 할 수 있는 방법이 있는지 찾기 시작했습니다.

바로 IOS 자체에서 해당 정책을 풀 수 있는지 말이죠!

그래서 찾게된것이 바로 ATS (App Transport Security) 입니다. 2015년부터 IOS 9 버전부터 도입된 보안사항 입니다. 이 시큐리티 보안 정책이 인증되지않은 http 컨텐츠의 로드를 막고있었던 모양이네요.

해결방법

Xcode를 열어주세요 (IDE에서 ios폴더에서 바로 info.plist 열어두되요!)

info.plist 를 열고 "App Transport Security Settings" 카테고리에서 "Allow Arbitray Loads in Web Content" "Allow Arbitray Loads" 2개를 추가하고 "Yes"로 해주시고 새로 빌드해주세요!

결과

정상적으로 웹뷰 화면이 출력이 되네요 물론 정식 배포할때는 웹서버에서 https 인증도메인이 달려서 나가겠지만, 개발할동안은 로컬에서도 편하게 사용할 수 있도록 풀어두는게 좋을것 같네요!

레퍼런스

https://developer.apple.com/news/?id=jxky8h89

이것도 모르고 3시간을 삽질했다..

dnf 명령어 업데이트

sudo dnf update

설치

sudo dnf install mariadb105-server

마리아 디비 시작

sudo systemctl start mariadb

설치 확인

sudo systemctl status mariadb

시큐어 설치(선택)

sudo mysql_secure_installation

WebView를 사용하고있는 화면에서 앱이 종료되어 버리는 경우 대처방법

안드로이드에서만 특정 스크린을 사용중 스크롤을 아래로 내렸을 경우에 앱이 죽어버리는 현상이 발생습니다. 아무런 로그도 발생하지않고 앱이 죽어버려, 원인 파악이 힘들었는데 해당 화면에서는 일부 기능을 react-native-webview 를 사용한 webview로 기능을 제공해주고 있어 해당 라이브러리 커뮤니티에서 서칭중 비슷한 증상 이슈를 발견했습니다.

해당 이슈는 웹뷰의 브라우저와 안드로이드 버전간의 충돌로 인해 웹뷰를 지나서 스크롤되는 순간 앱이 crash 됩니다. Chrome 73이 출시되기 시작하면서 해당 문제가 발생하기 시작했다합니다.

커뮤니티에서 제공하는 해결 솔루션중 대표적인것 2가지를 가져왔습니다.

해결방법 1. 사용자에게 직업 특정 크롬 버전 사용을 권장한다

해결방법 2.

        <View style={{ flex: 1 }}>
          <WebView style={{ opacity: 0.99, minHeight: 1 }} ... />
        </View>

웹뷰에 불투명도를 적용하는 방법으로 문제를 해결했습니다.

아래는 해당 이슈의 대한 라이브러리 개발자의 댓글 입니다.

좀 더 많은 맥락을 추가하자면; 지난 목요일 Chrome 73이 출시되기 시작하자 우리도 이 문제를 경험했습니다. 불투명도를 적용하기 전에 약 150,000번의 충돌이 발생했습니다. 0.99 해킹으로 대부분의 경우 문제가 해결되었습니다. 그러나 수정 사항이 적용된 경우 WebView 콘텐츠가 올바르게 렌더링되지 않는 문제(스크롤 작업이 비정상적으로 작동하고 탭이 실제 탭과 다른 위치에 등록됨)에 문제가 발생했습니다. ScrollView에 포함된 5000px 높이의 대형 웹뷰로 제한되는 것 같습니다. 특정 웹뷰의 경우 이제 불투명도: 0.99 수정 없이도 충돌을 '수정'하는 것처럼 보이는 모달에서 엽니다. 우리는 아직 이 문제를 조사하는 중이므로 그보다 더 구체적인 정보는 없지만 아마도 이 추가 정보는 같은 문제를 겪고 있는 누군가에게 도움이 될 것입니다.

더많은 정보는 아래 링크를 참고하세요!

https://github.com/react-native-webview/react-native-webview/issues/429

모든 언어의 공부는 클론코딩부터 시작이다. 대학생 시절 노마드 코더나 유튜브에 돌아다니는 클론코딩을 했던 경험이 많았습니다. ReactNative 를 첫 시작하는 초보개발자분들이 있다면 오픈소스 라이브러리의 사용법이나 ReactNative가 이런것이구나 하고 익히는데 캘린더만한 앱이 없을 것 같고, 저도 집에서 천천히 복습할겸 시작하게된 프로젝트입니다.

환경

• react-native 0.72.3
• react-native-calendars
• react-redux

1. 개발에 필요한 Util 함수 개발

calendarUtils.js

/**
 * @title Date 객체를 스트링 형태의 날짜로 변환해줍니다.
 * @param date
 * @returns {string}
 */
export function getFormattedDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
}


/**
 * 스트링 형태의 날짜를 주면 분리해서 json으로 만들어줌.
 * @param dateString
 * @returns {{month: *, year: *, day: *}}
 */
export function parseDateString(dateString) {
    const [year, month, day] = dateString.split('-');

    return {
        year,
        month: String(parseInt(month)), // 단일 자리 월에 0을 붙이지 않도록 변환
        day: String(parseInt(day))      // 단일 자리 일에 0을 붙이지 않도록 변환
    };
}

2. 캘린더앱의 핵심 캘린더 구현하기

가장 많이 사용하는 오픈소스 라이브러리를 사용해서 최대한 네이버 캘린더와 비슷하게 한번 만들어보려 합니다.

무려 8.6K의 깃허브 Stars!! https://wix.github.io/react-native-calendars/docs/

2-1 메인 캘린더

사용자가 선택한 날짜는 앱 자체에서 전역적으로 관리하면서 다른 기능에도 부가적으로 사용해야될것 같아 ReduxStore에서 관리하도록 처리했습니다.

MainCalendar.js

export default function MainCalendar() {
    const dispatch = useDispatch();
    const windowWidth = Dimensions.get('window').width;


    let currentMonth;
    return (
        <>
            <CalendarHeader />
            <CalendarList
                onDayPress={day => {
                    dispatch(selectedDate(day.dateString))
                }}
                customHeader={({current})=>{
                    //현재 헤더의 년월 정보를 변수에 저장해놓고 Day컴포넌트르 만들때 사용할게요.
                    currentMonth = parseDateString(current);
                }}
                headerStyle={{height: 200}}
                dayComponent={(data) => {
                    return (
                        <Day data={data} currentMonth ={currentMonth}/>
                    )
                }}
                //월이 바뀔경우 바뀐 월의 1일을 선택합니다.
                onMonthChange={month => {
                    // console.log("바뀜")
                    const parseString = parseDateString(month.dateString);
                    dispatch(selectedDate(`${parseString.year}-${parseString.month < 10 ? `0${parseString.month}` : `${parseString.month}`}-01`))
                }}
                hideExtraDays={false}
                horizontal={true}
                pagingEnabled={true}
                disabledByDefault={true}
                calendarWidth={windowWidth}

            />
        </>
    );
}

2-2 각 일(day)영역 컴포넌트 만들기

1. handleOnPressDay() 함수는 각 컴포넌트별로 이벤트가 모두 생성되기때문에 UseCallBack을 통해 메모이제이션 해두고 캐싱하도록 처리해 컴포넌트 성능을 개선했습니다.

2. currentMonth는 캘린더가 첫 화면을 렌더링할때 렌더링하는 년,달 입니다. 해당 매게변수에 저장되있는 값으로 이전달인지 다음달인지 확인해서 컴포넌트 Text Color를 결정합니다. (아래 코드 부분을 보시면됩니다.)

customHeader={({current})=>{
     //현재 헤더의 년월 정보를 변수에 저장해놓고 Day컴포넌트르 만들때 사용할게요.
       //캘린더가 생성될때마다 생성되는 날짜 정보를 변수에 저장해서 사용함.
     currentMonth = parseDateString(current);
  }}

MainCalendar.js

const Day = ({ data ,currentMonth}) => {
    const todayDate = getFormattedDate(new Date());

    const dayDate = {
        year: data.date.year.toString(),
        month: data.date.month.toString(),
        day: data.date.day.toString(),
    };
    const dispatch = useDispatch();
    const selected = useSelector(state => state.selectedDate);
    //현재 선택되어있는 날짜 flag
    const isSelected = selected === data.date.dateString;
    //현재 생성하는 Day 컴포넌트의 월과 헤더 타이틀에 표시되는 월이 동일한가? 동일하지 않으면 Gray 처리 해야함.
    const isSameMonth = currentMonth.month === dayDate.month;
    //현재 생성하는 Day컴포넌트가 오늘인가? 오늘이라면 검은색으로 표시해줘야함
    const isToday = todayDate === data.date.dateString;
    //컴포넌트 Text Color
    const textColor = isSameMonth ? (isToday ? 'white' : 'black') : 'gray';

    //해당 함수는 각 컴포넌트마다 모두 똑같기 때문에 UseCallBack에 넣어놓고 사용하자.
    const handleOnPressDay = useCallback(({ date }) => {
        dispatch(selectedDate(date.dateString));
    }, [dispatch]);

    return (
        <TouchableOpacity
            activeOpacity={1}
            style={[{ height: 40, paddingLeft: 8, paddingRight: 8 }]}
            onPress={() => handleOnPressDay(data)}>
            <View
                style={[
                    styles.day,
                    isSelected && styles.selectedDay,
                    isToday && styles.today,
                ]}>
                <Text
                    style={[
                        globalFonts.fontSemiBold,
                        {
                            fontSize: 13,
                            color: textColor,
                        },
                    ]}>
                    {data.date.day}
                </Text>
            </View>
        </TouchableOpacity>
    );
};

2-3 사용자가 선택한 날짜 store에 저장하기

action.js

// Action Types
export const SELECTED_DATE = 'SELECTED_DATE';
// Action Creators
export const selectedDate = (state) => {
    return {
        type: SELECTED_DATE,
        state : state
    };
};

2-4 캘린더 헤더 만들기

1.헤더에서도 해당 년월을 보여 줘야하는 요구사항이 있어 store에 저장되어있는 선택된 날짜를 가져와 관리합니다.

const CalendarHeader = React.memo(({}) => {
    const selected = useSelector(state => state.selectedDate);
    const parts = selected.split('-');
    const year = parts[0];
    const month = parseInt(parts[1]);

    return(
        <View style = {[styles.calendarHeaderView,{height:70}]}>
            <View style = {{flex:1}}>
                <Text style = {[globalFonts.fontBold,{fontSize:20}]}>{`${year}. ${month}`}</Text>
            </View>
            <View style = {{flex:1,flexDirection:'row',alignItems:'flex-end',marginBottom:4}}>
                    <Text style = {[styles.dayOfWeek,{color:'red',marginRight:1}]}>일</Text>
                    <Text style = {[styles.dayOfWeek]}>월</Text>
                    <Text style = {[styles.dayOfWeek]}>화</Text>
                    <Text style = {[styles.dayOfWeek]}>수</Text>
                    <Text style = {[styles.dayOfWeek]}>목</Text>
                    <Text style = {[styles.dayOfWeek]}>금</Text>
                    <Text style = {[styles.dayOfWeek,{color:'blue'}]}>토</Text>
            </View>
        </View>
    )
})

2-5 전체 코드

import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React, {useState, useMemo, useEffect, useCallback} from 'react';
import {Dimensions} from 'react-native';
import {CalendarList} from "react-native-calendars";
import {globalFonts} from "../styles/globalStyles";
import {getFormattedDate, parseDateString} from '../utils/calendarUtils'
import {selectedDate, selectedPrevDate} from "../modules/actions/actions";
import {Provider, useDispatch, useSelector} from 'react-redux'


const todayDate = getFormattedDate(new Date());
export default function MainCalendar() {
    const dispatch = useDispatch();
    const windowWidth = Dimensions.get('window').width;
    let currentMonth;

    return (
        <>
            <CalendarHeader />
            <CalendarList
                onDayPress={day => {
                    dispatch(selectedDate(day.dateString))
                }}
                customHeader={({current})=>{
                    //현재 헤더의 년월 정보를 변수에 저장해놓고 Day컴포넌트르 만들때 사용할게요.
                    currentMonth = parseDateString(current);
                }}
                dayComponent={(data) => {
                    return (
                        <View style = {{height:40}}>
                            <Day data={data} currentMonth ={currentMonth}/>
                        </View>
                    )
                }}
                //월이 바뀔경우 바뀐 월의 1일을 선택합니다.
                onMonthChange={month => {
                    //오늘 날짜가 포함된 달이 아닌경우에만 1을 선택함
                    if (month.dateString !== todayDate) {
                        const parseString = parseDateString(month.dateString);
                        dispatch(selectedDate(`${parseString.year}-${parseString.month < 10 ? `0${parseString.month}` : `${parseString.month}`}-01`))

                    }
                }}
                hideExtraDays={false}
                horizontal={true}
                pagingEnabled={true}
                // disabledByDefault={true}
                calendarWidth={windowWidth}

            />
        </>
    );
}




const Day = ({ data ,currentMonth}) => {


    const dayDate = {
        year: data.date.year.toString(),
        month: data.date.month.toString(),
        day: data.date.day.toString(),
    };
    const dispatch = useDispatch();
    const selected = useSelector(state => state.selectedDate);
    //현재 선택되어있는 날짜 flag
    const isSelected = selected === data.date.dateString;
    //현재 생성하는 Day 컴포넌트의 월과 헤더 타이틀에 표시되는 월이 동일한가? 동일하지 않으면 Gray 처리 해야함.
    const isSameMonth = currentMonth.month === dayDate.month;
    //현재 생성하는 Day컴포넌트가 오늘인가? 오늘이라면 검은색으로 표시해줘야함
    const isToday = todayDate === data.date.dateString;
    //컴포넌트 Text Color
    const textColor = isSameMonth ? (isToday ? 'white' : 'black') : 'gray';

    //해당 함수는 각 컴포넌트마다 모두 똑같기 때문에 UseCallBack에 넣어놓고 사용하자.
    const handleOnPressDay = useCallback(({ date }) => {
        dispatch(selectedDate(date.dateString));
    }, [dispatch]);

    return (
        <TouchableOpacity
            activeOpacity={1}
            style={[{flex:1, minWidth:50,alignItems:'center'}]}
            onPress={() => handleOnPressDay(data)}>
            <View
                style={[
                    styles.day,
                    isSelected && styles.selectedDay,
                    isToday && styles.today,
                ]}>
                <Text
                    style={[
                        globalFonts.fontSemiBold,
                        {
                            fontSize: 13,
                            color: textColor,
                            textAlign: 'center',

                        },
                    ]}>
                    {data.date.day}
                </Text>
            </View>
        </TouchableOpacity>
    );
};



const CalendarHeader = React.memo(({}) => {
    const selected = useSelector(state => state.selectedDate);
    const parts = selected.split('-');
    const year = parts[0];
    const month = parseInt(parts[1]);

    return(
        <View style = {[styles.calendarHeaderView,{height:70}]}>
            <View style = {{flex:1}}>
                <Text style = {[globalFonts.fontBold,{fontSize:20}]}>{`${year}. ${month}`}</Text>
            </View>
            <View style = {{flex:1,flexDirection:'row',alignItems:'flex-end',marginBottom:4}}>
                    <Text style = {[styles.dayOfWeek,{color:'red',marginRight:1}]}>일</Text>
                    <Text style = {[styles.dayOfWeek]}>월</Text>
                    <Text style = {[styles.dayOfWeek]}>화</Text>
                    <Text style = {[styles.dayOfWeek]}>수</Text>
                    <Text style = {[styles.dayOfWeek]}>목</Text>
                    <Text style = {[styles.dayOfWeek]}>금</Text>
                    <Text style = {[styles.dayOfWeek,{color:'blue'}]}>토</Text>
            </View>
        </View>
    )
})


const styles = StyleSheet.create({
    calendarHeaderView: {
        paddingLeft: 16,
        paddingRight: 16,
        paddingTop: 12,
        // paddingBottom: 12,
        flexDirection:'column',
        // flex:1,
    },
    dayOfWeek : {
        flex:1,
        minWidth:50,
        fontSize:12,
        textAlign: 'center',
    },
    day: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 22,
        height: 22,
    },
    selectedDay: {
        borderRadius: 15,
        backgroundColor: '#C9C9C9'
    },
    today: {
        borderRadius: 15,
        backgroundColor: 'black'
    }

});

2-5 완성된 화면

실제 네이버 앱

좀 비슷한가요? 시간이 된다면 하단 상세 일정 정보와 메뉴 네비게이터도 만들어서 올려보겠습니다!

빌드시 아래와같이 뜨시는분들은 모두 해결이 가능한 방법인듯

Where: Build file 'D:\Projects\Vow\iye_react_native_user_app\node_modules\react-native-reanimated\android\build.gradle' line: 152

What went wrong: A problem occurred evaluating project ':react-native-reanimated'.

After upgrading to 2.14.4 - Could not get unknown property 'hermesEnabled' for project ':app' of type org.gradle.api.Project

* where: build file '/users/mypc/directory/node_modules/react-native-reanimated/android/build.gradle' line: 246

참고로 나는 3번째에 출력되는 로그가 발생했었다.

해결방법

이슈 내용은 reanimated 패키지와 리액트 0.70.0 이상 버전에서 나타나는 이슈로 확인된다.

해결방법은 node_modules에 설치된 react-native-reanimated/android 폴더에 있는 build.gradle 에서 아래와같이 수정하면된다.

아래 명령어로 node_module의 관리자권한을 부여해서 node_module를 수정했음.

 chomod -R 777 node_module/react-native-reanimated/android

// Check if Hermes is enabled in app setup
    def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
    if ((REACT_NATIVE_MINOR_VERSION >= 71 && appProject?.hermesEnabled?.toBoolean()) || appProject?.ext?.react?.enableHermes?.toBoolean()) {
        return "hermes"
    }

아래코드로 변경해주면 정상적으로 빌드된다.

// Check if Hermes is enabled in app setup
    def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
       if ((REACT_NATIVE_MINOR_VERSION >= 71) || appProject?.ext?.react?.enableHermes?.toBoolean()) {
        return "hermes"
    }

Fix pull request 링크

https://github.com/codewithmecoder/react-native-reanimated/commit/37ff277a9a2dc2c1c3c967a42ddc7089ca952933

내 머리속에 있는 지우개 어서오고 오랜만

최근 사이드 프로젝트를 소셜 네트워크(SNS) 기반 맛집 소개앱(플램버스)를 진행하고 있다. 현재 디자인 및 기획을 디테일 하고 있는 과정에서 미리 공통적으로 사용할만한 주말마다 짬짬히 비즈니스 로직을 개발하고 있었다.

이미 완성은 했었지만 나중에 다시 보면 분명 왜 이렇게 했는지 기억을 다 지워버릴것이기 때문에 코드를 정리하면서 회고하려고 합니다

업로드 모듈은 리뷰 작성, 피드 작성..등등 많은 곳에서 사용될 예정이므로 결합도와 확장성에 신경을 써서 개발하려고 노력했습니다.(지만 좋은 코드인지는 잘 모르겠음)

혹시 비슷한 로직을 구현하고 계신분중에 성격급하신분들은 그냥 아래 코드를 참고하시면됩니다. 시간이 금이다! https://github.com/explorer-cat/flambus-v1.0-springboot

WHY S3를 선택했는지?

Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조직 및 규정 준수 요구 사항에 맞게 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공합니다.

애초 설계할때부터 서버에 직접적으로 업로드 하는 방식은 생각하지 않았다. 일단 AWS 프리티어를 사용중이기도 했고, 내가 알기론 EC2 서버에 네트워크 업로드,다운로드 용량에 따라서 추가 요금이 발생한다. (예전에 무지성 git clone 하다가 요금 폭탄을 맞은적이 있음)

S3는 요금이 아주 착하다. 또한 SDK를 통한 여러 써드파티 기능들도 지원을 하고 있다. 실제 사용하고있는 Ubuntu 서버에서 S3로 바로 접근도 가능함!

SPRING BOOT AWS S3 연결

세팅법은 구글에 검색하면 많이 나와있으니, 아무거나 참고하면된다.

업로드 서비스 구조

UploadController.java

해당 컨트롤러는 업로드 서비스 테스트를 위해 작성했습니다.

@PutMapping(value="/upload",consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResultDTO<Map<String,Object>> saveImage(
            @RequestParam(value="image") List<MultipartFile> image,
            @RequestParam String userId) throws IOException {
        Map<String,Object> sampleArray = new HashMap<>();
        uploadService.upload(image,userId ,AttachmentType.REVIEW,2344);
        return ResultDTO.of(ApiResponseCode.CREATED.getCode(),ApiResponseCode.CREATED.getMessage(), sampleArray);
    }

UploadService.java

    /**
     * @param multipartFile     업로드된 파일 multipartFile 객체
     * @param userId            사용자 userId
     * @param attachmentType    업로드 타입("REVIEW,FEED")
     * @return
     * @throws IOException
     * @title 파일 업로드
     */
    @Transactional
    public List<Map<String, Object>> upload(List<MultipartFile> multipartFile, String userId, AttachmentType attachmentType, long mappedId) throws IOException {

        List<UploadImage> saveImageDataList = new ArrayList<>();

        if(multipartFile.size() <= 0) {
            new IllegalArgumentException("업로드될 파일이 없습니다.");
        }

        //MultipartFile로 받은 객체를 File 객체로 변환
        for (MultipartFile file : multipartFile) {
            //업로드 시도한 파일 제한 용량 검증
            validateFileSize(file);
            //MultipartFile -> File 객체로 convert
            File convertFile = convert(file).orElseThrow(() -> new IllegalArgumentException("MultipartFile -> File 전환 실패"));
            //s3에 적재될 유니크한 파일 이름
            String saveFileName = generateUniqueFileName(file.getName());
            //실제 파일 이름.
            String orginFileName = file.getOriginalFilename();
            //업로드될 버킷 PATH
            String bucketPath = attachmentType.getType() + "/" + userId + "/" + mappedId + "/" + saveFileName;//적재할 경로 세팅
            //업로드 된 이미지 URL
            String url = putS3(convertFile, bucketPath); //s3에 적재
            // 로컬에 생성된 File 삭제 (MultipartFile -> File 전환 하며 로컬에 파일 생성됨)
            removeNewFile(convertFile);
            //S3 버킷에 적재된 이미지 파일 정보를 게시글정보와 함께 맵핑해서 디비에 저장함.
            saveImageDataList.add(UploadImage.builder()
                    .fileName(orginFileName)
                    .uniqueFileName(saveFileName)
                    .imageUrl(url)
                    .fileSize(file.getSize())
                    .attachmentType(attachmentType.getType())
                    .mappedId(mappedId)
                    .created(LocalDateTime.now())
                    .updated(LocalDateTime.now())
                    .build());
        }

        return saveDB(saveImageDataList, attachmentType, mappedId);
    }


/**
* @title S3 업로드 모듈
* @param uploadFile
* @param fileName
* @return
*/
private String putS3(File uploadFile, String fileName) {
amazonS3Client.putObject(
      new PutObjectRequest(bucket, fileName, uploadFile)
              .withCannedAcl(CannedAccessControlList.PublicRead)    // PublicRead 권한으로 업로드 됨
);
return amazonS3Client.getUrl(bucket, fileName).toString();
}

validateFileSize() 함수는 업로드 전 조건을 검사하는 검증 함수입니다.

    /**
     * @title 파일의 최대 용량을 초과한 경우 예외 처리
     * @param file
     */
    private void validateFileSize(MultipartFile file) {
        String contentType = file.getContentType();
        long fileSize = file.getSize();

        FileType fileType = FileType.fromContentType(contentType);

        if (fileType != null) {
            switch (fileType) {
                case PNG:
                case JPEG:
                    if (fileSize > fileType.getMaxSize()) {
                        System.out.println(fileType.getContentType() + " : 업로드 제한된 용량 이상입니다.");
                        // ZIP 파일의 최대 용량을 초과한 경우 예외 처리
                        // throw new YourException("ZIP 파일 용량 초과"); // 예외 처리 방식은 상황에 맞게 정의
                    }
                    break;
                default:
                    break;
            }
        }
    }

MultipartFile로 받은 데이터를 File객체로 변환해줍니다. 이 과정에서 정상적인 업로드 객체가 아니라면 예외처리 되도록 했습니다.

//MultipartFile -> File 객체로 convert
File convertFile = convert(file).orElseThrow(() -> new IllegalArgumentException("MultipartFile -> File 전환 실패"));

/**
 * @title multipart 파일 객체를 일반 File 객체로 변환
 * @param file
 * @author 최성우
 * @return
 */
private Optional<File> convert(MultipartFile file) {
    try {
        File convertFile = new File(file.getOriginalFilename());

        if (convertFile.createNewFile()) {
            try (FileOutputStream fos = new FileOutputStream(convertFile)) {
                fos.write(file.getBytes());
            }
            return Optional.of(convertFile);
        }
        return Optional.empty();
    } catch (Exception e) {
        System.out.println("e : " + e);
    }
    return Optional.empty();
}

다음은 실제로 File 객체로 변환된 데이터를 S3 적재하는 로직입니다.

//s3에 적재될 유니크한 파일 이름
String saveFileName = generateUniqueFileName(file.getName());
//실제 파일 이름.
String orginFileName = file.getOriginalFilename();
//업로드될 버킷 PATH
String bucketPath = attachmentType.getType() + "/" + userId + "/" + mappedId + "/" + saveFileName;//적재할 경로 세팅

어려운 로직은 아니였지만 고민을 오래했던것 같습니다.![] 업로드에서 끝나는것이 아닌 사용자들의 이미 업로드한 피드,리뷰에 대해수 수정,삭제에 대한 예외도 고려했어야 했습니다.

고려했어야할점

1. 만약 사용자가 동일한 이름의 파일을 여러개 올린다면 서버에서는 어떻게 구분할까?
2. 만약 사용자가 리뷰를 수정할때 업로드한 이미지를 삭제한다면?
3. 다른 사용자들이 올린 이미지 이름과 용량마저 다 똑같은 파일이 업로드된다면?

고민끝에 버킷에 업로드되는 객체의 파일이름을 UUID를 통해 유니크한 이름으로 변경하고 적재하는 방법을 선택했고 적재 경로를 _"업로드타입/유저아이디/리뷰게시글아이디/유니크파일명" _으로 결정을 하게되었습니다.

그리고 동시에 데이터베이스에는 해당 리뷰아이디와 파일의 실제 이름, 버킷에 적재된 이름 등을 맵핑시켜 클라이언트 요청에도 문제가 없도록 처리했습니다.

사용자는 서버로 리뷰 아이디만 요청하면 업로드된 URL 주소를 알 수 있습니다. https://flambus-bucket-korea.s3.ap-northeast-2.amazonaws.com/review/22/2344/1f72e22b-2c16-426b-a0ce-facbba58d2a1

SaveDB 함수

'이미 해당 리뷰 또는 피드에 업로드된 이미지가 있는 경우, 모두 삭제'를 진행하는 이유는 사용자가 리뷰나 피드를 수정했을때 새로운 이미지를 추가했는지 삭제했는지 구분하기 번거롭기때문에 수정될경우 해당 폴더 자체를 지우고 새로 업로드 하는 로직으로 구현했습니다.

구현속도나 따로 처리해야될 부분은 많이 줄었으나, 단점은 피드나 리뷰의 글만 수정해도 첨부파일이 있다면 해당 이미지는 삭제되고 서버쪽에 재업로드된다는 단점이 있겠습니다. 개선해야지..

    /**
     * @title S3에 적재된 파일과 맵핑 정보를 데이터베이스에 저장합니다.
     * @param saveImageData 맵핑된 이미지 정보.
     * @param attachmentType
     * @param mappedId
     * @return List<Map<String, Object>>
     */
    private List<Map<String, Object>> saveDB(List<UploadImage> saveImageData, AttachmentType attachmentType, long mappedId) {
        List<UploadImage> existingImages = uploadRepository.findByAttachmentTypeAndMappedId(attachmentType.getType(), mappedId);

        // 이미 해당 리뷰 또는 피드에 업로드된 이미지가 있는 경우, 모두 삭제
        if (!existingImages.isEmpty()) {
            uploadRepository.deleteAll(existingImages);
        }

        // 새로운 이미지들을 저장
        List<UploadImage> savedImages = uploadRepository.saveAll(saveImageData);

        // 저장된 이미지들의 정보를 결과 리스트에 추가
        List<Map<String, Object>> results = new ArrayList<>();

        for (UploadImage savedImage : savedImages) {
            Map<String, Object> image = new HashMap<>();
            image.put("fileName", savedImage.getFileName());
            image.put("imageUrl", savedImage.getImageUrl());
            results.add(image);
        }

        return results;
    }

uuid를 활용해 유니크 파일명을 생성하는 함수

    /**
     * @title 파일이름이 겹치지 않기 위한 유니크한 파일 이름을 만들어주는 함수.
     * @param originalFileName 업로드하는 파일의 원본 이름
     * @return uuid
     */
    private String generateUniqueFileName(String originalFileName) {
        String extension = "";
        int lastDotIndex = originalFileName.lastIndexOf(".");
        if (lastDotIndex >= 0) {
            extension = originalFileName.substring(lastDotIndex);
        }

        // UUID를 사용하여 랜덤값을 생성하고, 확장자와 합쳐서 고유한 파일 이름을 생성
        String uniqueID = UUID.randomUUID().toString();
        return uniqueID + extension;
    }

파일의 타입과 업로드 타입등을 Enum으로 관리해보자

관리를 용이하게 하기위해 2가지의 Enum Class를 생성해서 관리했습니다.

AttachmentType 은 사용자가 업로드하는 이미지가 "리뷰" **인지 "피드"** 인지 아니면 추후 추가될 어떤 것 인지에 따라 DB에 AttachmentType별로 다르게 적재합니다.

AttachmentType.java

public enum AttachmentType {
    REVIEW("review"),
    FEED("feed");
    // 추후에 추가될 다른 업로드 타입들

    private final String type;

    AttachmentType(String type) {
        this.type = type;
    }

    public String getType() {
        return type;
    }

    public static AttachmentType fromString(String text) {
        for (AttachmentType uploadType : AttachmentType.values()) {
            if (uploadType.type.equalsIgnoreCase(text)) {
                return uploadType;
            }
        }
        throw new IllegalArgumentException("Invalid uploadType: " + text);
    }
}

FileType.java

FileType.java 는 사용자가 업로드하는 파일객체의 확장자의 따라 용량과 타입을 반환합니다. 또한 파일 타입을 체크하는 요소들이 업로드,다운로드 간 여러곳에서 사용되고 있었습니다.

public enum FileType {
    ZIP("application/zip", 100 * 1024 * 1024), // 100MB
    PNG("image/png", 10 * 1024 * 1024), // 10MB
    JPEG("image/jpeg", 20 * 1024 * 1024), // 20MB
    PDF("application/pdf", 50 * 1024 * 1024); // 50MB

    private final String contentType;
    private final long maxSize;

    FileType(String contentType, long maxSize) {
        this.contentType = contentType;
        this.maxSize = maxSize;
    }

    public String getContentType() {
        return contentType;
    }

    public long getMaxSize() {
        return maxSize;
    }

    public static FileType fromContentType(String contentType) {
        for (FileType type : FileType.values()) {
            if (type.getContentType().equals(contentType)) {
                return type;
            }
        }
        return null; // 해당 contentType이 없으면 null 반환 or 예외 처리
    }
}

두가지를 분리한 이유는 지속적으로 추가,삭제,변경이 될 수 있는 부분인거같아서 관리를 용이하게 하기 위해 Enum을 사용했습니다.

참고 문서는 동욱님이 배민시절 올리신 우테크 블로그 글을 참고했습니다. https://techblog.woowahan.com/2527/

테스트 요청

테스트를 위해 두가지 컨트롤러를 미리 작성했습니다. 첫번째는 디비에 맵핑된 ID로 이미지를 요청 두번째는 업로드 타입과 타입의 ID로 요청(4번 리뷰의 데이터를 불러오겠음 등)

@GetMapping("/image/{id}")
public ResultDTO<UploadImage> getImageById(@PathVariable Long id) {
    try{
        Optional<UploadImage> image = uploadService.getImageById(id);
        if (!image.isPresent()) {
            return ResultDTO.of(ApiResponseCode.SUCCESS.getCode(), ApiResponseCode.SUCCESS.getMessage(), null);
        } else {
            return ResultDTO.of(ApiResponseCode.SUCCESS.getCode(), ApiResponseCode.SUCCESS.getMessage(), image.get());
        }
    } catch(NullPointerException error) {
        Optional<UploadImage> image = uploadService.getImageById(id);
        return ResultDTO.of(200,"success",image.get());
    }
}

@GetMapping("/image/{attachment}/{mappedId}")
public ResultDTO<List<UploadImage>> getImageByAttachmentType(
        @PathVariable String attachment,
        @PathVariable long mappedId) {
    List<UploadImage> results = uploadService.getImageByAttachmentType(AttachmentType.fromString(attachment),mappedId);
    return ResultDTO.of(ApiResponseCode.SUCCESS.getCode(), ApiResponseCode.SUCCESS.getMessage(), results);
}

UploadService.java

해당 요청의 대한 로직은 JPA로 간단하게 구현했습니다.

/**
 * @title AttachmentType에 맞는 이미지 데이터를 반환합니다.
 * @param attachmentType {"reivew","feed"}
 * @param mappedId {"reviewId","feedId"}
 * @return [data]
 */
public List<UploadImage> getImageByAttachmentType(AttachmentType attachmentType, long mappedId) {
    List<UploadImage> byAttachmentTypeAndMappedId = uploadRepository.findByAttachmentTypeAndMappedId(attachmentType.getType(), mappedId);
    return byAttachmentTypeAndMappedId;
}

/**
 * @title Image pk를 통한 이미지 데이터 반환
 * @param id : db pk
 * @return
 */
public Optional<UploadImage> getImageById(Long id) {
    return uploadRepository.findById(id);
}

결과

리뷰나 피드관련 API가 개발되야지 사용을 해볼 수 있겠지만, 현재까지는 만족스러운것 같습니다.

하지만 개발하면서 보안이나 구조적으로 문제가 없을까 하는 고민은 계속 했던것 같습니다. 실제 실무에서 30GB 이상의 파일을 업로드도 가능했고, 실시간 업로드 상황도 알아야했기때문에 버킷과 서버간의 중간에서 유효성을 검증해주는 소켓 파일서버가 있었지만, 이번에 사용하는 업로드는 간단한 이미지 정도로 따로 중계 소켓파일서버를 개발하지는 않았습니다.

서비스 로직이 수정되거나 개발중에 아키텍쳐가 바뀌면 왜 바뀌었는지를 비롯해서 어떤 부분이 문제 였는지 또 남겨보면 좋은 경험이 될 것 같습니다.

일부 핵심 코드만 올렸지만 사용한 전체 코드를 확인하여 사용하실 분들은 아래 링크를 참고해주세요 https://github.com/explorer-cat/flambus-v1.0-springboot

📒 UseMemo,UseCallback 왜 써야하는가?

"useMemo와 useCallback이 왜 필요한가?"를 먼저 생각해보겠습니다. 리액트 내장 훅인 이 두 함수가 우리에게 편리함을 제공해준다면, 분명히 필요성이 제시되었기 때문에 누군가 개발했다는 것을 의미를 합니다. 가장 핵심적인 키워드는 '렌더링 최적화'입니다.

📒 메모이제이션(Memoization)이란?

메모이제이션은 일종의 캐싱과 같습니다. 특정 연산을 반복해야 할 때 사용되는 기법으로, 반복되는 결과를 메모리에 저장하여 중복되는 연산 없이 빠른 실행을 가능하게 해 줍니다. (캐시(cache) : 데이터나 값을 미리 복사해놓는 임시 장소를 의미합니다. 캐시는 접근 시간에 비해 원래 데이터에 접근하는 시간이 오래 걸리는 경우나 연산을 반복해야 하는 시간을 절약하고 싶을 때 사용됩니다. 데이터를 미리 복사해놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터 접근이 가능합니다.)

다만 메모이제이션 기법은, 결국 메모리에 특정한 값을 저장하는 것이기 때문에, 정말 필요한 경우가 아닌데 남용하는 경우에는 오히려 성능을 저하시킬 수 있으니, 정말 필요한 경우에만 사용해야합니다.

그러므로 어떠한 학습적인 용도가 있는게 아닌이상, 눈에띄는 성능저하가 발생하는 경우에만 사용하도록 합시다.

사용해야할 경우를 간단하게 정리하자면, 성능저하가 눈에띌정도의 값비싼 함수의 결과값을 저장해야하는 경우, 여러곳에서 재사용이 필요한 경우, 종속성배열의 값이 자주 변경되지 않는경우.

useMemo

useMemo(() => { /* 로직 */ }, []);

useCallback

const [sum, setSum] = useState(0);

const addNum = useCallback(() => {
  setSum(num + 1);
}, [num]);

정확히 이해하기 간단한 앱을 작성 해 보았다.

아래 로직 같은 경우 API 요청 -> 요청 후 특정 마켓에 있는 조건에 맞는 상장 코인만 필터해서 화면에 렌더해주는 함수이다.

//업비트 API를 요청하고 전체 상장된 코인중 KRW PAIR 상장된 코인을 VIEW로 뿌려준다.
    const [number, setNumber] = useState(0);
    const upbitListing = useSelector(state => state.upbitListingCoin);


    const getUpbitAllPairs = () => {
        let result = []
        console.log("전체 상장된 원화 코인을 요청했습니다.")
        for (const key in upbitListing.KRW_MARKET) {
            result.push(<View key = {upbitListing.KRW_MARKET[key].korean_name.toString()}><Text>{upbitListing.KRW_MARKET[key].korean_name}</Text></View>)
        }
        return result;
    }



    return (
        <Container>
            <TouchableOpacity
                onPress={() => {
                    setNumber(number+1);
                }}
                style = {{height:50,backgroundColor:'red',alignItems:'center',justifyContent:'center'}}>
                <Text>
                    number = {number}
                </Text><
                /TouchableOpacity>

            <ScrollView>
                <View>
                    {getUpbitAllPairs()}
                </View>
            </ScrollView>
        </Container>

같은 컴포넌트에서 number State가 변경될때마다 컴포넌트가 리렌더링 되면서 getUpbitAllPairs 함수가 항상 호출되고 콘솔 로그가 찍히는것을 확인 할 수 있었다. 같은 컴포넌트에 있는 State가 바뀔때마다 무조건적으로 해당 함수가 호출되어 코인 리스트를 불러오는것은 비효율적이라는 생각이 들었다.

위와 같이 컴포넌트 내에서 어떤 State가 변하든 또는 부모 컴포넌트에서 Props가 새로 내려오던, 무조건적으로 함수가 요청된다. 만약 해당 함수가 단순 API 요청 함수가 아니고 API요청 후 특정 무거운 비즈니스 로직까지 거친다면, 비효율적일것임.

로직 코드 개선 후

    const [number, setNumber] = useState(0);
    const upbitListing = useSelector(state => state.upbitListingCoin);
    const [filterData, setFilterData] = useState([]);

    const getUpbitAllPairsUseMemo = useMemo(() => {
        let result = []
        for (const key in upbitListing.KRW_MARKET) {
                result.push(<View key={upbitListing.KRW_MARKET[key].korean_name.toString()}><Text>{upbitListing.KRW_MARKET[key].korean_name}</Text></View>)
        }
        return result;
    }, [filterData])



    return (
        <Container>
            <TouchableOpacity
                onPress={() => {
                    setNumber(number+1);
                }}
                style = {{height:50,backgroundColor:'red',alignItems:'center',justifyContent:'center'}}>
                <Text>
                    number = {number}
                </Text><
                /TouchableOpacity>

            <ScrollView>
                <View>
                    {getUpbitAllPairsUseMemo}
                </View>
            </ScrollView>
        </Container>
    )

number State가 변해도 getUpbitAllPairsUseMemo()는 useMemo에 캐싱되어있기 때문에 새로 렌더링 하지않고 캐시 메모리에서 꺼내서 사용하게 된다.

-

💡 Reanimated를 왜 사용하게 되었는가?

회사 업무 중 실제 구현이 필요했던 요구사항은 아래 네이버캘린더의 기능처럼 하단 View영역을 제스쳐로 드래그해 올려, 내용을 크게 볼 수 있는 Drawer View 형태 였다.

처음에는 간단한 라이브러리로 구현 할 수 있을꺼라고 쉽게 생각하여, 오픈 라이브러리를 사용해보았다.

아래는 사용해본 라이브러리 순서대로 느낀점을 적어보았다.

- react-native-draggable-drawer

좋았다. 원하는 UX를 구현 할 수 있었고, 사용방법도 쉬웠다. 하지만 마지막 업데이트와 배포일이 8년전인 것과 안드로이드에서의 화면때문에 조금 선택하기 망설여졌다. 👊

각종 Drawer 네이게이션 라이브러리들을 사용해보았다.

... 하지만 대부분 Drawer는 View가 보이지 않는 영역에 있다가 특정 버튼이나 제스쳐를 통해 보이는 기능만 지원을 했고, 우리 앱의 요구사항에는 맞지 않아 보였다.

💦 오픈 소스 라이브러리 10개 정도 모두 설치해서 프로토타입을 만들어 보았지만, 뭔가 3% 부족해 보였고 네이버 캘린더처럼 똑같이 만들고 싶다는 욕심도 있었기 때문에 선택이 그 3% 포기하고 라이브러리를 선택하는건 쉽지 않았다.

💡 많은 서칭을 하던중 모든 Drawer 라이브러리들이 아래와 같은 의존성 패키지를 설치해야지만 사용이 가능하다는 것을 알게 되었다!!

react-native-reanimated && react-native-gesture-handler

Reanimated란?

Reanimated는 부드러운 애니메이션을 구현하기 위해서는 초당 60프레임의 화면전환이 필요하다. 그리고 이를 위해서는 16밀리초 내에 프레임이 렌더링되어야 한다고 한다. 리액트 네이티브에서 기본적으로 제공되는 gesture와 Animated API를 사용하면 애니메이션의 계산을 UI Thread와 JS Thread의 커뮤니케이션에 의존해야 합니다. 그리고 두 쓰레드 간의 통신은 비동기로 이루어지기 때문에 Response가 16 밀리초 이내에 오는 것을 보장할 수 없다. 특히 모바일의 성능이 떨어지는 경우에는 시간이 더 지연될 수도 있다.

(아래 사진 참조) Thread 간의 통신은 Bridge를 통해 비동기적으로 메시지를 주고 받습니다

그렇게 직접 Reanimated를 사용해 만들어보기로 결정했다. 직접 만들면 유지보수나, 추후 확장성 측면에서도 유리 할 것이라고 생각했고, 분명 추가적인 고도화를 거치면서 추가적인 요구사항이 있을 것이라고 생각했다. (가보자고~)

1. 애니매이션 값 만들기

컴포넌트의 움직임은 translate 값에 의존하게 됩니다. useSharedValue 를 통해 선언해줍니다. 이 값은 이벤트 함수 내부에서 이벤트의 값에 따라 계속 업데이트 되며 style 값에 바인딩 되어 업데이트된 값이 실제 style props에 반영될 수 있도록 합니다.

const animation = useSharedValue(200); // Default height when closed

2. 이벤트 함수 만들기

이벤트가 일어나면 수행될 이벤트 함수를 만들어줍니다. reanimated에서 import한useAnimatedGestureHandler 를 사용합니다. 제네릭으로 필요한 타입을 주입해줄 수 있습니다. onStart는 제스처가 시작될 때, onActive 는 제스처가 진행되는 동안, onEnd 는 제스처가 종료되었을 때 호출됩니다. 각 프로퍼티에 할당된 콜백은 모두 event 객체와 context 객체를 받아올 수 있습니다.

ps. 예민하게 반응해서 좌표 계산과 세팅하는데 어려움이 좀 있었습니다. 솔직히 아직 정확히 이해하고 사용한다고 보기는 힘든 상황인거 같음. 느낌정도만..

    const onGestureEvent = useAnimatedGestureHandler({
        onStart: (_, ctx) => {
            ctx.startHeight = animation.value;
        },
        onActive: (event, ctx) => {
            let newHeight = ctx.startHeight - event.translationY;
            if (newHeight > maxHeight) {
                newHeight = maxHeight;
            }
            if (newHeight < minHeight) {
                newHeight = minHeight;
            }
            animation.value = newHeight;
        },
        onEnd: (event) => {
            if (event.translationY < gestureHeight || animation.value > screenHeight - openGestureY) {
                animation.value = withTiming(maxHeight, { duration: 300 });
                runOnJS(setOpen)(true);
            } else {
                runOnJS(setOpen)(false);
                if (animation.value !== maxHeight && animation.value !== openGestureY) {
                    animation.value = withTiming(minHeight, { duration: 300 });
                }
            }
        },
    });

3. 애니메이션 스타일

reanimated 에서는 useAnimatedStyle 이라는 훅을 통해 애니메이션 스타일을 관리합니다. 이 훅을 통해 sharedValue 와 View properties 간의 관계가 만들어집니다. 훅을 통해 만들어진 animStyle 은 매번 sharedValue 값이 업데이트 될 때마다 업데이트됩니다. 만약 특정 조건에서 업데이트 되도록 하고 싶다면 useEffect 와 유사하게 두번째 인자로 [dependencies] 를 추가해줄 수도 있습니다. 이 훅을 통해 만들어진 값은 반드시 Reanimated 에서 import 한 Animated 컴포넌트의 style 프로퍼티에 할당해주어야 합니다.

   const boxStyle = useAnimatedStyle(() => {
        return {
            height: animation.value,
        };
    });

4. 애니메이션 값 할당

    return (
        <>
            <View style={{ flex: 1}}>
                <Calendar
                    onDayPress={day => {
                        setSelected(day.dateString);
                    }}
                    markedDates={{
                        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
                    }}
                />
            </View>
            <View style={{ position: 'absolute', zIndex: 99, bottom: 0, backgroundColor: 'white' ,borderTopWidth:1,borderColor:'#C9C9C9'}}>
                <PanGestureHandler onGestureEvent={onGestureEvent}>
                    <Animated.View style={[boxStyle, styles.mySummaryModal, { width: screenWidth}]}>
                        <View style = {{padding:12,alignItems:'center'}}>
                            <View style = {{width:50,height:5,backgroundColor:'#C9C9C9',borderRadius:8}}>

                            </View>
                        </View>
                        <View style={{ padding: 20 }}>
                            <Text></Text>
                        </View>
                    </Animated.View>
                </PanGestureHandler>
            </View>
        </>
    );
};

👏 완성된 화면과 전체 소스코드!

아래는 완성된 코드 입니다. 일부 Gesture 좌표 같은 부분은 다듬을 필요가 있겠지만 요구사항대로 잘 만들어진거 같네요 🔥

const MyCalendar = () => {
    const [selected, setSelected] = useState('');

    const screenHeight = Dimensions.get('screen').height;
    const screenWidth = Dimensions.get('screen').width;
    const [open, setOpen] = useState(false);
    //플러스 버튼 클릭시 열리는 백그라운드 뷰
    const animation = useSharedValue(200); // Default height when closed
    const openGestureY = 200;
    const minHeight = 400; // Set the maximum height the view can expand to
    const maxHeight = 700; // Set the maximum height the view can expand to
    const gestureHeight = -100; //얼만큼 손을 올려야지 올라갈건지


    useEffect(() => {
        if (open) {
            animation.value = withSpring(maxHeight, { damping: 100 });
        } else {
            animation.value = withSpring(minHeight, { damping: 100});
        }
    }, [open]);

    const onGestureEvent = useAnimatedGestureHandler({
        onStart: (_, ctx) => {
            ctx.startHeight = animation.value;
        },
        onActive: (event, ctx) => {
            let newHeight = ctx.startHeight - event.translationY;
            if (newHeight > maxHeight) {
                newHeight = maxHeight;
            }
            if (newHeight < minHeight) {
                newHeight = minHeight;
            }
            animation.value = newHeight;
        },
        onEnd: (event) => {
            if (event.translationY < gestureHeight || animation.value > screenHeight - openGestureY) {
                animation.value = withTiming(maxHeight, { duration: 300 });
                runOnJS(setOpen)(true);
            } else {
                runOnJS(setOpen)(false);
                if (animation.value !== maxHeight && animation.value !== openGestureY) {
                    animation.value = withTiming(minHeight, { duration: 300 });
                }
            }
        },
    });

    const boxStyle = useAnimatedStyle(() => {
        return {
            height: animation.value,
        };
    });



    return (
        <>
            <View style={{ flex: 1}}>
                <Calendar
                    onDayPress={day => {
                        setSelected(day.dateString);
                    }}
                    markedDates={{
                        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
                    }}
                />
            </View>
            <View style={{ position: 'absolute', zIndex: 99, bottom: 0, backgroundColor: 'white' ,borderTopWidth:1,borderColor:'#C9C9C9'}}>
                <PanGestureHandler onGestureEvent={onGestureEvent}>
                    <Animated.View style={[boxStyle, styles.mySummaryModal, { width: screenWidth}]}>
                        <View style = {{padding:12,alignItems:'center'}}>
                            <View style = {{width:50,height:5,backgroundColor:'#C9C9C9',borderRadius:8}}>

                            </View>
                        </View>
                        <View style={{ padding: 20 }}>
                            <Text></Text>
                        </View>
                    </Animated.View>
                </PanGestureHandler>
            </View>
        </>
    );
};

참고 사이트

https://github.com/software-mansion/react-native-reanimated https://docs.swmansion.com/react-native-reanimated/ https://medium.com/crossplatformkorea/%EC%9B%90%EB%A6%AC%EC%99%80-%EC%98%88%EC%A0%9C%EB%A5%BC-%ED%86%B5%ED%95%B4-react-native-reanimated-v2-%EC%9E%85%EB%AC%B8%ED%95%98%EA%B8%B0-336e832f6ed6

AWS Amazon Linux2 t2-micro MariaDB 10.x Java jdk 11 Spring Boot 2.7.6 Gradle

📓 Git Install & Repository Clone

#깃 설치
yum install git 

#깃 버전 확인
git --version

📀 MariaDB 설치 및 세팅

yum install mariadb-server #MariaDB 설치

systemctl start mariadb #시작
systemctl status mariadb #상태 확인

설치된 데이터베이스 비밀번호 세팅

mysql -u root -p

설치 후 첫 접속시 비밀번호는 없는 상태라 enter 입력시 접근이 된다.

MariaDB [mysql]> update user set password=password('새로운 비밀번호') where user='root';
MariaDB [mysql]> flush privileges;
MariaDB [mysql]> select host, user, password from user;

비밀번호 세팅이 완료되었다.

🔥 JDK 설치와 환경변수 (해당 절차가 중요함!!)

1.자바 설치 is this ok가 나오면 y를 입력해서 설치 진행

yum install java-1.8.0-openjdk
java -version #java 버전 확인

2.javac 설치

yum install java-1.8.0-openjdk-devel.x86_64
javac -version #버전 확인

3.환경변수 설정 which를 통해 java의 경로를 가져온다.

which java
ouput => /usr/bin/java

readlink -f /usr/bin/java
output => /usr/lib/jvm/java-1.8.0-openjdk

4./etc/profile 파일 편집

vi /etc/profile

5.환경변수 입력 shift + g를 입력하여 마지막 라인으로 이동해서 아래 환경변수 입력하고 저장

export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk
export PATH=$PATH:$JAVA_HOME/bin
export CLASSPATH=$JAVA_HOME/jre/lib:$JAVA_HOME/lib/tools.jar

6. 환경변수 확인

   echo $JAVA_HOME
   output => /usr/lib/jvm/java-1.8.0-openjdk

   👊 프로젝트 세팅하고 빌드하기

   프로젝트 빌드를 위해서는 서버 메모리가 확보가 되어있어야 하는것 같다. 0.5GB 서버로 빌드했는데.. 계속 빌드 FAILED 되서 로그 까보니 빌드중 메모리부족으로 인한 실패였다...

1.application.properties를 세팅된 데이터베이스 정보로 만들어준다.

2.jar 파일 빌드

./gradlew build

3.libs 폴더에 있는 jar 파일 실행

nohup java -jar [파일명].jar 2>&1 &

java -jar은 .jar를 실행시키는 명령어 입니다. 하지만 이렇게 .jar를 수행시키면 터미널 접속이 끊길 때 애플리케이션도 함께 종료됩니다. nohup(no hang up) 명령어를 사용하면 세션 연결이 끊겨도 애플리케이션을 계속 수행시킵니다. 2>&1은 표준 에러와 표준 출력을 한 곳에서 로그를 남긴다는 의미입니다. nohup 사용시 기본적으로 nohup.out에 로그가 쌓이게 됩니다. 하지만 표준 출력과 표준 에러를 각기 다른 파일에 남기고 싶다면 1>[파일명] 2>[파일명]으로 두 출력을 구분하여 남길 수 있습니다. 이때 1은 표준 출력, 2는 표준 에러를 의미합니다. 즉 2>&1은 표준 에러를 표준 출력과 같은 곳에 남긴다는 의미가 됩니다.

• 실행중인 nohup 프로세스 종료 방법

  ps -ef #실행중인 프로세스 확인
  kill -9 [pid] #프로세스 종료

POSTMAN을 날려보자

SHELL 파일로 간편하게 배포하기

작성중.

참고 레퍼런스

mariaDB 세팅: https://ilimes.github.io/mariadb/post28 ec2서버에 마리아디비 설치 https://realsalmon.tistory.com/4 aws ec2 깃설치하기 https://chucoding.tistory.com/23 [SpringBoot] 게시판 (5) - AWS EC2에 배포하기 (feat. AWS RDS)🐵 https://victorydntmd.tistory.com/338 mariadb 실행 및 비밀번호 설정 https://realsalmon.tistory.com/4 gradle spring boot 배포하기 https://velog.io/@shawnhansh/AWS-EC2%EC%97%90-SpringBoot-gradle-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8jar-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

메인 카테고리와 서브카테고리를 조인 한다 조건은 main_category_id와 sub_category_id 같은것 끼리

SELECT * FROM main_category LEFT JOIN sub_category ON main_category.main_category_id = sub_category.main_category_id;

테이블 JOIN 시 원하는 컬럼만 보기

메인 카테고리와 서브카테고리를 조인 한다 조건은 main_category_id와 sub_category_id 같은것 끼리

SELECT main_category.main_category_id,main_category.name,sub_category.sub_category_id,sub_category.name FROM main_category LEFT JOIN sub_category ON main_category.main_category_id = sub_category.main_category_id

테이블 JOIN 후 컬럼이름을 바꿔서 출력

컬럼 이름 오른쪽에서 AS {컬럼이름} 을 통해 변경해서 출력한다.

SELECT main_category.main_category_id,main_category.name AS mainCategoryName ,sub_category.sub_category_id,sub_category.name As subCategoryName FROM main_category LEFT JOIN sub_category ON main_category.main_category_id = sub_category.main_category_id

JPA에서 테이블끼리 관계 지정

MainCategory 와 SubCategory는 OneToMany 1:N 관계의 테이블이다.

    @ManyToOne
    @JoinColumn(name = "main_category_ID")
    private MainCategory mainCategory;

SubCategoryTable의 main_category_ID는 MainCategoryTable의 ID(pk)와 관계되어있으므로 위와 같이 어노테이션을 지정해준다.

    @Override
    public List<SubCategoryResponseDTO> getAllSubCategory(long mainCategoryId) {
        List<SubCategoryResponseDTO> result = new ArrayList<>();

        List<SubCategory> categories = subCategoryRepository.findByMainCategoryId(mainCategoryId);

        for (SubCategory v : categories) {
            SubCategoryResponseDTO dto = new SubCategoryResponseDTO();
            result.add(dto.fromEntity(v));
        }
        if (result.isEmpty()) {
            throw new IllegalStateException("Empty");
        } else {
            return result;
        }
    }

path 로 받은 mainCategoryId를 찾아서 반환을 하면

input = [int(input()) for _ in range(9)]

result = 0;

for a in input:
    result = result + a;

flag = False

for b in range(0,9):
        for c in range(0,9):
            if c != b:
                if result - (input[b] + input[c]) == 100:
                    a1 = input[b]
                    a2 = input[c]
                    input.remove(a1)
                    input.remove(a2)
                    flag = True;
                    break;
        if flag == True:
            break;

input = sorted(input);
for d in input:
    print(d)

개선된 코드

import itertools
input = [int(input()) for _ in range(9)]


for i in itertools.combinations(input,7):
    if(sum(i) == 100):
        for num in sorted(i):
            print(num)
        break;

itertools.combinations 는 순열을 구할 수 있음.

순열이란 서로다른 N개에서 r개를 선택할때 순서를 고려하여 중복없이 뽑을 수 있음. 리스트 [1,3,5,6]

[(1,3)(1,5)(1,6),(3,5),(3,6)...]

DTO 란 무엇인가?

DTO란 Data Transfer Object의 약자로, 계층 간 데이터 전송을 위해 도메인 모델 대신 사용되는 객체이다. 이때, 계층이란 Presentation(View, Controller), Business(Service), Persistence(DAO, Repository) 등을 의미한다.

DTO 왜 써야되는건데?

아래는 현재 스프링에 입문 2주차 토이프로젝트 코드이다.

Entity

@Data
@Entity
public class BoardVo {

    @Id
    @GeneratedValue
    private int id;
    private int categoryId;
    private String title;
    private String content;
    private boolean approval;
    private String creator;
    private LocalDateTime regDt;
}

Service

@Override
public ResponseEntity<List<BoardVo>> getCategoryPostList(int categoryId) {
        try {
            return new ResponseEntity<>(boardRepository.findByCategoryIdAndApproval(categoryId,true), HttpStatus.OK);
        } catch (RuntimeException e) {
            return ResponseEntity.internalServerError().build();
        } catch (Exception e) {
            return ResponseEntity.internalServerError().build();
        }
    }
}

현재 작성된 Board에서 작성된 카테고리와 게시글정보를 불러오는 메서드이다.

이렇게 사용하면서 사실 클라이언트쪽에서 기능동작에는 아무 문제가 없었기 때문에 'DTO를 왜쓰는거지 그냥 이대로 리턴해주면 편하고 좋은데?' 라는 생각을 가지고 있었다.

그래서 DTO에 대해서 좀 공부를 하기 시작했다.

'맞다' 사실 도메인 객체를 지금처럼 View로 그대로 전달해도 된다. 하지만 메인 객체를 View에 직접 전달할 경우 도메인의 비즈니스 기능이 노출될 수 있으며 Model과 View 사이에 의존성이 생긴다고한다.

그놈의 의존성.. 작은 프로젝트에서 감이 잘안온다..

뷰와의 의존성 문제 예를 들어 프론트엔드에서 백엔드쪽으로 받고자하는 데이터는 자주 바뀐다. 이때 Entity 정보를 모두 넘기고있었다면 상당히 귀찮은 요소가 될 수 있다.

비즈니스 기능의 노출 메인 객체를 View에 직접 전달할 경우 도메인의 비즈니스 기능이 노출될 수 있는 부분에서 깊은 영감을 깨달았다.

만약 위에서 내코드가 Board 객체가 아닌 User 객체 였다면? Entity에 있는 사용자 모든정보가 반환된다.(password 까지) 모든 정보를 반환을 원하지않다면 비즈니스 로직에 해당 정보들을 제거한 하는 로직을 거친 후 반환해야하는데 DTO 만들어놓으면 그냥 맵핑시켜서 넘기면된다.

도메인 Model을 캡슐화하고, UI 화면에서 사용하는 데이터만 선택적으로 보낼 수 있다.

정답이 있는건 아니지만 상황에 따라 DTO를 사용해 변환 해서 쓰고 필요한 방법을 선택해서 사용하는게 맞는거같다.

Resonpnse의 대한 DTO 뿐만 아닌 Request요청의 대한 DTO도 만들어서 쓰시는분들이 있는거같다.

[실습] 그럼 DTO 를 만들어보자

Controller

    @GetMapping("/api/v1/board")
    //@RequestParam(value = "category",required = false, defaultValue = "0") category가 없어도 들어오게
    public ResponseEntity<List<BoardResponseDto>> getCategoryPostInfo(
            @RequestParam(value = "category", required = false , defaultValue = "0") int categoryId,
            @RequestParam(value = "postId", required = false, defaultValue = "0") int postId) {
        /**
         * case 1 : 카테고리와 게시글번호가 둘다 없는 경우 요청자체가 잘못됨.
         * case 2 : 카테고리 아이디만 요청했을 경우 -> 해당 카테고리 모든 게시글 정보 반환
         * case 3 : 카테고리 아이디와 게시글 아이디를 요청했을 경우 -> 해당 카테고리에 있는 게시글 정보만 반환
         */

        if (categoryId == 0) { //카테고리와 게시글번호가 둘다 없는 경우
            System.out.println("category prams required");
        } else if(categoryId != 0 && postId == 0) { //카테고리 아이디만 왔을 경우 해당 카테고리 모든 게시글 정보 반환
            return boardService.getCategoryPostList(categoryId); //getByAll -> List<Board>
        } else if(categoryId != 0 && postId != 0) {
            return boardService.getPost(postId); //getById -> Optinal<Board>
        }
        return null;
    }

Serivce

    @Override
    public ResponseEntity<List<BoardResponseDto>> getPost(int id) {
        List<BoardResponseDto> boardList = new ArrayList<BoardResponseDto>();
        BoardVo board = boardRepository.findById(id).get();
        boardList.add(new BoardResponseDto(board));
        return new ResponseEntity<>(boardList, HttpStatus.OK);
    }

    @Override
    public ResponseEntity<List<BoardResponseDto>> getCategoryPostList(int categoryId) {
        try {
            return new ResponseEntity<>(boardRepository.findByCategoryIdAndApproval(categoryId,true), HttpStatus.OK);
        } catch (RuntimeException e) {
            return ResponseEntity.internalServerError().build();
        } catch (Exception e) {
            return ResponseEntity.internalServerError().build();
        }
    }

현재 View에서는 단건 객체라도 리스트 안에 넣어서 넘겨주는 구조이기 때문에 find해온 borad entity객체를 boardList 라는 빈 List 안에 넣어준다. 이때 DTO 생성자를 호출해서 DTO로 맵핑 시켜서 리스트에 넣고 리턴 시킨다

        BoardVo board = boardRepository.findById(id).get();
        boardList.add(new BoardResponseDto(board));

*결과는 ? *

아주 이뿌게 잘 온다.

실제 앱 화면에서도 한번 보자

다음은 View에서 사용할 Response 공통 DTO를 한번 만들어보는걸로 복습해야겠다!

1. MariaDB 설치

homebrew로 mariaDB 설치

$brew install mariadb

mariaDB service 시작

$brew services start mariadb

mariaDB service 정지

$brew services stop mariadb

mariaDB service 상태 확인

$brew services list

2. MariaDB Password Setting

mariaDB root 계정으로 접속

$ mysql -u root -p

아래 명령어로 Password를 설정합니다.

MariaDB [mysql]> set password for root@'localhost' = PASSWORD('root');
Query OK, 0 rows affected (0.008 sec)

다시 mariaDB 루트 계정으로 접속을 시도하고 설정한 비밀번호를 입력해봅니다.

 mysql -uroot -p  

여기까지 진행됐다면 성공인듯 하다..

3. 데이터베이스를 생성해보자.

현재 데이터베이스 조회

MariaDB [(none)]> show databases;

사용할 테스트 데이터베이스 생성

MariaDB [(none)]> create database springDB;
Query OK, 1 row affected (0.001 sec)

3. 데이터베이스 관리툴 세팅

예전에 사용하던 HeidiSQL을 사용하려고하니, Mac 에서는 SequelPro 라는 관리툴을 많이 사용한다해서 설치해보았다.

download : https://www.sequelpro.com/

4. Spring 의존성 세팅

위치 : pom.xml 추가 해야할 것 mybatis : mybatis 라이브러리 mybatis-spring : mybatis와 spring 연동 spirng-tx: spring에서 database 처리와 transaction 처리 라이브러리 spring-jdbc: spring에서 database 처리 라이브러리 spring-test dpcp : jdbc의 Datasource 사용을 위해 spring-web : listener 추가를 위해 spring-webmvc :

참고 레퍼런스 https://velog.io/@0_sujeong/spring-mybatis-mariaDB-%EC%84%B8%ED%8C%85

https://linked2ev.github.io/database/2021/04/15/MariaDB-3.-MariaDB-%EC%84%A4%EC%B9%98-for-Mac/

Spring을 한번도 다뤄보지 않은 채로 환경설정을 한 것이라 정상적인 절차가 아닐 수도 있습니다. 아래 버전 및 세팅 환경을 작성하였으니 참고해주세요. :)

세팅 환경

• IntelliJ 2021.3.3
• Java 1.8
• m1 chip
• apache-tomcat-8.5.84

1. Java 환경 변수 https://youngwonhan-family.tistory.com/entry/MacOS-JAVAHOME-%ED%8C%A8%EC%8A%A4-%EC%B6%94%EA%B0%80-zsh-bash-%EA%B5%AC%EB%B6%84
2. tomcat 다운로드 (8버전이 안정적일거같음..) https://tomcat.apache.org/tomcat-8.5-doc/index.html

New Project 생성

• New Project 생성창에서 Java Enterprise를 선택하고 프로젝트 명을 세팅해준다.
• Project Template은 Web application 을 선택한다.
• Application server "New.." 버튼을 클릭해서 다운 받아 압축을 푼 tomcat 폴더를 지정해준다.
• 최하단 Project SDK 자바 버전을 설정해준다 !

Servlet 이 기본체크 되어있는지 확인하고 Finish

Tomcat 세팅하기

• 우측 상단 Run/Debug Configurations 팝업창을 켜준다
• 팝업창 왼쪽 상단 + 버튼을 클릭해서 Tomcat Server -> Local을 클릭한다.

• Tomcat Name 설정 후 Application server 에서 Browser를 클릭해서 압축을 풀어놓은 tomcat 폴더를 매핑 해준다.
  • 자동으로 되어있다면 안해줘도 되는거 같다.
• Fix 버튼 클릭 후 OK 클릭 후 저장하고 run 버튼 클릭

브라우저가 잘뜬다면 여기까지는 오케이다.

Spring Framework 세팅하기

• 프로젝트 폴더를 우클릭 해서 'Add Framework Support...'를 클릭한다.
• Spring 메뉴 안에 'Spring MVC(..)'를 체크하고 Ok를 눌러준다.
  • 초반에 Spring 프레임워크 자체가 안떠서 고생했는데 ultimate 2021.3.3 버전을 다시 설치하니 생겨있었다...
• Ok 를 클릭하고 세팅이 완료되었다면 왼쪽 탐색기에 src 디렉토리가 생겼다면 문제없이 완료된거다.

pom.xml 에 해당 dependency 추가

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>5.3.16</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.16</version>
</dependency>

• load maven project 눌러서 빨간 표시 제거

webapp 폴더 WEB-INF web.xml 파일을 수정해준다.

        <url-pattern>/</url-pattern>

library 세팅?

-오른쪽에 있는 Abailable Elements 들에 있는 Spring 라이브러리들을 왼쪽으로 옮겨주고 OK

Controlloer 생성

• src/main/java/controller 폴더를 생성하고 HomeController 클래스를 생성한다.

-해당 코드를 클래스에 넣어준다.

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {
    @RequestMapping("/")
    public String index(Model model) {
        return "index";
    }
}

-webapp / WEB-INF/dispacher-servelet.xml 파일을 열고 아래 코드를 넣어준다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

    <context:component-scan base-package="controller" />
</beans>

Run/Debug Configurations Server탭 URL과 Deployment 탭 하단의 Application context를 '/'로 바꿔줘야한다.

그리고 우측 상단에 RUN 버튼을 클릭해서 잘돌아가는지 확인해보자.

./mvnw package 

를 실행하니 아래와 같은 에러가 발생했다.

zsh: permission denied: ./mvnw

permission denied 많이 보던 녀석이다. 권한 문제인듯 하다. 단순하게 해당 파일에 쓰기 권한을 부여해보았다.

//권한 부여
1. chmod -x {filename} 
2. chmod 757 {filename}

둘중에 하나를 사용하면된다.

권한을 부여를 하니.. 아래와 같은 이슈가 또 발생했다.

zsh: ./mvnw: bad interpreter: /bin/sh^M: no such file or directory

대충 읽어보니 mvnw 안에 뭔가 있어서는 안될 나쁜것 들이 적혀있다는것 같은데... 구글링을 해보니 아마 해당 프로젝트를 빌드해서 배포한 사람의 환경이 윈도우 인듯 하다.

파일 내용중 라인끝에 있는 개행문자(?)가 달라서 발생하는 문제이다. vi 로 라인끝에 개행문자가 있는지 확인해보자.

아무리 찾아도 없다. 도대체 끝에 뭘 지우라는건가?

아래 명령어로 다시 파일을 열어보자

vi -b {filename}

우리 눈에 보이지 않던 문제를 일으키던 ^M 이 우리 눈에 나타났다. 이제 해당 문자들을 지워야하는데 한번에 지워 버릴 수 있는 명령어를 입력해보자.

vi -b {} 명령어로 해당 파일을 켜둔상태로 명령어를 입력해준다.

:%s/^M 
이때 중요한건 ^M 은 ctrl+v+m 을 쳐서 나오는 파란색 글씨로 보여야한다.
키보드로 하나하나 치는거 아닙니다.

:wq //저장![]

이렇게 하면 해당 파일이 잘 실행된다.

참고 블로그 https://jolly-sally.tistory.com/31 https://www.slipp.net/questions/468

https://positiveko-til.vercel.app/til/react-native/error65.html#_1-xcode%E1%84%8B%E1%85%A6%E1%84%89%E1%85%A5-derived-data-%E1%84%89%E1%85%A1%E1%86%A8%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5