기존에 알림을 보내는 로직을 작업하면서, 요청이 들어왔을 때 해당 요청을 보낸 디바이스가 누군지 알아야 하는 이슈가 있었다. 그래서 이를 알기 위해서 request.auth의 속성 값으로 device_token 인자를 추가해주는 작업을 했었다.
여기서 오류가 생겼다. 정확히는 테스트할 때 나는 오류였다.
현재는 해당되는 뷰(동기화용 알람이 필요한 뷰)의 맨 끝에다가 FCM 알림을 보내는 메소드 코드를 추가한 방식으로 구현했다. 그런데 이렇게 하면 테스트할 때도 해당 FCM 알림 로직을 지나게 된다.
여기서 두 가지의 이슈가 생긴다.
특정 뷰가 동작하는 것을 테스트할 때 FCM 알림이 보내지는 것까지 테스트하는 것은 불필요하다.
테스트할 때 들어오는 request에는 별도로 fcm 디바이스 토큰을 넣어주지 않기 때문에 request.auth에 device token의 값이 없다. 그러므로 FCM 알림을 보내는 로직이 fail하게 된다.
즉 뷰의 로직과 FCM 알림 로직을 분리해야 한다는 결론에 도달한다. 우회하는 방법도 있긴 하다. 가령 테스트할 때는 특정 파라미터의 값을 True로 바꿔 준 다음에, 해당 파라미터 값이 True이면 해당 알림 로직을 패스하는 방식으로 짤 수도 있다. 그러나 이는 일반적인 요청값 외에 추가로 파라미터를 넣어 줘야 하고, 결국 그 값 하나로 FCM 로직을 핸들링하는 것이기 때문에 적합하지 않다고 보았다.
알고보니 pytest의 여러 기능 중에는 테스트하는 뷰 안의 특정 메소드가 호출되지 않도록 하는 기능도 있었다. 해당 기능을 사용해서 테스트 상황에서는 FCM 알림 관련 메소드를 호출하지 않도록 해 주면 되겠다.
1. django mixins에 대해 궁금증이 생겼다. 발단은 팀원들과 React의 Compound Component 패턴에 대해서 얘기하면서부터였다. 가령 나는 이런 코드를 본 적이 있다.
from rest_framework.mixins import ListModelMixin, CreateModelMixin
from rest_framework.generics import GenericAPIView
class ListCreateAPIView(GenericAPIView, ListModelMixin, CreateModelMixin):
pass
여기서 GenericAPIView와 ListModelMixin, CreateModelMixin을 상속받아 APIView의 역할을 하면서도 ListView와 CreateView의 역할을 하는 View를 만들 수 있다고는 알고 있었다. 그런데 막상 Mixins가 구체적으로 왜, 어떻게 상속을 통해 GenericAPIView와 같이 동작할 수 있는지에 대해서는 구체적으로 생각하지 않은 것 같다. 다음에 이 부분에 대해서도 포스팅을 해봐야겠다.
그런데 문제가 하나 있었다. 바로 달력(WeeklyCalendar)에 나타나는 기본 한글은 바뀌지 않는다는 점이었다. 예를 들면 지금은 '2024년 10월'이라고 나와 있는데, 영어 버전에서는 'October 2024'로 나와야 맞겠다. 이 부분은 아래와 같이 함수를 작성해서 구현하였다.
const convertMonthAndYear = date => {
if (i18n.language === 'ko') {
return date.format('yyyy년 MM월');
} else if (i18n.language === 'en') {
const month = date.toString().split(' ')[1];
const year = date.toString().split(' ')[3];
return `${month} ${year}`;
}
};
잘 나온다. 그런데 요일은 그대로라서 요일도 바꿔주자. 요일은 현재 '월 화 수 목 금 토 일'로 나와 있는데, 이를 'Mon Tue Wed Thu Fri Sat Sun'으로 바꿔 주어야 하겠다.
처음에는 datetime format이니까 당연히 영어 요일로 바꾸는 뭔가가 있을 것이라고 생각했다. 그러나 글의 방법을 참고했는데도 잘 되지 않아서 찾아보는 데 시간이 걸릴 것 같았다. 그래서 아래와 같이 구현했다.
오늘은 전날과 전전날 토스 과제와 회고로 미뤄두었던 다국어 처리 지원을 더 해보려고 한다. 저번에 i18-react, i18n 공식 라이브러리는 찾았었는데 여기서 안드로이드 전용 설정을 해주지는 않았었다. 그 설정을 마저 하고 다시 앱을 실행시켜서 잘 나오는지를 봐야 하겠다. 처음부터 따라해 보자.
우선 npm을 이용해서 라이브러리를 설치해 준다.
npm install react-native-i18n --save
글에 cocoapods라는 프로그램(?)을 이용해서 설치하는 방법도 있었는데 이게 설치되어있지 않아서 굳이 해야하나 싶었다. 나는 그 밑의 방법을 사용했다.
그러다가 뭔가 이상한 점을 느꼈다. 분명 그때 봤던 블로그 글에서는 한 번에 다국어지원을 하고 있었는데 말이다. 다시 글을 순서대로 읽고 따라해 보았다.
요즘의 개발 일상이라 카테고리를 'SWM OneStep'으로 지정은 해 두었지만 살짝 거리가 있는 포스팅을 해 보려고 한다. 그렇다고 다른 데 넣기도 애매한 게, 오늘은 철저히 주관적으로 내가 아는 것들을 한번 슥 훑어볼 예정이기 때문이다. 이유는 바로 오늘 오후에 있을 토스 next 전형에 대해 django 지식을 조금이나마 정리하기 위해서이다. 코테를 갓 끝내고 정신이 비교적 맑을 때 어서 글을 작성해 보자. 참고로 모든 질문과 대답은 내 머릿속에서 나온 것이므로 정확한 질문과 정확한 정답은 없다. 하지만 이렇게 정리하기만 해도 내가 모르는 게 뭔지를 알 수 있어서 해 보려고 한다.
django란 무엇일까?
장고(django)는 웹 프레임워크(framework)이다. 프레임워크와 라이브러리의 차이점은 코드의 동작 방식의 제어 유무라고 알고 있다. 자바/스프링에서는 IoC(역전 제어, Inversion of Control)라는 말을 쓰는데, 기존의 코드나 라이브러리에서는 실행의 제어권을 개발자가 갖고 있었다면 프레임워크에서는 이 IoC를 통해 프레임워크가 실행의 제어권을 갖는다. 그렇다. 스프링 강의로 찍먹한 개념인데 스프링도 장고도 모두 프레임워크인 만큼 이 원칙은 둘 모두에게 적용된다고 볼 수 있다.
프레임워크를 왜 사용할까?
웹 프레임워크의 경우 웹 개발을 빠르고 편리하게 하기 위해서 사용한다고 알고 있다. 장고의 경우 MVC 패턴(model-view-controller)을 사용해서 웹 개발을 할 수 있는데, 이처럼 프레임워크는 개발자들이 여러 번의 웹 개발을 하면서 반복되는 디자인 패턴 등을 녹여놓았다고 볼 수 있다.
그렇다면 프레임워크를 사용하는 이유는 웹 개발을 하면서 반복되는 디자인 패턴 등을 더 편리하게 사용하기 위함인가? 정말 그게 다라면 꼭 프레임워크를 사용할 이유가 있을까?
이 질문을 스스로에게 던진 순간 공부를 더 해야겠다는 생각이 들었다. 나는 '웹 프레임워크'가 웹 개발을 편하게 해 주는 도구임은 어렴풋이 알고 있었지만, 프레임워크의 어떤 것들이 웹 개발을 편리하게 하고, 장고는 그 중에서 어떤 기능들을 제공하는지에 대해서 명확하게 알지 못하고 있었다.
바로 'why do we use framework'로 검색을 해 보았다. 한 사이트에서는 low-level functionality를 제공해서 반복적인 코드 작성을 줄여주는 것도 프레임워크의 역할이라고 하더라. 그랬더니 좋은 예시가 떠올랐다.
바로 서블릿이었다. 이것도 스프링에서 찍먹한 개념인데, 장고에서도 사용되는 것은 분명했다. 우리는 장고나 스프링에서 뷰나 컨트롤러를 만들 때 요청 객체를 request라는 변수로 바로 받아올 수 있다. 그런데 실제로 웹 서버로 요청이 오면 이는 HTTP 형식으로 온 메시지일 뿐이지 request 타입의 객체가 아니다. 이때 서블릿이 헤더를 파싱하는 등의 작업을 통해 HTTP 형식의 요청 메시지를 우리가 프로그래밍 언어로 다룰 수 있는 Request 타입의 객체로 변환해 준다. 만약 이 작업을 서블릿이 해 주지 않았다면, 매번 핵심 로직을 작성하기 전에 헤더를 파싱하는 등의 반복적인 코드를 계속 작성해야 했을 것이다.
스프링에서 서블릿이 위와 같은 역할을 한다면, 장고에서는 무엇이 그런 역할을 한다고 생각하나?
여기서도 막혔다. 'django servlet'이라고 검색해 보니 나와 같은 고민을 했던 오래된 글이 보였다. 답변자는 장고의 정리된 공식문서를 추천해 주고 있었다. 이 중에서 키워드를 통해서 http 요청이나 servlet과 관련된 것을 찾아봤더니, http 관련 문서가 도움이 될 것 같았다. 그런데 여기서 나오는 URLConf, Middleware, Writing Views는 모두 이미 변환된 request를 사용하는 기능들이었다. 나는 무엇이 http 요청을 request로 바꾸는지를 알고 싶었던 거였는데 말이다. 그래서 GPT 찬스를 써 보았다.
주의할 점은 이 녀석의 말을 100% 신뢰하기보다는, 여기서 관련된 키워드를 뽑아내는 것이다. 녀석은 Django WAS가 WSGI라는 (비동기 상황에서는 ASGI) 인터페이스를 통해 WS(web server)와 상호작용한다고 알려주었다. 여기까지는 알고 있던 내용이다. 여기서 WSGI는 위 문서에 나오지 않은 키워드였기에 여기에 집중했다.
녀석은 그렇다고 답변하고 공식 문서 링크도 남겨주었다. WSGI와 관련된 링크였다. 그런데 WSGI는 사실 인터페이스이므로 실제 구현 부분은 WSGI가 아니다. 그렇다면 장고에서 사용하는 WSGI의 구현체들은 어떤 것들이 있을지 궁금해졌다.
녀석은 Gunicorn, uWSGI와 같은 예시를 들어주었다. 여기서 내가 모르던 지식이 연결되었다. 나는 'gunicorn을 사용하면 WSGI로 통신을 할 수 있다' 까지만 이해하고 있었는데, gunicorn은 WSGI의 구현 서버(WAS)였던 것이다. 그리고 uWSGI는 C로 구현되어서 속도가 빠르다고 한다.
그래서 결론은 WSGI 표준을 구현한 서버들로는 Gunicorn, uWSGI, mod_wsgi 등 다양한 WAS가 있고, 이 WAS와 WS끼리는 WSGI 표준을 통해서 통신하는 것으로 이해했다. 그리고 여러 자료를 찾아보다 이런 유용한 포스트도 발견했다. Apache와 Nginx 모두 웹 서버라는 것은 알고 있었지만 둘의 차이점에 대해서는 크게 생각해보지 않았었다. Apache는 요청이 들어올 때마다 프로세스를 생성하는 방식이고, Nginx는 이벤트 기반의 아키텍처를 사용해서 클라이언트 요청이 폭발적으로 증가할 때 요청을 제대로 처리하지 못하는 문제를 해결했다고 한다.
여기서 워커(worker process) 개념이 나왔다. 한창 gunicorn, uvicorn으로 씨름할 때 나왔던 그 워커가 맞다. 이는 WAS에 있던 프로세스가 맞았다. 나중에 WAS의 구조도 그려보자.
아는 디자인 패턴이 있다면 설명해 봐라. 그리고 장고에서 사용하는 예시가 있다면 들어 봐라.
싱글톤 패턴에 대해서 알고 있다. 처음에는 스프링 컨테이너에서 빈을 기본적으로 싱글톤으로 관리한다는 것을 말하려고 했는데, 장고에서 사용하는 예시는 잘 모르겠었다... 라고 생각했는데, 생각해보니 MVC 패턴이 있었다! 장고에서는 MVT 패턴을 사용한다. 모델(Model)은 장고에서 다뤄지는 데이터이다. 뷰(View)는 모델을 통해 데이터를 처리하는 핵심, 비즈니스 로직이 담겨 있다. 마지막으로 템플릿(Template)은 장고의 템플릿 엔진과 템플릿 문법을 사용해서 화면을 그리는 역할을 한다.
MVC 패턴이 왜 유용한가? 왜 모델과 뷰를 분리시켜야 한다고 생각하나?
모델과 뷰를 분리시키지 않으면 로직이 복잡해지기 때문이다. 예를 들면 장고의 models.py에서는 DB에 저장되는 모델을 선언하고, 필요하다면 이와 관련된 메소드를 추가로 선언하는 작업을 한다. 반면 views.py에서는 직접적으로 쿼리셋을 다루지는 않고, 핵심 비즈니스 로직을 다룬다. 이렇게 분리시키지 않으면 로직이 복잡해진다고 생각한다.
Fat Models, Skinny View의 원칙이 항상 옳은 것은 아니지만 대개 개발할 때 지향하는 원칙이다. 이유는 뭐라고 생각하나?
뷰에는 핵심 비즈니스 로직이 들어가는 것이 일반적이다. skinny view를 지향하는 이유는 뷰에 핵심 로직만 남겨두기 위함이라고 생각한다. 만약 핵심 로직이 길면 그때는 또 다른 방법을 사용할 수 있겠지만, 적어도 핵심 로직과 관련되지 않은 모델 단의 데이터를 다루는 작업은 모델로 옮기는 것이 바람직하다는 의미라고 이해했다.
장고에는 Manager가 있다. 왜 Manager가 필요할까?
Manager를 사용해서 여러 메소드를 정의할 수도 있고, 프록시 모델을 만들 수도 있는 등 여러 기능이 있다고 알고 있다. 그리고 manager는 모델과 DB 사이에 있는 존재이다. 필요에 따라서 모델의 동작 방식을 바꿀 수도 있기 때문에(어떻게 바꾸는지는 모르겠다...) 필요하다고 생각했다.
장고에서 Queryset이 필요한 이유는 무엇일까?
장고 ORM이 필요한 이유와 같다. 쿼리셋이 있기에 장고에서 DB의 데이터를 조회할 때 장고의 문법으로 조회할 수 있다.
✅ 다음에 답해볼 질문들
적어봤는데 너무 많아서 이번에 다 셀프 문답을 못 했다... 아래의 질문들 및 추가 질문들을 더 꼬리질문으로 이어서 다음에 답해 봐야겠다.
이벤트 기반의 아키텍처(event-driven architecture)는 무엇일까?
아까 IoC 얘기로 돌아가 보자. 스프링에서는 스프링 빈과 컨테이너를 통해서 IoC를 한다. 즉 개발자가 코드의 제어권을 스프링 컨테이너에 넘기고, 스프링 컨테이너에서 스프링 빈을 관리하면서 IoC가 일어난다. 장고에서는 이를 어떻게 할까?
WSGI 표준을 구현한 WAS들 중 gunicorn의 특징이 뭔지 말해봐라.
WS와 WAS가 어떻게 통신해서 하나의 요청을 처리하는지 그 과정을 설명해 봐라.
✅ 궁금한 점
fat models skinny view를 지향하는 현업에서의 이유가 궁금하다. 왜 fat view는 안 괜찮고 fat models은 괜찮은 걸까?
model에서 manager가 필요한 이유를 정확히는 설명하지 못하겠다. 모델과 DB 사이의 매개 객체가 필요하다고는 생각하는데, 구체적으로 왜 그런 걸까?
어제 발생했던 이슈를 처리하고 이제 남은 다국어 처리를 마저 진행해보자. 어제 참고한 블로그와 비슷한 방식으로 .json 파일을 작성한 다음 react-i18next의 useTranslation 훅을 가져와서 사용했는데, 다음과 같은 에러가 났다.
i18next 인스턴스를 init한 다음에 사용되는 방법이 잘못된 것 같았다. 그래서 이번에는 /locales/index.js 파일에서 export한 i18n 객체를 import해서 위의 코드의 인자로 넣어주려고 했다. 즉 이전 코드가 다음과 같다면,
import { useTranslation } from 'react-i18next';
const Login = () => {
const { t } = useTranslation();
...
이 코드를 다음과 같이 바꿔주려고 했다.
import i18n from '@/locales/index';
import { useTranslation } from 'react-i18next';
const Login = () => {
const { t } = useTranslation(i18n);
...
그랬더니 이번엔 다른 에러가 났다.
npm install로 설치한 'react-native-localize' 라이브러리에서 오류가 나는 것으로 보였다. 그런데 공식문서를 참고해도 그냥 npm install을 하고 사용을 하면 된다고만 나와있어서, 에러가 어디서 났는지 갈피가 잡히지 않았다. 아니면 어제 마주한 것처럼 또 캐시 관련 오류인 걸까?
문득 여러 다국어 라이브러리들을 설치하고 사전 조치들을 안 해서 나는 에러인가 싶어서 react-native-i18n의 공식문서도 찾아보았다. 그랬더니 android/ios별로 추가적으로 실행해야 하는 작업이 있다고 나와있었다.
어제 있었던 이슈는 특수 상황이기도 했지만, 프론트 멘토님의 조언을 참고하면 두 가지의 해결 방안이 있는 것으로 보였다.
1. 프로덕션과 개발 DB를 같이 쓰기
2. 개발환경 앱 빌드와 프로덕션 앱 빌드 환경을 분리하기
사실 2번의 의미를 정확히는 이해하지 못했다. 빌드 환경을 분리한다는 것은 어떤 의미일까? 아예 다른 환경에서 앱이 실행되는 거라면, 그렇다면 개발 환경에서 사용되는 자원(AsyncStorage 등)과 프로덕션 환경에서의 자원이 분리되는 의미라고 이해했다.
이 경우 프로덕션 앱 빌드를 하다가 개발 앱 빌드를 하더라도 둘이 자원을 공유하지 않으니 기존 환경에서의 AsyncStorage에 기존 토큰이 남아있을 리 없다.
사실 1번의 방법도 가능은 하지만, 그래도 원칙상 DB를 서로 분리해두고 싶었다. 그래야 사용자 데이터와 개발하면서 쌓은 데이터를 서로 분리할 수 있을 것 같았다.
여튼 이 문제는 급한 문제가 아니기도 하면서, 여러 가지 해결 방법을 써볼 수 있을 것 같았다. 그래서 일단은 잠시 보류하고 원래 작업하던 사용자 문의 폼을 적용하는 이슈로 돌아와 보자.
첫 번째 문제는 '구글 폼'이라는 글자를 눌렀는데 구글 폼이 안 열리는 문제였다. 이 문제는 알고보니 RN의 Text 컴포넌트를 누르고 싶다면 onClick이 아니라 onPress 속성을 사용했어야 했다. 즉 속성명을 잘못 사용해서 발생한 문제였다.
잘 뜬다!
두 번째는 문의하기를 누르면 헤더에 'settingsContactView'라는 jsx 파일의 이름이 그대로 뜨는 문제였다. 이 부분은 tabs와 관련이 있을 것 같았다.
'expo router stack.screen' 이라고 검색했더니 나온 공식문서를 참고해봤다. 우리 프론트 프젝에서는 라우팅 라이브러리로 'expo-router'를 사용하기 때문이다.
암튼 그랬더니 <Stack.Screen /> 이라는 컴포넌트 안에 options 이라는 속성값으로 'title' 값을 지정해주면 된다고 나와있었다. expo-router에서는 Stack이라는 컴포넌트를 기준으로 앱에서 navigation을 진행한다. 구현되어 있는 걸 보진 않았지만, 실제 스택처럼 라우팅 기록을 저장하고 필요 시 취소(롤백)하는 식으로 사용하는 것 같았다.
아래와 같은 코드를 _layout.tsx 파일의 Stack 리스트 맨 밑의 원소로 추가해 주었다. 그랬더니 '문의' 화면으로 잘 바뀌었다.
'react native 다국어 지원' 이라고만 검색했는데 굉장히 많은 포스트들이 나왔다. 그중 한 개를 클릭해서 보니, 다국어 지원에는 두 가지의 라이브러리가 필요한 것으로 보였다.
첫 번째는 react-native-localize로, 현재 앱이 실행중인 국가의 코드를 얻어오는 라이브러리이다. 사용자의 현 위치에 따라서 자동으로 언어를 설정해 주려면 필요한 라이브러리이다. 두 번째는 i18next, i18next-react로 이것이 다국어 라이브러리라고 한다.
공식문서의 Getting Started 가이드와 심화 가이드를 보면서 진행해 보자. 우선 'npm install'을 통해 필요한 i18next, react-i18next 라이브러리를 설치하자.
그 다음으로는 앱의 루트 파일에(공식문서에서는 App이 위치한 파일) i18을 초기화하는 코드를 작성해 주어야 했다. 우리는 기본으로 App 파일이 아니라 조금 다른 라우팅 시스템을 사용해서 폴더 구조가 조금은 다른데, 어쨌든 _layout.jsx 파일이 App.js의 역할을 하는 것은 맞다. (위의 이슈에서 Stack.Screen 컴포넌트를 추가한 파일이다.)
해당 파일(_layout.jsx)에다가 다음과 같이 일단 예제 코드를 복붙해 주었다.
import i18n from 'i18next';
import { getLocales } from 'react-native-localize';
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
'Welcome to React': 'Welcome to React and react-i18next',
},
},
},
lng: getLocales()[0].languageCode,
fallbackLng: 'en',
interpolation: {
escapeValue: false,
},
});
그리고 'resources' 속성 안에는 언어별로 dictionary 형태로 어떤 언어를 사용할지에 대한 정보가 들어가게 되는데, 공식문서에서는 이를 별도의 json 파일로 뺄 것을 추천하고 있었다. 그렇게 해야 코드가 복잡해지지 않을 것 같았다. 'fallbackLng'는 모종의 이유로 다국어 전환이 실패했을 때 어떤 언어를 보여줄지를 의미하는 것 같았다.
그리고 react-native-localize에서 얻은 getLocales() 함수로 현재 접속한 위치에서 사용하는 기본 언어를 띄워서 lng(language) 파라미터 값으로 세팅해 준다.
그리고 다시 실행을 하려는데, 웬걸 본적 없는 에러가 났다. 버전 미스매치 에러인데, 문제는 나는 저 라이브러리를 최근에 손댄 적이 없었다. 아마 직접적인 원인보다는 다른 이유로 난 에러 같았다.
에러 페이지와 깃허브 이슈를 돌아다니며 여러 명령어들을 시도해 보았다. 깃허브 이슈를 참고한 결과 이 이슈는 라이브러리 자체의 의존성 문제보다는 캐시로 인해서 뭔가 데이터가 꼬였을 가능성이 있었다.
아래 명령어를 실행해 보고, 에뮬레이터에 있는 앱을 지웠다가 다시 빌드를 실행하니 그제서야 잘 되더라.
