본문 바로가기

Programing/TIL85

2024-05-10 리액트 입문 오늘 배운 것은 아래 포스트로 정리한다.https://infistudy.tistory.com/206 [내배캠] 001. [JS] 변수 (let, const, var) 와 스코프, 호이스팅변수란?변수의 필요성데이터를 저장하고 관리하기 위해. 데이터를 저장해서 다른 코드에서 재사용할 수 있다.let numberOfusers = 50;numberOfusers = numberOfusers + 5;console.log(numberOfusers); // 55위의 예제에서infistudy.tistory.comhttps://infistudy.tistory.com/207 [내배캠] 002. [JS] 객체와 배열 - 값 접근하기, 수정하기, 삭제하기객체란?개념key : value로 이루어진 데이터의 집합.리액트에서는 JS.. Programing/TIL 2024. 5. 10.
2024-05-09 팀 프로젝트 한/영 전환 기능 튜터님 피드백 내가 구현한 한/영 전환 코드// index.html의 영화 카드를 언어 정보만 바꾼 채로 새롭게 그리기 위해 import함.import { movieListAPI } from "./movie.js";// 언어변경 버튼 선택자 지정const changeLangBtn = document.getElementById('lang_change_btn');// 웹 브라우저 기본 설정 언어를 로컬스토리지에 저장 (일반적으로 한국어 사용자면 'ko-KR'일 것이고, 영어권 사용자면 'en-US'일 것.)if (!localStorage.getItem("currentLanguage")) { localStorage.setItem("currentLanguage", navigator.language);}// 로컬 스토리지.. Programing/TIL 2024. 5. 9.
2024-05-08 자바스크립트 팀 프로젝트 회고 (영화 검색 페이지) 자바스크립트 팀 프로젝트 회고구현한 기능영화 검색 페이지에서 한/영 전환 기능한/영 전환 버튼을 누르면 아래 페이지의 내용이 영문, 한글로 출력되도록 이벤트 리스너 설정index.html : 메인 페이지detail.html : 영화 클릭 시 세부 정보를 보여주는 상세 페이지heart.html : 영화 상세 페이지에서 찜 버튼 클릭시 저장되는 찜 목록을 보여주는 페이지구현 방법공통헤더에 한/영 전환 버튼을 만들어 버튼 클릭 시 페이지에 맞는 이벤트 리스너 동작하도록 구성html 페이지에 작성된 한글을 조건문을 달아 브라우저 언어 설정에 따라 다르게 출력되도록 전체 수정.// detail.html 언어변경 기능 (예시) (index.html, heart.html도 동일)const reviewInput = d.. Programing/TIL 2024. 5. 8.
2024-05-07 로컬스토리지를 활용하여 현재 보고 있는 메뉴 유지시키기 팀프로젝트를 하면서 팀원께서 미리 제작한 페이지에서 한/영 전환 기능을 구현하는 역할을 맡았다.  위와 같은 상태에서 헤더에 포함된 한영 전환 버튼을 누르면 이벤트리스너가 동작하면서 api를 한글로 fetch하여 화면에 새롭게 영화 카드를 그려지게 구상하였는데,문제는 현재 보고 있는 메뉴가 Top Rated인데, 한/영 전환을 하면서 한국어 API로 fetch 하는 데까지는 아무 문제가 없으나 이 바뀐 언어의 API로 다시 영화 카드를 화면에 그리는 과정에서 페이지가 새로고침 되며 페이지의 초기 상태인 popular로 강제 이동되는 현상이 발생했다.눈으로 보이는 페이지는 하나지만 popular와 top rated에서 각각 fetch를 다르게 요청해야 하는 상황인데,이를 해결할 방법을 찾지 못하다가 로컬스.. Programing/TIL 2024. 5. 8.
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.

티스토리툴바