띵동

서버에서 상품 데이터를 가져와서 화면에 보여주다가 이미지 정보를 제대로 가져오지 못해 엑박이 뜨는 경우가 있을 수 있다. 그럴 때 onError를 사용하여 기본 이미지를 사용하여 대체할 수 있다. // 대체 이미지 import import replace from '../assets/replace.png'; // error 발생 시 대체 이미지로 이미지 설정 const onErrorImg = (e) => { e.target.src = replace } // img 태그에 onError 설정 원래는 이미지 엑박이 떴었는데 기본 이미지로 잘 대체된 것을 볼 수 있다.

styled-components는 props를 활용하여 조건에 따른 스타일링을 할 수 있다. class 이름으로 따로 나누지 않아도 props를 사용하여 조건에 따른 스타일링을 할 수 있어 편리하다.

11) for를 이용한 기본 활용 1부터 100까지 모두 더하는 Code를 부분에 완성하세요. for를 사용해야 합니다. let s = 0; //pass console.log(s); for (let i=1; i

useMemo는 컴포넌트 성능을 최적화하는 데 사용되는 리액트 훅 중 하나이다. useMemo에서 Memo는 memoization을 뜻하는데, 이는 동일한 값을 리턴하는 함수를 반복적으로 호출해야 될 때 맨 처음 값을 메모리에 저장해서 필요할 때마다 재사용하는 기법이다. useMemo는 처음 계산된 결괏값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링되어도 해당 함수를 계속 호출하지 않고, 메모리에 저장해둔 값을 재사용할 수 있게 해 준다. useMemo는 두 개의 인자를 받는다. 첫 번째는 콜백함수, 두 번째는 배열이다. // useMemo(콜백함수, 배열) const value = useMemo(() => { return calculate(); }, [item]); 콜백함수가 리턴하는 값이 useM..

useRef가 반환하는 ref 객체를 접근하고자 하는 요소 태그에 ref 속성으로 넣어주면 해당 요소에 접근할 수 있다. input 요소에 focus를 줄 때 많이 사용한다. import React, { useEffect, useRef, useState } from 'react'; function App() { const inputRef = useRef(); const [input, setInput] = useState(""); useEffect(() => { inputRef.current.focus(); }, []) const onChange = (e) => { setInput(e.target.value); } return ( ); } export default App; useEffect와 useRef..

useRef는 변화는 감지해야 하지만 렌더링을 발생시키지 않는 값을 다룰 때 사용한다. 이것은 current라는 key 값을 가진 객체를 반환하는데, 여기서 value의 초깃값은 useRef의 인자 값이다. ref 객체 값은 수정이 가능하기 때문에 .current로 접근하여 언제든지 값을 수정할 수 있다. 그리고 반환된 ref 객체는 컴포넌트가 사라지기 전까지 유지된다. useRef는 state와 비슷하게 값을 저장하는 저장공간으로 사용된다. 하지만 여기서 ref와 state의 차이는 렌더링 발생 유무이다. state는 set 함수를 통해 값이 변화되면 렌더링이 되어 컴포넌트 내부 변수를 초기화한다. 반면 ref는 값이 변화되어도 렌더링이 되지 않아 변수들의 값이 유지되어 불필요한 값의 렌더링을 막을 수..

6) False 다음은 자바스크립트 문법 중에서 False로 취급하는 것들입니다. 앗, False로 취급하지 않는 것이 하나 있네요! True를 찾아주세요. NaN 1 "" 0 undefined -> null, undefined, NaN, 0, 빈 문자열, false를 제외하고는 모두 참이다. 7) 변수명 다음 중 변수명으로 사용할 수 없는 것 2개를 고르시오. age Age let _age 1age -> 자바스크립트 변수명은 문자, _, $로 시작해야 한다. (let은 변수를 선언할 때 사용하는 예약어라 변수명으로 사용 불가능) 8) 객체의 키 이름 중복 자바스크립트 객체를 다음과 같이 만들었다. 출력 값을 입력하시오. (출력 값은 공백을 넣지 않습니다. ) var d = { 'height':180, ..

1) 배열의 삭제 다음 배열에서 400, 500를 삭제하는 code를 입력하세요. var nums = [100, 200, 300, 400, 500]; // splice는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다 // splice(시작 인덱스, 삭제할 요소 개수, 추가할 요소) nums.splice(3, 2); splice는 삭제된 요소를 반환하여 nums.splice(3, 2)를 하면 [400, 500]이 반환된다. 이후 nums를 출력해보면 [100, 200, 300]만 남아있는 것을 확인할 수 있다. 2) 배열의 내장 함수 부분에 배열 내장 함수를 이용하여 코드를 입력하고 다음과 같이 출력되게 하세요. 데이터 var arr = [200, 100, 300]; ..

https://school.programmers.co.kr/learn/courses/30/lessons/120835 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(emergency) { let answer = []; const arr = [...emergency] emergency.sort((a,b) => b-a); arr.map((e) => { answer.push(emergency.indexOf(e)+1) }) return answer; } 가장 먼저 입력받은 emergency를 복사하여 새로운 배열인 arr를 생성해주..

https://school.programmers.co.kr/learn/courses/30/lessons/120812 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(array) { let answer = 0; let obj = {}; array.map((num) => ( obj[num] ? obj[num] += 1 : obj[num] = 1 )) const valArr = Object.values(obj) const maxVal = Math.max(...valArr) const modeArr = Object.keys(obj)..