LearnFit

 YouTube, 남들 모르는 크롬 개발자도구 소소한 기능 8개

서원석님의 학습노트

남들은 모르는 크롬 개발자도구 소소한 기능 8개

#전체

#개발자

#프론트엔드

#개발자도구

#숨겨진기능

#소소한기능

#코딩애플

#크롬

#devtools

#snippets

#adblock

#크롬 스크린샷

#크롬 screenshot

#풀사이즈스크린샷

00:00command + shift + p(ctrl + shift + p)로 검색모드 활성화

00:031. 개발자용 스크린샷 node screen shot은 유용해보임

00:552. Coverage 기능 css, js 파일이 실제로 어느 정도 percentage로 활용되고 있는지 파악 가능(안쓰는 함수, css 속성 파악 가능)

01:593. FPS 파악 기능

02:254. Sensor 기능

03:265. Code Editor 기능 로컬의 workspace를 크롬 개발자 도구와 연결해서 개발자 도구에서 수정한 내용이 파일에도 반영되도록 연동 가능(물론 화면에도 실시간으로 반영됨)

04:236. Live Expression 기능

05:127. Snippets 기능

06:138. Ad Block 기능

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기