본문 바로가기

TIL173

Plmography 프로젝트 작업 로그 #17 - 컨텐츠 상세 페이지 작업 (22.12.29 TIL) 오늘 오전에는 백엔드에서 백도어로 api 를 DB 로 밀어넣는 작업을 진행하고 오후부터는 프론트에서 상세 페이지 마크업을 진행했다. 전체 영화 목록을 가져오는 api 는 백엔드에서 작업해서 DB 로 넣어주었지만, 상세 페이지에서 필요한 유튜브 링크나 출연진 목록 등의 정보를 가져오는 api 는 프론트에서 호출할 예정이다. 아직 마크업 진행중인 페이지이다. 포스터를 보여주는 헤더 부분은 미리 작업해주었다. DB 에 저장된 영화 제목, 포스터, ott 플랫폼, 작품 줄거리, 개봉일 등은 백엔드에서 호출한 데이터를 출력하고 있고, 아직 사진에는 없는 감독 및 출연진과 예고편은 프론트에서 호출할 예정이다. contents/{id} 형태의 api 를 호출했을 때 나오는 JSON 파일을 DB 에 내가 원하는 방식으.. 2022. 12. 29.
Plmography 프로젝트 작업 로그 #16 - RestTemplate 으로 api 호출하고 DB 에 저장하기 (22.12.28 TIL) 이전에는 HttpURLConnection 과 JsonParser 를 사용해 api 를 호출하는 방식을 사용했었는데 이번에는 홀맨님의 조언에 따라 RestTemplate 으로 바꿔보는 작업을 진행했다. 이전 코드는 아래와 같다! // Controller @GetMapping("/saveApi") public String saveApi() throws IOException { String result = ""; try { for (int i = 1; i 2022. 12. 28.
Plmography 프로젝트 작업 로그 #15 - AWS S3 이미지 업로드하기 (22.12.27 TIL) 원래는 프론트에서 src 하위 폴더로 assets 를 만들어서 이미지를 관리하고 있었지만, 테스트 코드를 돌릴 때 깨지는 현상이 있었다. 저번 레벨테스트 당시에는 깨짐을 방지하기 위해 js 파일을 따로 만들어서 이미지를 객체화시켜서 그것을 모킹해주는 방법을 사용했는데, 이번 프로젝트에서는 그렇게 하지 않고 AWS S3 라는 스토리지 서비스를 사용하기로 했다. AWS S3 버킷 만들기 S3의 장점 높은 내구도를 자랑하며 정보를 안전하게 저장 할 수 있습니다. 저렴한 비용으로 사용이 가능합니다(ec2에 이미지, 영상등을 저장하며 비용이 만만치 않습니다.) 보안성이 뛰어납니다 ( onulmansanda.tistory.com AWS S3 access denied 서버에 이미지 등록하는 법[20221210 - T.. 2022. 12. 27.
Plmography 프로젝트 작업 로그 #14 - 스프린트 점검 (22.12.26 TIL) 오늘은 지난 일주일간의 스프린트를 점검하는 첫 번째 시간이었다. 노아님이 와서 피드백 해주셨는데, 일단 나는 내 애플리케이션에서 가장 핵심 가치라고 생각되는 탐색 페이지를 아래 사진과 같이 먼저 구현중이었다. 외부 api 를 사용해서 컨텐츠는 불러왔고 이제 필터링 기능을 구현하기 위해 고군분투(^^;) 중이었는데, 노아님이 보시기에 이것보다 컨텐츠 상세 페이지가 더 중요해보인다고 하셨다. 물론 나만의 프로젝트이기에 핵심가치는 내 판단 기준에 맞춰서 작업하는 것이라고도 해주셨다. 피드백을 듣고 다시 생각해보니 이 서비스에서 내가 정한 핵심 가치는 '원하는 영상을 찾아 그 상세 내용을 확인할 수 있다' 였는데, 일단 컨텐츠 불러오기에는 성공했으니 그 컨텐츠를 눌러서 확인할 수 있는 상세 페이지 순서로 구현하.. 2022. 12. 26.
Plmography 프로젝트 작업 로그 #13 - 백엔드로 api 옮기기 (22.12.25 TIL) 주말 동안 독감 때문에 죽다 살아난 일요일,,오늘은 프론트에서 받아온 api 를 백엔드로 옮기고, 프론트에서는 서버에서 받은 데이터를 화면에 출력하는 작업을 진행했다. api key 를 백엔드에서 어떻게 숨기나 고민했는데, jwt 토큰을 발급하는 것처럼 application.properties 에 숨겨놓고 @Value 어노테이션으로 가져오면 되겠다 싶어서 그대로 해봤더니 성공했다! 이렇게 key 를 불러온 후에 실제 영화 정보를 가져오는 작업을 해주었다. BufferReader로 읽어온뒤 InputStreamReader 로 받아온 값을 UTF-8로 변환해 주어야 깨지지 않고 잘 들어온다. 그리고 Service로 그 값을 넘겨준다. @GetMapping("/saveApi") public String sav.. 2022. 12. 25.
Plmography 프로젝트 작업 로그 #12 - TMDB API 사용하기 (22.12.23 TIL) 어제는 프론트에서 api 를 호출해서 데이터를 화면에 출력해주었는데, 오늘은 이 api 를 백엔드로 옮기는 작업을 진행중이다. 일단은 아래처럼 코드를 작성해서 화면에 JSON 형태로 불러오는 것 까지는 마쳤다. @GetMapping("/api") public String callApi() throws IOException { StringBuilder result = new StringBuilder(); String apiUrl = "https://api.themoviedb.org/3/" + "movie/popular?api_key=750fc7b483b1da64b9c19bf813de37ac" + "&language=ko&page=1"; URL url = new URL(apiUrl); HttpURLConne.. 2022. 12. 23.