WEB64 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모르는게 너무 많더라구요. ㅎㅎ 거의 2~3주 동안 시간이 나면 계속 틈틈히 찾아봤던것 같습니다. 첫번째 주제는 React에서 이벤트를 어떻게 관리하는지에 대해서 자세하게 알아보겠습니다. 이 글을 읽고나면 아래 내용들을 코드로 직접 확인할 수 있습니다. (10개가 넘는데 다 쓰진 않겠습니다) - 리액트에서 이벤트 버블링을 사용하지 않아도 되는 이유 - 리액트의 이벤트는 document가 아닌 rootElement에 등록된다는 사실 - 리액트에서 어떻게 이벤트 버블링을 통해 이벤트를 처리하는지? - 어떻게 특정 함수만 찾아서 영리하게 실행하는지? - onClick 함수를 onClick.. 2023. 6. 15. [Web] 정규표현식을 이용해 태그 변경하기, 문자열 중간에 태그 넣기 살다가 한번쯤은 만나게 될 정규표현식을 아름답게 사용하는 방법에 대해서 알아보겠습니다. 문자열 중간에 표시들을 태그로 치환하는 경우 Hello **** *good* ** *hello* =====> 변환 Hello **** good ** hello *를 통해서 문자열들을 강조 하고 싶을때 사용하는 방법입니다. 약간의 예외를 주기 위해서 *문자열* 의 케이스라고 생각해봅니다. const example = 'Hello **** *good* ** *hello*' const result = example.replace(/\*([\w]+)\*/g,`$1`) console.log(result) // Hello **** good ** hello ([\w]+) : 0-9, a-z, A-Z, '_' 를 포함한 문자가 적어.. 2023. 5. 20. [WEB] 테스트 코드 라이브러리 Jest 사용해보기 - 1 FE에서 테스트는 참 말이 많은 주제인것 같습니다. E2E, Unit Test를 도입해서 view, logic 을 모두 테스트하고, 커버리지도 100% 달성하겠다! 이런 것은 쉽지 않습니다. Input과 Output이 명확한 데이터를 다루는 영역에서는 테스트를 작성할때 이슈가 많이 없지만, FE는 DOM을 실시간으로 바꾸고 그 화면들을 테스트 하는것은 쉽지 않습니다. 또한 들어가는 노력에 비해서 return이 그렇게 크다고 생각하지 않습니다. 테스트를 도입해서 생기는 코드의 견고함과 안정성은 동의하지만, 화면같은 경우 자주 설계같은것이 바뀌게 되는데 그럴때마다 새롭게 TC를 정의하고 확인하는것이 시간 대비 효율이 맞나 싶은 생각이 있습니다. 하지만 util함수에는 BE처럼 똑같이 테스트를 할 수 있겠다고.. 2023. 5. 15. [Type Challenge] Capitalize 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/00527-medium-append-to-object/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념.. 2023. 4. 9. [Type Challenge] Append to Object 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/00527-medium-append-to-object/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념.. 2023. 4. 8. [Type Challenge] BEM style string 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/03326-medium-bem-style-string/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념.. 2023. 4. 7. [Type Challenge] Absolute 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/00529-medium-absolute/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념정리 infer.. 2023. 4. 3. [Type Challenge] Length of Tuple 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/00018-easy-tuple-length/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념정리 as .. 2023. 4. 2. [Type Challenge] Pick 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/00004-easy-pick/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념정리 Lookup Type.. 2023. 4. 1. [Type Challenge] Exclude 문제 https://github.com/type-challenges/type-challenges/blob/main/questions/00043-easy-exclude/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 문제 의도 및 개념정리 제네릭과 유니온.. 2023. 3. 26. 이전 1 2 3 4 5 ··· 7 다음 728x90
