조젤리의 개발일기

react를 최신버전으로 업데이트를 하기위해 npm install react@latest react-dom@latest 입력했더니 해당 문제가 발생했다. 설치하려는 폴더에 설치가 되어있어 발생할 가능성이 높다. 폴더에 있는 node_modules, package-lock.json 삭제 후 재설치 하자

💡 자바스크립트에서 함수란? 함수를 우선 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭으로 이해하면 된다. 함수를 우선 지시사항들의 묶음(과정)으로 이해하면 된다. 함수는 재사용 가능한 영역을 정의하고, 정보영역을 캡슐화하는데 사용되는 구문이다. (여러번 호출 가능) 일반적으로 (입력 – > 함수 – > return – > 출력) 형태를 갖는다. 함수 선언을 위해서는 Keyword, name, paramenter, body 필요하다. // Keyword -> function // Name -> hello // Paramenter -> () // Body -> {} function hello() { } 함수는 function 키워드로 시작하고, 실제로는 객체이다. 함수는 정의/생성할 수 있으며, ..

$('.class1').click(function() { some_function(); }); $('.class2').click(function() { some_function(); }); ==> $('.class1, .class2').on('click', some_function); 또는 $('.class1').add('.class2').on('click', some_function); 또는 $(document).on("click touchend", ".class1, .class2, .class3", function () { some_function(); });

JQuery에는 선택함수가 여러개 있다. closest(), parant(), siblings(), children()가 사용되는 방법에 대해 알아볼것이다. $(this)는 #me를 기준으로 하겠다. 1.parent() $(document).on("click","#me", function(){ $(this).parent().css("background-color", "red"); }); ==> grandmom, mom 의 div 색이 red로 변경 부모들을 호출한다. 만약 grandmom만 호출하고자 한다면 $(this).parent().parent()로 호출하는 방법이 있다. 2.closest() $(document).on("click","#me",function(){ $(this).closest()...

find= 요소를 찾는다. not=요소를 제외한다. val=값을 넣거나 찾기 closest= 가장 가까운 요소를 찾기(해당 라인 또는 같은 라인에 있는 정보를 찾고 싶을때 사용한다.) find("td:wq(0)") -0번째 요소를 찾는다. not("td:wq(0)") -0번째 요소를 제외한다. find("input")val("벨류추가"); -input태그의 value값을 "벨류추가"로 바꾼다. .toFixed(1) Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후 , 그 값을 문자열로 반환한다. -소수점 첫자리까지 나타낸다. $('#parent li:last-child').closest('ul').find('li').length; id가 parent인곳에서 마지막 li인 요소의 상위 ..

indexOf 는 앞에서 부터 문자열 찾기 lastIndexOf는 뒤에서 부터 문자열을 찾는다고 생각하면 된다. indexOf(검색할 값 , 시작위치) - 시작위치에서 부터 검색할 값을 찾기 시작하는 속성이다 여기서 시작할 위치가 생략이 될 경우(indexOf("3"))에는 시작위치의 값을 0으로 인식하여 처음부터 검색을 시작한다. 일치하는 결과값이 없을 경우에는 -1로 결과를 리턴 var str = "123456123456123456" ; console .log(str. indexOf ( "3" )); // 결과 : 2 console .log(str. indexOf ( "3" , 10 )); // 결과 : 14​ lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex로부터 역순..

SheetJS는 배열, json, html 형태 등 다양한 형태의 데이터로 엑셀 파일을 생성해 주는 오픈 소스이다. 1. SheetJS를 사용하기 위해서는 라이브러리를 추가해주어야 한다. 1. 엑셀 Workbook을 생성하고 2. 데이터(배열/json/html table) 가져와서 sheet 만들고 3. workbook에 만든 시트를 추가 4. 엑셀 파일을 만들고 5. 다운로드 받을 수 있게 처리 html table을 다루겠다. excel download 엑셀파일 다운로드 ... main.js 스크립스에 버튼과 테이블에 대한 클릭 시 exportExcel 함수 호출 과 table의 id값과 파일명, 시트명 등 본인이 설정한 값에 대한 수정을 해준다. const excelDownload = document..

Typo in static class property declaration porpTypes생성 중 발생된 오류 소문자 대분자를 주의해서 사용하자 PropTypes(x) propTypes(0) Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.string.isRequired };

prop-types란? props는 전달받은 props가 내가 원하는 props인지 확인해주는 역할을 한다. 프로젝트 파일에 들어가서 npm i prop-types를 해준다. 설치확인은 package.json에서 확인 설치방법 프로젝트 파일에 들어가서 npm i prop-types를 해준다. 설치확인은 package.json에서 확인 사용이유 만약 ⇒ picture를 보내야 하는데 imges를 보내거나 한다면 props가 들어가지 않을 것이고 component는 제대로 작동하지 않을 것이다. 때문에 prop-types를 사용한다. 사용방법 import PropTypes from "prop-types”

React를 이용해 img를 삽입하는 작업을 하다보니 img 부분에서 경고가 발생했다. alt를 넣지 않아서 생기는 경고인데 alt는 시각장애인을 위한 정보이다. 이를 작성하는게 code style에 도움이 된다. 고로 경고문을 해결하려면 img 에 alt를 삽입해주도록 하자. function Food({name , picture}) { return ( ); }