한동안 글이 뜸했지만, 여러 가지 초안을 올리지 못했다. 살짝 지쳤었고, 여러 시행착오들이 있었다. 그 내용은 다른 게시글로 정리해보도록 하고, 지금 플로우 차트를 사용해볼 생각이라 이를 먼저 다루려고 한다. 목적 Socket.io 기반 서버와 클라이언트 간의 상호 작용을 도식화 할 필요가 있어, 플로우 차트를 사용하기로 했다. 지금 단계...

목적 이번엔 웹에서 사용하는 대표적인 통신 프로토콜, HTTP 를 다뤄보도록 하자. HTTP(HyperText Transfer Protocol) 란? 딱딱한 표현으로 해보자면, 웹에서 동작하는 클라이언트 - 서버 모델의 프로토콜이다. 또한, 전송 계층 프로토콜로는 TCP 를 사용하고 네트워크 계층 프로토콜로는 IP 를 사용한다. (딱딱...

목적 DNS 는 우리가 사용하는 도메인을 IP 주소로 변환해주는 역할을 하는 체계다. 어떤 방식으로 IP 주소로 변환해주는지 그 방식을 이해해보자. DNS란? Domain Name System 의 약자로, 사이트의 도메인을 IP 주소로 변환해주는 역할을 한다. 우리가 더 이상 휴대폰 번호를 외우지 않아도, 번호를 저장만 해둔다면 연락이 가...

목적 이번엔 URL 구조에 대해 이해하는 시간이다! 한 번 알아보도록 하자. URL 이란? Uniform Resource Locator 의 약자로, 리소스(자원)의 위치를 알려주는 일종의 ‘우편번호’로 이해하면 되겠다. ‘리소스’는 해당 페이지를 위한 HTML 파일이 될 수도 있고, 다운로드할 수 있는 다양한 파일이 될 수도 있다. 아무...

목적 우리가 웹 사이트를 접속하기 위해서 사용하는 대표적인 프로그램을 꼽아보라면 웹 브라우저인 ‘Google Chrome’, ‘Safari’ 등이 있다. 웹 브라우저 덕에 자주 이용하는 사이트에 접속해서 하고 싶은 일(ex. 유튜브 시청, 이메일 기능)을 하곤 한다. 개발자가 아니었다면, 원리를 파고들지 않아도 괜찮지만 나는 ‘웹 개발’을 하기...

문제 상황 검색 기능을 개선하는 과정에서, 검색창을 모달로 구현하기로 결정함. 모달이 나타나면, backdrop 을 만들어 배경을 흐리게 만들고 싶었음. 이렇게! 이 과정에서 모달 내의 input 이 아닌 모달의 외부 영역(backdrop)을 클릭한 경우, 모달이 닫히는 기능을 구현하고자 함. 이를 위해서는 useRef 를...

목적 블로그 이전을 위해, Next.js 와 React Router v7 과 Astro 를 놓고 고민하다 Astro 를 선택하기로 함. Astro..? 검색하면 차은우 그룹이라는 내용만 나오는데요? 나도 처음엔 그랬다. astro 프레임워크 라고 검색하니 그제서야 나왔다. 이제는 astro 라고 검색해도 바로 상단에 노출이 되지만, 여전히 아...