javascript 썸네일형 리스트형 [React] axios POST API 이미지와 함께 보내기 - Components const handleArticlePost = async () => { // input을 통해 이미지 등록하기 const productImages = document.querySelector('#image_file'); // 이미지가 여러개일 경우 for (let i = 0; i < productImages.files.length; i++) { formData.append('productImages', productImages.files[i]); } // 이미지파일이 아닌 일반 string 파일 추가하기 const json = JSON.stringify({ productName: title, placeName: coord.place_name, latitude: coord.lat, .. 더보기 [React]map 함수로 만든 메뉴에 개별 이벤트 걸기 - map으로 메뉴를 만들고 개별로 아코디언 메뉴 만들때 이벤트 걸어주기 import { useState } from "react"; const MenuArray = [ { title:"메뉴1" }, { title:"메뉴2" }, { title:"메뉴3" }, { title:"메뉴4" }, ]; const Test = () => { const [activeIndex, setActiveIndex] = useState(-1); const handleToggleMenu = (index) => { setActiveIndex(index === activeIndex ? -1 : index); }; return( {MenuArray.map((item, index) => handleToggleMenu(index)} >.. 더보기 [Error] Line 1:50: Delete `␍` prettier/prettier 에러 프로젝트를 진행하던 중 기존에는 일반적인 React를 사용하고 JavaScript로 만들던 중 추후 관리와 네이티브를 사용하기 위해 다른팀원분의 도움으로 TypeScript로 바뀌게 되었다. 팀원분이 TS로 변경한 후 push를 하신걸 확인한 후 pull을 받고 yarn install 을 실행하자마자 아름다운 에러로그다 떨어진다... 문제의 해결 방법은 구글링을 통 해 알 수 있었다. 먼저 프로젝트 내에 .esLint 파일을 열어서 아래와 같이 설정을 추가해준다. "error", { "endOfLine": "auto" } 해당 설정값을 추가해준 후 프로젝트를 재실행하면 오류가 해결된다. https://velog.io/@realsong/VS-Delete-prettierprettier-%ED%95%B4%EA.. 더보기 [JavaScript] 배열이란?? 1. 배열의 정의 JavaScrtip 에서의 배열(Array)이란 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다. JavaScript 에서 배열의 특징은 다음과 같습니다. 배열(array)요소의 타입은 고정되어 있지 않으므로 같은 배열 안에 있는 배열의 요소들의 타입이 다를 수 있습니다. (ex: [string, string, Number, bool, ...]) 배열 요소의 인덱스가 연속적이지 않아도 되며, 그에 따라 특정 배열 요소가 비어 있을 수도 있습니다. JavaScript에서 배열은 Array 객체로 다뤄집니다. 2. 배열의 생성 JavaScript에서 배.. 더보기 [JavaScript]JS의 Number 속성 소수점 제어 JavaScript에서 Number를 제어하다보면 소수점이 나오는 경우가 있는데 이 때 간단하게 해당하는 소수점을 제어 할 수 있는 객체가 있습니다. - Math 사용 Math.ceil(Number) // 소수점 올림. 정수 반환 Math.floor(Number) // 소수점 버림. 정수 반환 Math.round(Number) // 소수점 반올림. 정수 반환 위와같은 객체를 활용하여 JavaScript의 소수점을 제어할 수 있습니다. - Math.ceil(Number) 사용 먼저 소수점을 올리는 예제를 보겠습니다. const a = 5; const b = 3; const c = 6; const d = 5; console.log(a/b); // 결과 : 1.6666666666666667 console.lo.. 더보기 [JavaScript]Front로 가기위한 나만을 위한 JS 기초다지기-데이터 타입 해당 post 는 모던 자바스크립트 Deep Dive 책에 있는 내용을 인용한 post 입니다. 모던 자바스크립트 Deep Dive / 위키북스 이웅모 지음 숫자 타입 C나 JAVA의 경우 정수(소수점 이하가 없는 숫자), 실수(소수점 이하가 있는 숫자)가 구분되어서 int, long, float, double 등과 같이 다양한 숫자 타입을 제공합니다. 하지만 JavaScript의 경우 독특하게 하나의 숫자타입만 존재합니다. ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따릅니다. 즉 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않습니다. var integer = 10; // 정수 var double = 10.12; // 실수 .. 더보기 [JavaScript]변수에 할당 된 데이터 타입 조회 방법 JavaScript 데이터 타입 조회 방법 typeof “조회할 변수명” // 변수에 할당된 값 데이터 타입 체크 방법 var abc; console.log(typeof abc); // undefined; abc = 10; console.log(typeof abc); // number; abc = 'Hello'; console.log(typeof abc); // string; abc = true; console.log(typeof abc); // boolean; abc = null; console.log(typeof abc); // object; abc = Symbol(); console.log(typeof abc); // symbol; abc = {}; console.log(typeof abc); //.. 더보기 [React]filter, map, react-router-dom v6 활용기 filter 그리고 map 개인적으로 까먹지 않기 위해 기록한 코드입니다!!! 해당 코드가 무조건 맞는 것은 아닙니다! 분명 제가 작성한 코드보다 더 안전하면서 깔끔한 코드를 작성하신 분이 있을겁니다…. 개인적인 포트폴리오를 업그레이드 하는 중 NAS 를 집에 들여놓기엔 초기셋팅비용이 부담스럽고 서버를 대여하자니 현재로썬 그냥 단순하게 업그레이드하는 수준이라 그냥 DB를 사용하지 않고(?) github Page를 활용하기로 했습니다. React라면 REST API라도 사용해봐야하는데… JSON 대신 배열 컴포넌트를 활용하여 화면 구성을 진행하고 있습니다… 이상하게 꼬인 컴포넌트 구조 작성한 컴포넌트와 코드들입니다. 무작정 작성하며 나누다보니 이상하게 꼬인 경향이 있습니다… App.js에 Route를 모두.. 더보기 이전 1 2 다음
