하루에 5분만 꾸준히 기록 해 두면, 이력서 작성을 위해 고민하는 20시간을 절약할 수 있어요!
Table
주차별
대분류
소분류
Search
대분류
5분 기록
소분류
기록일자
일정 분류
메모/생각정리
이번 프로젝트에서 어떤 주제로 기획할지 이전에 해보지 않은것, 사용자들에게 관심을 끌만한 것 구현이 가능할만한 요소들을 생각해 조사해보고 팀원과 논의를 통해 주제를 선정했다.
Open
프로젝트 기획
2024/03/26 14:04
1주차
기술적 의사결정
프로젝트 기획
2024/03/27 14:53
1주차
기술적 의사결정
와이어 프레임을 작성하면서 퀴즈 기능에 대해 더 자세하게 논의해봤고, ERD와 API 명세서등을 구체화했다. 또한 작성한 ERD,API 명세서를 참고해 기본적인 supabase 셋업을 마쳤고 커밋 컨벤션, Jira 셋팅, Css 방식결정등 여러가지를 논의하고 결정했다.
Open
프로젝트 기획
2024/03/28 14:30
1주차
기술적 의사결정
어제 작성한 ERD를 튜터님과 함께 다시 짚어보며 더 알맞게 수정하고, 구현방법도 다시 정리했다. 또한 개발시간을 예상해서 스케줄을 다시 짜보았고 이를 바탕으로 각자 역할 분담을 하였다. 마지막으로 깃허브와 vscode 셋팅을 마무리 지으며 개발에 들어갈 준비를 끝냈다.
Open
프로젝트 기획
2024/03/29 12:44
1주차
기능 구현
로그인 회원가입 Form 을 간단하게 만들었고, 회원가입시 supabase auth와 profiles에 정보가 추가되게 구현했고, 이를 바탕으로 로그인 로직을 구현했다. 이과정에서 여러 문제들이 있었고 대부분 supabase 설정 문제였고 이를 해결했다. 아직 세부적으로 못한 부분들이 있어 내일까지 마무리 지을 예정이다
Open
로그인/회원가입
2024/04/01 13:52
2주차
기능 구현
디자이너님이 짜주신 로그인 페이지 디자인처럼 디자인을 수정했고, Google, 카카오톡 소셜 로그인 기능을 구현 했지만, profiles 테이블에 데이터가 추가되지 않는 문제가 발생해 열심히 관련 문서, 포럼 등 여러 방법을 모색해봤지만 아직 어떤 부분에서 잘못된 건지 찾지 못해서 해결 하지 못했다. 이 부분은 계속 해결 중 이다. 아마 밤 샐 듯..
Open
로그인/회원가입
2024/04/02 13:57
2주차
기능 구현
어제 해결하지 못했던 소셜 로그인시 profile 테이블에 정보를 넣어주는 문제를 해결을 하지 못했다… 그래서 아쉬운 마음에 일단 Menu 부터 구현을 하기로 계획하고 Menu 레이아웃과 각 페이지 Link작업 까지 완료했지만 아직 디테일이 부족한 것 같아 내일 Menu 부터 마무리 짓고 소셜 로그인 문제를 해결 해볼 계획이다.
Open
로그인/회원가입
메뉴
2024/04/03 13:44
2주차
기능 구현
어제 디테일 적으로 부족했던 부분인 메뉴에서 각 페이지 이동 시 메뉴가 자동으로 닫히지 않던 문제를 해결했고 헤더에서 로그인 부분을 로그인 여부 상태관리를 통해 조건부로 렌더링 가능하도록 수정했다. 그리고 회원가입 페이지를 로그인 페이지와 비슷하게 디자인을 다시해줬다. 마지막으로 4일 동안 해결 못하고 있던 소셜 로그인시 SUPABASE profiles 테이블에 정보가 insert 되지 않던 문제가 있었는데 외부 페이지에서 로그인하는 소셜 로그인 같은 경우 로그인시 로그인 페이지를 거치지 않고 넘어가기 때문에 발생 했다는 것을 튜터님과 팀원들의 도움을 받아 알게 되어 문제점을 고치고 드디어 해결했다!!
Open
로그인/회원가입
메뉴
2024/04/04 14:22
2주차
기타사항
오늘 모의 면접을 진행하면서 코딩 테스트를 하였는데 제대로 요구 사항을 진행하지 못해서 너무 끔찍한 시간을 보냈다. 그렇게 모의 면접을 마치고 타자 연습 게임 구현을 시작하였는데 게임은 블로그를 참고해서 금방 만들었지만 추가적으로 필요한 생명, 난이도같은 부분을 아직 구현하지 못했고, 레이아웃도 디자인을 참고해서 만들고 있지만 아직 어려운 부분들이 있어 완성하지 못하였다. 내일은 시간이 없어서 새벽까지 최대한 해봐야겠다.
Open
모의 면접
타자 연습 게임
2024/04/05 13:40
2주차
기능 구현
타자연습 게임에서 window관련 에러가 출력되는 부분을 useEffect를 사용해 해결했고, 사용자 편의성을 고려해 시작화면에서 난이도를 선택할수 있게 했고 난이도가 넘어갈때 화면에 있는 단어들을 초기화되게 하였고 단어를 잘못 입력하고 엔터를 누르면 인풋칸이 초기화되도록 변경헸다
Open
타자 연습 게임
2024/04/08 13:56
3주차
기능 구현
타자 연습 편의성을 고려해 몇 가지 수정을 하고 난이도 추가와 난이도 조절을 하고 메인 페이지에서 랭킹을 구현 할 때 사용할 수 있도록 점수를 저장할 수 있게 로직을 추가했다. 그리고 메인 페이지를 디자이너님의 피그마를 참고하여 레이아웃을 완성하고 퀴즈와 커뮤니티에서 데이터를 불러와 렌더링 되도록 구현했다. 하지만 아직 로그인 관련해서 몇가지 문제 사항들이 남아있어 그 부분들을 수정해야 할 것 같다.
Open
타자 연습 게임
메인 페이지
2024/04/09 13:58
3주차
트러블슈팅
헤더에서 로그인시 로그인 버튼이 로그아웃으로 바뀌게 구현했는데 이 부분이 페이지를 새로고침 하면 로그인으로 자동으로 바껴버리는 문제가 있다. 또한 로그아웃을 했을 때 페이지를 새로고침 하지 않으면 로그인 상태가 유지되는 것 같은 문제도 발견했다. useEffect 관련 문제인지 아니면 다른 부분에서 문제가 발생하는건지 아직 답을 찾지 못해 해결 중이다..
Open
로그인/회원가입
2024/04/09 13:58
3주차
기능 구현
관리자 페이지를 만들기 시작했다. 먼저 기본적인 레이아웃 부터 만들려고 했는데 이 부분은 커뮤니티와 비슷한 것 같아 커뮤니티 폼을 가져와 쓰는걸로 구현이 됐고, 신고 기능이 만들어지는데로 신고된 게시물, 퀴즈 들을 불러와 게시글 형태로 렌더링 해줄 예정이다. 그리고 타자 연습 페이지에서 로그인을 하지 않은 상태로 게임을 시작하게 되면 로그인을 하지 않으면 점수가 저장되지 않는다는 경고 메시지와 함께 로그인 하러가기, 그대로 진행하기 버튼이있는 모달을 만들어줬다.
Open
타자 연습 게임
관리자 페이지
2024/04/11 14:25
3주차
트러블슈팅
로그인 할 때 회원 정보를 supabase에 저장하는 로직이 있었는데 이 로직이 로그인시 매번 실행될 경우 닉네임이나 프로필 사진을 변경했을 때 초기 값으로 돌아오는 상황이 생겨 이 부분을 supabase에 현재 로그인한 회원 정보가 없을때만 실행되도록 수정해줬다.
Open
로그인/회원가입
2024/04/11 14:25
3주차
기능 구현
로그인,회원가입 할 때 왼쪽에 그림을 추가해 비밀번호 입력시 눈을 가리는 그림이 나오게 조건부로 구현을 했고, 회원가입 기본 이미지를 디자이너님이 만들어 주신 이미지로 대체 하였다. 그리고 헤더와 회원가입에서 발생하는 에러를 수정하여 해결하고 타자 연습 점수를 원래는 합산 점수로 저장하고 랭킹에 표시했지만,최고 점수로 업데이트하면서 랭킹에 표시되도록 저장 로직을 수정했다.
Open
로그인/회원가입
메인 페이지
타자 연습 게임
2024/04/12 16:15
3주차
기타사항
모의면접을 보았는데 이번에는 저번과 다르게 기술 면접으로 좀 더 저번보다는 편안한 분위기 속에서 질의응답을 했는데 총 3문제에 대한 답변을 하였고, 브라우저의 작동방식과 프론트엔드의 성능최적화 방법, 자바스크립트와 타입스크립트의 차이점과 개념들에 대한 질문을 받았다. 질문들에 대한 답변을 할 때 그래도 튜터님이 러프하게나마 다 맞는 대답? 을 해주셨다고 해서 다행이라고 속으로 생각했다… 그리고 브라우저의 작동방식에 대한 튜터님의 설명중에 알아두면 되게 나중에 면접때 쓸수있는 좋은 정보를 주셔서 나중에 꼭 공부해볼 예정이다
Open
모의 면접
2024/04/12 16:15
3주차
기능 구현
관리자 페이지에서 신고된 게시글, 퀴즈를 삭제,복구가 되도록 구현 완료했고, 커뮤니티 페이지에서 어드민 계정으로 로그인시 공지 카테고리가 보이게 조건부로 구현해 공지를 작성 할 수 있게 했다. 그리고 메인 페이지에 공지를 따로 렌더링하게 해주었고 타자 연습 난이도를 label을 넣어 이름을 바꾸어주었다. 마지막으로 메인페이지에서 한주마다 랭킹을 업데이트 할 수 있도록 supabase sql을 사용해 함수를 만들어 구현했다.
Open
메인 페이지
관리자 페이지
타자 연습 게임
게시판
2024/04/15 13:19
4주차
중간 발표
절반까지 왔음을 의미하는 중간 발표를 했다. 오전에 발표 전까지 열심히 못다한 기능들을 구현하고 발표를 했는데 튜터님에게 좋은 피드백을 받았고, 덕분에 남은 기간동안 어떻게 진행할지 방향성을 잡는데도 도움이 되었던것 같다. 이제 반왔으니.. 나머지 반도 열심히 해봐야겠다.
Open
중간 발표
2024/04/15 13:19
4주차
기능 구현
타자 연습 난이도 명을 1,2,3같은 숫자에서 좀 더 어려움을 명확하게 나타내기 위해서 초보,하수,중수,고수,지존으로 바꿔주었다. 그리고 커뮤니티에서 게시글을 불러올때 공지를 가장 먼저 가져오게 해 공지가 상단에 고정되서 보이도록 수정해주었고, 관리자로 로그인 시 모든 게시글을 삭제하거나 수정할수 있게 조건부로 구현했고, 메인 페이지에서 퀴즈를 최신순으로 불러오지 않았던 문제를 해결했다.
Open
메인 페이지
타자 연습 게임
게시판
2024/04/16 15:00
4주차
오류 개선
타자 연습 게임에서 게임 오버가 되면 맞춘 단어 갯수가 초기화되지 않고 그대로 다음 게임에서 적용되는 버그가 있었는데, 게임 오버가 되면 갯수가 초기화 되도록 로직을 수정해 해결했다.
Open
타자 연습 게임
2024/04/16 15:00
4주차
기능 구현
헤더에서 메뉴를 선택하고 이동되면 선택한 메뉴 이름 아래에 border가 생기는 기능을 추가했다. 처음에는 새로고침과 커뮤니티를 예로 들었을때 커뮤니티 메인페이지는 보더가 유지되지만, 상세나 글쓰기 페이지로 이동하면 보더가 없어지는 이슈가 있어 이를 usePathname을 사용해 해결했다.
Open
메뉴
2024/04/17 16:32
4주차
기능 구현
커뮤니티 페이지에서 각 게시글의 댓글수를 불러와 제목 옆에 표시되게 구현해주었고 댓글이 없으면 아무것도 표시되지 않게 조건문을 사용해 나타냈다. 그리고 타자 연습 게임의 난이도를 극단적으로 어렵거나 쉽지 않도록 조정해주었다.
Open
타자 연습 게임
게시판
2024/04/18 14:41
4주차
기능 구현
유저 피드백중에 타자 연습 게임시 사운드를 추가한 부분에서 볼륨이 너무 크다는 사항들이 여럿 보여서 이부분을 해결하기 위해 볼륨 조절 버튼을 추가해주었다. 볼륨을 상태값으로 관리하고 볼륨 range가 조절될때마다 오디오의 볼륨이 업데이트되도록 구현했다.
Open
타자 연습 게임
2024/04/19 15:52
4주차
트러블슈팅
회원가입 페이지와 약관동의 페이지를 통합하기 위해 로직들을 옴겨주고 레이아웃CSS를 다시 했다. 그과정 속에서 이메일 유효성 검사가 되지 않는다는 사실을 알게되었고, 회원가입 로직에 이메일 유효성 검사를 추가 해주었다.
Open
로그인/회원가입
2024/04/19 15:52
4주차
기능 구현
외국인들을 대상으로 한 웹사이트인 만큼 다국어 기능을 위해 자바스크립트 함수를 사용해 수작업으로 UI를 번역했는데 타자 연습 페이지, 메인 페이지, 로그인, 회원 가입 페이지를 맡아서 번역을 해주었다. 회원 가입 페이지는 약관 내용이 있어서 좀 더 시간이 걸리고 힘든 부분이 있었다. 그리고 회원 가입 페이지를 작업 하면서 비밀번호와 확인 비밀번호가 일치 하는지 사용자들에게 표시 해주기 위해 조건부를 사용해 React Icons와 함께 메세지를 렌더링을 할 수 있게 했다.
Open
로그인/회원가입
2024/04/22 16:31
5주차
CSS
피드백 기간 중에 받은 피드백 중 타자 연습 게임에서 플레이시 단어가 겹쳐서 생성되거나 각 단어 배경에border가 없어 조금만 겹쳐도 가독성이 떨어진다는 내용의 피드백이 종종 보여서 이를 해결하기 위해 단어의 글자 색과 배경 색, border 를 추가해 가독성을 높여 주었다.
Open
타자 연습 게임
2024/04/22 16:31
5주차
기능 구현
타자 연습 게임에서 좀 더 재미 요소를 추가하기 위해 단어 중 랜덤으로 단어 하나를 지정해 state으로 specialword를 만들어 그 단어를 입력시 화면에 생성된 모든 단어가 떨어지는 속도가 1이 되게 해주는 요소를 추가해줬다. 그리고 단어가 하단으로 떨어질때 뚝뚝 끊기는 모습이 보여 transition css를 추가 해 좀 더 시각적으로 부드럽게 떨어지도록 해주었다. 마지막으로 유저 피드백 중 게임 중간에 뒤로 갈 수 있는 버튼이 있었으면 좋겠다는 의견이 있어 이를 반영해 게임 시작 화면으로 갈 수 있는 버튼을 추가했다.
Open
타자 연습 게임
2024/04/23 16:39
5주차
CSS
모바일 버전을 위해 반응형을 추가 하기로 했는데 그 중 로그인과 회원 가입을 먼저 md와 sm 값을 지정하고 그에 맞게 grid와 flex를 사용하여 레이아웃을 수정해주었다.
Open
로그인/회원가입
2024/04/23 16:39
5주차
CSS
메인 페이지 모바일 버전 UI 작업을 하루종일 했다. 메인페이지는 섹션을 나눠서 여러 컴포넌트로 만들었다보니 총 5개의 페이지를 수정하느라 더 걸렸던 것 같다. 각 페이지 별로 기존 데스크탑 레이아웃과 달라지는 부분들이 많아서 기존 레이아웃을 그대로 두고 sm일때 hidden 되는 속성을 추가해 페이지가 모바일 크기일때에는 데스크탑에서 hidden 상태가 되었던 div들을 보여줌으로써 스위칭되는 느낌으로 구현해줬다.
Open
메인 페이지
2024/04/23 16:39
5주차
CSS
메인 페이지에서 랭킹을 보여줄 때 각 유저의 프로필사진, 이름, 점수와 함께 react-icons 에서 찾은 메달 아이콘 3개를 switch문을 사용해 순위를 나타내는 index를 받아 case 0 부터 2까지 금색,은색,동색을 지정 해주어 렌더링 될 때 지정 해둔 색깔 별로 나타나게 했다.
Open
메인 페이지
2024/04/24 15:52
5주차
CSS
프로필 페이지에 있던 숫자로만 표시되던 레벨을 디자이너님에게 받은 귀여운 이미지로 대체하였다. supabase에 저장한 이미지를 url로 불러와 url안에 level_1,2,3,4의 숫자 부분에 변수를 넣고 url을 상수로 만들어 숫자대신 넣어줬다.
Open
프로필 페이지
2024/04/25 16:13
5주차
기타사항
메인 페이지에 있는 랭킹을 데이터 패칭할때 날짜를 지정해두고 그 날짜 기준으로 일주일 내에 있는 데이터만 가져오게 했는데 받은 사용자 피드백 중 랭킹이 실시간 반영이 안되고 있는 것 같다는 말이 있어 확인해보니 이미 일주일이 지나 저번주 데이터만 가져오고 있는 상황 이었다는 걸 알게 되었다. 그래서 바로 날짜를 수정 해주었는데 이 부분은 후에 직접 날짜를 바꿔주지 않고도 자동으로 일주일마다 데이터를 받아 올 수 있는 방법을 고안해봐야 할 것 같다는 생각이 들었다.
Open
메인 페이지
2024/04/25 16:13
5주차
기능 구현
기존 타자 연습 페이지에 있던 효과음에 추가적으로 몇개의 효과음을 더 넣어주고, 배경음을 난이도에 따라서 다르게 사용하기 위해 난이도에 따라 음악이 다르게 재생되도록 변수 지정하고 그걸 useEffect 안에 넣고 의존성 배열에 난이도와 게임시작 여부를 넣어 게임이 시작되고 난이도가 바뀔때나 시작전에 난이도를 선택한것에 따라 배경음이 달라지게 구현했다.
Open
타자 연습 게임
2024/04/25 16:13
5주차
기능 구현
다국어를 위한 언어 토글 버튼으로 언어를 바꿀 시 그 언어가 계속해서 유지되지 않고, 새로고침을 하면 기본값인 영어로 계속 바뀌게 되는 문제가 있었는데 언어 값을 쿠키에 저장해놓고 버튼으로 언어 설정을 바꾸면 바꾼 값이 쿠키에서 업데이트 되고 계속 저장되도록 설정해 해결했다.
Open
다국어 설정
2024/04/29 13:26
5주차
CSS
메인 페이지
2024/04/29 13:26
5주차
CSS
메인 페이지 모바일 디자인 관련해서 디자이너님이 배포 사이트를 본 후 작성 해주신 피드백을 바탕으로 패딩, width, height이나 여러 css 들을 가능한 부분들을 골라 최대한 반영해 보았다. 또한 회원가입 페이지에서 약관을 한번에 동의 할 수 있는 전체 동의 버튼을 상단으로 올려달라는 피드백을 받아 그에 맞춰 상단으로 올려주었다.
Open
메인 페이지
로그인/회원가입
2024/04/29 13:27
6주차
CSS
타자 연습 페이지를 모바일로 접속했을 경우 원활한 플레이가 불가능하다는 점으로 인해 모바일에서는 타자 연습 페이지를 접근할수 없도록 해뒀는데 혹시라도 url에 쳐서 접속했을 때를 대비해 모바일 접속 시 타자 연습 페이지 시작 화면에 pc환경으로 접속해달라는 모달을 띄워주었다.
Open
타자 연습 게임
2024/04/29 13:27
6주차
기타사항
개발을 마무리 하며 주석 처리되어 쓰이지 않고 있던 곳과 console.log 를 삭제시켰고, import 순서를 정리해줬다. 그리고 각 함수마다 주석으로 설명을 달아주었다.
Open
그외 기타..
2024/04/29 13:34
6주차
5분 기록 보드 사용법
1.
새로 만들기를 누르면 기록 일자에 현재 시각이 자동으로 찍힙니다. 누르기만 하세요!
2.
다음으로 대분류를 체크해 주세요. 대분류는 반드시 하나만 기록합니다.
3.
이제, 5분 기록 내용을 채워주세요. 자세히 쓰지 않아도 됩니다. 오늘 무엇을 했는지 1~3줄만 써 주세요.
•
만약 테스트 같은 것을 했다거나, 오류 등을 수정했다면, 나중에 기억할 수 있게 사진 정도만 캡쳐해서 담아두세요.
4.
다 쓰고 나서, 소분류를 채워주세요. 소분류는 여러개 체크해도 괜찮습니다.
5.
일정 분류는 이번주에 무엇을 했는지 표시하는 용도입니다. 이렇게 작성하면 5분 기록 완료!
주차별 보기
대분류 보기
소분류 보기
‘5분 기록 보드’ - 이렇게 쓰세요!
Copyright 2024. ⓒ TeamSparta All rights reserved.