아래는 "브라우저가 어떻게 동작하는가"에 대한 MDN 문서이다.https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/How_browsers_work 여기서는 위의 문서를 읽으면서 설명이 애매하다고 생각한 부분이나 감상(?), 새로 알게된 것들을 적어보려 한다.누군가 위의 문서를 보다가 이해가 안되는 부분이 있을 때 이 글이 참고가 되면 좋겠다 NavigationDNS 조회(DNS Lookup)패스 TCP handShake패스 TLS 협상(TLS negotiation)HTTPS 보안 연결에 대한 설명인데, 간단하게 설명하면1. 브라우저가 서버에 요청을 보냄2. 서버가 브라우저에 인증서와 퍼블릭 키를 보냄3. 브라우저가 서버로부터 받은 퍼블릭 키를..

리액트 개발에 있어 어떠한 CSS 라이브러리/프레임워크를 사용할까 고민하다가 tailwind css(유틸리티 클래스)를 선택하게된 계기에 대한 글 https://alexkondov.com/full-stack-tao-styling/어떤 CSS 라이브러리/프레임워크를 사용할까하다가 우연히 찾게된 아티클이다. 이 아티클에 대해 간단하게 정리해보면 두 가지다.1. 많은 경험상 재사용 가능한 CSS 클래스는 허울 좋은 미끼라는 결론에 도달2. 전통적인 페이지 기반의 디자인을 위한 CSS를 작성 및 변경하는 방식과 현대 웹 프론트엔드 개발 패러다임(컴포넌트 기반)과 맞지 않음. --> 개발 패러다임의 변화에 맞게 CSS 개발(?)도 변화해야 함전통적으로 CSS를 작성할 때 클래스 이름은 의미를 담고 있어야 하고, ..

아래 링크 따라서 self-signed 인증서 발급 완료 후https://ko-ko-song.tistory.com/66 아래의 코드로 https 서버 생성 후 실행const express = require("express");const https = require("https");const fs = require("fs");const path = require("path");const options = { key: fs.readFileSync(path.resolve(__dirname, "./config/example.server.key")), cert: fs.readFileSync(path.resolve(__dirname, "./config/example.server.crt")),};const app..

내부망에서 사용할 웹 서버에 https 적용을 해야하는 요구사항이 생겨 ssl 발급을 받아야 했고 이걸 정리해봤다.(내부망에서 사용할건데 왜 https를...) 다음과 같은 순서로 이루어진다.Root CA(Certificate Authority)으로 인증서 생성root-ca key 생성csr 생성을 위한 conf 파일 생성root-ca csr(Certificate signing request) 생성root-ca crt (인증서) 생성웹 서버에서 사용할 인증서 발급server private key 생성csr 생성을 위한 conf 파일 생성server csr 생성server 인증서 생성 1. Root CA로 인증서 생성a. root-ca key 생성openssl genrsa -aes256 -out examp..

배경지식아래의 두 date 객체는 다르다.new Date('2024-09-23') // 2024년 9월 23일 한국 시간 9시 2024-09-23T00:00:00.000Znew Date(2024, 9, 23) // 2024년 10월 23일 한국 시간 0시 2024-10-22T15:00:00.000Z 문제상황아래와 같이 new Date(”2024-09-23”)와 같이 date 객체를 만들고 이를 URL 쿼리에 직접 넣어서 http 요청을 했더니 원하는 날짜로 필터링이 제대로 안됐다.  (  [해당 날짜 0시 ~ 다음 날 0시) 이렇게 필터링 하려 했음 )서버에서는 UTC 기준 9시로 받아지고 있었다. (UTC 기준 0시가 되길 의도했으나)const date = new Date("2024-09-23"..

사용자 인증 기능을 개발하다가 CORS와 coockie 때문에 고생했던 경험이 있었다.이에 대한 정의와 목적은 MDN이나 web.dev에 잘 설명되어 있으니 여기서는 간단한 개념 정리와 예시(백엔드 express.js와 프론트엔드에서 구현)와 세션쿠키를 사용할 때 주의점에 대해서 정리해보려 한다. 먼저 아래의 질문을 모르겠다면 공식 문서를 다시 읽어보면 좋을 것 같다.브라우저의 접속 주소(https://192.168.100.4:3000), 웹 서버 주소(http://192.168.100.4:4000) 인 경우 same-origin / cross-ogirinsame-site / cross-site 각각 무엇일까? 답:더보기cross-origin, same-site 문제가 됐던 경우는 위와 같은 환경에서 쿠..

웹 도메인 특히 프론트엔드 쪽에서 DOM이라는 용어를 자주 봤다.(React에서의 Virtual DOM이라느니 DOM 객체라느니 등등)대충은 이해하고 있다고 생각하고 있지만 DOM이 뭐냐고 물어보면 대답하기가 참 어렵다. MDN에서는 아래와 같이 정의한다.DOM은 HTML, XML 문서의 프로그래밍 interface이다.(출처 : MDN - https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction) 그런데 이게 무슨 말인지 알아먹을 수가 없다.아래와 같이 정의하면 조금 알아 먹을 수 있으려나"HTML 문서를 프로그래밍적으로 접근하고 조작하기 위한 인터페이스"여기서 인터페이스는 문서를 접근하고 조작하기 위한 create..