전체 글147 [일상] 해킹을 당했습니다. 해킹 방지 방법 hoax 메일 너무 부끄럽습니다.. 얼마전에 해킹을 당했습니다. 심지어 제가 10년간 사용한 메일이라 더 충격입니다. 어떤 피해를 봤고 어떻게 대처했는지 알려드리겠습니다. 여러분들께 경각심을 드리고자 글을 작성합니다. 저는 네이버 메일을 메인으로 사용하고 있고, 블로그 때문에 거의 하루에 한번 이상은 계속 접속합니다. 지난주 일요일 네이버 메일에 들어갔는데 깜짝 놀랐습니다. 갑자기 '내게 쓴 메일'로 저런 형태로 이메일이 와 있었습니다. ** 직접 내게 쓰기로 써본 결과 위의 메일과 같은 형태가 아니었습니다. 실제로 접속해서 쓴 것 같진 않고, 노출된 비밀번호 또한 이미 해킹당해서 퍼져있는 비밀번호 입니다. 해커는 그냥 이때다 싶어서 모든 계정들에 접근해본것 같습니다. 내용을 요약하면 다음과 같습니다. 너의 계정을 해.. 2023. 10. 31. [JS] generator polyfill regenerator 살펴보기 - Generator 3 [JS] generator 살펴보기 - Generator 2 [JS] generator 살펴보기 - Generator 2 Generator 1편과 이어서 보신다면 더 좋습니다. https://rbals0445.tistory.com/142 [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예 rbals0445.tistory.com 이전 글과 이어서 보신다면 이해하기 더 좋습니다. 지난 글에서 generator에 대해서 알아봤습니다. 함수의 실행을 중간에 멈추고 이어서 다시 실행하려면 어떻게 코드를 만들어야 할까요? Babel에서 generator를 트랜스파일 하면 generator가 사용되지 않은 코드가.. 2023. 10. 30. [JS] generator 살펴보기 - Generator 2 Generator 1편과 이어서 보신다면 더 좋습니다. https://rbals0445.tistory.com/142 [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예정입니다. babel이 Generator를 transpile한 코드를 이해하고, 어떻게 작동하는지 이해하기 위해 필요한 지식들을 미 rbals0445.tistory.com 지난 글에서 Iteration protocol에 대해서 알아봤습니다. 이번 글에서는 generator에 대해서 소개합니다. 제너레이터 사용법, 메소드같은 기초적인 내용들은 mdn 같은 문서를 참고 부탁드립니다. 정의 "코드 블럭의 실행을 멈췄다가 다시 실행할 수 있는 .. 2023. 10. 17. [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예정입니다. babel이 Generator를 transpile한 코드를 이해하고, 어떻게 작동하는지 이해하기 위해 필요한 지식들을 미리 정리합니다. 개요 JS에서 spread operator(...) 또는 for...of를 통해서 배열, 문자열 등을 펼치고 순회할 수 있습니다. Map, Set도 순회가 가능하다는데 이걸 다 암기하거나 매번 실험 할까요?? 이렇게 해도 되긴 합니다. 하지만 브라우저가 어떻게 순회 가능하다고 판단하는지 이해한다면, 암기하지 않아도 되고 다른 코드를 이해할때 큰 도움이 됩니다. Iterable, Iterator protocol iterable, iterator protocol 자체는 브라우저에 내장되.. 2023. 10. 16. [일상] 오픈소스 컨트리뷰톤 2023 MDN 한글화 완주 후기 안녕하세요. 최근에 포스트가 거의 없었던것 같습니다. 깊게 공부한 내용들을 남기고 싶다보니, 시간이 많이 필요합니다... 하지만, 최근에 오픈소스 컨트리뷰톤 2023을 마치게 되어 후기를 남겨보려고 합니다. 제가 신청한 프로젝트는 FE 관련 프로젝트인 '한국인 모두가 볼 수 있도록! MDN 문서 한글화' 입니다. 가장 오랜 기간동안 다양한 팀원들과 함께 하고, 리드멘티 역할로 팀 리드를 해보는 경험도 했습니다. 오픈소스 컨트리뷰톤 지원 https://www.oss.kr/ossca_23_projects 공개SW 포털 - 공개SW 포털 공개SW 포털 www.oss.kr 오픈소스 컨트리뷰톤은 대학교에 다닐때 한 번 해볼까? 라는 생각을 가졌던 프로젝트 였습니다. 프로젝트도 당시에 해보고 싶은 내용들이 있었고,.. 2023. 10. 11. React가 이벤트를 관리하는 방식 - 3 (완) https://rbals0445.tistory.com/139 React가 이벤트를 관리하는 방식 - 2 https://rbals0445.tistory.com/138 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모 rbals0445.tistory.com 지난 글에서 이벤트 발생시에 등록했던 이벤트 핸들러가 어떻게 작동하는지 알아봤습니다. 코드 분석을 하면서 얻게된 내용들을 최종적으로 정리할 예정입니다. 리액트에서 이벤트 버블링을 사용하면 안되는 이유? 약 반년전에 회사 소스코드에다가 이벤트 버블링으로 함수를 작성한적이 있었습니다. 당시에 작성하고나서 효율적으로 작성했군.. 하면서 PR.. 2023. 6. 19. React가 이벤트를 관리하는 방식 - 2 https://rbals0445.tistory.com/138 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모르는게 너무 많더라구요. ㅎㅎ 거의 2~3주 동안 시간이 나면 rbals0445.tistory.com React에서 사전에 어떻게 native event와 매핑이 되고, 실제로 등륵은 어떻게 이루어지는지 알아보았습니다. 이번 글에서는 어떻게 이벤트가 실행되는지 알아보겠습니다. 화면에 모든 컴포넌트들이 렌더링 되고, 특정 엘리먼트를 클릭하면 이벤트는 어떻게 실행 될까요?? 이벤트 실행시키기 item 1 을 클릭해서 'click' event를 발생시킨 경우를 예로 들어보겠습니다. 코.. 2023. 6. 18. 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. 이전 1 2 3 4 5 ··· 15 다음 728x90
