본문 바로가기

👨‍💻📱✍️🎢314

React 이벤트 처리방식과 SyntheticEvent React 는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. 합성 이벤트는 Synthetic Event 객체로 정의되며 브라우저 고유 이벤트와 완전히 동일하게 동작하지는 않습니다. 이번 포스트에서는 React 의 내부 이벤트 시스템의 동작 방식에 대해서 살펴보겠습니다. 😀 📌 SyntheticEvent 래퍼 객체 React 의 이벤트 핸들러는 크로스 브라우징의 일환으로 모든 플랫폼에서 동일한 이벤트 처리를 위해 구현된 인터페이스인SyntheticEvent 객체를 사용합니다. 이는 stopPropagation 과 preventDefault 등을 포함하여 브라우저 고유 이벤트와 동일한 인터페이스를 가지지만 모든 브라우저에서 동일하게 동작함을 보장합니다. S.. 2022. 10. 17.
베트남 다낭 3박 5일 여행기 🇻🇳 - 3일차 📌 셋째날 새벽, 다낭 시내 일출 셋째날 아침에는 일찍 눈을 떴어요. 창밖을 보니 이제 막 해가 뜨려고 해서 일출 사진을 찍기 좋은 기회라고 생각되어 얼른 카메라를 챙겨서 베란다로 나가서 촬영했습니다 😎 카메라에 다 안담겼는데 아름다운 일출을 보니 기분이 상쾌해지더라구요! 📌 오늘 조식은? 베트남 여행와서 여태까지 쌀국수를 한번도 못먹어봐서 호텔 조식으로라도 현지의 맛을 느껴보고 싶어서 한그릇 챙겨먹었어요. (사실 여기서 먹은거는 별 차이 없더라구요. 근데 이 다음날 먹은 쌀국수집이 정말 최고였습니다!) 질릴법도 한데 여기 빵은 정말 맛있더라구요 ㅎㅎ 매일 챙겨먹는데 항상 만족하고 있습니다. 📌 다낭 미케비치 이날 투어의 첫 코스는 미케비치였어요. 날씨도 굉장히 화창해서 사진도 정말 잘 나오더라구요 😄 .. 2022. 8. 26.
베트남 다낭 3박 5일 여행기 🇻🇳 - 2일차 📌 다낭에서의 첫번째 아침 다낭에서 맞이하는 첫번째 아침이 밝았습니다! 오늘은 정신없이 바쁘게 돌아다닐 예정이라 아침 조식을 든든히 먹기로 했어요 ㅎㅎ 가기전에 방에 준비되어있던 G7 커피를 한잔 타마셨어요. (참고로 G7 커피는 싫어하는 사람한테 기념품으로 주라고 할 정도로 평판이 안좋은 상품이라고 하더라구요..😅) 호텔 지하에는 투숙객들을 위한 아침식사가 제공되는 카페테리아가 있어요! 가기전에 검색해보니 맛이 괜찮다는 평이 많아서 기대를 안고 갔습니다. 😄 다양한 국적의 투숙객들을 위해 여러 종류의 음식이 제공된다고 들었는데, 후기대로 맛도 괜찮고 한식, 중식, 태국식, 베트남식 등 정말 다양했어요. 원래 아침을 안먹는데, 이날 호텔 조식은 입에 맞아서 정말 많이 먹었어요..ㅋㅋㅋ 베트남 호텔 조식에.. 2022. 8. 22.
베트남 다낭 3박 5일 여행기 🇻🇳 - 1일차 올해 여름에는 원래 친구랑 같이 제주도 여행을 가려고 했는데, 이번에 트리플 에서 임직원 특가 여행상품이 떠서 바로 결재하고 비행기표를 끊었습니다! 😀 친구 녀석은 여권이 만료된 상태여서 갱신을 하더라도 출국날에 여권을 받을 수 있어서 가능한건지 걱정이었는데.. 다행히 그날 바로 출국이 가능했어요 😅 이날 오후 반차쓰고 출발하는 것이었는데 전날에 짐을 미리 싸놓은 덕분에 늦지 않게 출발할 수 있었어요 ㅎㅎ 가는 도중에는 사진을 안 찍었는데 이날 비가 엄청 와서 비행기가 뜰 수는 있는 건지 걱정이었죠.. 공항철도를 타고 인천 국제공항으로 향하는데 영종도에 비가 엄청 오더라구요. 체크인하고, 가이드 설명 듣고 출국 수속을 마친뒤에 요런 로봇이 돌아다니고 있더라고요! 귀여워서 한컷 찍어봤습니다 ㅋㅋㅋ 짐이 많.. 2022. 8. 21.
File API 를 이용한 Input 컴포넌트 만들기 📌 들어가며 프로젝트 도중 HTML Input 을 래핑한 컴포넌트를 통해서 JavaScript 의 File 객체를 다뤄볼 기회가 생겼습니다. File API 에 대한 모든 것을 이번 포스트에서 다루지는 않지만, 필요한 기능을 구현하기 위해서 알아본 내용들을 정리해보겠습니다. 📌 File API 란? File API 는 파일에 대한 정보를 제공하고 JavaScript 를 이용해서 파일객체에 접근할 수 있는 다양한 인터페이스를 제공합니다. 업로드 한 파일의 이름을 변경하고 삭제하는 컴포넌트를 만들어보면서 File API 의 활용 방법에 대해서 알아보겠습니다. 먼저 파일을 다루는 FileInput 컴포넌트를 다음과 같이 정의하겠습니다. 여러개의 파일을 업로드 할 수 있도록 하기 위해 multiple 속성을 추.. 2022. 8. 13.
개발자 경험(DX) 톺아보기 💡 이번 포스트는 사내 위클리에서 발표한 내용을 정리한 것입니다. 📌 개발자 경험(DX) 이란? 흔히 UX(User Experience) 라 함은 고객이 이용하는 서비스에 대한 사용경험의 만족도를 의미합니다. 이러한 UX 개선 작업을 통해 고객들의 서비스 만족도를 개선하고 이는 곧 더 많은 사용자 유입으로 이어지며 나아가 해당 비즈니스의 수익 증진으로 이어지게 됩니다. DX(Developer Experience) 는 그럼 무엇일까요? 고객 대신에 개발자 를 대입해서 생각해보면 다음과 같이 정의할 수 있을 것 같습니다. 개발자들이 본인의 업무 환경에서 서비스를 개발하며 느끼는 경험의 만족도이며, 이를 개선하는 작업을 통해 팀과 프로젝트에 지속적으로 긍정적인 영향을 미칠 수 있다. 📌 개발자 경험이 왜 중요.. 2022. 8. 9.