프론트앤드2

• 

  웹페이지 디버깅 크롬브라우저에서 F12키를 누르면 아래와 같이 디버깅 창이 활성화 된다. 붉은색이 메뉴이며 이 메뉴에서 Element는 위 화면처럼 선택한 엘리먼트의 스타일이 어떻게 적용되었는지, 어떤 셀렉터(selector)로 접근해야 하는지등의 정보를 알 수 있고 Console은 자바스크립트를 변수나 객체정보를 확인하거나 오류메시지를 확인할 때 사용한다. console.log(변수나 객체)등으로 확인이 가능하며 debugger;를 자바스크립트 코드상에 넣었을 경우 그 라인에서 디버그모드로 들어간다. Source는 이 페이지의 소스가 어떤건지, 어느 시점에서 디버그를 위해 브레이크포인트를 걸 지등에 사용한다. 내가 작업한 js파일을 찾아 오류난 부분이나 확인할 곳에 breakpoint를 걸고(라인넘버를 클릭하면 걸림).. 프론트앤드 2023. 1. 31.

• 

  자바스크립트 네임스페이스 패턴 개인적으로 현재 주된 운영환경이 리액트나 뷰js를 사용하지 않는 환경으로 주로 네임스펭스 패턴으로 페이지마다 클래스를 만들어 사용하고 있는데 개인적으로 심플하고 이해하기 쉬워서 예제처럼 틀에 맞춰서 잘 사용하고 있다. javascript 에서 함수 혹은 변수객체를 다룰때 중복된 name 사용으로 인한 문제를 방지하기 위해 주로 namespace 방법이 사용된다. 이는 global 영역에 객체 고유의 영역을 지정하고 변수와 함수 할당을 해당 namespace 하위로 두게 하여 중복된 name 으로 인한 오류를 피하는 방법이다. 각 페이지마다 매개변수로 window객체와 document객체를 받는 즉시실행함수를 선언하고 (function(W,D){ .. }(window,document)); 그 안에 네임스페.. 프론트앤드 2023. 1. 28.