본문 바로가기

전체 글402

[내배캠] 002. [JS] 객체와 배열 - 값 접근하기, 수정하기, 삭제하기 객체란?개념key : value로 이루어진 데이터의 집합.리액트에서는 JSON 형태로 데이터를 불러오는 작업을 많이 한다. (JSON, JavaScript Object Notation)특징key: value 쌍을 이룬다 / value에는 모든 자료형이 올 수 있다const user = { name: '장원영', // string type age: 21, // number type group: 'ive', isBeauty: true, // boolean type printHello: () => console.log('hello') // function}접근 방법점 표기법console.log(user.name); // '장원영'console.log(user.age); // 21us.. Programing/React 2024. 5. 10.
[내배캠] 001. [JS] 변수 (let, const, var) 와 스코프, 호이스팅 변수란?변수의 필요성데이터를 저장하고 관리하기 위해. 데이터를 저장해서 다른 코드에서 재사용할 수 있다.let numberOfusers = 50;numberOfusers = numberOfusers + 5;console.log(numberOfusers); // 55위의 예제에서는 1번 재사용했지만, 실제로 코드를 작성하다 보면 수 십, 수 백 군데에서 재사용 하기도 한다. 이 때 원본 데이터가 변경되면 그 부분을 모두 수정해주어야 하는데, 변수에 할당해서 재사용하는 경우 변수의 값만 바꾸어 주면 되기 때문에 효율적.변수의 특징변수 선언문의 스코프변수 선언문스코프설명var함수 스코프선언된 함수 내에서 접근 가능let, const블록 스코프코드 블록 내에서만 접근 가능변수 선언문에는 let, const, v.. Programing/React 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.
팀원 입장에서 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.
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.

티스토리툴바