의미 있는 삶을 위하여 :) 의미 있는 삶을 위하여 :)

전체 글

• [JS_무작정] 무작정 따라하는 Javascript

  IT/JAVASCRIPT 2024. 6. 19. 14:09

  버튼 클릭시 배경화면 컬러 바뀜(gradiant background color)  https://codesandbox.io/p/sandbox/a09blueprint-forked-9m3bg9?file=%2Fsrc%2Findex.js%3A29%2C5 https://codesandbox.io/p/sandbox/a09blueprint-forked-9m3bg9?file=%2Fsrc%2Findex.js%3A29%2C5 codesandbox.io   숫자 입력후 버튼 클릭을 통해 매칭숫자 찾기 https://codesandbox.io/p/sandbox/empty-blueprint-forked-msxo3t?file=%2Fsrc%2Findex.js%3A5%2C32 https://codesandbox.io/p/sandbo..

  Read More
• [REACT_MEMO] 파워노트9

  IT/REACT 2024. 6. 13. 17:58

  # Hook의 규칙 Hook은 단순한 Javascript 함수이지만 두 가지 지켜야 할 규칙이 있다. 1. Hook은 무조건 최상위 레벨에서만 호출해야한다. 최상위 레벨 = React함수 컴포넌트의 최상위 레벨 따라서 반복문이나 조건문 또는 중첩된 함수들 안에서 Hook을 호출하면 안 된다는 뜻 Hook은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다. React가 다수의 useState hook과 useEffect hook에 호출해서 컴포넌트의 state를 올바르게 관리 할 수 있다. 2. React함수 컴포넌트에서만 Hook을 호출해야 한다. 일반적인 JavaScript 함수에서 Hook을 호출하면 안된다. Hook은 React함수 컴포넌트에서 호출하거나  직접 만든 커스텀 Hook에..

  Read More
• [REACT_MEMO] 파워노트8

  IT/REACT 2024. 6. 11. 17:19

  # Hooks의 개념, useState, useEffect Component에는 State라는 개념이 등장 state를 이용해서 렌더링에 필요한 데이터를 관리 + Function Component ㄴ state 사용 불가 ㄴ Lifecycle에 따른 기능 구현 불가 >> 클래서 컴포넌트와는 달리       코드도 굉장히 간결하고      별도로 state를 정의해서 사용하거나,       컴포넌트 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었다.      따라서 함수 컴포넌트에 이런 기능을 지원 하기 위해 나온것이 바로 Hook이다.      Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 사용 할 수 있다. + Class Component ㄴ생성자(컨스트럭터)에서 sta..

  Read More
• [REACT_MEMO] 파워노트7

  IT/REACT 2024. 6. 4. 00:44

  # State- 리액트에서의 State는 리액트 Component의 상태를 의미- 리액트 Component의 변경 가능한 데이터를 State라고 한다.- State는 개발자가 정의한다.- 중요한 점은 State는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. State가 변경될 경우 Component가 재 렌더링 되기 때문에, 렌더링과 데이터 흐름의 관련 없는 값을 포함하면 불필요한 경우에 컴포넌트가 다 시 렌더링 되어 성능을 저하시킬 수 있기 때문. 그래서 렌더링과 데이터 흐름에 관련이 있는 값만 state에 포함해야 하며, 그렇지 못한 값은 component의 인스턴스로 정의하면 된다.- 리액트의 state는 JavaScript객체이다. # 정의된 State는 직접..

  Read More
• [웹접근성] Role, State, Properties 란?

  IT/웹접근성 2024. 5. 24. 16:22

  wai-aria를 찾아보던 중 어떤 점이 궁금할까 싶어 몇 가지 적어 보았다. - 어디에 어떤 'role'을 써야 할지- 'aria-~'로 끝나는 속성들을 어떻게 줘야 할지- 'aria-labelledby', 'aria- label'의 차이점  추리면 3가지로 압축될 것 같다.아무래도 접근성 작업을 진행할 때,wai-aria보다 html tag본연의 의미를 살려서 마크업을 하거나,tab-index를 주로 사용하다 보니 wai-aria를 잘 사용하지 않았었다.  wai-aria가 주는 세심한 편리함 때문에라도,더 잘 많이 사용해 보기 위해, 오늘도 정리해 보겠다.   # Role, State, Properties란?+ 역할(role)태그의 역할을 알려주는 속성(attribute)role은 말 그대로 역할을..

  Read More