수원시 공고 사이트에서 원하는 정보가 새로 올라왔을 때, 해당 정보를 메일로 받는 프로그램을 제작해보았다. https://www.suwon.go.kr/web/saeallOfr/BD_ofrList.do?q_currPage=1&q_sortName=&q_sortOrder=&q_rowPerPage=&q_searchKey=SJ&q_searchVal= 공고/고시/입법예고 : HOME > 수원소식 > 공고/고시/입법예고 8792 수원시 장안구 파장동 공고 제2024-13호 주민등록신고 미이행자에 대한 최고공고 파장동 2024-02-08 2024-02-08 ~ 2024-02-26 24 8791 수원시 영통구 공고 제2024-75호 2024년 경로당 활성화 문화교실 강사모 www.suwon.go.kr 크롤링, 메일링 모..
군대에서 HTML/CSS/JS 공부용으로 시작한 프로젝트를 이어서 계속 해보고자 한다. 이번에는 노래 재생 기능을 추가해보았다. 노래 재생은 다음과 같이 간단한 과정으로 이루어진다. 1. 노래 리스트에서 노래 클릭 2. 해당 노래 정보를 플레이어에 표시 3. 노래 음원 재생 내가 노래 재생 기능을 구현하는 과정에서 고민한 부분을 기록하고자 한다. 1. 노래 리스트에서 노래 클릭 이 부분의 구현은 어렵지 않다. 노래 리스트를 생성할 때, 해당 요소에 click 이벤트 리스너를 추가해주면 되기 때문이다. 2. 해당 노래 정보를 플레이어에 표시 노래 정보를 플레이어에 표시할 때, 처음 생각한 아이디어는 아래와 같았다. 노래를 클릭하면 >> 해당 노래 정보를 '현재 재생중인 노래 정보' 로서 전역적으로 저장하고..
군대를 갔다와서 컴퓨터를 사고나니 플러터 버전이 달라져있어 프로젝트를 처음부터 다시 만들기로 했다. 그래서 새 컴퓨터에서 새 개발환경을 다시 세팅해 기존 소스코드를 참고하여 처음부터 개발을 시작했다. 방학이 끝나고 개강한 뒤 학교 기숙사로 왔다. 데스크탑을 가져올까 하다가 그냥 노트북만 들고왔는데, 노트북에는 플러터 2.0 버전과 구버전의 안드로이드 스튜디오가 깔려 있는 상황 2021년에 처음 이 앱을 개발하던 시기의 개발환경이 세팅되어 있는 상태였다. 안드로이드 스튜디오에서 제공하는 flutter 업데이트 기능을 이용해 flutter를 업데이트하고, chocolate 를 이용해 dart-sdk 도 설치했다. flutter doctor 를 검색해보니 분명 자바가 이미 깔려있는데 java version 을..
악보에 태그 기능을 달면 더 좋겠다는 아이디어가 생각났다. 블로그 태그 같이 자유롭게 여러개를 다는 기능보다는 작성자가 직접 난이도와 곡 장르를 정해진 태그 중 골라서 매기는 기능이다. 이 기능이 추가되면 사용자들이 좀 더 편하게 악보를 찾을 수 있을 것이다. 난이도와 장르를 구분하지 않고 이렇게 enum 하나에 묶은 뒤, 각 값마다 태그의 배경색과 보여질 내용을 하드코딩했다. 난이도와 장르를 enum 하나에 묶은 이유는 Flutter의 Chip 이라는 기본 위젯을 가볍게 커스터마이징해서 Tag 라는 커스텀 위젯을 만들었는데, 이 Tag 라는 위젯에 TagContent 라는 하나의 enum 을 넘겨서 장르와 레벨을 모두 표현하고 싶었기 때문이다. enum을 구분하면 위젯도 GenreTag, LevelTa..
기본적인 기능은 어느정도 만들어졌다고 생각해서 플레이스토어에 한번 출시해보기로 마음먹었다. 구글 개발자 계정은 전에 만들어두었다. 근데 앱을 등록하는 절차가 정말 복잡했다. 앱 정보 뿐만 아니라, 미국 세금 관련 정보, 국내 결제 정보 같은 것도 입력해야하는데 낯선 부분이 정말 많았다. 앱 아이콘을 간단하게 만드는 방법을 검색해서 피그마로 만들었다. 그래픽 이미지는 어디에 쓰이는 건지 모르겠다. 앱 링크 공유하면 나오는 이미지라는데 해보니까 앱 아이콘으로 나오던데..? 1학년때 디디입 수업을 들으면서 앱 아이콘 디자인 과제를 해본 게 조금 도움이 되었다. 진짜 너무 힘들었던 수업인데 이럴 때 도움이 되네.. 스크린샷을 올려준다. 같은 태블릿 스크린샷인데 10인치에 사이즈가 안맞는다고 안올라가서 당황했다...
지금까지는 아이디어를 결과로 보여준다는 느낌으로, 떠오르는 생각들을 바로 구현해 나갔었다. 설계를 해보려고 했는데 머릿속에 다 정리된 내용을 손으로 다시 하나하나 옮기려니 단순작업을 하는 느낌이었기 때문에 의지가 생기지 않았다. 그러다 그룹 기능을 구현하던 중 고민거리가 생겼다. 내가 의도하는 그룹의 기능은 일종의 밴드 그룹같은 느낌이다. 특정 유저끼리 모여서 그룹을 구성하면 그 그룹에서 매주 정기공연을 한다고 하자. 그럼 매주 정기 공연마다 연주할 악보 셋리스트가 달라질 것이다. 그래서 그룹을 만들면 일정을 만들고, 매 일정마다 어떤 악보들을 넣을지 고를 수 있도록 기능을 만들었다. 예를 들어, 위 화면 같은 경우, 테스트 라는 일정에서 '내 손을 잡아' 의 악보를 넣은 상황이다. 이렇게 일정마다 악보..
말출을 나오면서 컴퓨터를 하나 새로 장만했다. 60만원대 정도로 적당히 샀는데, 게임도 잘 돌아가고 개발 환경도 아주 좋아졌다ㅎㅎ 밖에서 개발하는 김에 오랜만에 입대직전까지 진행했던 이 프로젝트를 이어서 해보려고 했다. 아아... 플러터 SDK 버전이 달라서 그런지 스택오버플로우를 검색해가며 Gradle 파일을 수정해봤는데 뭔가 문제가 있는 듯 하다. 이전에 개발하면서 사용했던 라이브러리 일부도 deprecated 되면서 사용을 권장하지 않게 되었다. 2년동안 방치했더니 그동안 너무 많은 것이 바뀌어버렸다. 이걸 하나하나 수정을 하기에는 힘들어 보이기도 하고, 이 프로젝트를 너무 오랫동안 방치한 탓에 나도 이 프로젝트의 코드 구조를 까먹어 버린 상태라 이왕 이렇게 된 거 다시 구조도 복기할 겸 코드를 새..
지난달까지는 이 프로젝트를 배포할 때 nodemon을 이용해서 배포를 하였다. nodemon으로 배포하고 있을 때는 소스코드를 수정한 결과물을 자동으로 반영해주어서 결과물을 확인하기 좋았기 때문이다. 하지만 단점도 있었다. 매번 프로젝트를 할 때마다 노드몬을 키고 끄는 작업을 반복해야했기 때문이다. 물론 노드몬 자체를 백그라운드로 실행시킬 수도 있겠지만 나중에 노드몬을 끌 때 프로세스 아이디를 읽고 꺼야하는 귀찮음이 있어서 하고 싶지 않았다. 이 작업이 너무 번거롭다고 생각해서 백그라운드에서 배포하는 방법을 알아보았다. 검색을 해보니 nodemon말고도 forever와 pm2 등 선택지가 더 있었다. 그 중에서 나는 forever를 선택했다. 그 이유는 다음과 같았다. forever start 명령어로 ..
사실 에러처리는 전에도 이미 해놨었다. 하지만 그때는 간단한 메세지를 alert 함수로 표현하는 식이어서 마음에 들지 않았다. 가능하면 alert는 사용하지 않는 것이 사용자 경험에 좋다고 들었기 때문이다. 그래서 로그인 화면에 에러메세지를 위한 공간을 만들고 평소에는 안보이게 해두다가 에러가 뜨면 보이도록 만들었다. ShowErrorMessage 함수를 만들어서 에러메세지를 표시하도록 했다. const ShowErrorMessage = function(errorMessage) { const error_msg_div = document.getElementById("error-msg"); error_msg_div.style.visibility = "visible"; error_msg_div.textCont..
지난 포스팅에 이어 로그인을 구현해보았다. 이 로그인 구현에 정말 시간을 많이 투자했다. 우선은 로그인 페이지 구현을 위해 프로젝트 구조를 수정했다. 현재는 이렇게 외부에서 요청이 들어오면 NGINX가 정적 html파일과 css. js 파일을 반환하면서 프론트를 서비스한다. 그리고 프론트에 뿌려줄 데이터는 다른 오리진으로 분리된 백엔드 서버에서 받아온다. 원래의 내 목표는 로그인에 성공하면 세션을 주어 로그인을 유지하는 기능을 구현하는 것이었다. 하지만 이렇게 구현하였더니 프론트가 유저 정보를 백엔드로 보내 로그인에 성공해도 세션이 백엔드 서버에 대해 생기는 문제가 발생했다. everdu.ga 라는 프론트 도메인이 있고 api.everdu.ga 라는 백엔드 도메인이 있을 때 로그인 처리를 백엔드에서 하면..
