하루에 5분만 꾸준히 기록 해 두면, 이력서 작성을 위해 고민하는 20시간을 절약할 수 있어요!
Table
주차별
대분류
소분류
Search
대분류
5분 기록
소분류
기록일자
일정 분류
메모/생각정리
기획
2024/03/26 14:32
2주차
기술적 의사결정
구현할 기능 구체화하고 기술 스택&사이트명&사이트 컨셉을 결정한 후에 자세한 사이트 레퍼런스 조사를 진행했다. 또, 페이지 라우팅 구조 설계, API 명세서 작성, 와이어프레임 약간 제작했..다
Open
기획
2024/03/27 14:58
2주차
기술적 의사결정
와이어 프레임 제작 & API 명제 작성을 마무리하고 사용자 입장에서 퀴즈 데이터가 어떻게 들어갈지 생각하며 DB-ERD&Supabase DB를 정리했다. 튜터님께 태스크 관리 툴 사용을 추천받아서 Jira를 쓰기로 결정했다. 서로 논의하면서 깃 issue & PR 템플릿을 작성하고 커밋 컨벤션까지 정했다.
Open
기획
2024/03/28 14:28
2주차
기술적 의사결정
중간 발표까지 남은 시간, 기능 개발 시간 고려해서 스케줄 조정을 했다. 튜터님 DB-ERD 피드백 받고 팀원들과 얘기하며 다시 수정보완했다. 코드 컨벤션 정한 후 CRA 셋업에 들어갔고 팀장님 화공 보면서 다같이 의견 나누며 프로젝트 세팅했다. issue, PR 템플릿도 깃허브에 적용! 마지막에 역할 분담까지 완료했다.
Open
기획
2024/03/29 12:45
2주차
기능 구현
question 기본 form 구현, Image 태그 url hostname 추가, quiz에서 받아온 questionState 타이틀, 객관식/주관식 타입, 주관식 정답 변경되도록, enum 타입 값 명시적으로 변경… 바꾸는 값이 많아져서 너무 헷갈리지만.. 만들었던 todo 보면서 감을 잡고있다….
Open
퀴즈 만들기 에디터
CRUD
2024/04/01 13:46
3주차
기능 구현
input radio 버튼이 문항마다 표시되도록 수정했다. id를 유니크하게 주기만 하면 되는거였는데, 속성 용도를 제대로 알고 써야겠다. 그 다음에 문항 추가, 삭제 기능을 구현하고 입력 시 useState 반영이 되도록 했다. 질문 안에 있는 문항을 변경해야 해서 map을 여러번 돌렸는데 함수 작성이 좀 헷갈렸다.. 정확히 로직을 파악하면서 구현해야겠다.
Open
퀴즈 만들기 에디터
CRUD
2024/04/02 13:58
3주차
기능 구현
선택지들 checkbox checked 속성에 isAnswer 넣어서 한개만 선택되도록 함. 동시에 클릭하면 isAnswer true로 바꿔서 정답처리! 이미지 첨부하면 미리보기 뜨도록 하고 URL questions state에 반영, ref 를 사용해 input을 가져오고 있었는데 마지막 input으로 인식하는 오류가 있어 getElementId로 변경함.
Open
퀴즈 만들기 에디터
CRUD
2024/04/03 13:42
3주차
오류 개선
어제 작업했던 getElementbyId 를 지우고 input&label 을 연결해서 숨겨둔 파일 첨부 버튼이 선택되게 했다. 이미지 id 부분에서 prop ‘id’ did match 에러가 떴었는데 렌더링 타이밍 때문에 서버/클라이언트 간에서 주는 아이디가 달라 생긴 문제였다. 로드가 된 뒤에 이미지 id 가 주어지도록 수정했다.
Open
퀴즈 만들기 에디터
CRUD
2024/04/04 14:19
3주차
메모/생각정리
퀴즈 만들기 에디터
2024/04/08 14:07
3주차
기능 구현
퀴즈 풀기 페이지 레이아웃을 조금 구현해놨고, 공통으로 들어가는 Header, SubHeader, Footer 의 높이 단위를 vh로 바꿔놓았다. 테스트가 끝나고 긴장이 풀려서 오늘 집중을 잘 못한거 같다. 주말에 많이 작업해야겠다.
Open
퀴즈 풀기
2024/04/05 13:42
3주차
기타사항
코딩 테스트로 태스크 앱 구현을 했는데, 오픈북이었지만.. add 기능도 완성하지 못했다. 타입 작성이 익숙치 않아서 간단한 오류도 잡아내지 못했고, 전 과제를 찾아보는데만 급급했던 거 같다. 다음 테스트 땐 편한 마음으로.. 정확히 로직을 이해하며 작성해야겠다.
Open
면접 준비
2024/04/08 14:03
3주차
기능 구현
웹버전에서 메뉴 페이지를 안쓰게 되어서 헤더에 메뉴를 추가하고 링크를 연결해뒀다. 퀴즈 리스트 페이지에서 퀴즈를 클릭하면 id 를 넘겨주고 퀴즈 풀기 페이지에서 params 를 받아와 퀴즈 정보, 퀘스천 정보, 옵션 정보를 불러왔다. (옵션이 중복 출력되는 문제가 있다..)
Open
퀴즈 풀기
2024/04/08 14:01
4주차
메모/생각정리
사용자가 푼 퀘스천의 값을 어떻게 저장해야할지 감이 안와서 손으로 써보며 데이터 정리를 해봤다. (결국엔 잘못된 방법이었지만..) 쓰면서 정리하니 만들어야 하는 구조가 잘 그려졌다.
Open
퀴즈 풀기
2024/04/09 13:55
4주차
기능 구현
supabase에 올라가 있는 퀘스천을 가져오고, 사용자가 입력하는 정답의 상태를 따로 만들어서 제출 버튼을 눌렀을 때 둘을 비교하는 방식으로 채점을 구현했다. DB 구조를 착각하고 있어서 시간을 많이 날린 거 같다. 데이터 구조 파악 제대로 하기..
Open
퀴즈 풀기
2024/04/09 13:55
4주차
기능 구현
퀴즈 페이지에서 비로그인 상태일 때 만들기나 풀기를 클릭하면 로그인 권장 모달이 뜨도록 했다. 퀴즈 풀기 페이지에선 점수가 DB 에 올라가도록 했고 풀었던 문제라면 점수가 업데이트 되도록 했다. useQuery & useMutation 개념이 아직 좀 헷갈린다. 사용할 때와 아닐 때 차이점을 정리해봐야겠다..
Open
퀴즈 풀기
CRUD
2024/04/11 14:24
4주차
오류 개선
퀴즈 풀기 페이지를 들어가면 잠깐 다른 퀴즈 데이터가 뜨는 오류가 있었다. 이유를 몰라서 캐시가 남는건지.. ? 하고 있었는데 팀원분이 도와주셔서 해결할 수 있었다. 원인은 쿼리키였다! 퀴즈 데이터를 가져올 때마다 쿼리키로 테이블 이름인 ‘quizzes’를 전달했었는데, 쿼리키가 좀 더 유니크하도록 퀴즈의 id 까지 전달해줬더니 원하는 퀴즈의 데이터가 바로 잘 불러와졌다! 중복 옵션 불러오는 것도 이 문제 때문이었는데.. 쿼리키를 잘 구성해야겠다..
Open
퀴즈 풀기
CRUD
2024/04/12 15:54
4주차
CSS
폰트 적용, 프로필 페이지 시멘틱 태그 & 모달 CSS를 수정 했고 내가 푼 퀴즈 갯수를 불러왔다. 퀴즈 리스트 페이지에선 카드 이미지 기울임을 조정하고 z-index 로 뒤에 있는 버튼들을 이미지 위에 위치하도록 했다. 시멘틱 태그를 더 유용하게 쓸 수 있도록 해야겠다.
Open
프로필
퀴즈 리스트
2024/04/12 15:54
4주차
기타사항
모의면접을 보았는데 쓰로틀링/디바운싱, var/let/const 차이에 대한 질문을 받았다. 쓰로틀링/디바운싱은 거의 대답을 못해서 튜터님께서 개념 설명해둔 사이트를 보여주셨다. 예시 이미지가 잘 나와있어서 이해가 잘 됐던 것 같다. var/let/const 차이에 대한 질문은 선언, 스코프, 호이스팅 차이로 답변을 했는데 let/const 도 호이스팅이 되지만 선언 전에 호출할 순 없다고 잘못 알고 있었다. console 로 확인하면서 둘은 호이스팅이 안된다고 설명을 해주셨고 두 문제 모두 다시 개념 정리를 잘 해놔야 할 것 같다.
Open
면접 준비
2024/04/12 16:18
4주차
발표 준비
시연 영상 촬영 및 편집을 했다. 찍다보면 로딩이 느리다거나 작은 오류들이 보이는데 렌더링 속도, 사소한 CSS 같은 부분들도 꼼꼼히 디벨롭시켜봐야겠다는 생각이 들었다. 그래도 완성된 영상을 보면 뿌듯..하다.
Open
발표 자료 제작
2024/04/15 13:46
5주차
메모/생각정리
중간 발표 후 튜터님 피드백을 받았는데, 좋은 피드백을 그래도 많이.. 받았고, 더 완성도를 높일 방법들을 조언해 주셔서 잘 참고해서 디벨롭시켜야겠다고 생각했다. 팀원들과 잠깐 휴식 시간을 가진 뒤 다시 각자 남은 할 일들을 체크 해봤다. 그리고 남은 시간동안 다 같이 더 구현해 볼 기능들이 뭐가 있는지 정리하고 러프하게 역할 분담을 했다. 마지막까지 좀 더 힘내서 후회 없는 프로젝트를 완성했음 한다!
Open
중간 발표
프로젝트 기획
2024/04/15 13:46
5주차
기능 구현
프로필 페이지에 총 점수에 따라 레벨이 표시되도록 했다. 우선 삼항연산자로 표기했는데 나중에(?) 데이터로 넣어놔도 좋을 것같다. 레벨에 따른 문구도 추가하면 좋을 듯하다.
Open
프로필
2024/04/16 15:03
5주차
기능 구현
퀴즈 만들기 페이지에서 문제나 옵션이 최대 갯수로 만들어져있을 때 추가하기 버튼이 회색으로 표시되도록 했다. 기존엔 똑같이 파란 버튼이었는데 작동하지 않을 버튼인데 똑같은 색에 클릭해야 toast가 뜨는게 어색해서 수정을 하게 됐다. 문구를 추가해야 하나 하다가 클릭했을 때만 문구가 생기는 것도 조금 어색할 거 같아서..? 회색에 cursot-default 로 해두고 그래도 클릭 시 toast를 띄우게 했다.
Open
퀴즈 만들기 에디터
2024/04/16 15:03
5주차
기능 구현
나가기 버튼과 문제 페이지네이션을 구현했다. 나가기 버튼은 문제를 풀다가 클릭했을 시엔 변경 내용이 사라진다는 경고창을 띄웠다. page 스테이션을 만들어서 그에 맞는 문제가 표시되도록 하고, 처음/마지막 페이지는 버튼이 클릭되지 않게 했다. 결과 페이지에선 모든 문제들을 한 번에 볼 수 있도록 구현했다. 만들기 전엔 막막해서.. 미루고 있던 작업인데 생각보다 쉽게 된 것 같다. CSS에서 좀 시간을 잡아먹었지만..
Open
퀴즈 풀기
2024/04/17 16:40
5주차
CSS
웹 기준 전체 레이아웃 크기를 1440px 로 변경했다. 변경하면서 많이 깨질 줄 알았는데 다행히 많이 무너지진 않아서 생각보다 금방 한 것 같다. 모바일할 때 좀 힘들겠지만.. 그래도 차근차근 하나씩 변경해야겠다.
Open
레이아웃
메인페이지
2024/04/17 16:43
5주차
오류 개선
퀴즈 풀기 중 주관식 답을 입력했다가 지워도 제출이 되는 문제가 있었다. 빈 값이 없는지 확인하는 조건을 추가해서 오류를 해결했다. 또, 문제가 하나만 있는 퀴즈라면 페이지네이션 버튼이 표시되지 않도록 했다. 또, 레이아웃 변경을 하니까 타자연습 중 단어들이 레이아웃 밖에서 내려오는 오류가 있었는데 조건문을 걸어서 정상적으로 gameAreaWidth 가 잡히도록 했다.
Open
퀴즈 풀기
타자 연습
2024/04/17 16:43
5주차
기타사항
우리가 페이지에 넣어둘 파일들은 supabase url 을 assets 로 통일했다. 로컬에서도 assets 폴더가 있어서 코드에서 넣는 페이지들이 있는데 한 곳에 넣어둬야 할지 고민(입니다..)
Open
공통 컴포넌트
2024/04/18 14:41
5주차
CSS
소개 페이지 CSS 를 수정 중이다. global.css 에 :after/:before 가 사용되고 있는데, tailwind 로 바꿀 수 있는지 찾아봐야겠다. 나의 활동 페이지에 테이블 높이를 고정시켰다. tr 이나 td 에 height 를 주려했는데 tailwind 에서 그 둘에 h 가 지원이 안된다 해서 table 을 감싸는 article 을 추가해서 높이를 줬다.
Open
사이트 소개
나의 활동
2024/04/18 14:42
5주차
CSS
웹 버전 레이아웃 CSS 를 마무리했다. 모바일 크기 화면의 퀴즈리스트 & 멤버리스트 grid 를 col-2 로 조정했다. tailwind screens 설정이 아직 헷갈리는데.. 제대로 모바일까지 CSS 를 들어가면 좀 이해가 될 거 같다. 조정하다보니 왜 tailwind 가 모바일 우선의 반응형 디자인이 쉽다고 하는건지.. 알 거 같다.
Open
퀴즈 리스트
메인페이지
사이트 소개
2024/04/19 16:03
5주차
기능 구현
admin, reports 로 관리하던 신고글들을 하나의 테이블로 합쳤다. 기획할 땐 두 개의 테이블이 꼭 필요할 것만 같았는데 튜터님에게 리팩토링을 받고 고쳐보니 한개의 테이블로도 충분한 데이터였다. 로직이 정말 간단해져서 좋았고…. 왜 첨엔 어렵게 생각했나 싶었다. 다 완성했다 생각해서 merge 까지 했는데 팀원분이 에러를 발견하셨다. 허허. 다시 테스트해보고 관리자 페이지까지 수정해봐야겠다!
Open
신고
2024/04/19 16:04
5주차
기능 구현
유저 피드백을 받은 것들 중에서 가능한 기능들을 수정했다! 먼저 객관신 옵션들을 radio 버튼 말고도 전체 input 이 선택되게 했다. 또, 결과 모드에서 각 문제마다 정답을 볼 수 있게 아이콘을 달아왔다. 처음엔 풀기 페이지에 state 를 만들었었는데, 그러니까 모든 정답 버튼이 연결되어 있어서 문제마다 state 를 따로 만들어줬다. 다음은 신고 기능에 사유를 받을 수 있도록 했다. (간단해졌던 로직이.. 조금 바꼈지만..) 그리고 퀴즈 풀기 , 신고 번역을 마무리하고 있다. 해보고싶었던 기능이라 재밌었다. 그….런데 번역 hook 을 불러올 수 없는 페이지가 몇 개 있어서 의문이다.
Open
퀴즈 풀기
신고
다국어
2024/04/22 16:41
6주차
메모/생각정리
2번 째 기술 면접을 보았다. 쓰로틀링 & 디바운싱 개념 문제가 또 나왔는데 거의 보고했지만.. 그래도 저번 면접 후 작성을 해놔서 정리가 잘 되있는 것 같다고 하셨다! 비동기 부분은 콜백 지옥이 왜 안좋을까..? 에 빠져 당황했지만 그래도 좋은 팁을 얻은 것 같다. 너스레 잘 떨기..
Open
면접 준비
2024/04/22 16:41
6주차
기능 구현
신고 사유 받는 prompt를 20자로 제한했다. 지금은 입력을 다 받고서 확인을 눌렀을 때 20자가 넘으면 toast 알림이 뜨고있다. 다른 input 들처럼 20자가 넘으면 입력이 안되게 하고싶지만.. prompt 는 그 기능이 없는거 같고 모달창을 만들기엔… 시간이 없.. 🥲 그리고 퀴즈 풀기 페이지에서 모든 문제를 풀어야 제출하기 버튼이 파란색으로 변하도록 했다. 회색일 때도 클릭은 가능하지만 pointer 가 뜨지 않게 했고, 클릭하면 모든 문제를 다 풀라는 toast 가 뜬다. 피드백을 보면 아예 마지막에 갔을 때 버튼이 뜨면 좋을거 같다는 의견이 있었지만… 지금 상태도 좋은거 같ㄷ..앞 문제를 다시 풀고싶을 수도 있고..
Open
신고
퀴즈 풀기
2024/04/23 16:46
6주차
CSS
모바일 css 작업을 하다가 지금 방법이 좀 안맞는거 같아서 팀원들과 상의하다가 tailwind.config screens 설정을 다 뒤엎었다. 원랜 tailwind 가 모바이 퍼스트라고 해서 lg, md(웹): min w 만 지정을 해뒀었는데(모바일은 기본), 얘기하다보니 max 가 필요할거 같아서 전부 min, max 를 지정하고 단계도 sm ~ xl 까지 지정을 했었다. 하다보니 간단하게 만들려고 수정을 하려던건데 비슷하게 복잡해진거 같아서 튜터님께 여쭤보러 갔고 우리는 웹을 주로 사용하는 서비스이니 웹 퍼스트로 작업을 해야 한다고 하셨다. 그래서 낮까지 했던 css 를 전부 지우고.. sm, md: max w 를 지정하기로 했다. 얘기할 땐 힘들었는데.. max 로 잡고 다시 css 작업을 하니까 훨씬 편해진 거 같다. 생각보다 모바일 적용이 잘 되는듯한.. 아마도..? 아무튼 뿌듯..
Open
퀴즈 풀기
2024/04/23 16:48
6주차
기능 구현
퀴즈 풀기에서 답을 입력하고 enter 하면 다음 문제로 넘어가도록 했다. input 을 form 으로 안묶어놔서 안될거라 생각했는데 input 에 onkeydown 이란 이벤트를 이용해서 하니 잘 적용이 됐다! 엔터로 넘기는게 되니까 다음 input 창에 포커스가 됐으면 좋을거 같은데.. input 을 map 을 돌린거라 useRef 적용하는게 너무 헷갈린다. 맑은 정신일 때 한 번 도전을 해봐야겠다. 그리고 나가기 버튼 수정했다! 파란색에 아이콘 들어간! 이제 잘 보임! alert 도 번역함!
Open
퀴즈 풀기
다국어
2024/04/24 15:31
6주차
기능 구현
모바일 헤더를 제작했다. 스크롤을 내리면 메뉴가 사라지고 올리면 메뉴가 뜨게 했다! 어려울 줄 알았는데 생각보다 짧은 코드..gpt 고마워.. 그런데 메뉴 아이콘에 svg 파일을 넣어놨는데 컬러가 tailwind.config 에 적어둔 변수가 안먹혀서 그냥 #색상코드로 적어뒀다. 너무나 신경쓰이지만 해결방법을 못찾았다. 이것도 맑은 정신일 때 다시 한 번 찾아볼 것..
Open
공통 컴포넌트
2024/04/24 15:31
6주차
오류 개선
폰트 최적화를 진행했다. next/google 폰트를 쓸 때 dev 시 터미널에서 로딩 오류가 뜰 때가 있었는데, 사람마다 이유가 다 달랐고.. 다운로드 된 폰트를 넣는게 확실하다는 말이 많았다. 그래서 사용 중이던 구글 폰트를 다운받고 ttf, woff, woff2 subset 한 파일로 폰트를 변경했다. 속도는 next/google 이 빠르긴 하지만 에러가 있었으니.. 다운 폰트를 쓰는게 맞는 거 같다. 프리로드까지 적용시키니까 그렇게 느리진 않다..!
Open
최적화
2024/04/25 16:16
6주차
기능 구현
관리자 id 를 여러개 등록이 가능하도록 했다. ADMIN 배열에 포함되는 id 라면 관리자 기능이 적용되도록 했다. 지금은 코드에 관리자 id 를 써주고 있는데.. 나중에 DB 에 등록하면 편할거 같다.
Open
관리자 페이지
2024/04/25 16:17
6주차
기능 구현
결과 모드에서 정답이 하나 이상이면 confetti 효과가 나오게 했다. 생각보다 간단하게 구현됐고.. (tailwind color 가져오는게 좀 복잡하긴 했지만) 넣어두니 예쁘다! 그리고 퀴즈 풀기 컴포넌트를 정리했는데, 넘겨주는 props 가 많아서 좀 고민이였다. 그래도 풀기 페이지 코드가 너무 기니.. 분리는 해뒀다.
Open
퀴즈 풀기
2024/04/25 16:18
6주차
Load more
5분 기록 보드 사용법
1.
새로 만들기를 누르면 기록 일자에 현재 시각이 자동으로 찍힙니다. 누르기만 하세요!
2.
다음으로 대분류를 체크해 주세요. 대분류는 반드시 하나만 기록합니다.
3.
이제, 5분 기록 내용을 채워주세요. 자세히 쓰지 않아도 됩니다. 오늘 무엇을 했는지 1~3줄만 써 주세요.
•
만약 테스트 같은 것을 했다거나, 오류 등을 수정했다면, 나중에 기억할 수 있게 사진 정도만 캡쳐해서 담아두세요.
4.
다 쓰고 나서, 소분류를 채워주세요. 소분류는 여러개 체크해도 괜찮습니다.
5.
일정 분류는 이번주에 무엇을 했는지 표시하는 용도입니다. 이렇게 작성하면 5분 기록 완료!
주차별 보기
대분류 보기
소분류 보기
‘5분 기록 보드’ - 이렇게 쓰세요!
Copyright 2024. ⓒ TeamSparta All rights reserved.