LazyWon Story

Next.js를 이용하여 정적 블로그 개발 중 포스팅한 블로그 글 페이지 콘솔에 다음과 같은 warning이 발생하였다. 💡 dangerouslySetInnerHTML란? 현재 블로그 포스팅을 위해 포스팅할 마크다운 파일을 가져와서 `remark-html`로 파싱하여 HTML string 형태로 변환해주고 있다. dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 XSS 공격에 쉽게 노출될 수 있어 위험(html 내부 script로 인해 유저의 쿠키 등 개인 정보를 탈취할 수 있기 때문)하다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 d..

목차 프론트엔드 트렌드 변천사 SSR, CSR, SSG 프론트엔드 프레임워크 비교 🎠 프론트엔드 트렌드 변천사 웹 프론트엔드 트렌드 변천사 전통적인 웹 동작 방식은 웹 서버가 HTML 전체 페이지를 브라우저에게 전송하는 구조로 동작했다. 과거 웹 사이트는 지금에 비해 문서 하나에 전달되는 파일 용량이 매우 적었다. User Interaction이 거의 없는 단순한 HTML, CSS 자체의 정적인 페이지를 개발하는데 그쳤다. 그래서 어떤 요소를 한 번 클릭하면 완전히 새로운 페이지를 서버에서 전송해주곤 했다. 이후 동적인 웹 서비스가 등장하면서 웹 서버가 HTML 페이지와 더불어 Javascript를 통해 필요한 데이터만을 주고받으며, User Interaction을 구현하게 되었다. Javascript를..