기간 : 10/6~10/10 특기 상세 정보 화면에는 해당 특기에 대한 자세한 설명이 들어가 있다. 이 설명에 대한 데이터들을 어떻게 통일된 구조의 공간에 저장할 수 있을까? 이것이 이 당시 내가 했던 고민이다. 이 당시 내가 나름대로 고민해서 저장했던 특기 상세 데이터베이스이다. 이렇게 특기 요약, 주요 업무, 지원 자격 등 내용 구성을 미리 정해두고 각 섹션 별로 데이터를 저장했었다. 그런데 만약 특기마다 적고 싶은 내용이 다를 경우, 이 구성은 유연성이 매우 떨어지는 저장방법이라 각 특기들의 독특한 특징들을 효과적으로 보여줄 수 없다는 문제가 있었다. 이게 특기 상세페이지를 구현할 때 만났던 첫번째 문제이다. 그리고 '표를 어떻게 보여줄 것인가' 에 대한 문제에 부딪혔다. (두번째 문제) 근데 각 ..

기간 : 10/3~10/5 프론트에서 특기 자세히 화면의 탭 부분 UI 구현이 완료되었다. 스샷을 찍어두진 않았지만 비록 UI 를 클릭했을 때 데이터가 없어서 빈화면이 보이지만 내가 피그마로 그렸던 것과 정말 똑같이 구현해주셨다ㅋㅋㅋ 10/4 해당 부분 데이터는 나중에 만들어서 추가하기로 하고 다음엔 군지원 기능을 만들기로 했다. 군지원 기능에 대해 서로의 의견을 확인하고 프론트 구현이 시작되었다. + 로그인 화면도 구현이 완료되었다. 진짜 내가 예상한 것보다 너무너무 깔끔하고 멋있는 화면이라 엄청 놀랐다. 디자인에 재능이 있으신걸까.. 이제 로그인 화면도 만들어졌겠다. 로그인 기능이 작동하도록 구현하는 것도 부탁드렸다. 그리고 모군 플랫폼의 로고 디자인도 고민을 하기 시작했다. 참고로 팀원분이 알려주신..

기간 : 9/29~10/2 팀원분이 내가 PPT로 간단하게 만들었던 레이아웃을 참고해서 PPT로 레이아웃을 잡아주셨다. 결과물을 보고 생각을 하다가 서로 디자인까지는 같이 하기로 이야기를 했다. 해커톤하면서 느낀점이 백엔드가 필요없는 건 아닌데, 단기간에 결과물을 보여줄 필요가 있는 해커톤 특성상 프론트와 디자인의 역할이 정말 중요하다고 느꼈다. (해커톤 하실 분들 참고하세용..) 그리고 초기에 프론트가 무에서 유를 창조하는 동안 나는 제이슨 데이터만 넘겨줄 API만 딱 만들면 되서 상대적으로 시간적 여유가 있었던 것도 사실이다. 이후로는 우선 특기 상세 페이지에 어떤 내용이 들어가면 좋을지 의논했다. 그러다가 새로운 기능 추가에 대한 의견이 생겨서 이것도 논의 했다. 중간에 서로 에러가 다르게 나오는 ..

기간 : 9/27~9/28 9월 27일부터는 백엔드와 프론트의 연동작업이 시작되었다. 그리고 어찌 저찌 연결을 성공했다. 그런데 프로젝트 구조가 내가 생각한 것과 달라서 조금 놀랐다. 팀원 분께서 위에 사진에 있는 블로그 글을 참고해서 연동하셨는데 백엔드 서버에서 리액트가 빌드한 index.html를 직접 파일 경로로 바라보도록 연동한 것이다. 내가 생각한 것은 백엔드와 프론트를 완전 분리해서 백엔드가 꺼지더라도 프론트는 살아있을 수 있게 하는 구조를 생각했었는데 팀원 분께서 한 방식대로 하면 백엔드가 죽었을 때 프론트도 같이 죽는 구조라 뭔가 불편함이 느껴졌다. 그래서 내가 생각했던 것들을 팀원분과 의논해보았다. 이때 당시에는 하나의 서버가 하나의 역할만 했으면 좋겠다는 생각이 강했어서 속으로 불편함이..

기간 : 9/22~9/26 프론트에서 초기 화면 디자인이 나왔다. 마우스를 가져다 대면 화면이 양 옆으로 넓어지면서 군종을 선택할 수 있게 된다. 그런데 여기에서 우리의 첫 동상이몽이 나왔다. 내가 생각한 화면은 첫 화면에 모든 군종의 특기 리스트가 촤라락 나오고 그 안에서 우리가 필터를 거는 식으로 골라서 보는 걸 생각했기 때문이다. 팀원분도 바로 이해를 해주셨고 바로 수정을 하기로 했다. 이렇게 내가 생각한 아이디어를 공유하고 팀원분도 이것 저것 참고 사이트를 제시하시면서 아이디어를 공유했다. 지금 돌아보면 나도 이렇게 이미지를 이용해서 내 아이디어를 설명했다면 더 좋았겠다는 생각을 했다. 내 그림실력이 엄청나게 좋은 편이 아니니까..ㅎ 그렇게 첫 화면 레이아웃을 대충 확정지었다. 그 밖에 이런 세부..

