본문 바로가기

분류 전체보기

 (114)
React key 중복 오류 발생 ■  타임어택을 진행하면서 콘솔창에서 발생했던 키값 중복 오류Warning: Encountered two children with the same key, `16`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.내용을 읽어보니 키가 중복되니까 키를 고유한 값으로 유지해라 같은 내용으로 이해했다. 일단은 시간이 부족해서 콘솔창 오류는 해결 못하고 제출했었는데, 이후에 왜 ..
개인과제 - 올림픽 메달 트래커 (240808~240814) 2024 파리 올림픽에서 각 나라가 획득한 메달 수를 추적하는 Olympic Medal Tracker ■  배포링크 👉 바로가기 1. 프로젝트 셋업Vite 를 이용해서 리액트 프로젝트를 셋업하였다.  2. 기본 UI 레이아웃 작성// App.jsximport React from "react";import "./App.css";const App = () => { return ( 2024 Paris Olympic 국가명 금메달 은메달 동메달 국가추가 업데이트 {/* 메달 집계 리스트가 표시될 자리 */} ..
React github page 배포 오류 해결 Vite로 생성한 리액트 프로젝트를 깃허브에서 배포(settings - page) 했는데 링크는 생성되었지만 아무것도 없는 흰 화면이 떴고, 개발자도구에는 404 오류 경고가 떴다.그래서 이것저것 방법을 찾아봤는데 오류 해결이 안되어 결국 튜터님의 도움을 받았다.나중에 비슷한 오류가 났을 때 참고하기 위해서 기록해보자. yarn 으로 패키지 환경을 세팅했고 깃허브에서 배포를 하니 오류가 났다. yarn build 를 했더니 아래와 같이 오류가 발생했고 튜터님의 컴퓨터에서 했을 때는 오류가 발생하지 않아서 작성했던 코드엔 문제가 없는것으로 확인이 되었다. 시간이 많지않아서 yarn 버전을 튜터님이 사용하고 계시는 berry(yarn classic의 업그레이드 버전)로 변경해서 진행하기로 했다.명령어를 입력..
두 정수 사이의 합 문제 설명두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요.예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한 조건a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요.a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다.a와 b의 대소관계는 정해져있지 않습니다.입출력 예abreturn35123335312  ■  작성한 코드function solution(a, b) { var answer = 0; // a가 b보다 크거나 같을 경우 if (a >= b) { for (let i = b; i   ■  Math.min, Math.max 를 사용한 풀이function..
Math.pow(), Math.sqrt() ■  Math.pow() - 제곱값 구하기Math.pow(base, exponent)Math.pow(2, 3); // 8 base^exponent처럼 base에 exponent를 제곱한 값을 반환base값이 음수이고 지수(exponent)값이 정수가 아닌 경우 NaN을 반환  ■  Math.sqrt() - 루트값 구하기Math.sqrt(x)Math.sqrt(4); // 2 주어진 숫자의 제곱근을 반환매개변수가 음수라면  NaN 반환(제곱근은 음수가 나올 수 없으므로!)  [정수 제곱근 판별하기]문제 설명임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다.n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 ..
querySelectorAll 자바스크립트 DOM API 이해도 평가 문제들을 풀어보다가 살짝 헤매고 새로 알게된 부분들을 기록해본다. 요구사항"아래 HTML 요소에서 class가 "highlight"인 모든 요소의 텍스트색을 빨간색으로 변경하기" [HTML]    Change my color!    Don't change my color.    Change my color too!  ■  작성코드 JS[처음 작성한 코드]const changeColor = document.querySelectorAll(".highlight");changeColor.style.color = "red"; 여러번 본적 있던 querySelectorAll 을 사용해 동일한 class를 가지고있는 요소들을 전체 선택하여 색을 바꿔주면 될거라 생각했고 저장해봤..
Template Literals, Destructuring, Seperate Operator ■  Template Literals변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법백틱(`) 으로 구성할 문자열을 감싸주고 변수나 표현식은 ${ } 으로 감싸서 입력한다.(예시)let customer = { name: "하영" };let item = { name: "아메리카노", price: 4000 };console.log(`감사합니다, ${customer.name}님. ${item.name} 을(를) ${item.price}(원)에 구매하셨습니다.`);// 출력: 감사합니다, 하영님. 아메리카노 을(를) 4000(원)에 구매하셨습니다.  ■  Destructuring (구조 분해 할당)객체나 배열의 속성을 쉽게 추출할 수 있게 해주는 문법 ☛ 객체 Destructuring객체 안의 k..
localStorage Window.localStorage 웹 브라우저 로컬 저장 공간에 데이터를 저장하고 관리할 수 있는 storage 객체key-value(JSON 형식)으로 값을 저장만료기간이 존재하지 않으며 페이지 변경, 브라우저 종료 시에도 반영구적으로 유지됨도메인이 다른 경우 로컬스토리지 공유 불가  localStorage 메서드 데이터 저장localstorage.setItem(keyname, keyValue)key-value 쌍으로 인자를 받아 데이터를 저장하고 어떤 데이터 타입이던 키 값 모두 문자열로 변환된다.key-value 형식으로 풀어서 여러 개를 저장할 수도 있지만, 객체를 통째로 저장 시 JSON.stringify() 로 객체를 그대로 문자열화 해줘야함*JSON.stringify : 자바스크립트 객체를..

티스토리툴바