Web

개발을 하다 보면 한 번쯤은 CORS 정책 위반 이슈를 마주치게 된다. 이를 해결하기 위해서는 프록시 서버가 필요하다는 말을 듣곤 하는데, 정확히 CORS가 무엇인지, 어떻게 해결하는지에 대해 알아보자. 1. Origin(출처) 먼저 CORS 란 'Corss-O

우리가 늘 사용하는 브라우저란 무엇이며, 화면의 렌더링 흐름에 대해 알아보도록 하자. 아마 개발자로서 대부분 UI를 그리는 것까지는 생각을 할 것이지만, 프론트에서 그린 UI를 브라우저가 어떤식으로 받아와서 생성하고 보여주는지 모르는 분들도 많을 것이다. 기본부터 짚고

웹 페이지를 열었을 때, 우리가 보는 모든 요소들(텍스트, 이미지, 버튼 등 ..)은 생각보다 단순하지 않다. 이 모든 것들은 브라우저가 이해할 수 있는 형태로 변환된 데이터 구조, 즉 DOM으로 만들어진다. 개발 공부를 한다면 꽤나 들어보았을 단어이다. 이 DOM이란

웹 개발을 학습하며 'Ajax'라는 용어를 자주 접하게 된다. 이 기술이 대체 무엇이길래 웹 개발 분야에서 그 중요성이 강조되는 것일까 ? 과거 웹페이지의 경우, 페이지 이동 시 화면 전체가 새로고침되어 사용자 경험이 단절되고 속도가 느려지는 단점이 있었다. 그러나 현

Node.js를 사용하여 개발을 하다 보면 자주 접하게 되는 파일이 바로 package.json이다. 이 파일은 자바스크립트 프로젝트의 메타데이터를 담고 있으며, npm 패키지 관리와 관련된 중요한 역할을 한다. 그럼 package-lock.json은 뭐고, 이 두

어떤 프로그램을 만들 때 굉장히 많은 자원이 필요할 것이다. 특히 프로젝트가 커질수록 HTML, js 파일, CSS, 이미지, 폰트 등 아주 많은 프론트엔드 자원을 필요로 한다. 그런데 이 수많은 파일들을 그냥 마구잡이로 가져다 쓰다 보면 브라우저가 버거워하거나, 로

저번 포스팅에서 웹팩에 대해 알아보았다. 이번에는 budle size(번들 사이즈)를 줄이는 방법과 이유 등에 대해 알아보자. 보통 성능을 최적화하기 위함이 목표인데, 아래에서 조금 더 자세히 다뤄보겠다 ! 1. Bundle (번들) 먼저 번들이란 무엇인가