하루에 5분만 꾸준히 기록 해 두면, 이력서 작성을 위해 고민하는 20시간을 절약할 수 있어요!
Table
주차별
대분류
소분류
Search
대분류
5분 기록
소분류
기록일자
일정 분류
메모/생각정리
프로젝트 기획
2024/03/26 14:02
1주차
메모/생각정리
어제까지 구상한 기획을 구체화 및 사이트명을 정했다.각 기능에 필요한 기술 스택, 라이브러리 등을 결정하고 완성하진 못했지만 API 명세서 작성을 하여 명세서를 기반으로 페이지 라우팅 설계를 진행했다.
Open
프로젝트 기획
2024/03/27 14:53
1주차
메모/생각정리
와이어프레임에 각 페이지의 기능을 고려하여 수정 하였고, 수정한 와이어프레임을 기반으로 ERD와 API 명세서를 작성했다. 그리고 튜터님의 추천으로 프로젝트 스케쥴 관리를 하기로 하여 Jira 를 사용해서 다같이 스케쥴을 관리하기로 했다. 또한 깃허브 세팅과 컨벤션을 정하고 CSS 방식을 결정했다.
Open
프로젝트 기획
2024/03/28 14:24
1주차
메모/생각정리
프로젝트 셋업을 하기 전 팀원들과 다같이 ERD를 수정하고 튜터님과 함께 확인하면서 최종 수정을 완료했다. 그리고 각 기능별 구현 시간을 예상해보고 역할까지 분담을 마쳤다. supabase policy 이슈가 있었는데 튜터님과 의논 후 secret api 를 사용 사용하는 대신 server 에서만 사용하는 방법을 알려주셨고 회의 후 그 방안을 채택하기로 결정했다. 이제 주말에 각자 맡은 기능 구현을 시작해보기로 했다.
Open
프로젝트 기획
2024/03/29 12:44
1주차
트러블슈팅
기능 구현에 앞서 역할 분담을 하고 각 기능 스케쥴 설정을 완료했다. 이후 supabase posts 테이블에 저장된 데이터를 불러오려고 시도해봤는데 server side 에서 불러오고 불러온 데이터를 사용하는 과정에서 SSR 로 랜더링이 되어야하는데 SSG 로 랜더링이 되는 문제가 있었다. 해결 하기 위해 tanstack query 를 사용해보려고 했지만 ‘use client’ 환경에서만 사용이 가능하기에 바로 사용하지 못했고 팀원들과 의논해보며 해결방안을 찾아봤다. 일단은 현재 server side 에서 불러오려고 하는 이유는 policy 설정에 문제가 있어서 api key 를 secret 키로 사용하려고 했기 때문인데 다시 policy 설정을 해서 anon 키를 사용해보는 방안으로 결정했다.
Open
게시판
2024/04/01 13:50
2주차
기능 구현
supabase table policy 설정을 추가해서 커뮤니티 리스트 페이지에서 supabase 에 있는 데이터를 불러오는데 성공 했고, 카테고리를 눌렀을 때 해당하는 데이터만 필터링 하는 작업을 마쳤다. 다만 현재 table 에 Foreign keys 를 연결하는 과정에서 type 이 서로 맞지 않아 연결이 안되는 문제가 있어서 아직 해결 방안을 찾아보고있다. 페이지네이션 기능은 아직 감이 오지않아서 미뤄두고 post page 에 기본 폼을 만들고 supabase에 데이터를 추가하는 로직까지 구현을 해봤다.
Open
게시판
CRUD
2024/04/02 13:57
2주차
기능 구현
커뮤니티 리스트 페이지에 디자이너님이 만들어주신 와이어프레임을 기반으로 css 를 적용시켰다. 근데 리스트에 css 를 적용할 때 게시글들끼리 열이 맞아야하는데 열이 맞지않아서 table 로 바꿨더니 상세페이지로 이동하기 위해 만들어둔 Link 태그 때문에 table 이 이상해지는 문제가 생겼었다. 해결은 table 을 쓰는 대신 Link 기능말고 router 를 사용해서 상세페이지로 이동할 수 있도록 수정했다.
Open
게시판
2024/04/03 13:45
2주차
트러블슈팅
post 페이지에서는 react-quill 을 사용해서 기본 폼을 넣어뒀는데 내용이 supabase 에 추가는 되는데 폼 기능이 제대로 적용이 안되고있어서 수정해봐야할 것 같다.
Open
CRUD
2024/04/08 14:02
2주차
기능 구현
react-quill 사용해서 post 페이지 폼을 만들고있었는데 내용을 적으면 게시글이 잘 등록은 되고 supabase 에도 잘 올라가지만 html 태그가 같이 올라가는 현상이 발생했다. 해당 현상은 dangerouslySetInnerHTML 을 추가해서 뷰포트 환경에서는 없앤 상태로 보이게끔 만들었는데, dangerouslySetInnerHTML 을 사용하면 보안상의 문제가 생겨서 DOMPurify 라이브러리를 추가해서 JS 코드는 실행되지 않고 html만 그려주게 만들어서 보안 문제를 해결했다. 하지만 이상하게 underline 이랑 strike 는 적용이 되는데 bold, italic, 글씨 크기는 css 적용이 안됐다. 해결은 해당 서식을 부여하기 위해 따로 css 을 추가해서 내용을 보여주는 곳에 class 로 넣어줘서 해결했다.
Open
게시판
CRUD
2024/04/04 16:31
2주차
기능 구현
react-quill 로 에디터 구현은 마쳤는데 quill 자체 이미지 첨부기능을 이용할 시 base64로 변환된 상태로 올라가서 엄청난 길이의 string이 생기는 문제가 발생했다. 이 상태로 이용하면 여러장의 이미지를 첨부했을 경우 데이터 베이스에 많은 부화가 예상될뿐만 아니라 애초에 데이터베이스에 저장조차 되지 않는다. 따라서 base64 형식을 url 로 바꿔서 올려야 하는 문제가 남았다.
Open
CRUD
2024/04/05 13:39
2주차
기타사항
오늘 코딩 테스트를 봤는데 간단한 todo 기능이고 오픈북으로 진행했지만 제대로 한개의 기능조차 구현하지 못했다. 튜터님 앞에서 만들려고 하니 알던 내용도 못만들겠고 자신감있게 코드를 작성하지 못했던 것 같다. 다음 테스트에는 좀 더 적극적으로 자신감있게 코드를 작성해봐야 할 것 같다.
Open
그외 기타..
2024/04/08 14:01
2주차
기능 구현
커뮤니티 게시글 리스트에 페이지네이션 기능을 추가하여 게시글이 지정된 개수보다 많을 경우 페이지 넘버가 생성되고 페이지 버튼은 최대 5 페이지 까지 생성된다. 5페이지 이상부턴 > 버튼이 나타나 클릭 시 6 페이지가 생성된다.
Open
게시판
2024/04/08 14:00
3주차
메모/생각정리
커뮤니티 게시글 수정 및 삭제 기능을 구현하려고 했는데 게시글 상세정보에서 수정 버튼을 눌렀을 경우에 해당 게시글의 post id 를 가져오는 부분에서 생각 정리가 되지않아서 난감했다. 일단 본인이 작성한 게시글이 아닐경우엔 수정이 안되기 때문에 post id 를 가져오기보단 로그인 유저랑 해당 게시글을 비교해서 게시글의 내용을 불러오는 방법으로 생각을 해보는 중이다.
Open
CRUD
2024/04/08 14:00
3주차
기능 구현
게시글 수정과 삭제 기능을 구현했다. 원래는 게시글 상세페이지에서 수정 버튼 눌렀을 때 기존 작성 페이지에 게시글 내용을 가져오려고 했으나 갈피를 못잡겠어서 일단은 따로 수정 페이지를 만들어서 값들을 가져왔다. 삭제하기는 수정하기보다 간단하게 api 를 가져와서 삭제하도록 했고, 삭제와 수정같은 경우 마이페이지에서도 사용할 것을 예상해서 따로 공용컴포넌트 버튼으로 만들었다.
Open
CRUD
2024/04/09 14:00
3주차
기술적 의사결정
게시글을 수정할 때 첨부된 이미지는 따로 가져오는 로직이 없었는데 에디터 특성상 content 부분에 이미지 url 이 같이 들어가게 되어 content 값을 가져올 때 같이 가져올 수 있었다. 이후 storage 에 이미지나 게시글 삭제 시 storage 에첨부된 이미지도 없어지도록 해봐야할 것 같다.
Open
게시판
2024/04/09 14:00
3주차
트러블슈팅
게시글 수정 시 조건부로 user 정보를 비교하여 게시글 작성자와 로그인한 유저의 정보가 같을 시에만 수정, 삭제 버튼을 랜더링 하도록 구현했는데, 수정은 게시글 상세페이지에서 url 에 edit 을 추가입력할 경우 edit 페이지로 넘어갈 수 있는 문제가 발생했다. 해당 문제는 url 에 입력해서 edit 페이지를 접근하지 못하도록 막아야할 것 같다.
Open
CRUD
2024/04/09 14:00
3주차
기능 구현
나의 활동 페이지를 구현중이다. 로그인 상태에서 내가 쓴 게시글과 내가 만든 퀴즈 정보는 불러왔는데, 아직 내가 푼 퀴즈에 대한 DB 데이터 추가 로직은 없어서 나중에 추가되면 불러오고, 나머지 데이터를 전부 불러온 이후 CSS 작업을 할 예정이다.
Open
나의 활동페이지
2024/04/11 14:22
3주차
트러블슈팅
현재 커뮤니티에서 useEffect 로 데이터를 불러오는 로직에서 useQuery 를 사용해서 데이터를 불러올 수 있도록 수정하고있는데, if 문을 사용해서 조건적으로 데이터를 불러오고있는 부분에서 수정이 오래걸리고있다. 그리고 현재 작업중인 나의 활동페이지에서도 useEffect 로 불러오도록 구현하고있어서 Query 를 사용해서 불러오도록 바꾸고있다.
Open
나의 활동페이지
커뮤니티 페이지
2024/04/11 14:22
3주차
CSS
about 페이지 css 작업을 했다. 생각보다 요소들이 많고 배치를 신경 써야 하는 부분들이 많아서 시간이 꽤 걸렸다. 아직 about 페이지 이미지 파일을 받지 못해서 이미지 파일 받으면 추가하면 될 듯 하다. 그리고 my-activity 페이지도 마저 css 작업을 해서 일단은 갖춰야 할 기본적인 디자인은 완성한 것 같다
Open
소개 페이지
2024/04/12 16:09
3주차
기능 구현
my-activity 페이지에 내가 푼 문제 정보만 가져오는 작업을 추가로 진행했다. 해당 정보는 quiz-tries 에서 데이터를 가져올 때 외래키로 연결해둔 quizzes 에 id를 quiz-tries 의 quiz_id 와 같은 데이터의 id 와 title 을 가져와서 보여주도록 구현했다. 내가 푼 퀴즈도 마찬가지로 버튼을 클릭 했을 때만 리스트를 보여주도록 했다.
Open
나의 활동페이지
2024/04/12 16:09
3주차
중간발표
오늘 무려 중간 발표를 마쳤다. 다행히 중간 발표 전까지 팀원분들이 같이 열심히 작업해주시고 달려주셔서 목표로 하던 기능 구현들을 전부 구현할 수 있었다. 물론 개선되어야 하는 부분들이나 아직 부족한 부분들이 있었지만 튜터님 피드백으로는 사용자에게 제공되어도 괜찮을 정도로 완성도가 좋다고 해주셨다. 중간 발표 이후에도 아직 구현하고싶은 기능들이 많고 코드 전문성을 올리기 위해 튜터님과 리팩토링 과정이 남았기에 지치지말고 힘내서 달려봐야겠다.
Open
중간발표
2024/04/15 13:23
4주차
오류 개선
admin 페이지 접근 권한에 대해 고민이 많았다. 페이지 접근은 막을 수 있었으나 잠깐 랜더링 되는 순간이 있어서 그 순간 신고내역을 볼 수 있는 문제가 있었다. RLS 설정으로 이를 해결해볼려고 했으나 페이지에 데이터 불러오는건 막을 수 있었지만 신고 기능에서 에러가 발생했다. 계속해서 sql 에디터를 사용해서 설정해봤지만 해결되지 않았고 랜러딩 차제를 막는 방법을 팀원분이 도와주셔서 admin 계정으로 접속한 유저가 아니면 랜더링을 하지 않는 방법으로 해결할 수 있었다.
Open
관리자 페이지
2024/04/15 13:23
4주차
CSS
소개 페이지가 너무 확대돼있는 것 같은 느낌을 주어 전체적으로 사이즈를 줄이고 너비를 조정하는 등 css 를 수정했다. 추가로 디자이너님 사이트 정보를 넣고 팀원 소개 부분의 간격을 줄여서 사용자 입장에서 불편함이 없도록 구성했다.
Open
소개 페이지
2024/04/15 13:23
4주차
오류 개선
기존에는 내가 만든 퀴즈가 잘 가져와졌으나, 사용하던 api 가 quiz 와 question 에 외래키 연결을 추가하면서
문제가 발생했었다. 해당 문제는 api 호출 시 가져오는 데이터가 question 의 외래키 부분이랑 혼란이 있을 수 있어서 데이터를 가져오지 못했던 오류로 데이터를 명시적으로 적어주어 해결했다.
Open
나의 활동페이지
2024/04/15 13:30
4주차
Load more
5분 기록 보드 사용법
1.
새로 만들기를 누르면 기록 일자에 현재 시각이 자동으로 찍힙니다. 누르기만 하세요!
2.
다음으로 대분류를 체크해 주세요. 대분류는 반드시 하나만 기록합니다.
3.
이제, 5분 기록 내용을 채워주세요. 자세히 쓰지 않아도 됩니다. 오늘 무엇을 했는지 1~3줄만 써 주세요.
•
만약 테스트 같은 것을 했다거나, 오류 등을 수정했다면, 나중에 기억할 수 있게 사진 정도만 캡쳐해서 담아두세요.
4.
다 쓰고 나서, 소분류를 채워주세요. 소분류는 여러개 체크해도 괜찮습니다.
5.
일정 분류는 이번주에 무엇을 했는지 표시하는 용도입니다. 이렇게 작성하면 5분 기록 완료!
주차별 보기
대분류 보기
소분류 보기
‘5분 기록 보드’ - 이렇게 쓰세요!
Copyright 2024. ⓒ TeamSparta All rights reserved.