키보드 이벤트 리스너는 document에서 전체적으로 관리한다. 익명함수에도 e 등 파라미터를 넣어 줄 수 있다. 모달 닫기 전, 꼭 현재 상태를 확인한 뒤 모달을 닫거나 다른 작업들을 처리해 주는것이 중요하다. document.addEventListener('keydown', function (e) { if (e.key == 'Escape' && !modal.classList.contains('hidden')) { // esc 키 눌렀을때, modal 에 hidden 이 없을 경우에 hiddenModal(); // SOMETHING TO DO.. } else if (e.key == 'Enter') {// 엔터키 눌렀을 때 hiddenModal(); // SOMETHING TO DO... } });
분류 전체보기
버튼이 3개 있을 때, 버튼 세개에 전부 클릭 이벤트를 주고자 한다면 반복문을 이용해서 처리해 줄 수 있다. app.js const showModal = document.querySelectorAll('.show-modal'); const modal = document.querySelector('.modal'); const closeBtn = document.querySelector('.close-modal'); const overlay = document.querySelector('.overlay'); for (let i = 0; i < 3; i++) { showModal[i].addEventListener('click', function () { modal.classList.remove('hidden..
useNavigate() 함수를 이용해서 페이징 처리하는 부분을 정리한다. const nav = useNavigate(); const onClick = () => { nav("/search"); } return ( 서치 페이지로 이동 ) 리엑트에서 동적 파라메터를 넘기는 방법은 useSearchParams 와 useParams를 이용할 수 있다. // path 페이징 처리 // 인자로 받아오게 처리
이번에 리뷰해볼 제품은 키크론(Keychro)에서 새로 출시한 B1 모델입니다. 키크론은 맥북 사용자라면 친숙한(?) 기계식 키보드 회사인데, 나는 일렉트로마트에서 여러 제품을 타건해봤지만 타닥타닥이는 소리가나는 키보드는 내 취향이 아니라서 이번 생에는 내게 키크론은 없을 줄 알았다. 하지만, 사용하고 있던 나의 작고 귀엽고 멋진 아이패드 미니 키보드가 슬슬 힘든지, (사실 처음부터 키압이 높아 마음에 쏙 들지는 않았다.) 펜타그래프 키보드임에도 중간에 걸리는 키들이 생겨서 새로운 키보드를 알아보던 중에, 키크론에서 펜타그래프 신규 모델 출시 및 예약 판매를 시작했단 이야기를 듣고, 정말 많이고민하다 구매하게되었다. 1. 다양한 색상(흰색아니면 그레이만 구매하지만) 2. 낮은 키보드 높이 3. 잘 알려진..
어제, 오늘은 페이지 라우터 처리와 캘린더 구현을 해보았다. 구현하고자 하는 기능에 도움이되는 모듈을 찾아 적용해보려고한다. 현재는, 오늘날짜 표시(파란색으로), 그리고 한글 날짜 표현까지 완료하였고, 추가적으로 DB와 연동하여 CRUD를 구축해서 실제 데일리 페이지에서는 스케쥴 관리를 하고, 월간 캘린더에서는 해당 스케쥴 및 체크리스트를 불러와 확인할 수 있는 정도의 어플리케이션으로 구축해보려고 한다. 개발기한은 이번달 말까지로 예상중이고, 디자인적으로 잘 뽑아서 한번 실제 앱스토어에 등록까지 해보고싶다. 하루 8시간씩 투자해서 전업 취준생을 지향하는중.
상단에 있는 스케쥴을 추가해 보는 모달을 생성하였다. 상단 플러스 버튼을 누를 경우 아래와 같이 모달창이 뜨게 되고 detail: 상세 내용 입력 시작시간과, 끝 시간을 입력받아 스케쥴 표에 나타낼 수 있다.(기능 추가중) Allday 버튼을 체크하면 하루종일 스케쥴로 변경된다(기능 추가중) 카테고리 색상을 선택하면 스케쥴표에서 보여줄 색상을 선택할 수있다(기능 추가중) 스케쥴에 이동시간이 포함된다면 이동 수단과, 이동 시간을 추가하여 스케쥴 표에 나타낼 수 있다.(기능 추가중) Create Schedule 버튼을 누르면 스케쥴이 추가되고 Cancel 버튼을 누르면 작성된 내용이 사라지며, 모달이 닫히게 된다. 추가적으로 데이터들을 하나의 배열로 받아와 처리하는 기능을 구현해서 관리하는것이 데이터를 읽고..
오늘은 todo 어플리케이션에 스케쥴을 추가하여 todo 및 데일리 스케쥴을 함께 관리할 수 있는 어플리케이션을 개발해보았다. 이전 todo 리스트 구현 내용 링크를 첨부한다. https://mingnol2.tistory.com/207 [React Native] 반려동물 케어 Todo 어플리케이션 개발 리액트 네이티브를 이용하여 안드로이드와 IOS 를 둘 다 지원하는 크로스플랫폼 TodoList를 만들어 보았다. 기존 어플리케이션과 차별화되는 점으로 OO의 성장일기 라고 헤더 타이틀을 지어 보았고 mingnol2.tistory.com 홈화면 > 오늘의 날짜와 오늘 해야할 스케쥴을 보여준다. 또한 하단부에는 기한이 없는 투두리스트를 생성하거나, 수정, 삭제 및 체크를 하여 관리할 수 있다. 하단부 Add ..
비오는 오후 오늘은 구직을 위해 어학 점수 취득을 하려고 토익 시험을 추가 기간에 등록했어요 이번 시험은 특별하게 오후 시험인데요 무려 2시 20분 입실 5시 10분 퇴실 입니다 ! 저는 오후 시험은 처음인데요, 오히려 오전중에 후딱 끝내는게 아니어서 더 떨리는 것 같아요~! 토익 준비물은 신분증, 연필(샤프), 지우개 등입니다! 수험번호는 시험이 시작되면 스티커로 배부되니 외우실 필요는 없어요! 오늘 시험 보는 곳은 서울 강서구의 중학교 인데요, 보고와서 스피커음질: 주차: 대중교통: 근처 카페: 화장실: 등등 시험 보러 오시는 분들을 위해 학교 컨디션 남겨놓으려고 해요 이번에 토익 졸업 할거에요! 다음번 시험은 이년뒤로 제발~~ 남은 이번달은 이제 자소서, 경력서 수정 및 입사 지원에 총력을 다하면서..
오늘은 블루투스 키보드 리뷰를 한번 작성해 보고자 합니다 제가선택한 키보드는 바로 한성 컴퓨터의 무접점 키보드 인데요 저는 평소 무접점 적축이나 펜타그래프 키보드 같은 손이 편한 키보드를 주로 사용하는 편입니다. 이 키보드를 선택하게 된 이유 3가지를 꼽자면. 1. 무접점 + 35g의 가벼운 스위치 2. 흰색 프레임 3. 무선 블루투스 기능 4. 콤팩트한 사이즈 5. 키캡놀이 가능(체리키캡) 등이 있습니다. 한가지씩 설명드려볼게요 1. 무접점 + 35g의 가벼운 스위치 저는 키보드를 이용해서 타이핑을 많이 하는 편이기 때문에 무거운 키보드를 장시간 이용하면 손목이 아프기 시작하더라구요. 그래서 무조건 가볍고 편한 스위치를 찾다가 이 제품을 선택하게되었습니다. 원래 가지고 있던 리니어 적축 무접점 레이저의..
리액트 네이티브를 이용하여 안드로이드와 IOS 를 둘 다 지원하는 크로스플랫폼 TodoList를 만들어 보았다. 기존 어플리케이션과 차별화되는 점으로 OO의 성장일기 라고 헤더 타이틀을 지어 보았고, 매일 케어 해야하는 목록들을 신규 작성하거나, 삭제 할수 있으며, 해당 내용을 완료했을 경우 체크 표시까지 기능을 넣어 보았다. React 와 조금 다르게 접근하여 데이터를 불러오는 과정이 필요해서, 한번 헤맸지만 구글 신의 도움으로 모달창에서도 입력받아 신규 목록을 넣어 줄 수 있다. React Native에서는 변경되는 입력값들을 아래와 같이 가지고 올 수 있다. setContent(e.nativeEvent.text); 추가적으로 사진기능과, 검색기능도 넣어봤는데 아직 상세 페이지는 없어서, 페이징 단위..