TIL 20230511

오늘 목표

버킷리스트 완성

프로그래머스 코딩 테스트 입문: 숫자 비교하기

S.A. 피드백 읽고 이해하기

오늘 한 것

버킷리스트 완성

프로그래머스 코딩 테스트 입문: 숫자 비교하기

S.A. 피드백 읽고 이해하기

개인 프로젝트 구상, S.A 작성

 

 

0. 미니 팀 프로젝트 [무비스코어] 진행상황

조원 전부 코드 제출 후 1차 완료

- update

index.html : 샘플 카드 제거

main.js : [+] 자세히 보기 버튼 구현 (클릭 시 영화 정보url로 이동) 

- 이후 수정 기능이 작동하지 않음.

- 수정함.

완성본 테스트 (MacOS/Windows) 확인 완료

- 조원 한 분께서 이미지 로드가 되지 않으나 이는 인터넷 회선의 문제인 듯 함

- 나머지 조원은 모두 로드 및 사용 가능

 

0-1. 튜터 님의 S.A. 피드백

1. 와이어 프레임은 상세히 만들수록 좋습니다. 

현재는 기능이 별로 없기 때문에 이 정도로 만들어도 괜찮습니다. 

차후에 기능이 추가되면서 프로젝트가 복잡해질 때, 사용자 플로우를 고려하여 와이어 프레임을 작성하면 더 좋습니다.

간단히 와이어 프레임을 만들려면 draw.io를 이용하시면 되고 

조금 더 전문적인 와이어 프레임을 만들려면 figma를 이용하시면 됩니다.

구글에 "movie app wireframe" 검색해서 다른 사람들이 만든 와이어 프레임을 한번 보시는 걸 추천드립니다.

 

draw.io

https://app.diagrams.net/

 

figma

https://www.figma.com/

 

movie app wireframe 참고 자료 : 

https://www.jasonzhouzilin.com/regal

 

2. 기능쪽도 프론트쪽 기능과 백엔드쪽 기능을 나누어서 하나의 기능마다 설명을 해주면 됩니다. 

 

e.g.

프론트 

- 영화 추천 팝업 뛰우기 - 클릭시 영화를 등록할 수 있는 팝업을 뛰웁니다. 영화 팝업에는 닉네임, 암호, 영화 url, 별점, 리뷰 를 입력할 수 있습니다.

- 영화 추천하기 팝업닫기 - 설명 ... 

- 영화 카드 리스트 보여주기 - 백엔드에서 영화 데이터를 받은 후 영화 카드를 보여준다. 

- 영화 카드 수정 -  클릭시 암호입력 팝업을 뛰웁니다. 

...

 

백엔드

- 영화 추천하기 - 닉네임, 암호, 영화 url, 별점, 리뷰 데이터를 받아서 데이버 베이스에 저장한다. 

- 영화 리스트 보여주기 - 데이터베이스에서 영화 리스트를 불러와서 프론트로 JSON형태로 보내준다.(보내주는 데이터는 영화 이미지, 영화 제목 ... 이 있습니다.)

- 영화 수정 암호 확인 - 데이터 베이스에 등록된 영화의 암호와 사용자가 입력한 암호를 확인하여 일치하면 http status - 201, message - OK , 일치 하지 않으면 400, fail 을 JSON 형태로 보내준다.  

... 

 

3. API는 사실 2번에 기능에 정리 된 것을 api문서로 만든다고 생각 하시면 됩니다. 

개발자들이 주로 사용하는것은 REST api이고 주로 JSON형태로 데이터를 주고 받습니다. 

여러분이 만든 RESTful 하지 않기때문에 조금 수정이 필요합니다.

구글에 "restful api" 검색해서학습해보길 추천드립니다.

http status code 참고 - https://www.moesif.com/blog/technical/api-design/Which-HTTP-Status-Code-To-Use-For-Every-CRUD-App/

REST API 참고 - https://meetup.nhncloud.com/posts/92

 

 e.g. 

기능 | Method | URL | 받을 정보 | 보낼 정보 |

 영화 저장하기 | POST | /movies | 영화 ID -  영화 ID는 db에서 자동 생성 됩니다 프론트나 백엔드에서 생성하지 않습니다., 영화 제목, 설명, 별점, 닉네임, 리뷰, 비밀번호 | 저장 성공시  http status - 201, message - OK 실패시  400, fail  |

 영화 불러오기 | GET | /movies | - | 성공 - 영화 목록, 실패 400 or 500 fail |

영화 수정하기 | PUT | /movies | 영화 ID, 영화 제목, 설명, 별점, 닉네임, 리뷰, 비밀번호 | 성공시  http status - 200 or 204, message - OK 실패시  400, fail |

 

[내 파트]

 영화 삭제하기 | DELETE | /movies | 영화 ID, 비밀번호 | 성공시  http status - 204, message - OK 실패시  400, fail |

 

 

소감

다들 팀 프로젝트에 진심인 것 같다. 다같이 열심히 하는 사람들과 함께할 수 있어서 영광이다.

 

1. javascript : 물음표 연산자 ?

알게된 것

? 물음표 연산자의 사용법 

변수 = 조건 ? 값1 : 값2;

 

참고 자료 : https://haesoo9410.tistory.com/156

 

 

2. 문법 똑바로 적기

 

문제

입력한 데이터가 이상함

 

시도

et wish = $('#bucket').val 부분을

let bucket = $('#bucket').val() 로 바꿔 주었다.

 

해결

정상 작동.

 

알게 된 점

변수명을 똑바로 적자. 괄호 빼먹지 말자. 

---

 

정리 

? 물음표 연산자의 사용법 

변수 = 조건 ? 값1 : 값2;

 

변수명을 똑바로 적자.

괄호 빼먹지 말자. 

 

 

소감

사소한 걸 놓치면 프로그램이 돌아가지 않는다. 항상 유의하자.