본문 바로가기

Project/1. Bite A Bit <SPA>

 (6)
project 3 Bite A Bit 프로젝트 완성, 도메인 구입해 서버 연결! 기존에 문제가 되었던 1. 왠지모르게 알럿창이 두번뜨고.. 2. 이상해서 서버쪽에 print를 찍었는데 여기서도 수정이 필요한 부분 (post_kor, post_memo)이 두번 프린트가 된다. 이 부분을 드디어 고쳤다. 문제가 되었던 부분 나는 1. 모달창을 띄워주는 함수인 edicCard 2. 서브밋을 누르면 실행하는 함수인 fn_edit 두개를 가지고 있었는데 editCard를 실행시킬때마다 를 실행시키고 있었던 것.. , , , , , , , , fn_edit(post_eng) 그래서 함수를 두번호출할수도 있는 것들은 모조리 없애고 1. 버튼 태그가 원래 로 eng, kor, memo 텍스트 태그와는 다른 곳에 있었는데
project 2. 2 Bite A Bit 수정 기능 추가완료 2차 완성 이 감격스러운 순간을 잊을 수가 업따 흑흑 우선 결과부터 얘기하자면 이전 포스팅에서 썼던 내용대로 완성을 했다 1. 서버에서 디비 오리지널 칼럼을 찾는건 "영어표현" 2. 헷갈리지 않도록 플레이스 홀더로 기존표현을 알려주기. 3. 2번에 추가로 둘 다 수정이 필요하지 않고 한국어표현만 수정하거나 메모를 추가하거나 등 '한 개의 영역'만 고칠 수 있도록 따로 사용자가 적지않으면 플레이스홀더의 내용(기존에 등록되있던 내용)으로 서버로 보내주기 3. 서버에서 디비 업데이트 해주기 4. 업데이트 된 내용 받아와서 다시 클라이언트에 뿌려주기 수정버튼을 클릭하면 이렇게 모달창이 뜨고 모달창 내용을 적은 후 (여기선 한국어 표현은 기존표현 그대로, 메모만 추가한 상황) 서브밋을 누르면 tada! 이렇게 수정이 된다...
project 2. 1 Bite A Bit 수정 기능 추가하기 동영상을 따오는 건 시도했는데 도무지 안되서 당장 다음주가 발표기 때문에 수정기능을 추가하기로 했다. 1. 글을 등록할때 애초에 새로운 창 혹은 팝업창으로 했던게 아니기 때문에 (토글키 처럼 아래 사진 Write a memo 키를 눌러서 폼이 나오면 적어 서버로 보내주는 방식) 2. 수정할 때 카드 자체에 수정할 수 있는 폼을 다시 만들어야 하는지, 아니면 새로운 창을 띄워야 하는지 고민하던 찰나 3. 'Modal' 기능을 발견. 4. 어떤 기능을 사용해서 수정할 지 정했으니 폰트어썸에가서 아이콘을 줍줍 이 모달창 띄우는데 애를 얼마나 먹었는지... ㅡ_ㅡ... (bootstrap 기본 코드 중에 놓친 코드가 있어 작동 안하고있었음ㅋㅋㅋㅋㅋㅋㅋㅋ) 창을 띄웠으니 큰 시작 고민은 1. english phr..
project 1. 2 Bite A Bit 서버구현 / 1차 완성 클라이언트 단 완성 후 서버구축 1. 클라이언트로부터 데이터 받는 post요청 1)받은 데이터를 mongoDB에 저장하기 2. 클라이언트로 디비에 있는 데이터를 보내주는 get요청 1)posts라는 이름의 리스트를 만들어서 디비에서 온 정보를 리스트화 시키기 2)그 리스트를 jsonify시켜 저장해놓은 posts를 클라이언트로 보내주기 3. search 1) get요청으로 클라이언트로부터 데이터(한글/영어표현) 받기 (한글 표현/영어 표현 검색 가능하도록 설정함) 2) 디비에서 받은내용으로 조회해서 ("$regex" 로 전체를 입력하지 않고 키워드만 입력을 해도 검색이 가능하게 했다) 다시 리스트 만들기 3) 만든 리스트를 어펜드시켜 jsonify시켜 클라이언트로 보내주기 4. delete 1) 삭제할 ..
project 1. 1 Bite A Bit 클라이언트단 초기 화면 우선은 기본 앞단을 대략적으로 구성해봤다. 애시당초 인스타그램의 Saved + Search 기능 구현이 목적이라 보이는 것도, 사용하는 것도 최대한으로 줄여 컴팩트한 느낌을 주고 싶었다. 지금 조금 고민인게 정말 인스타그램의 느낌처럼 피드를 쭉-쭉 내려보는 느낌으로, 카드를 3개 1열이 구성이 아닌 카드 1개 1열 구성으로 가볼까도 생각중. 이 표현장?의 장점은 내가 따로 구글링하지 않아도 표현만 안다면 표현에 관한 미드, 영화에서 찾아서 보여준다는 점. url 구성으로 가야할 듯 싶으나 동영상을 아예 크롤링하고 싶은 마음이 굴뚝. 현재 고민하고 있는 상황. 1. 삭제를 할때 어떤 데이터를 받아 삭제를 진행해야되나 (프론트- id 값을 처음부터 히든으로 숨겨받아서 가지고 있어야되나? / 백- id값으로 ..
project 1. Bite A Bit 인스타그램을 사용해본 사람이라면 공감할 프로젝트 인스타그램은 Saved 기능을 제공하는데, 불편한건 이 Saved 기능에서 검색이 불가능하다. 그래서 어느정도 데이터(피드)가 쌓이면 옛날에 저장했던 것을 찾기가 어렵다. 나는 미드에서 좋은 표현들을 알려주는 계정들을 팔로우하고 유용한 표현들을 저장하곤 하는데, 위에서 말한 불편한 점을 개선하여 나만의 Saved 페이지를 만들어보기로 했다. 대략적인 구성은 이러하다. 1. 닉네임과 영어표현, 한글표현, 기타 코멘트(메모)를 넣어 저장하면 영어 표현에 적힌 내용에 대한 mp4 (짧고 크기가 작은 동영상)을 웹스크래핑 해와서 카드에 넣어 하나씩 저장해준다. 2. 저장한 게시물들은 '영어표현', '한글표현' 키워드로 검색이 가능하다. 그럼 개발해야 되는 기능들은..

티스토리툴바