본문 바로가기

Programing371

2024-05-07 로컬스토리지를 활용하여 현재 보고 있는 메뉴 유지시키기 팀프로젝트를 하면서 팀원께서 미리 제작한 페이지에서 한/영 전환 기능을 구현하는 역할을 맡았다.  위와 같은 상태에서 헤더에 포함된 한영 전환 버튼을 누르면 이벤트리스너가 동작하면서 api를 한글로 fetch하여 화면에 새롭게 영화 카드를 그려지게 구상하였는데,문제는 현재 보고 있는 메뉴가 Top Rated인데, 한/영 전환을 하면서 한국어 API로 fetch 하는 데까지는 아무 문제가 없으나 이 바뀐 언어의 API로 다시 영화 카드를 화면에 그리는 과정에서 페이지가 새로고침 되며 페이지의 초기 상태인 popular로 강제 이동되는 현상이 발생했다.눈으로 보이는 페이지는 하나지만 popular와 top rated에서 각각 fetch를 다르게 요청해야 하는 상황인데,이를 해결할 방법을 찾지 못하다가 로컬스.. Programing/TIL 2024. 5. 8.
[코딩애플] Git 강좌 정리 (비공개) 보호되어 있는 글 입니다. 2024. 5. 4.
2024-05-03 쿼리스트링 조별과제를 하면서 반나절 가량을 애를 먹은 게 있다.쿼리스트링인데const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}language=${currentLanguage}&api_key=${ApiKey}`, options)이 코드의 구조 자체가 이해가 되질 않았다.최초 코드는 아래와 같았다.const response = await fetch(`https://api.themoviedb.org${url}${url.indexOf('?') !== -1 ? "&" : "?"}api_key=${ApiKey}`, options)위 URL이 너무 복잡해보였는데, 튜터님께 질문 후 해결이 되었다.qu.. Programing/TIL 2024. 5. 3.
2024-05-02 filter 메서드로 특정 조건 걸러내기 TMDB에서 API를 가져올 때 queryString을 사용하고 있기 때문에 URL에서 국가 코드만 바꾸어 주면 한국 버전으로도 간단히 불러올 수 있다.다만 문제가 한국 버전은 줄거리 요약 등이 제대로 호환되지 않는 카드가 많아 웹페이지 사용성이 떨어진다.이런 경우 filter 메서드로 overview 프로퍼티가 빈 스트링인 경우 제외하도록 할 수 있다. Programing/TIL 2024. 5. 2.
2024-05-01 모듈화 / 수도코드 연습 오늘 배운 것 1. 자바스크립트 모듈화 지금까지는 one page로 html을 만들고 하나의 js에 모든 기능을 넣어서 연습했었다.그런데 팀원 분의 프로젝트를 기반으로 기능을 추가하는 과정에서 팀원분이 작성한 모든 코드에 대한 이해가 선행되어야 했고 이 과정에서 새로운 내용도 많이 알게 됐다. 그리고 기능별로 js 파일을 만들고 export, import 기능으로 상호 호환이 되게끔 작업하는 방식에 대해서도 처음 알게 됐다. 그래서 지금 연습을 해보고 있다. 이렇게 작업하니 코드 가독성이 훨씬 좋아졌다. 2. 수도코드 연습 이번 팀 프로젝트에서 내가 맡은 기능은 버튼을 클릭했을 때 페이지가 한/영 버전으로 전환되는 것이다.API에서 한글로 바꿔오는 부분이 있어서 가볍게 생각했는데, 내 수준을 아득히 뛰어.. Programing/TIL 2024. 5. 1.

티스토리툴바