하루에 5분만 꾸준히 기록 해 두면, 이력서 작성을 위해 고민하는 20시간을 절약할 수 있어요!
Table
주차별
대분류
소분류
Search
대분류
5분 기록
소분류
기록일자
일정 분류
메모/생각정리
프로젝트 기획
2024/03/26 14:00
1주차
기술적 의사결정
프로젝트 기획
2024/03/27 14:52
1주차
기술적 의사결정
와이어프레임을 보완하며 페이지 구성을 함께 살펴보고 누락되거나 잘못된 내용을 수정했다. 퀴즈 만들기 기능에서 필요한 데이터의 흐름을 함께 짚어보며 db erd를 작성했다. 본격적인 개발에 앞서 github, supabase, jira를 셋팅했고 커밋룰, issue/pr 템플릿을 작성했다.
Open
프로젝트 기획
2024/03/28 14:24
1주차
기술적 의사결정
supabase 데이터 간 더욱 긴밀하게 연결되도록 ERD Diagram을 수정했다. 예상 개발 시간을 확인하고, 스케줄 조정을 했다. 팀원과 논의하여 기능별 분업하고 깃허브와 프로젝트 초기 셋팅을 마쳤다. 이제 개발 준비 끝!
Open
프로젝트 기획
2024/03/29 12:42
1주차
기능 구현
PageUp공통 컴포넌트 구현, 퀴즈만들기 에디터 페이지에서 quiz/question 렌더링을 하기 위한 타입을 정의했다. 에디터 페이지 특성상 여러 복잡한 상태를 컴포넌트 간에 전달하고 또 전달받아 supabase에 insert 해야하는데 너무 어렵게 느껴진다. supabase insert 함수와 mutation을 작성하던 중에 정신이 자꾸만 흐려졌다… 눈앞이 깜깜해졌다.
Open
퀴즈만들기 에디터
CRUD
2024/04/01 13:51
2주차
기능 구현
첨부 이미지를 supabase storage에 업로드하고, 받아온 url을 활용하여 newQuiz 항목을 quizzes 테이블에 insert할 수 있도록 구현했다. 이 때 테이블 policy 설정과 primary key 생성에 대해 살펴볼 수 있었다. 이제 각 input에 입력된 questions, options 값들로 데이터를 구성하여 각 테이블에 업로드하는 로직을 완성하면 대강 퀴즈 에디터 페이지는 정리가 될 것 같다. Header & Footer 컴포넌트의 대략적인 UI를 잡아보았다. 이번 프로젝트에는 공통 컴포넌트를 십분 활용할 수 있으면 좋겠다.
Open
퀴즈만들기 에디터
그외 기타..
2024/04/02 13:50
2주차
기능 구현
Header와 Footer 스타일을 조정하고 quiz-list 페이지 간략한 레이아웃을 미리 잡아두었다. quiz-form에서 ‘등록하기’ 버튼 클릭 시 5개의api(스토리지 버킷2개, 테이블3개)와 3개의 mutation이 실행되어야 하는데…ㅎ 각각의 코드를 구성하는 것과 실행 순서에 대해 곰곰이 생각해보았다. mutation을 별도의 훅으로 분리했다. quiz-form에서 받아온 데이터를 어떻게 잘 upload/insert할 수 있을지 고민하고 있다.
Open
퀴즈만들기 에디터
CRUD
퀴즈리스트 페이지
2024/04/03 13:41
2주차
기능 구현
기존에 select 태그로 임시 구현해 놓았던 난이도 선택 부분을 버튼을 숨긴 라디오 인풋으로 수정하여 UI를 개선했고, 선택된 값이 있는지 여부에 따라 조건부 스타일링을 해주었다. 다른 페이지에서도 쓸 수 있도록 공통 버튼 컴포넌트를 구현해 두었다. 그리고 나서는 하루종일 퀴즈 등록하기 코드를 짰다. 여러 개의 동적으로 나타났다 사라졌다 하는 input에 값이 있을 수도 있고 없을 수도 있어서 이걸 적절한 storage와 table에 집어넣는 것이 쉽지만은 않다.
Open
퀴즈만들기 에디터
그외 기타..
2024/04/04 15:49
2주차
기능 구현
퀴즈리스트 페이지
2024/04/08 14:01
2주차
기타사항
모의면접 준비
2024/04/08 14:02
2주차
기능 구현
퀴즈리스트 페이지
2024/04/08 14:02
3주차
트러블슈팅
퀴즈만들기 에디터
2024/04/08 14:02
3주차
기능 구현
퀴즈만들기 에디터
2024/04/08 14:03
3주차
기능 구현
첨부한 썸네일/퀴즈 이미지 삭제하기 기능을 구현했다. 이미지가 첨부되면 이미지 위에 닫기 버튼을 겹쳐 표시하고, 버튼 클릭 시 관련 state를 모두 초기화하여 값을 비워주는 것으로 구현했다.
Open
퀴즈만들기 에디터
2024/04/09 14:05
3주차
리팩토링/구조화
퀴즈만들기 에디터
2024/04/09 14:06
3주차
기능 구현
supabase 테이블에서 각종 데이터를 불러와서 페이지에 출력하도록 구현했다. 특히 ‘프로필 수정’ 모달창을 띄워 기존의 프로필 이미지와 닉네임을 불러온 다음 수정하여 업데이트 하도록 구현했다.
Open
프로필 페이지
2024/04/11 14:23
3주차
트러블슈팅
언제부턴가 useEffect로 비동기 데이터를 불러와 로컬 상태에 저장해두는 식으로 구현하고 있다가 어느 순간 정신이 퍼뜩 들어서 useQuery를 사용하여 서버 상태로 관리하는 걸로 리팩토링했다. useQuery - mutation - clickHandler 세가지를 넘나드는 서버 상태 관리에 조금씩 익숙해지는 것 같다.
Open
프로필 페이지
공통 컴포넌트
2024/04/11 14:23
3주차
CSS
프로필 이미지를 원 모양으로 스타일링하고 있는데, 이미지 비율이 깨지지 않도록 수정했다. 또한 디자이너님으로부터 이미지 소재를 일부 전달받아 필요한 곳에 적용하고, 메인페이지, 헤더, 퀴즈 리스트 페이지의 전체적인 스타일을 조정했다.
Open
그외 기타..
2024/04/12 15:56
3주차
리팩토링/구조화
profile 페이지에서 useEffect로 비동기 데이터를 가져와 state로 관리하면서 비동기 상태 관리가 상당히 불안정했는데, useQuery로 서버 상태화 했다. 또한 서버 상태가 loadinng, error 상태인 경우 적절한 return 처리를 하지 않아서 페이지가 망가졌던 이슈를 해결했다.
Open
프로필 페이지
2024/04/12 18:36
3주차
중간발표
중간발표를 하고 튜터님으로부터 피드백을 받고 팀원들이랑 회고하는 시간을 가졌다. 사용자에게 더 나은 UX를 제공할 수 있는 더 좋은 서비스를 만들기 위해 오늘 피드백과 회고 내용을 기반으로 남은 시간동안 지치지말고 더 노력해야겠다
Open
중간발표
2024/04/15 13:23
4주차
기능 구현
로그인한 사용자가 만든 퀴즈인 경우 삭제하기 버튼을 출력하고, 클릭 시 해당 퀴즈를 삭제하는 기능을 구현했다. supabase에서 sql로 외래키 설정을 넣어두어 quizzes 테이블에서 항목을 삭제하는 것만으로도 연결된 questions와 options가 함께 정상적으로 삭제된다.
Open
CRUD
퀴즈만들기 에디터
2024/04/15 13:24
4주차
기술적 의사결정
MVP는 남아있는 부분, 보완할 부분을 제외하면 거의 구현 완료되어 초기 기획 때 ‘여유가 되면 해보는’ 걸로 보류해뒀던 추가 기능들을 그냥 해보기로 의사결정 하고, 함께 논의하여 분업했다.
Open
추가기능
2024/04/16 15:01
4주차
기능 구현
퀴즈 수정하기 기능을 구현하기 위해 퀴즈 상세 페이지에서 ‘수정’ 버튼 클릭 시 ?id={id}를 url 뒤에 붙여 퀴즈 만들기 페이지로 이동하도록 하고, 이렇게 이동한 경우 id에 해당하는 기존 퀴즈&문제&선택지 정보를 불러와 일부 state 초깃값에 할당하는 것까지 성공했다. 지금 타이밍에 [id] 폴더링으로 구조 변경을 하기가 번거로운 느낌이 들어서 지난 프로젝트때 해봤던 쿼리를 붙여 이동하는 방식으로 시도하고 있다.
Open
CRUD
퀴즈만들기 에디터
2024/04/16 14:56
4주차
리팩토링/구조화
quiz 부분 라우팅 구조를 변경했고, 퀴즈 만들기에서 사용되는 QuizForm 컴포넌트를 분리하여 quiz page와quiz/edit page에서 공통적으로 사용하고 등록하기 핸들러에서 실행되는 함수만 달라지는 느낌으로 리팩토링했다.
Open
그외 기타..
2024/04/18 14:42
4주차
모의면접 준비
케이뱅크 프론트엔드 신입 개발 직무에 지원한다는 가정 하에 지원동기, 성격의 장/단점, 개발자로서의 가치관, 1분 자기소개 등을 간략하게 작성하고, 예상 질문에 대한 답변을 고민해보았다.
Open
모의면접 준비
2024/04/18 14:42
4주차
오류 개선
그외 기타..
2024/04/18 14:42
4주차
오류 개선
퀴즈 수정하기 클릭 시 ?id={id} 형식으로 url에 쿼리를 붙여 이동하도록 하고 이동 후 url에서 매개 변수를 뽑아 id로 활용하는 식으로 구현했었는데, 빌드 시 window.location.search가 서버사이드에서도 렌더링 된다고 빌드 오류가 뜨는 문제가 있었다. 쿼리 이동이 아니라 라우팅 이동으로 로직을 수정해야 할 것 같고, 일단은 수정하기 기능이 정상적으로 작동하지 않아 버튼을 비활성화 해두고 유저테스트를 진행해야 하겠다.
Open
CRUD
2024/04/18 14:42
4주차
기능 구현
설정 언어별 자동 라우팅을 지원하는 다국어 설정 라이브러리 i18next를 설치해서 사용하기 위한 기본 셋팅을 해보았다. 설정을 위해 next.config.js 파일을 새로 만들라는 가이드라인이 있었는데, CRA를 하면서 우리 프로젝트에는 next.config.mjs파일이 이미 존재하고 있어서 어떤 것을 사용해야 할지 튜터님께 질문을 드렸다. next.js에서는 mjs파일을 쓰는 것이 권장되고 있고, 여기서는 commonJs가 아니라 ES modules 형식으로 import/export 하는 문법을 사용한다는 것을 알게 되었다.
Open
다국어 기능
2024/04/18 14:42
4주차
오류 개선
퀴즈 삭제하기에서 라우팅 코드가 onSuccess 블록 안에 들어가야 했는데 그게 밖에 있어서 제대로 invalidateQueries가 안되었던 문제점이 있었다. 사소한 실수가 큰 패닉을 불러일으키는 아주 좋은 사례ㅎ
Open
CRUD
2024/04/19 15:50
4주차
오류 개선
퀴즈 리스트 페이지에서 로그인한 유저와 프로필 정보를 불러오는 useEffect 훅에 의존성배열 설정이 잘못되어 있어서 데이터를 무한으로 요청하는 문제점이 있었다. 의존성배열을 비워줌으로써 수정했다
Open
퀴즈리스트 페이지
2024/04/19 15:50
4주차
기능 구현
타자 연습 게임 시 효과음이 들어가면 좋겠다고 생각해서 무작정 넣어봤는데 dev 모드에서는 깔끔하게 잘되던 것이 build 하려고 하니 계속 Audio를 찾을 수 없다는 오류가 떴다. 알고 보니 Audio 객체는 클라이언트 컴포넌트에서만 사용할 수 있어서 next.js에서 build 초반에 Audio 객체가 없는 것으로 인식이 되어서 뜨는 오류였다. Audio 객체가 undefined가 아닐 때만 불러오는 useEffect훅을 작성하여 해결했다.
Open
타자 연습
2024/04/19 15:50
4주차
기능 구현
i18next를 포기하고 자바스크립트 함수를 사용해서 다국어 언어 설정을 하도록 초기 셋팅을 해서 팀원들과 공유했다. 퀴즈 만들기 에디터와 헤더 부분을 적용했다. 헤더에 있는 토글 스위치로 전역으로 관리하는 언어 모드 상태를 변경하고 그에 따라 페이지 언어를 설정한 언어로 바꾸어 출력하는 시스템이다. 생각보다 작업이 크게 까다롭지 않고 빠르게 될 수 있어서 다행이다.
Open
다국어 기능
2024/04/19 15:50
4주차
기능 구현
오랜 염원이었던 퀴즈 리스트 페이지의 데이터 무한 스크롤을 구현했다. 뭔가 좋은 활용 예시가 딱 하나만 있었어도 좋았을텐데… 관련 키워드로 구글링한 모든 게시글을 다 읽어봤는데 모든 코드가 각자 다 달라서 참고하기가 어려워서 처음에 좀 힘들었다… 구현 하고 나니까 이해가 되는 느낌이다. useInfiniteQuery를 사용하면 다 똑같은데, 구조분해할당으로 hasNextPage, fetchNextPage를 가져와서 무한스크롤 구현이 필요한 기능들을 사용할 수 있다. 스크롤 이동을 추적하여 hasNextPage === true 일 때 fetchNextPage를 실행시켜 다음 데이터를 불러오면 된다.
Open
무한스크롤
2024/04/23 02:50
5주차
오류 개선
타자 연습
2024/04/23 02:50
5주차
기능 구현
우리 서비스의 제일 마지막 기능인 한글 자모 학습페이지 기초 구조를 만들었다. 자음부터 시작했는데, 자음을 보기 좋게 배치하기 위해 중간중간 빈 항목을 집어넣어서 실제 자음 갯수보다 요소가 많은 객체를 가지고 어떻게 1:1로 오디오 파일을 연결해서 재생할 수 있을지 걱정이다.
Open
자모 학습 페이지
2024/04/23 02:50
5주차
CSS
모바일 스타일링을 시작하기에 앞서 감을 잡기 위해 헤더부터 시작해봤다. 처음에는 너무 막막했는데 직접 해보니 겁먹었던 것만큼 너무 복잡하거나 어려운 일은 아니었다. 테일윈드의 config 설정을 통해 쉽고 편리하게 기기별 반응형 사이트를 만들 수 있겠구나 십분 느낄 수 있었다.
Open
공통 컴포넌트
2024/04/23 02:50
5주차
CSS
퀴즈 리스트 페이지 모바일 스타일링을 했다. PC버전과 너무 달라지는 부분이 있다면 PC에서 사용하던 부분을 hidden처리하고, 새로 사용할 컴포넌트를 사용할 수 있었다. 같은 모바일 환경이라도 기기에 따라서 정말 다양한 레이아웃을 고려해야한다는 사실을 깨달았다.
Open
퀴즈리스트 페이지
2024/04/24 15:35
5주차
CSS
퀴즈만들기 에디터 페이지 모바일 작업을 했다. 똑같은 input이지만 모바일에서는 크기가 작아 클릭에 어려움이 있으면 안되니까 높이를 키워줬다. 가로 너비 480px에서는 아주 예쁘게 보이는데, 더 좁은 기기에서는 레이아웃이 깨지는 부분이 있어서 이 부분을 내일 좀 더 손봐야 할 것 같다.
Open
퀴즈만들기 에디터
2024/04/24 15:35
5주차
오류 개선
퀴즈만들기 에디터
2024/04/24 15:35
5주차
CSS
프로필 페이지 모바일 작업을 했다. 나의 레벨, 점수 영역에 예전에 내용 없고 가로 1px로 구성된 배경색만 들어간 div를 사용해서 야매(?)로 구분선을 넣어뒀었는데 이렇게 하면 안되겠구나 하고 느꼈다….^^…. 일단 그렇게 해둔 건 hidden 처리하고 모바일 레이아웃 기획에 맞게 수정했다.
Open
프로필 페이지
2024/04/23 02:50
5주차
기능 구현
퀴즈 만들기 에디터에서 ‘등록하기’ 버튼을 여러번 클릭 시 게시글이 여러 개 등록되는 문제가 있었는데, lodash 라이브러리를 통해 등록 핸들러에 1초 디바운싱을 걸어주어 문제를 해결했다.
Open
디바운싱
퀴즈만들기 에디터
2024/04/24 15:37
5주차
기타사항
타자 연습 게임에 더 다양한 효과음과 브금을 추가했다. 훨씬 더 게임같은 느낌이 되었다. 재생이 끝나지 않은 똑같은 음성파일을 겹쳐서 재생하기 위해서는 재생이 일어날 때마다 인스턴스를 생성해야 한다는 것을 알게 되었다. 이제 빛의 속도로 타자를 치는 유저가 여러 개의 단어를 빠르게 터뜨릴 때 효과음이 바로바로 재생된다.
Open
타자 연습
2024/04/25 16:05
5주차
트러블슈팅
자모 학습페이지 구현 시 index가 맞지 않아서 map을 돌릴 때 예외처리 해줘야 하는 부분이 어려웠다. 또 객체의 index는 0부터 시작하는데 length는 1부터 세어야해서 너무 헷갈리다보니 머리에 과부하가…. 나는 수학이랑은 영 맞지 않는다는 것을 다시 한 번 깨달았다. 또한 map을 돌리면서 항목마다 모두 똑같은 동그란 div를 만들어주다가, 18번째 요소만 동그란 div안에 반반씩 나누어서 각각 따로 클릭되도록 해야해서 처음에는 useRef를 사용해서 클릭을 추적하도록 했는데 소용이 없었다. e.target을 콘솔 찍어서 내부를 살펴보고 parentNode에 있는 요소를 뽑아내서 조건부렌더링 및 조건부 함수를 적용할 수 있었다. 약간 하드코딩 같아서 다른 좋은 방법이 있을 것 같다…
Open
자모 학습 페이지
2024/04/25 16:05
5주차
기능 구현
퀴즈 수정하기 기능 드디어 구현… 기존에 올라가 있었던 내용을 수정해야 한다는 생각만 하느라 어렵게 돌아가고 있었는데, ‘등록하기’ 버튼을 클릭하면 퀴즈 썸네일/타이틀/인포 만 update하고, 나머지 questions/options는 올라와 있는 걸 모두 삭제하고 다시 insert하는 식으로 구현했다. 현업에서는 삭제하기 기능을 구현할 때 실제로 항목을 완전히 삭제하는 방식으로는 잘 하지 않고, 이번에 신고하기 기능의 경우처럼 is_deleted 여부를 체크하는 식으로 많이 한다고 한다.
Open
CRUD
퀴즈만들기 에디터
2024/04/29 13:33
6주차
CSS
그외 기타..
2024/04/29 13:33
6주차
Load more
5분 기록 보드 사용법
1.
새로 만들기를 누르면 기록 일자에 현재 시각이 자동으로 찍힙니다. 누르기만 하세요!
2.
다음으로 대분류를 체크해 주세요. 대분류는 반드시 하나만 기록합니다.
3.
이제, 5분 기록 내용을 채워주세요. 자세히 쓰지 않아도 됩니다. 오늘 무엇을 했는지 1~3줄만 써 주세요.
•
만약 테스트 같은 것을 했다거나, 오류 등을 수정했다면, 나중에 기억할 수 있게 사진 정도만 캡쳐해서 담아두세요.
4.
다 쓰고 나서, 소분류를 채워주세요. 소분류는 여러개 체크해도 괜찮습니다.
5.
일정 분류는 이번주에 무엇을 했는지 표시하는 용도입니다. 이렇게 작성하면 5분 기록 완료!
주차별 보기
대분류 보기
소분류 보기
‘5분 기록 보드’ - 이렇게 쓰세요!
Copyright 2024. ⓒ TeamSparta All rights reserved.