기록용으로 대충 씀 1.Settings 패널1)테마2)소스 열었을 때 자동으로 네비게이터 보여줌 3)새로고침시에 캐시 X4)로그 좌측에 발생한 시간 표시 2.Elements 패널1)도구패널의 Computed : 최종 적용된 styles2)hover 상태에만 보여지는 부분을 기본으로 보이도록 상태변경 가능해당 엘리먼트 선택 후 오른쪽 '도구패널' 에서 Styles -> :hov 눌러서 설정:active 클릭했을 때:hover 마우스 오버했을 때:visited 방문 후3)Elements 에서 F12누르면 Edit as HTML 4)원하는 엘리먼트에 Break on 에서 감지를 걸면 해당 엘리먼트가 변경될 때를 소스에서 알 수있음5)엘리먼트에 바인드된 이벤트를 찾으려면 해당 엘리먼트누르고 도구패널에서 Even..
프론트 엔드 개발을 하기 위해서는 크롬 개발자 도구를 잘 활용해야 한다고 생각한다.. 지금의 나는 크롬 개발자 도구를 얼마나 활용하면서 개발을 했을까? 생각해 봤더니 Elements, Console, Sources, Application 탭 정도만 사용하더라...(이마저도 100%활용하진 못한다.) 그래서 이제부터는 사이트의 최적화를 위해서 중요한 Network, Performance, Audits등의 나머지 탭들에 대해서도 공부를 해야겠다고 다짐했다. 먼저 Performance 탭이다. (한번에 모든 것을 공부할 수가 없어서 차차 수정을 할 예정) 1.측정방법 -측정할 액션이나 페이지 로딩 전 레코딩 버튼을 누르고 원하는 결과물이 나오면 레코딩 stop을 한다.2.결과 분석 -내가 측정할 페이지에서 동..
리액트 공부를 하다가 책에서 배열에 대해 map 함수를 많이 쓰길래 뭔지 찾아보니 자바스크립트 내장 함수였다...(프론트를 할꺼면 이정도는 알았어야 했다...)그래서 공부해 보았다 Map1.map 메소드는 다음과 같은 방식으로 사용한다. 배열.map((요소, 인덱스, 배열) => { return 요소 }); 2.map의 기본 원리는 배열의 각 요소들에 대해 반복문을 도는 것인데 map의 인자로 함수를 넣어준다.그 말은 다시말해 배열의 각 요소들을 파라미터로 함수를 요소 수만큼 실행한다는 것이다.ex) const arr = [1,2,3]; let arr2 = arr.map((v) => {return v});3.주의할 점은 map을 사용한다고 원래 배열의 값은 바뀌지 않으므로 map을 사용한 결과값을 다른 ..