브라우저
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?개발 블로깅/Improving Performance 2021. 10. 30. 01:00
💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은..
-
[2020.08.04] 브라우저 동작원리개발 블로깅/기타 개념 2020. 8. 4. 18:20
현재 정보화 사회에 이제는 없어서는 안 될 프로그램. 프론트엔드 개발자라면 무조건 다룰 수밖에 없는 도구이자, 끝없는 정보 바다에 접속하기 위한 필수 도구. 웹 브라우저. 우리가 평소에 접하는 이 화면은 도대체 어떻게 나타나게 되는 것일까? 우리는 평소처럼 당연하게 인터넷 주소창에 주소를 입력하고 거기에 해당되는 홈페이지 화면을 접하며 사이트를 돌아다니기만 했지, 이렇게 화면이 보여지는 과정이 어떻게 동작하는지는 생각해보지 못했을 것이다. (사실 그렇게까지 생각해 볼 필요도 없겠지만...) 프론트엔드 개발자 역시, HTML과 CSS 문서를 작성하고 Javascript 코드를 짜면서 기대하던 동작을 확인하며 웹 개발을 했을 것이고, 실제로 이 HTML문서가 어떻게 자리를 잡아서 웹 페이지에 각자 자리에 D..
-
[2019.02.22] 크롬으로 디버깅하는 방법개발 블로깅/Javascript 개념 2019. 2. 23. 00:21
역시..아무리 Pre코스라도 배울만한 내용이 많다. 크롬으로 디버깅을 돌리는 방식을 상세하게 공부할 수 있었다. 지금껏 나는 크롬 개발자 도구를 쓴다면, 자바스크립트에서 에러가 난 부분을 확인하는 용도로만 사용을 했었는데, 그보다 더 좋은 기능이 참 많았다.우선 개발자 도구를 켜는 단축키는 'option + command + i' 이다. # 크롬 개발자 도구를 켠 모습 개발자 도구에서 Source 탭을 누른다. 맨 왼쪽 창은 현재 읽히고 있는 모든 파일, 중간부분이 소스코드, 맨 오른쪽이 디버깅 제어 기능이란다. # 디버깅을 돌리는 화면 맨 오른쪽 창에서 어떤 이벤트를 발생했을 때 디버깅을 실행할 건지 나열이 되어있다. 키보드, 마우스, 터치, control 등등... 내용이 많아서 시간 날 때 한번 봐..