본문 바로가기

Programing371

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.
팀원 입장에서 GitHub로 협업하기 팀원 입장에서 최초 깃허브 초대받은 리포지토리에 연결하기// 전부 내려받음. 원격 저장소의 주소는 .git으로 끝나는 것. 뒤에 한칸 띄고 .은 상위 폴더를 만들지 않는 것.git clone . // 전체 브랜치를 보여줌(확인 차)git branch -a// 내 작업 브랜치를 하나 만들고 이동함git switch 작업하기 전// 깃허브에서 누가 push한 것이 있는지 확인한다// 또는 습관적으로 메인 브랜치를 pull 해서 최신 버전으로 만들고 시작한다. 내 꺼 다 만들고 pull 해도 되지만 병합 충돌하기 까다로울 수 있다.// origin은 보통 저렇게 설정하고, 아닌 경우도 있음.git pull origin 작업 완료 시// 현재 위치 중인 브랜치 확인git branch// 만약 엉뚱한 곳에 있다.. Programing/Git 2024. 5. 9.
구글 스프레드시트를 API 호출하여 실시간으로 fetch하고 JSON으로 파싱하기 상황구글 스프레드에 작성된 데이터를 배열 안에 여러 객체가 담기는 형태로 API를 요청하고 이를 JavaScript 코드로 JSON 파싱하여 실시간 데이터를 사용하고 싶다.Fetch API를 사용하여 비동기적으로 데이터를 요청하고 응답을 받을 것이다.방법구글 스프레드 시트에서 데이터를 작성한다.Apps Script 열기스프레드시트에서 확장 프로그램 > Apps Script 를 선택.편집기가 열리면 기존 코드를 지우고 아래 코드를 붙여 넣음.function doGet(e) { var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var rows = sheet.getDataRange().getValues(); var data = [];.. Programing/JavaScript 2024. 5. 8.
이벤트 버블링 기법 : 리로드 되는 페이지에서 이벤트 리스너가 끊어지는 문제 해결 방법 상황HTML 페이지에 여러 개의 버튼을 달고 그 버튼에서 클릭 이벤트가 발생했을 때 이벤트 리스너를 동작시키기 위해 여러 개의 이벤트 리스너를 달았다.특정 버튼의 기능에서 페이지를 초기화 하는 함수가 있어 페이지가 전부 리로드 된다.페이지가 리로드 되면 각 버튼에 달려있던 이벤트 리스너의 연결이 끊어지면서 버튼을 클릭해도 반응이 없다.해결해당 버튼이 아닌 상위 요소에 이벤트리스너를 장착하여, 버튼이 리로드 되더라도 이벤트 리스너가 끊어지지 않도록 한다.// 기존 코드document.querySelector(".detail_heart_btn").addEventListener("click", clickHeart);기존 코드가 있던 HTML의 태그 구성 요소를 보면 아래와 같다. 문제는 위 기존코.. Programing/JavaScript 2024. 5. 8.
2024-05-08 자바스크립트 팀 프로젝트 회고 (영화 검색 페이지) 자바스크립트 팀 프로젝트 회고구현한 기능영화 검색 페이지에서 한/영 전환 기능한/영 전환 버튼을 누르면 아래 페이지의 내용이 영문, 한글로 출력되도록 이벤트 리스너 설정index.html : 메인 페이지detail.html : 영화 클릭 시 세부 정보를 보여주는 상세 페이지heart.html : 영화 상세 페이지에서 찜 버튼 클릭시 저장되는 찜 목록을 보여주는 페이지구현 방법공통헤더에 한/영 전환 버튼을 만들어 버튼 클릭 시 페이지에 맞는 이벤트 리스너 동작하도록 구성html 페이지에 작성된 한글을 조건문을 달아 브라우저 언어 설정에 따라 다르게 출력되도록 전체 수정.// detail.html 언어변경 기능 (예시) (index.html, heart.html도 동일)const reviewInput = d.. Programing/TIL 2024. 5. 8.

티스토리툴바