전체 글
-
브라우저가 이벤트를 처리하는 방법웹 브라우저 2023. 3. 17. 13:46
웹 페이지를 (특히 동적 웹 페이지) 만들 때 이벤트는 매우 중요한 요소이다. 단순히 내 첫 팀프로젝트로 만든 웹 페이지만 해도 처리할 이벤트가 굉장히 많았다. 이런 식으로 프로그램의 흐름을 이벤트 중심으로 제어하는 방식을 event-driven programming 이라고 한다는데, 그게 중요한 건 아니고, 나는 수많은 이벤트 핸들러를 만들면서 이 이벤트들이 정확히 어떻게 동작하는 지 생각해보지 않았다. 여태까지는 문제가 없었지만, 내가 이벤트 핸들러를 만들었을 때 이게 어디로 가서 어떻게 동작하는 지 원리를 알고 있으면 확실히 문제 해결능력에 도움이 될 것이다. 출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 이벤트 드리븐 프로그래밍 이벤트가 발생하..
-
ES11 에서 도입된 재미있는 두 연산자 (옵셔널 체이닝, null 병합 연산자)JavaScript 2023. 3. 15. 00:36
약간 쉬어가는 느낌으로 ES11 에서 도입된 재미있고 때로는 유용하게 사용할 수 있는 두 연산자에 대해 알아보려고 한다. 사실 지금 소개할 두 연산자들은 필수적인 것은 아니고, if ... else 조건문으로 대체할 수 있다. 하지만 자바스크립트에서는 if ... else 같은 절차적 문장을 극도로 꺼려하는 느낌이 있다. (물론 상대적인 느낌이다) (for 문을 사용하는 대신 method 를 사용한다든가, 삼항 연산자나 논리 연산자를 이용한 단축 평가를 적극적으로 쓴다든가 하는) 물론 이해가 안 가는 건 아니다 ! if ... else 의 숲은 프로그램의 규모가 커질 때 코드의 가독성을 망가뜨리고, 유지보수를 힘들게 하는 스파게티 코드를 만든다. 이를 해결하기 위해 객체지향 개념이 등장하고, 프로그램 규..
-
티스토리에서 JSON 코드블럭을 작성하고 싶다 !블로그 관리하는 방법 2023. 3. 14. 23:09
블로그 글을 작성하던 중에 불편한 사실 한 가지를 깨달았다. 바로 티스토리의 코드블럭 서식에는 JSON 탭이 없다 !! 물론 많은 탭이 있긴 하다. 하지만 JSON 이 없다니, 지금 보니까 YAML 도 없네 ..? 하지만 걱정할 필요가 없다. 탭이 보이지 않는다고 해서 지원하지 않는 게 아니니까 ! 티스토리의 코드블럭은 highlight.js 를 이용한다. github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies. JavaScrip..
-
그래서 Babel, Webpack 이 뭔데 ??JavaScript 2023. 3. 13. 23:42
첫 웹 팀프로젝트를 하면서, Babel 과 Webpack 에 대해서는 신경조차 쓰지 않았다. 왜 ? 몰라도 아무 지장이 없었으니까. Create-React-App (이하 CRA) 를 사용하면 바벨과 웹팩을 전혀 모른 채로 리액트로 개발을 바로 시작할 수 있었다. 처음 프로젝트를 시작할 때, CRA 를 사용하면서 들었던 말이 이거다. 지금 프로젝트 정도 스펙에서는 바벨과 웹팩을 알 필요 없다고. 반대로 생각해보면, 더 좋은 프론트엔드 개발자가 되기 위해선 결국 이해가 필요하다는 말이 아닐까 ? 어쨌든 우리는 CRA를 썼지만, 바벨과 웹팩이 뭔가를 해줬기 때문에 배포가 된거고, 정말 아예 모른 채로 프로젝트가 끝났기 때문에 궁금함이 남았었다. 여유가 될 때 알아봐야지, 하고 생각했었는데, 이제 여유가 됬다...
-
FT_TRANSCENDENCE 회고 (첫 웹 팀 프로젝트 !)회고 2023. 3. 8. 19:47
https://github.com/42Blank/ft_transcendence GitHub - 42Blank/ft_transcendence: 승천 승천. Contribute to 42Blank/ft_transcendence development by creating an account on GitHub. github.com 프로젝트 시작 : 2023/01/15 프로젝트 완료 : 2023/03/03 총 커밋 : 1313 42에서의 마지막 프로젝트이자, 42에서의 첫 웹 프로젝트. 사실 ft_transcendence (이하 트센) 을 시작하기 전 까지만 해도, 나는 42 과제를 마친 후 AR Foundation 을 공부하려 했었다. 원래부터 VR 쪽에 관심이 많아서, 작년 1월부터 오큘러스 퀘스트 2를 구매..
-
DOM 을 좀 더 깊게 공부하자 !웹 브라우저 2023. 3. 7. 22:08
브라우저의 렌더링 과정에서 브라우저가 html 통짜 텍스트 문서를 어떻게 DOM 트리로 파싱하는 지 알아보았다. 이 DOM 이라는 자료구조에 대해 좀 더 자세히 이해하면 매우 좋다 ! 왜 ? 지금까지 이해한 것을 바탕으로 감히 생각해 보건데, 프론트엔드의 대부분의 작업은 이 DOM 트리를 조작하는 일이다. 바로 자바스크립트를 이용해서 ! (자바스크립트의 DOM API 를 이용해서) 그렇다는 것은 DOM 트리를 얼마나 잘 이해하고 있냐는 프론트엔드의 실력과도 상관관계가 많이 있을 것이라 예측한다. 자바스크립트 Deep Dive (나는 어느샌가 이것을 성경이라고 부르기 시작했다) 에는 DOM 을 거의 100페이지에 걸쳐서 길게 설명하는데, 나는 이것을 완벽하게 이해해서 최대한 압축한 글을 쓰려고 한다. 할 ..
-
브라우저의 렌더링 과정웹 브라우저 2023. 3. 7. 21:17
웹 브라우저에서 실행할 수 있는 것은 html, css, JavaScript 셋 뿐이다 ! (모든 브라우저는 내부에 자바스크립트 엔진이 내장되어 있다) 따라서 우리가 브라우저에 접속해서 도메인 주소를 입력하고 난 뒤 보이는 모든 화면은, html, css, JavaScript 로 작성된 텍스트 문서를 브라우저가 파싱하여 렌더링해서 보여주는 것이다. 출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 브라우저의 렌더링 과정 요약 브라우저의 렌더링 과정은 내가 이해한 대로 작성하자면, 아주 간단한 흐름은 이렇다.아래의 일련의 과정은 HTTP 프로토콜에 의해 이뤄진다. 1. 기본적으로 브라우저는 URL 을 입력받는 주소창을 제공한다. 2. 그 URL 에 원하는 ..
-
브라우저의 렌더링 과정에 대해 제대로 공부하자웹 브라우저 2023. 3. 5. 15:20
첫 팀 프로젝트인 트랜센던스를 끝낼 때 까지, 브라우저에 대해 거의 아는 게 없는 상태였다. 프로젝트의 마감기한이 빠듯하기도 했고, 처음 들어갈 때 아무것도 몰랐기에 우선 프론트엔드 코드를 짜기 위한 자바스크립트, 타입스크립트, 리액트의 실용적인 지식만을 채우기에도 벅찼기 때문이다. (거의 일주일만에 전부 학습했다) 하지만 프로젝트를 끝낸 후, 회의감과 함께 내가 너무 아는 게 없다는 생각이 들었고, 대체 내가 여태까지 한 게 뭔지에 대해 공부해야겠다는 생각이 간절했다. 일단 브라우저를 알고, html 과 css 를 알고, 자바스크립트를 알아야, 내가 프로젝트를 하면서도 TS 와 React 로 짠 코드가 어떻게 트랜스컴파일 되어 브라우저에서 어떻게 동작하는 지 파악할 것 아닌가 ? 그래야 디버깅도 수월하..