2022.08.02 Today I Learn

홈화면 구현 완료

Time Log

08:30~09:00 출석준비 및 to do 정리, 영어공부

09:00~12:10 홈화면 레이아웃 상단 구현(검색&필터박스, 상세검색 버튼 구현)

12:10~13:00 점심식사

13:00~14:00 홈화면 레이아웃 하단 구현(total contents card)

14:00~15:00 팀 회의(*이슈 확인, 진행상황 확인)

15:00~16:00 홈화면 레이아웃 구현(필터박스에 적용/취소 버튼, 좋아요 버튼)

16:00~16:45 몽고DB 연결이슈 해결 및 DB collection 정리

16:45~18:00 팀원 코드 리뷰

18:00~19:00 웹개발 플러스 1주차 강의 시작(*MongoDB localhost error)

19:00~20:00 저녁식사

20:00~21:30 MongoDB localhost error 해결

​

[이슈확인]

팀원이 초대된 MongoDB에 팀장 이외에는 데이터를 읽고 쓰는게 안되는 이슈

원인 : MongoDB의 Network Access의 IP 설정이 팀장의 개인PC IP로 설정되어 있었음

해결 : IP 설정을 0.0.0.0/0으로 변경하여 모든 IP에서 접근 가능하도록 변경

❗️구글링으로 해결이 안돼서 내 MongoDB랑 나란히 놓고 하나하나 세세하게 비교해서 발견!

​

노베이스인 팀원분이 강의보고 작성한 코드가 작동하지 않는 이슈(error code 500)

＆ 웹개발 플러스의 강의에서 "mongodb://localhost:27017/"이 동작하지 않아 pymongo.errors.ServerselectionTimeoutError:를 띄우는 이슈

원인 : 컴퓨터 자체에 mongoDB가 설치되어 있지 않아서 발생

해결 : mongoDB 설치해서 해결

❗️강의도, 구글링에서도 mongoDB 설치에 대한 이야기는 없고, 라이브러리 설치 이야기만 있어서 계속 감을 못잡고 삽질을 엄청 했었다. 그런데 알고보니 강의 Q&A 모음집에 들어있어서 좀 허탈했던...

​

부트스트랩 코드를 가져다가 HTML 구조를 열심히 짰는데, 이렇게해도 되는건지.. 너무 div태그만 남발하는 기분이다. 필터링 박스를 만드는 거에서는 사람인 홈페이지를 참고해서 dl, dt, dd 태그를 이용해보려고 했는데, 결국 사용이 애매해서 div태그로 또 떡칠을 했다..

상세검색 버튼은

1. 클릭하면 숨겨져 있는 필터링박스를 보여줌, 닫기 버튼으로 변경

닫기 버튼은

2. 필터링박스가 닫아짐. 상세검색 버튼으로 변경

으로 만들었다. 처음에는 버튼의 text를 조건으로 해서 "상세검색"이면 1번 기능이 실행되고, 아니면 2번 기능이 실행되도록 로직을 짰는데, html을 기준으로 하지 않고, 아예 css 기준으로 박스가 보이는 상태냐 아니냐를 가지고 하는 것이 효과적일 것 같아서 최종적으로는

const op_cl_detail = () => {
    	if ($(".filtering_box").css('display') === 'block') {
    	$(".filtering_box").css('display', 'none');
    	$("#details").text('상세검색');
    	} else {
   		$(".filtering_box").css('display','block');
    	$("#details").text('닫기');
    	}
    }

이렇게 구현하게 되었다. 파이썬은 None이 False로 처리되기 때문에 그렇게 처리해보려고 했는데, JS는 None은 그냥 None일뿐 boolean 함수에 넣어도 에러만 난다는 걸 알게되었다.

그리고 이 함수를 구현하면서 드디어 애로우펑션을 사용해봤다. 이번 주말에는 꼭 자바스크립트 문법을 다시 훑어야겠다.

오늘 웹개발 플러스 강의를 좀 듣고 싶었는데, 에러 해결하느라 못들은건 좀 아쉽지만, DB 이슈로 하루종일 삽질하면서 얻은게 있다는 것에서 위안을 삼아야지..

내일은 만들어둔 홈화면 레이아웃에 버튼을 구현하고, DB랑 연결을 해야겠다.