JEEWONSCRIPT

[React/Typescript] 반응형 네비게이션 만들기 (Navigation with CSS media queries) 이번 포스팅에서는 React 라이브러리와 Typescript로 화면 크기에 따라 배치가 바뀌는 반응형 네비게이션을 만들어보겠습니다. 반응형 웹이란 하나의 웹사이트에서 PC, 태블릿/패드, 모바일 등 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다. 위키백과 : 반응형 웹 디자인 Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. iPhoneX 기준의 디스플레이 사이즈를 적용한 모습입니다. 반응형이 잘 적용되어 상단 메뉴들은 사라지고, 네비게이션 왼쪽에..

[CS] 웹 브라우저 동작 원리(2) 이번 포스팅은 저번 웹 브라우저 동작 원리 (1)에 이어서 웹 페이지 로드 과정 중 Processing과 Load 과정을 살펴볼 예정입니다. 웹 페이지 로드 과정 아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다. W3C Navigation Timing Level 2 Specification https://www.w3.org/TR/navigation-timing-2/#processing-model 위의 "W3C Navigation Timing Level 2 Specification"의 도식에서 processing과 load 부분을 조금 더 자세히 살펴보면 ..

[CS] 웹 브라우저 동작 원리(1) 그동안 웹 개발을 공부하고 프로젝트를 진행하면서, 필요한 기능을 구현하고 동작시키는 것에 그치지 않고 조금 더 효율적이고 최적화된 코드들을 작성해보고 싶어졌습니다. 그러기 위해서 웹이나 브라우저의 구동 방식 등 기초적인 지식을 차근차근 공부해 보면 좋겠다는 생각이 들었는데요! 이번 포스팅에서는 웹 브라우저 동작 원리 및 브라우저가 웹 페이지를 어떻게 표현하는지에 대해 공부한 내용들을 일부 정리해보겠습니다. 웹 페이지 로드 과정 아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다. W3C Navigation Timing Level 2 Specification ..