본문 바로가기

분류 전체보기140

day34) [JavaScript] addEventListener [JS로 click 이벤트를 처리 하는 3가지 방법] 이벤트 핸들러(이벤트 리스너)는 특정 element에서 설정한 이벤트가 발생하면 처리하는 함수이다. 가장 보편적으로 사용되는 이벤트는 click event 이므로 이를 사용해 이벤트 핸들러를 호출하는 3가지 방법을 살펴보자. 1) onclick: inline방식 - HTML코드에서 등록 -단점: HTML 코드에 자바스크립트 코드가 추가되어 유지보수가 힘들고, 가독성이 좋지 않다. click 2) onclick: 자바스크립트에서 등록 -단점: 하나의 element에 하나의 이벤트 리스너 만을 등록할 수 있다. Click [addEventListner 예제] See the Pen Untitled by seoWork5795 (@seowork5795) on .. 2022. 2. 17.
우아한 테크) 그루밍의 상태관리와 반응형 프로그래밍 https://www.youtube.com/watch?v=alsCMx6vpG4 [상태] :변화하는 데이터 ->ui의 동적으로 표현되는 데이터 ->즉 사용자의 액션에 따라서 변경될 수 있는 컴포넌트의 부분을 나타내는 자바스크립트 객체 [상태 관리]: 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것. 앞서 말한 상태 즉 계속 변화하는 데이터를 알맞게 관리하기 위해 나온 개념 ex) 게임을 검색해서 원하는 게임을 찾는 것 , 채팅방이 만들어지고 사라지는 것 -> 게임이나 채팅방의 상태가 변경되면서 ui도 같이 변경이 되는 것. [상태에 대한 관리의 필요성] 1. 페이스북에서 좋아요를 누르면 모든 페이지가 다시 랜더링 되는 것이 아니라 실시간으로 좋아요 반영이 되고 인스타그램의 팔로우 반.. 2022. 2. 16.
[JavaScript] 키코드 KeyCode 8 키 9 키 12 키 13 키 16 키 17 키 18 키 19 키 20 키 27 키 32 키 33 키 34 키 35 키 36 키 37 키 38 키 39 키 40 키 41 키 42 키 43 키 44 키 45 키 46 키 47 키 144 키 문자키 65 A 키 66 B 키 67 C 키 68 D 키 69 E 키 70 F 키 71 G 키 72 H 키 73 I 키 74 J 키 75 K 키 76 L 키 77 M 키 78 N 키 79 O 키 80 P 키 81 Q 키 82 R 키 83 S 키 84 T 키 85 U 키 86 V 키 87 W 키 88 X 키 89 Y 키 90 Z 키 기능 키 112 F1 키 113 F2 키 114 F3 키 115 F4 키 116 F5 키 117 F6 키 118 F7 키 11.. 2022. 2. 15.
우아한테크)빙봉의 정규표현식 https://www.youtube.com/watch?v=CjoDIgDOHA4 [정규표현식의 이해] -특정패턴을 가지고 문자열을 찾을 수 있다. 메타문자: 문자를 나타내는 문자 수량자: 앞 문자의 개수 정규표현식의 구조 : 패턴구분자 시작(/) + 작성할 패턴 + 패턴구분자 끝(/)+ 패턴 변경자(g) 1. 메타문자 -. : 모든 문자 [] : 대괄호 안에 들어가 있는 문자 각각을 찾음. 대괄호 안에서 ^는 not을 의미 | : or \s: 공백, \d: 숫자([0-9]), \w: 영문자 모두, 숫자, 밑줄([0-9a-zA-Z]) 2. 수량자 +: 앞문자가 하나 이상({1, }) *: 앞 문자가 0개 이상({0, }) {n,m}: 앞 문자가 n개 이상, m개 이하 {n, }: 앞 문자가 n개 이상 {n}.. 2022. 2. 14.