내일배움단 프로젝트 챌린지 1주차 개발일지 (22.02.09~22.02.16)

내일배움단 프로젝트 팀원 발표와 오리엔테이션, 첫 회의가 있었다.

편의점에서 사먹은 케이크에서 이 스티커가 나왔는데, 오늘이 프로젝트 시작일이니 기분 좋은 징조라고 여기기로 했다.

마침 조원분들은 모두 여성분이셨고, 에블바리 왕초보여서 살짝 부담이 덜했다.

짧은 회의 끝에 팀 이름은 '되새김질'로 정해졌다. 복습팀다운 네이밍 센스 크으으 👍🏻

아직 마지막주차 강의를 수강을 덜한 상태여서 팀원들께 민폐일까봐 걱정인데, 얼른 수강 끝내고 본격적으로 프로젝트에 돌입해야겠다.

프로젝트 기간이 야간근무 기간이랑 겹쳐서 고민이 많았는데 오히려 사무실에서 혼자 코딩하기 딱 좋다!

활동서약서도 작성했으니 진짜 제대로 열심히 해봐야겠다.

할 수 있 돠 !

주제 선정

22.02.09 : 첫날 회의를 끝내고 출근전에 분리배출 쓰레기 왕창 버리러 가다가 문득 '분리 배출'을 주제로 사이트를 만들어보는 건 어떨까 생각했다.
22.02.10 : 아이템 회의에서 '분리 배출 방법을 알려주는 사이트'로 아이디어를 내봤는데 팀원분들 모두 좋다고 하셔서 바로 디벨롭에 들어갔다.
22.02.11 : 레퍼런스 할 사이트와 어플을 찾았다. 'blisgo'사이트와 '내 손안의 분리수거'어플. 기존 사이트와 차별화할만한 기능으로 '색인별 검색 기능'을 추가하기로 했다.

개발업무 회고

22.02.10 1차 정기 회의 & 미니튜터링
- 왕초보답게 CRUD에 충실한 사이트를 만들기로 의견이 모임. 프론트/백엔드 구분없이 우선 함께 개발하다가 파트나누기로 함. ->당일 미니튜터링 중 튜터님께서 프론트&백엔드 두가지 경험 모두 해보는 것이 좋으니 구현하고자하는 기능별로 분리해서 각자 담당한 기능의 프론트&백엔드를 총괄해보는 방향으로 추천해주심.
- 메인페이지, 글작성(Q&A)페이지, 관리자페이지, 상세페이지, 키워드검색&색인검색 이렇게 5가지로 파트 분배를 했다.

22.02.11
- 사이트 명은 분리수GO(이미 사이트 있음), 키크니님께 의뢰(농담 반 진담 반) 의견을 거쳐 RE:Waste 로 결정했다. recycling과 waste를 합쳐 '분리 배출을 통해 다시 태어나는 쓰레기!' 라는 의미를 담았다.

22.02.13
- ja님이 총대매고 github 레파지토리 파고 초대하신데다가 기초 설명 잘 되어있는 링크도 공유해주셔서 수월하게 넘어갔다. 그저 빛... ✨
- 출근전에 와이어 프레임 대강 잡아보고 footer 욕심때문에 HTML5 레이아웃 구조 공부했다.
- blisgo는 크롤링하기에 적합하지 않은 사이트여서 자체 db를 쌓기로 했다. db 구성요소 쌓는데 도움이 될까싶어 '내 손안의 분리수거' 어플속 데이터를 구글시트로 정리해서 노션에 공유했다.
- 강의때 검색엔진에 걸리려면 h1태그 포함하는게 좋다고 했던게 기억나서 눈에 보이지 않게 태그 넣을 수 있는 방법을 찾았다. https://velog.io/@william9563/세대차이-와이어프레임-작성

22.02.14
- 개인
  1. 디자인 욕심은 어쩔 수 없나보다. 검색창 관련 구글링하다가 너무 마음에 드는 검색창을 발견했는데, 가운데 정렬 맞추기 & fafa-icon 사용하기 알아보느라 시간을 많이 잡아먹었다.
  2. 일 편하게 하려고 div를 너무 많이 나눈건가 코드가 엄청 길다.
  3. 조금만 구글링하면 답이 나올 것 같아서 튜터링 질문은 스킵.

22.02.15
- html로 틀 잡는 것 까진 괜찮은데 css 정렬하는데 내가 생각한대로 움직이질 않으니 답답하다.
- 페이지네이션 숫자 버튼형이 좋을지 더보기 버튼형이 좋을지 고민.
- 검색창 창 줄이면 제멋대로 정렬 다 깨지는거 상위 div로 묶어서 해결함.
- qna연동 버튼 위치 수정 (분류별 보기 버튼이랑 나란하도록)

22.02.16
- 창 사이즈 줄여도 검색창 요소 움직이지 않게 -> 아마도 flex 로 해결했던거같음..(기억이 가물가물)
- 카드에 상세페이지로 연결되는 a태그 추가

검색창 돋보기 아이콘 안뜸 & 위치 정렬 : 구글링하면서 마음에 드는 검색창 코드를 우선 냅다 복붙했는데 돋보기 아이콘이 안 떴다. 뭐가 문제인지 한참 찾아봤는데 font awesome 아이콘이어서 그랬다! 이하는 사용법.
1. font awesome 홈페이지에서 링크 소스 kit를 받기 위해 내 이메일을 등록한다.
2. 이메일 인증 후 로그인하면 링크해서 쓸 수 있는 js 경로가 나온다!
3. <head></head>에 복붙
4. 마음에 드는 free icon 찾아서 넣고싶은 자리에 코드 넣어주면 됨

뭔가 안 되면 구글링이 답이다. 진짜였다.

내일배움단 프로젝트 챌린지 13일차 개발일지 (22.02.22) (0)	2022.02.24

Dandi_coding