본문 바로가기

TIL

[TIL-141] 위코드 42일차: eventlistener 콜백함수 안에 인자 전달하기 onClick={handleBtn(num)} 이렇게 일반적인 함수처럼 parameter에 num을 쓰면 함수에 괄호가 붙어서 자바스크립트가 이 코드를 읽는 즉시 그 자리에서 실행되어버린다. 그래서 콜백함수를 화살표 함수로 주고, 화살표 함수 안에서 num을 인자로 받은 handleBtn을 실행해야 한다. onClick={ () => { handleBtn(num); } input 체크박스 값 받아서 filter 요청 보내기 label 연결하기 mini 1호 2호 3호 을 에 연결하려면 input의 id를 label의 for(JSX에서는 htmlFor)의 값으로 주면 된다. 그런데 checkbox 타입의 input의 경우, label 태그 안에 넣음으로써.. 더보기
[TIL-140] 위코드 41일차: setState 하다가 발생한 에러 ReactJS const 키워드로 선언한 state 문제 const [count, setCount] = useState(1); function countDown() { if (count > 1) { setCount(count - 1); } } setCount(count--)라고 쓰면 안됨.... 왜? ++도 마찬가지.... count - 1이라고 쓰라고 함. 해결 "count is constant." esLint가 알려준 에러문을 확인하면 위와 같다. count는 const 키워드로 선언된 state이다. 그런데 count++라고 하면 count = count + 1 인 셈이므로 count의 값을 재할당하게 된다. 즉, 나는 count++가 count + 1이라 생각하고 썼지만 count = count .. 더보기
[TIL-139] 위코드 40일차: Project 1 - path parameter 참고) React Router: 파라미터와 쿼리 https://velog.io/@bigbrothershin/%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EC%99%80-%EC%BF%BC%EB%A6%AC 구조분해 할당 자식 컴포넌트에 props로 객체를 넘겨줄 때, 구조분해 할당을 해서 받아도 다시 객체의 키로 최종적으로 사용할 값에 접근하는 게 번거롭다. //before function Main() { return ( ... {productList.map(data => ( ))} ... ); } function Product({ id, name, price, rate, description, sizes, url }) { return ( {descriptio.. 더보기
[TIL-138] 위코드 39일차: Project 1 - CSS flex-wrap과 grid .productContainer { display: flex; flex-wrap: wrap; justify-content: flex-start; // space-between width: 100%; padding: 0 160px; } flex-wrap을 써서 나열된 상품들이 div.productContainer의 너비를 넘게 되면 아래줄로 내려간다. 그런데 justify-content의 문제가 있다. flex-start를 하면 왼쪽으로 붙어 정렬되어 양쪽 여백이 맞지 않게 되고, space-between을 하면 상품이 덜 채워진 마지막줄이 어색해진다. 부모 선택자 & Path Parameter 조건부 렌더링 function Main() { const [productList, .. 더보기
[TIL-137] 위코드 38일차: JS 코드카타 https://www.w3schools.com/howto/howto_css_aspect_ratio.asp https://avada.tistory.com/1855 수정된 remote master 업데이트하기 1. git checkout master : local에서 master로 checkout한다 2. git pull origin master : remote의 수정된 master을 local에 pull한다. 3. git checkout working-branch : 작업중인 브랜치로 이동한다. 4. git merge master : 최신화된 local의 master를 작업중인 브랜치에도 반영한다. (conflict 발생 시.....) const reverseString = s => { for (let i.. 더보기
[TIL-136] 위코드 37일차: Project1 - CSS / JS 코드카타 li { display: flex; align-items: center; } li::before { content: ''; display: block; width: 1px; height: 18px; margin-left: 12px; background-color: #d2d2d3; } li:first-child::before { content: none; } https://goddino.tistory.com/43 text-decoration:line-through [CSS] 취소선 (text-decoration:line-through) https://zinee-world.tistory.com/234 button 배경 없애기 .callcenterBtn { padding: 10px 15px; border-ra.. 더보기
[TIL-135] 위코드 36일차: JS 코드카타 코드 카타 a+bi 형태의 복소수 두 개 곱하기 내 답안 const complexNumberMultiply = (a, b) => { const aArray = a.split("+"); aArray[1] = aArray[1].slice(0,-1); const bArray = b.split("+"); bArray[1] = bArray[1].slice(0,-1); const realNum = aArray[0]*bArray[0]-aArray[1]*bArray[1]; const fakeNum = aArray[0]*bArray[1]+aArray[1]*bArray[0]; return realNum+"+"+fakeNum+"i"; } console.log(complexNumberMultiply("1+3i", "1+-2i.. 더보기
[TIL-133~134] 위코드 34~5일차: React JS - Monster React JS Monster 과제 useEffect() 훅을 사용하여 데이터 로드(fetch)하기 useEffect(() => { fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" }) .then((res) => res.json()) .then((result) => setMonsters(result)); }, []); useEffect( () => { 실행할 코드 }, [ 이 안의 state 중 뭔가가 변경되면 useEffect()가 실행됨 ] ) : 콜백함수와 state들을 요소로 갖는 배열을 인자로 갖는다. 두번째 인자인 배열을 비우면 페이지가 로드될 때 최초 1회만 실행된다. fetch( "API 주소", { method: ".. 더보기

티스토리툴바