본문 바로가기

웹(web)136

크롬으로 CSS 디버깅 크롬 개발자 도구 Elements 탭에 들어가면 css를 디버깅할 수 있는 방식들이 여러 가지가 있다. 그 중 유용한 기능들을 소개하고자 한다. # box model 바로 수정하기 아래 사진의 가장 좌측 inspector를 누른 후 화면의 요소를 선택한다. 이후 Computed 탭으로 이동하면 다음과 같이 해당 요소의 박스모델을 볼 수 있다. 박스 모델을 바로 수정할 수 있다. - 부분을 더블클릭하면 다음 처럼 수정할 수 있는 상태가 된다. 여기에 숫자를 입력하거나 %, rem, em 등을 입력할 수 있다. 1rem을 입력해보면 16으로 바뀌는데 이는 px 단위로 바뀌는 것이다. px이 아닌 단위도 입력이 가능하고 최종적으로 px로 변환되는 방식이다. 박스 모델에서 값을 변경해보고 싶을 때 Compute.. 2021. 5. 5.
크롬으로 DOM 디버깅 기본적인 사용법은 공식 문서에서 확인할 수 있다. 이 글에서는 좋은 기능들을 정리해보고자 한다. developer.chrome.com/docs/devtools/dom/ Get Started With Viewing And Changing The DOM - Chrome Developers How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more. developer.chrome.com # 키보드로 DOM 탐색하기 크롬 디버거로 DOM을 디버깅하다 보면 손이 굉장히 바쁘다. 조금 더 편하게 디버깅하려면 키보드 arrow(화살표)를 활용하면 된다. 다음과 같은 디버거 상.. 2021. 5. 5.
자바스크립트 동작 방식: 실행 컨텍스트(execution context) 자바스크립트는 인터프리터 방식의 언어일까? 답은 no에 가깝다고 할 수 있다. 인터프리터 방식의 언어라면 다음 코드는 에러가 나야할 것이다. foo(); function foo(){console.log(1)} 코드는 크게 선언문과 실행문으로 나누어 볼 수 있다. 선언문은 변수, 함수 등에 대한 식별자 이름을 만드는 것이고 ( const a, function foo() {} ) 실행문은 선언된 것들을 가지고 사용하는 부분으로 볼 수 있다. (console.log(a), foo()). 결국, 자바스크립트 파일은 선언문과 실행문의 묶음이다. 이를 실행하는 규칙을 방식이 자바스크립트에서는 실행 컨텍스트라는 방식으로 되어있다. 실행 컨텍스트는 세 가지로 나뉜다. Global Execution Context: 함수.. 2021. 5. 2.
redux 기초(data, modifier, action) redux를 처음 접하면 굉장히 어려운 느낌이 든다. 구조가 전체적으로 이해가 안 가기 때문이다. 간단한 핵심 위주로 설명하고자 한다. 우선 redux를 쓰는 이유는 데이터를 관리하기 위함이다. 데이터를 관리하는 공간을 먼저 만드는 것이 시작이다. const countModifier = (state = 0) => { return state;}; const countStore = createStore(countModifier); data를 관리하는 곳이 만들어졌다. createStore로 저장공간을 만들어야 하고 데이터를 리턴하는 함수인 modifier가 인자로 들어간다. countModifier의 리턴 값은 0이다. 1. 데이터를 리턴하는 2. 함수 1,2 를 만족하는 것이 redux에서 흔히 부르는 r.. 2021. 3. 10.

티스토리툴바