전체 글 201

20220113 개발일지

오늘은 미니프로젝트 마지막날이다. 프로젝트 진행 속도가 빠른 편이라 크게 부담이 되지는 않았다. 마지막날 과제 제출과 회고 멘토링을 위해 필요한 작업들을 진행했다. 전날에 팀원 분이 좋은 유튜브 강의를 공유해주셔서, 깃을 터미널로 연습해볼 수 있었다. 오늘 해야할 일 중에 코드에 주석을 작성하는 것이었는데, 각자 파일마다 여러 곳을 맡았고, 깃허브를 연습할 겸 깃을 이용하여 파일들을 주고 받았다. 파이참을 켜놓고 작업하고 있는 중에도 풀을 하면 변경사항들이 바로 반영되는 것을 확인할 수 있었고, 다행히 큰 충돌이 발생하지는 않았다. 필요하면 변경사항까지 바로 볼 수 있어서 좋았다. 소스트리를 쓸 때 햇갈렸던 부분이 오히려 터미널에서는 직관적으로 보여 개념 이해가 더 잘 된 것 같았다. 시각적으로 상황을 ..

#지역 선택할 때 '시도' 선택 후 '시구군' 선택하기

공공데이터로 공개된 서점 데이터들을 추가하면서 지역이 다양해졌다. 서울, 경기, 인천, 경남 등이 데이터로 포함되면서 검색 창에서 지역 선택 옵션이 너무 많아졌고 길어졌다. 이전 기수 프로젝트에서 1차 2차로 나누어서 옵션을 선택할 수 있게 한 걸 봐서 비슷한 모양으로 구현하고 싶었다. 관련 키워드로 검색해서 코드를 찾고, 일부 수정해서 반영하였다. {#지역 1차 구분하기 위한 함수#} function categoryChange(e) { {#각각의 값이 입력될 때마다 #sigun_name에 나타나는 값임#} {#DB에 없는 값은 여기서 제외함#} var region_a = ['강남구', '강동구', '강북구', '강서구', '관악구', '광진구', '구로구', '금천구', '노원구', '도봉구', '동대..

#네이버 지도로 위치정보 보여주기

추가로 지급된 강의 웹개발플러스에 네이버 지도 API를 사용하는 부분이 있었고, 이전 기수의 미니프로젝트에도 지도 사용한 걸 봐서 네이버 지도는 꼭 사용해보고 싶었다. 사실 손을 댄건 2일차부터였는데, 시도하다가 중간 중간에 막히기도 했고, 당장 해야할 것들이 먼저 눈에 들어와서 제대로 못하고 있었다. 급한 부분들은 거의 완료가 된 상태라서 다시 시도하였다. 나중에 생각해보면 일과 끝나고 9시 이후나, 따로 시간을 분배해서 쭉 시도했으면 더 좋았을 것 같다. - 선택한 지역의 전체 서점들을 지도로 표시하는 것 - 책방 세부정보에 개별 지도를 넣는 것 중에 고민했는데, 세부정보 페이지에 공간이 많이 남기도 했고, 후자가 조금 더 간단해 보여서 시도하였다. 세부정보 페이지에 이미 서버에서 책방 목록 정보를 ..

20220112 개발일지

오늘은 프론트 부분 수정 + 개별적으로 기능 세부적인 부분을 좀 더 다듬고, Git을 공부했다. 개인적으로 추가로 구현하고 싶은 기능은 1. 네이버 지도로 위치정보 보여주기 2. 지역 선택할 때 '시도' 선택 후 '시구군' 선택하기 였다. 구현할 때는 계속 헤맸는데 다른 코드 응용해서 원하는 데로 구현하고 나니 너무 뿌듯했다! 지역 선택하여 검색하고 뒤로가기를 누르면 다시 1차 콤보박스부터 선택해야 하는데 2차 콤보박스가 뜨는데 이문제는 해결하지 못했다.. 프론트 부분이 생각보다 쉽지 않았다. 프로젝트 초반에 기능구현에 초점을 맞추고 구현 후 프론트를 진행하려니 딱딱 맞게 들어가지 않는 곳이 많았다. 팀원들과 계속 작업하면서 세부적으로 버튼, 스타일 등을 계속 수정했다.

20220111 개발일지

(프로젝트 막판에 몰아서 작성하고 있어서 정확한 날짜기록은 틀릴 수 있음!!) 두번째 날 아침, 전체적인 기능은 모두 구현이 되서 우선 파일들을 병합하기로 했다. Git을 사용해보려고 했는데 아직 미숙해서 push/pull로는 파일을 끌어오지 못하고 단순히 github에 올리거나 카카오톡 단톡방을 이용해서 파일을 주고받았다. 중간에 로그아웃 기능이 실현되지 않는 문제가 있었는데, 기능이 실현되지 않는 페이지에 필요한 스크립트가 없어서 발생한 문제였다. 다른 사람이 수정한 파일을 받아왔을 때 라이브러리 버전 문제로 실행이 안되는 경우도 있었다. ☆ 기능구현에 필요한 패키지 정보(버전 포함), 스크립 등은 프로젝트 시작할 때 미리 어느정도 틀을 갖추어 놓거나, 변경/특이사항을 미리 팀원들과 공유하는 게 좋을..

Git 명령어 저장소

Git bash : 리눅스 Git CMD CMD 소스트리>터미널 *git bash로 연결됨 git init 깃 시작하기 git config --global user.name "(내 이름)" git config --global user.email "(내 메일주소)" git status 상태보기 git add -A 모든 파일을 staging area에 등록 git commit -m "커밋내용" ※staging area에 등록된 대상들만 commit할 수 있음 git log git log --graph --all --decorate log를 그래프로 보여줌 Vim(리눅스 기본 편집기) -ex모드 : 저장/종료 등('I' 또는 'A'를 눌러 입력모드로 변환) -입력모드: 텍스트 입력, 수정 등('ESC'누르면 ..

Git등등 2022.01.12

#웹페이지간의 질의는 어떻게? GET, POST, jinja

사전 강의에서는 한 페이지 - 서버 간의 데이터 이동이 있었는데, 이번에는 여러 페이지를 만들다보니 어떻게 해야하는지 개념이 잘 잡히지 않아서 어려웠다. 페이지1에서 입력한 변수로 페이지2에서 결과 값을 보여주어야 하는데 처음에 이걸 도대체 어떤 모양으로 잡아야지, 에서 한참 시간이 걸린 것 같다. 페이지1에서 function search() { let sigun_name = $('#sigun_name option:selected').val() let choose = $('#choose').val() $.ajax({ type: 'GET', url: '/search', data: {sigun_name_give: sigun_name}, success: function () { let temphtml = `/..

#공공데이터 활용하기(오픈API) + DB구축

공공데이터를 활용하여 프로젝트를 진행하기로 하였다. 사서로 일할 때 가장 자주 듣지만 실제 개념 이해가 안됬던 단어가 바로 오픈API다. 일례로, 국립중앙도서관 등 공동목록에서 marc 등 서지정보를 가져올 때라든지 알라딘과 같은 서점이 제공하는 책표지, 목차정보 등을 자관 도서관 홈페이지에 가져올 때 오픈API를 활용한다. 현재 정부기관에서 진행하는 집현전 같은 프로젝트에서도 오픈API를 통해 각 기관들의 공공데이터를 수집하고 있다. 그렇지만 이게 실제로는 어떤 방식으로 작용하는 것인지 이해가 안되었는데, 항해 사전 강의를 들으면서 알 수 있었다. 사전 강의에서는 기능 구현/이해를 위해 정제된 데이터를 주지만 실제 공공데이터와 오픈API를 사용하는 것은 쉽지 않았다. 공공데이터 포털(https://ww..

20220110 개발일기

항해99 첫번째 날이다. 처음에 사전 강의로 을 들으면서 개발일기를 작성하려고 했는데, 마지막에 너무 급하게 수업을 못듣느라 정리를 못했다. 항해하면서는 가급적 매일, 특히 문제/해결과정은 꼭 기록해두려고 노력할 것! 무조건 개발 1일 단위로 기록하기 보다는 문제/이슈 단위로 기록하면 다음에 찾아볼 때 좋을 것 같다. 이번주에는 팀원들과 함께 미니프로젝트를 진행한다. #주제 정하기 (독립)서점에는 계속 관심을 갖고 있었고, 항해 시작하기 전부터 기회가 되면 서점의 정보를 제공하는 사이트를 만들고 싶었다. 마침 다른 팀원들도 괜찮다고 해주셔서, 공공데이터를 활용하여 서점 정보를 제공하는 웹페이지를 만들기로 하였다. 처음에 구상단계에서는 금방 기능을 구현할 수 있었는데, 실제로 해보니 쉽지 않았다. 첫날 직..

미니프로젝트 S.A : Seoul Book's

1. 프로젝트 명 : Seoul Book's 서울 우리 동네에는 어떤 책방이 있을까요? 관심 지역을 선택하시면 책방 정보를 알려드려요! 2. 와이드프레임 3. 개발해야 하는 기능들 기능 Method URL request response 책방 검색하기 GET /api/search {'city':city, 'gu_name':gu_name, 'store_type':store_type} 책방 리스트 코멘트 작성 POST /api/comment {'title':title, 'id': id, 'coment':comment} 코멘트 데이터 코멘트 조회 GET /api/comment 코멘트 리스트 조회 코멘트 수정 POST /api/comment/amend {'title':title, 'id': id, 'coment'..