나만의 무기 만들기
어젠 아침에 좀 하다가 서울 올라가서 푹 쉬고 왔다.
근데 어지간히 몰입했는지, 데이트 중인데도 자꾸 프로젝트 생각이 났다.
그래서 겸사겸사 스타벅스 카페가서도 1~2시간 하고 왔다..ㅎㅎ
왠지 일을 시작하고 나서도 이럴 것 같네 🧐 아이디어 떠오르는건 그때그때 실행시켜봐야지 직성이 풀린다.
socketio를 활용한 채팅 웹서버 추가
오늘 간단히 채팅 서버를 만들어서 일단 플러터에 연결해서 테스트를 해보았다.
다행히도 잘 된다.
export default client => {
client.on('join', data => {
client.join(data);
});
client.on('leave', data => {
client.leave(data);
});
client.on('message', data => {
client.to(data.chatroomID).emit('message', data);
});
client.on('disconnect', () => {
console.log('Disconnected...', client.id);
});
client.on('error', err => {
console.log('Error detected', client.id);
});
};그리고 리더님께 부탁해서 우리 서버에 옮겼다. 원랜 직접 옮겨볼까도 생각했는데, 아무래도 서버 관리는 쭉 리더님이 해오셨다보니 어떤 디렉토리들에 옮겨야할지 감이 잡히지 않았다. 그래서 서버로 옮기는거는 빠르게 부탁해서 해결했다 😄 대신 API와 DB 짜는 것에 집중하기로. DM 쪽은 내가 풀스택으로 FE, BE를 다 하는 것이기에 해야할 작업이 많다.
원래는 1명정도는 더 같이 하자고 하려했으나, 팀 전체적인 측면에서 봤을 때 비효율적일 것이라고 생각했다. 발표준비 관계로 리더님이 온전히 메세지 BE 작업을 할 수 없는 상황에서, DB 공부를 해보지 않은 팀원이 지금 붙기에는 너무 늦었다고 판단했기 때문이다. 그래서 혼자하면 힘에 부칠거 같긴 하였으나, 그만큼 내가 잠을 줄이고 해내기만 하면 다른 팀원들의 역량은 더 적절한 곳에 투입될 수 있을 것이니.... 물론 하나의 주요 기능을 A to Z 혼자 다 해보겠다는 욕심도 났고. 어려운 길을 선택했지만 해내보자. 아자아자
DM 양방향 소통 가능하도록(에뮬레이터)
지난 토요일에 발생한 문제를 간단히 해결했다.
열심히 구글링하던 중에 괜찮은 chat app 만들기 튜토리얼을 발견했는데,
setStateIfMounted(() { 새로 실행할 내용 });이런 코드가 있길래 해보니까 바로 해결되었다. 유저가 보낸 메세지를 서버에서 같은 socket romm에 속한 다른 사용자에게 emit을 해주면, 그 사용자의 Flutter 화면은 새로 '마운트'된다는 원리를 활용한 것 같다. 일단 급한 불은 껐는데....
글을 쓰면서 궁금해진다. 그럼 마운트가 무엇인가...
flutter-dart-what-is-mounted-for 라는 질문글에 달린 답변을 읽어보니, Mounting is the process of creating the state of a StatefulWidget and attaching it to a BuildContext. 라는 내용이 있다. 그리고 flutter 공식 문서에도 mounted property에 대한 내용이 있어 읽어보았는데, 1줄 요약하자면 어떤 state가 현재 트리 내에 원소로서 존재하고 있고, dispose가 불리지 않았음을 나타내는 지표인 것 같다. 따라서 mounted라는 bool 변수가 true라면, 그 state는 여전히 tree 내에 있기에 setState를 통해 업데이트가 가능하다. setState로 state 변수에 변화가 주면 플러터는 일련의 과정을 거쳐 변경이 필요한 부분만 바꿔주는 재렌더링을 거치게 되는 것이다. [Flutter] 이 코드.. 화면에 어떻게 그려질까? 렌더링 원리 - 1. 트리라는 글을 참고하며 공부했더니, 이전보다 좀 더 이해가 되었다.
명함첩 서치바 구현
원래 메세지 레이아웃에만 넣어놨던 서치바를 명함첩에도 구현해주었다.
아무래도 명함쪽은 관리하는 자료가 좀 더 많다보니 어떻게 구현할지가 좀 고민이었다. 걱정은 제쳐두고 일단 해보자는 마음으로 달려들었더니, 생각보다 너무나도 쉽게 구현을 완료했다. 결과적으로 같은 원리를 적용해줬는데, 보다시피 매우 빠르다.
프로필페이지 앱바 로직구현
그리고 프로필페이지의 AppBar에 대한 로직을 살짝 개선했다. 어차피 같은 레이아웃을 갖고 있기에 친구의 프로필페이지나 나의 프로필페이지를 하나의 dart 파일로 처리해주고 있다. 하지만 AppBar는 서로 다른 구성이 되도록 개선할 필요성이 있었다.
친구의 프로필은 명함첩에서 들어가기에, 뒤로가기 버튼이 필요하다. 물론 탭을 눌러서 움직일수도 있겠지만, 뒤로가기 버튼을 통해 직전에 보고있던 명함첩 화면을 보게할 필요가 있다.
하지만 내 프로필은 탭을 눌러서 접속하기에 뒤로가기 버튼이 필요없다. 대신 내 프로필은 수정할 수 있도록 하기위해 수정버튼이 필요하다.
appBar: AppBar(
title: Text(
'NeMo',
style: TextStyle(fontFamily: 'CherryBomb', fontSize: 30),
),
centerTitle: true,
automaticallyImplyLeading: _isMe? false : true,
actions: _isMe
? [
IconButton(
icon: Icon(Icons.logout),
tooltip: 'logout',
onPressed: () {
Navigator.pushNamed(context, '/login');
},
),
]
: [],
),따라서 필요에 따라 위와 같이 수정해서 필요한 버튼만 나타나도록 해주었다. Flutter에서는 AppBar에 automaticallyImplyLeading 이란 인자가 있는데, 이걸 true 로 설정하면 뒤로가기 버튼이 생기고 false로 하면 없어진다. 이걸 활용하기 위해 _isMe 라는 bool 자료형 변수를 활용해 쉽게 구현해주었다 !
알고리즘 스터디 - 휴식
이번 주 목요일에 프로젝트 발표가 있어서, 오늘은 알고리즘 스터디를 따로 하지 못했다.
아마 다들 정신없어서 월~목은 쉬게 될 것 같다. 진짜 크래프톤 가서 하는 최종발표처럼 준비하라고 하셔서, 목요일까진 열심히 달려야 한다. 그리고 목요일부터 바로 알고리즘 다시 풀어보자 💪🏼
