Dev Lemmy

진행중인 리액트 쇼핑몰 프로젝트에서setTimeout() 함수로 3초후에 사라지는 div를 만들어 보겠다. 먼저 사라질 div를 하나 만들어주자. 3초 후에 사라지는 div를 만들었고 이제 setTimeout() 함수를 사용하여 이 div를 사라지도록 하면 될 것이다. 그렇다면 setTimeout() 함수를 사용하여 3초후에 해당 를 사라지게 하기 위해먼저 상태 관리 hook인 useState를 이용하여 관리하면 될 것이므로const [showAlert, setShowAlert] = useState(true); 로 useState를 만들어주자. 그리고 useEffect 함수안에 setTimeout을 설정하면 특정 시간 후에 상태를 변경하는 방식으로 구현하면 된다. 이렇게 하면 3초뒤에 사라지는 div를 ..

리액트 블로그 프로젝트 중에배열 state의 특정 index를 삭제하는 기능을 구현하려한다.그래서 찾아본 결과 splice() 함수를 사용하여 array의 특정 index를 삭제할 수 있다. spice() 메서드에 파라미터 입력 시첫번째 파라미터는 인덱스의 위치이고두번째 파라미터는 삭제할 원소의 개수이다.ex) .splice(1,2);   -> 인덱스 1번 위치부터 2개의 값을 삭제함. 인덱스1, 인덱스2를 삭제하는 것임 이 메서드를 활용하여 글 삭제 버튼을 만들어 보겠음. 위와 같이 copy라는 변수로 title state의 복사본을 만들어copy.splice(i,1); 해주고 state 변경 함수인 setTitle에 copy를 집어넣어 주면해당 클릭한 글 삭제 버튼의 게시물이 잘 삭제 된다.(참고로 ..

현재 공부중인 react blog 만들기 강의 중글 제목 배열을 가나다순으로 정렬하라는 숙제(?)가 있었다. .sort() 함수를 이용하기로 했다. 버튼을 하나 만들고 원본 배열을 유지한채 원본 배열의 내용과 같은 새로운 배열을 만든 뒤sort() 함수로 정렬해주었음.   이렇게 하니 버튼 클릭 시 글 제목들이 잘 정렬된다.

Null 병합 연산자 (??)좌측 피연산자가 null 또는 undefined일 경우 우측 피연산자의 값을 반환함.  ex)const name = clickChangeSearch?.name ?? search?.name; clickChangeSearch?.name가 null, undefined인 경우search?.name의 값이 사용됨 반대로 clickChangeSearch?.name가 null, undefined이 아닌 경우clickChangeSearch?.name의 값이 사용됨  결론적으로 연산과정은clickChangeSearch?.name이 먼저 평가되며null, undefined일 경우 clickChangeSearch?.name은 undefined가 될 것이고?? 연산자로 인해 search?.name..

옵셔널 체이닝 연산자(?.)객체의 속성이나 메소드에 접근할 때, 객체가 null 또는 undefined일 경우 에러를 발생시키지 않고undefined를 반환하게 해주는 연산자임.주로 객체가 null 또는 undefined일 수 있는 상황에 안전하게 접근하기 위해 사용 됨 ex)const name = search?.name;const authCode = search?.authCode;const status = search?.status; search 객체가 null이거나 undefined가 아니라면 search.name, search.authCode, search.status의 값을 반환search 객체가 null이거나 undefined이면 name, authCode, status 모두 undefined를..

let num = [1,2]; num이라는 변수에 [1,2]이라는 배열이 담겨있는데여기서 1,2를 따로 변수로 빼고싶을때 사용하는 Destructuring이라는 문법이 있음 let num = [1,2];let a = num[0]; 하면 변수 num의 index가 0번째인 1이 a에 담길것이고let b = num[1]; 하면 index가 1번째인 2가 b에 담길것이다. 이것보다 조금 더 편하게 코드를 작성하면let [a,b] = [1,2]; 해주면 a라는 변수는 1, b라는 변수는 2가 된다 이것이 Destructuring 문법이다.

.splice() 메서드는 배열에서 요소를 추가하거나 제거하는데 사용되는 JS 배열의 내장 메서드임이 메서드는 원본 배열을 변경하고, 제거된 요소들을 새로운 배열로 반환함  .splice() 메서드의 구조array.splice(start, deleteCount, item1, item2, ...) start: 배열에서 제거 또는 삽입을 시작할 인덱스를 지정한다. 0 이상의 정수deleteCount: 제거할 요소의 수를 나타내는 정수임. 0 이상의 정수, 생략 가능 (start 인덱스부터 모든 요소 삭제)item1, item2, ...: 배열에 추가할 요소 (생략 가능)  사용 예제1. 요소 제거const fruits = ['apple', 'banana', 'cherry', 'date'];// 인덱스 2부터..

화살표 함수는 ES에서 도입된 간결한 함수 표현식이다.화살표 함수를 사용하면 function 키워드 없이 함수의 몸체를 정의할 수 있으며this 값의 바인딩 방식이 다르다.화살표 함수는 주로 콜백 함수로 사용될 때 유용하며this를 명시적으로 바인딩 할 필요가 없을 때 간편하게 사용할 수 있다.  화살표 함수의 기본 문법은 다음과 같음(param1, param2, ..., paramN) => { statements }(param1, param2, ..., paramN) => expression  사용 예시// return 없을 시const greet = (name) => { console.log(`Hello, ${name}!`);};greet('Alice'); // 출력: Hello, Alice!/..

Array.findIndex() 함수는 배열 내에서 주어진 콜백 함수의 조건을 만족하는 첫번째 요소의 인덱스를 반환하는 배열 메서드조건을 만족하는 요소가 없을 시 -1을 반환함  Array.findIndex() 함수의 구조array.findIndex(callback(element[, index[, array]])[, thisArg])callback : 각 요소를 검사하기 위한 함수로, 세 가지 매개변수를 받음element : 현재 처리되고 있는 요소index (선택적) : 현재 처리되고 있는 요소의 인덱스array (선택적) : findIndex가 호출된 배열thisArg (선택적) : callback 함수 내에서 this로 사용할 객체   예제 -  1. 배열에서 특정 조건을 만족하는 첫번째 요소의 인..

JavaScript의 String과 Array 객체에는 .includes() 메서드가 있으며, 각각 문자열이나 배열에특정 값이 포함되어 있는지를 확인하는데 사용됨.이 메서드는 boolean값을 반환함.  String.includes()String.includes() 메서드는 문자열에 특정 문자열이 포함되어 있는지를 확인함string.includes(searchString, position) - searchString : 문자열에서 찾고자 하는 부분 문자열- position (선택사항) : 검색을 시작할 위치를 지정함. 기본값은 0임   예제 -const sentence = "The quick brown fox jumps over the lazy dog.";console.log(sentence.includ..