project 1. Bite A Bit

인스타그램을 사용해본 사람이라면 공감할 프로젝트

 

인스타그램은 Saved 기능을 제공하는데, 불편한건 이 Saved 기능에서 검색이 불가능하다. 그래서 어느정도 데이터(피드)가 쌓이면 옛날에 저장했던 것을 찾기가 어렵다.

 

나는 미드에서 좋은 표현들을 알려주는 계정들을 팔로우하고 유용한 표현들을 저장하곤 하는데, 위에서 말한 불편한 점을 개선하여 나만의 Saved 페이지를 만들어보기로 했다.

 

 

 

 

대략적인 구성은 이러하다. 

 

1. 닉네임과 영어표현, 한글표현, 기타 코멘트(메모)를 넣어 저장하면 영어 표현에 적힌 내용에 대한 mp4 (짧고 크기가 작은 동영상)을 웹스크래핑 해와서 카드에 넣어 하나씩 저장해준다.

2. 저장한 게시물들은 '영어표현', '한글표현' 키워드로 검색이 가능하다.

 

 

그럼 개발해야 되는 기능들은 무엇일까?

 

<프론트>

1. 우선 '나홀로 메모장'의 내용과 비슷한 구성으로 우선 '내용을 만들 수 있는 카드' 와 '만든 내용을 서버에서 받아와 보여주는 카드'가 필요하다.

       1) ajax get: 서버에있는 데이터 리스트 포문으로 가져오기

       2) 도큐먼트레디 펑션으로 1) 번의 내용을 자동으로 로드 시켜주기

2. 내용을 만들 수 있는 카드 안에 내용들 (닉네임, 영어표현, 한글표현)이 빈칸이면 저장을 하지 못하게 경고창을 띄운다.

3. 내용을 만들 수 있는 카드 저장버튼을 누르면 카드 내용을 서버로 보내준다.

       1) ajax post: 서버로 새로운 데이터 보내주기 (닉네임, 영어표현, 한글표현, 메모) 

4. 만든 내용을 서버에서 받아와 보여주는 카드를 보여준다.

5. 검색할 때만 : 검색창의 '한글표현', '영어표현' 정보를 서버로 보내준다.

       1) ajax post: '한글표현' , '영어표현' 정보를 서버로 보내주기

       2) ajax get: 서버에서 추려준 데이터를 받기

       3) 2)로부터 받은 데이터를 웹에 보여주기 

 

<백>

1. 내용을 만들 수 있는 카드에 대한 정보 + 영어표현의 mp4파일 크롤링 결과+받아온 날짜를 디비에 저장한다.

       1) 클라이언트로부터 받은 데이터를 받기

       2) 받은 영어표현으로 웹스크래핑하기

       3) 몽고디비에 날짜까지 데이터넣기

2. 디비에 저장된 내용들을 다시 서버로 보내준다.

       1) 몽고디비에서 id값을 제외한 모든 데이터 조회해오기

       2) 키값지정해 키값 보내주기

3. 검색할 때만: 한글표현, 영어표현 정보를 디비에서 검색하여 그 값이 있는 내용만 프론트로 보내준다.

       1) 한글표현, 영어표현 값을 post로 받아오기

       2) 받아온 값을 디비에서 찾아보기

       3) 찾아온 값을 다시 웹으로 get으로 보내주기

 

 

 

To-do list (Due date: 16th Aug, 2020)

1. 우선 나홀로 메모장을 참고하여 클라이언트단 모습을 완성한다.

2. 프론트에서 서버로 사용자로 받은 내용을 보내주는 코드를 완성한다. (ajax, json 사용)