전체 글252 Bubbling과 Capturing Bubbling & Capturing Bubbling => start from child to parent Capturing => start from parent to child Bubbling과 Capturing은 순서가 정 반대인 동작이다. Bubbling은 이벤트가 발생했을때 자신이 속한 parent, 그리고 그 위의 모든 parent까지 이벤트가 발생한다. 여기에 애국가가 있다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 무궁화 삼천리 화려강산 parent id를 가진 div태그와 child id를 가진 div태그로 애국가가 감싸져있다. 이를 클릭하였을때 console.log()를 찍어내게 해보자 const parent = document.getElementById('.. 2023. 8. 25. useCallback useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React Hook이다. const cachedFn = useCallback(fn, dependencies) Parameters fn : The function value that you want to cache. On next renders, React will give you the same function again if the dependencies have not changed since the last render. dependencies : The list of all reactive values referenced inside of the fn code. Reactive values include props, sta.. 2023. 8. 8. Hooks 출처 - https://react.dev/reference/react Hooks Hooks를 사용하여 컴포넌트에서 다양한 리액트의 기능을 사용할 수 있다. Hooks는 독립된 재사용 가능한 함수형 자바스크립트 기능이다. State Hooks State hooks는 유저가 입력한 정보처럼 기억된 컴포넌트이다. useState와 useReducer가 있다. Context Hooks Context를 사용하면 component가 props를 사용하지 않고 멀리 떨어진 부모로부터 정보를 받을 수 있습니다. 예를 들어, 앱의 최상위 컴포넌트가 깊이에 관계없이 현재 UI 테마를 아래의 모든 구성 요소에 전달할 수 있습니다. Ref Hooks Refs는 컴포넌트가 렌더링에 사용되지 않는 정보들을 보관한다. state와.. 2023. 8. 8. React 리액트는 컴포넌트 기반의 유저인터페이스를 만드는 프론트엔드를 위한 무료오픈소스 자바스크립이다. Next.JS 처럼 싱글페이지, 모바일, 등을 개발하는데 사용할 수 있다. 리액트는 유저인터페이스와 DOM에 컴포넌트를 렌더링하는것에 초점이 맞추어져 있으며, 종종 라이브러리 및 기타 클라이언트에 의존한다. 리액트는 상태가 바뀌었을때, 그 상태에 따라 DOM을 업데이트 할 규칙을 정하는것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다. Virtual DOM을 사용하여 빌드하고, 실제 보여지는 DOM과 차이가 있는 곳을 감지하여 실제 DOM에 patch 시켜준다. 출처 - https://react.dev/reference/react 2023. 8. 8. [Lv.2] 오픈채팅방 package PG.Lv_2; import java.util.*; public class 오픈채팅방 { public static String[] solution(String[] record) { Map changed = new HashMap(); for (String re : record) { String[] tmp = re.split(" "); if (re.contains("Enter") || re.contains("Change")) { changed.put(tmp[1], tmp[2]); } } List tmp_answer = new ArrayList(); for (int i = 0; i < record.length; i++) { String[] tmp = record[i].split(" "); if .. 2023. 3. 29. [Lv.2]할인행사 ArrayList을 생성하여 원하는 물품을 갯수에 맞게 담아준다. 투포인터를 활용, int start_point, end_point를 생성해준다. (슬라이딩 윈도우) 반복문을 수행한다. (while문, 종료조건은 end_point가 discount의 길이만큼 되었을 때)3-2. for문을 start_point부터 end_point까지 수행해준다. discount배열을 순회하게된다.3-4. tmp가 비었다면, answer++; 3-5. end_point와 start_point를 ++해준다. 3-3. tmp에 discount가 들어있으면 tmp리스트에서 remove해준다. 3-1. tmp라는 새로운 ArrayList를 생성(1번 단계에서 생성된 ArrayList를 카피한다) package PG.Lv_2; i.. 2023. 3. 9. 이전 1 2 3 4 ··· 42 다음