원래는 9월 18일까지 팀빌딩을 완료해야했다. 사실 솔직하게 말하면, 원래는 해커톤에 그렇게 마음을 두고 있지는 않았다. 그냥 되든지 말든지 한번 해보면 어떨까 하는 마음으로 가볍게 신청했고, 해커톤에 참가자로 선정되었을 때도 나의 개발 계획서를 토대로 팀원을 모집하기 보다 다른 팀에 참가하려고 했다. 근데 해커톤 신경을 안쓰다가 나중에 팀빌딩을 하려고 보니 이미 다들 짤 팀은 다 팀을 짜둔 상태였다. 그래서 해커톤 주최측에서 해주는 팀원 매칭 시스템을 이용해 같은 웹 분야에서 한 분을 소개받아 매칭받았다. 그렇게 20일 매칭받은 팀원분과 팀을 결성했다ㅎㅎ 처음이라 엄청 딱딱한 대화지만..? 팀원분께서 분위기를 잘 풀어주신 덕분에 대화가 잘 이어질 수 있었다. 그렇게 각자 사용가능한 기술을 확인하고 각자..

옛날에도 플러터로 라디오 토글버튼을 구현하는데 엄청 애먹었었는데 리액트로도 이걸 구현하는데 엄청 애먹어서 기록으로 남겨봅니다. 그 전에 우선 '라디오 토글 버튼'의 정의를 명확하게 하자면, 라디오버튼에 토글 기능을 넣은 버튼을 의미합니다. 기본적으로 라디오버튼은 반드시 하나가 선택되어 있어야 합니다. 저는 이미 선택된 라디오 버튼을 한번 더 선택하면 선택이 해제 되도록 만들고 싶었습니다. 기사 이상 산업기사 기능사 이렇게 구성하면 각 버튼은 토글 버튼인 동시에 같은 그룹 안의 컴포넌트끼리는 중복선택이 되지 않게 하려고 합니다. 영상으로 보면 이렇게 됩니다. 처음에는 각 버튼에 클릭 상태를 저장하는 변수를 만들고, 클릭할 때마다 상태를 바꿔주도록 했습니다. 처음에는 이 아이디어를 계속 끌고가면서 구현하려고..

분명히 서버로 부터 쿠키를 받았다. 그런데 그 뒤로 요청을 보낼 때 쿠키 요청이 안 보내지는 경우가 있다. 몇시간의 구글링 끝에 이것도 설정해보고 저것도 설정해봤지만 해결이 되지 않던 찰나 한가지 정보를 발견했다. (물론 withCredential 속성 설정 확인은 기본이다) https://developers.google.com/search/blog/2020/01/get-ready-for-new-samesitenone-secure?hl=ko 새로운 SameSite=None; Secure 쿠키 설정에 대비 | Google 검색 센터 블로그 | Google Developers 의견 보내기 새로운 SameSite=None; Secure 쿠키 설정에 대비 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를..

포스트맨으로 회원가입 테스트를 하려는데 이런 오류가 떴다. 구글링도 해보고 공식 문서 에러 리스트를 보기도 했지만 원인을 못찾았다가 스택오버플로우를 탐방하던 중 해결책을 찾았다. const credential = await createUserWithEmailAndPassword(auth, email, password); 일단 요청은 요런식으로 보냈다고 가정한다. 스택 오버플로우를 보니까 auth만 보내고 이메일 비밀번호를 전달을 안하는 경우에 이런 오류가 발생한다고 한다. 질문자의 코드에는 정말 이메일과 패스워드를 아예 인자로 넘기고 있지 않았었다. 처음엔 나는 인자로 잘 넘겼으니까 문제없다고 생각했었다. 그러다 혹시 내가 넘긴 이메일과 패스워드 값에 문제가 있진 않을까? 하는 의심이 들었고 바로 req..

https://youtu.be/7Dbu5M2utEA 2022 군장병 온라인 해커톤에 참가하게 되어 해커톤을 신청한 과정을 소개합니다. 나중에 이 해커톤을 나가실 분들에게 참고가 되었으면 좋겠습니다. 국방오픈소스아카데미 사이트에 회원가입을 하고 로그인하면 위와 같은 메뉴가 보입니다. (팀블로그 메뉴는 해커톤 참가 이후 팀빌딩이 완료되면 보입니다) 해커톤 메뉴에서 해커톤 공지를 확인하고 팀빌딩도 진행됩니다 해커톤 신청은 2022년 기준 위와같이 진행되었습니다. 9월 4일까지 온라인 교육을 마치고 이론평가를 본 후 코딩테스트를 보고 개발계획서를 작성하여 제출하면 됩니다. 참가신청 & 온라인 교육 참가신청은 WEB, APP, IoT, Cloud 4가지 분야 중 하나를 골라서 신청하게 됩니다. 이 단계에서는 참가..