벨로퍼트 리액트 - 21. 커스텀 Hooks 만들기 커스텀 Hooks - 반복되는 로직을 쉽게 재사용하기 위해 사용. 보통 use라는 키워드로 시작하는 파일을 만들고 안에 함수를 작성해서 사용함. 커스텀 Hooks를 만드는 방법 : useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현한 후 컴포넌트에서 사용하고싶은 값들을 반환해주면 됨. 벨로퍼트 리액트 - 22. Context API를 사용한 전역 값 관리 Context API : 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있음. 이 값은 꼭 상태를 가리키지 않아도 됨! 사용법 - React.createContext() 함수 사용 const UserDispatch =..
전체 글
문제 설명 정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ num1 ≤ 100 0 ≤ num2 ≤ 100 입출력 예 num1 num2 result 3 4 12 27 19 513 입출력 예 설명 입출력 예 #1 num1이 3, num2가 4이므로 3 * 4 = 12를 return합니다. 입출력 예 #2 num1이 27, num2가 19이므로 27 * 19 = 513을 return합니다. function solution(num1, num2) { return num1 * num2; } https://school.programmers.co.kr/learn/courses/30/lessons/120804 프로그..
문제 설명 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. 제한사항 -50,000 ≤ num1 ≤ 50,000 -50,000 ≤ num2 ≤ 50,000 입출력 예 num1 num2 result 2 3 5 100 2 102 입출력 예 설명 입출력 예 #1 num1이 2이고 num2가 3이므로 2 + 3 = 5를 return합니다. 입출력 예 #2 num1이 100이고 num2가 2이므로 100 + 2 = 102를 return합니다. function solution(num1, num2) { return num1 + num2; } https://school.programmers.co.kr/learn/courses/30/lessons/1..
문제 설명 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 제한사항 0
문제 설명 정수 num1, num2가 매개변수로 주어질 때, num1를 num2로 나눈 나머지를 return 하도록 solution 함수를 완성해주세요. 제한사항 0
문제 설명 정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 return하도록 soltuion 함수를 완성해주세요. 제한사항 -50000 ≤ num1 ≤ 50000 -50000 ≤ num2 ≤ 50000 입출력 예 num1 num2 result 2 3 -1 100 2 98 입출력 예 설명 입출력 예 #1 num1이 2이고 num2가 3이므로 2 - 3 = -1을 return합니다. 입출력 예 #2 num1이 100이고 num2가 2이므로 100 - 2 = 98을 return합니다. function solution(num1, num2) { var answer = num1 - num2; return answer; } https://school.programmers.co.kr/learn/..
벨로퍼트 리액트 - 19. React.memo를 사용한 컴포넌트 리렌더링 방지 React.memo : 컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 함수. 컴포넌트에서 리렌더링이 필요한 상황에서만 하도록 설정할 수 있다. 사용법 export default React.memo(CreateUser); 적용후, input을 수정할때는 하단의 UserList는 리렌더링이 되지 않는다. 그러나 User 중 하나라도 수정하면 모든 User들이 리렌더링이 되고 CreateUser도 리렌더링이 된다. ⇒ users 배열이 바뀔때마다 onCreate도 새로 만들어지고 onToggle, onRemove도 새로 만들어지기 때문. ⇒ onCreate, onToggl..
7월 11일 오늘의 스터디로그 오늘은 프로그래머스 코딩테스트 한문제 풀었음! 문제는 없는 숫자 더하기. 링크 이건 내가 작성한 코드인데.. 아직 공부가 부족해서 지금은 이렇게가 최선이다! 좀 더 공부하면 더 간단하게 잘 쓸수 있겠지 다음번에는 좀더 공부해서 똑같은 문제를 다시 풀어보고싶다 그러면 좀 더 나은코드가 됐는지 볼 수 있을거같다 실행결과는 모두 성공! 그래도 직접 만든 코드로 문제가 잘 풀리니까 좋더라 그리고 패캠 프론트 국비강의 듣고 오버워치 캐릭터 선택창 만들었음! 이제 css 끝났다 내일부터는 js들어감 생각한걸 잘 정리해서 말하거나 적고싶은데 아무래도 노력이 많이 필요할거같다. 그래서 사실 쉽지는 않지만 벨로그도 다시 적어보려고..ㅋㅋㅋㅋㅋ 아무것도 안하는거보단 뭐라도 하는게 낫다 화이팅..
태그 : 삽화, 다이어그램, 사진 등 문서의 주요 흐름과는 독립적인 콘텐트를 정의. 문서의 내용과는 연관성을 가지나 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안됨. 그림 등의 콘텐츠를 표현하는 태그이지만 태그처럼 src, alt 등은 사용할 수 없고 이미지를 렌더링 하지도 않는다. 사용법은 태그로 이미지를 감싸고 설명이 필요할 경우 태그로 설명을 달면 됨. ex) 이미지에 대한 설명 태그 : figure 요소를 위한 캡션을 정의할때 사용. figure 태그의 첫번째 또는 마지막 자식으로 하나만 사용할 수 있음.
📚 Today I Learned svg 이미지 다루기 색상변경 크기조정 keyframe 애니메이션 🎨색상변경 1. style or fill 속성 사용 태그에 style="fill:___" 속성을 사용하거나, 더 간단하게 fill="___" 속성을 사용하여 svg 이미지의 색상을 제어할 수 있다. 색상은 rgb형태, hex 값, 또는 색상의 이름을 직접 정의할 수도 있다. style="fill:rgb(42,169,224)" fill="#689edf" fill="green" 2. css로 변경하기 html css .img-box .green { fill: green; } 에 class를 주고 css로 색상을 변경할 수 있다. 📏크기조정 svg 태그 내부에 width와 height 속성을 명시하면 쉽게 크기를..