log_J

✔ Vercel 이란? 💡 프론트엔드 개발자들을 위한 클라우드 서비스를 제공하고 있는 회사. React.js의 확장판 개념인 Next.js를 개발하는 회사. 호스팅 뿐만 아니라 다양한 기능을 제공하고 있고 무료 플랜에서도 많이 이용할 수 있다. Vercel로 프로젝트 배포를 해보자! 1. 회원가입 교육을 목적으로 한 개인 프로젝트 배포용으로 사용할 예정임으로 Hobby 체크. Name 칸에는 한글 입력은 불가능하다. Github 연동으로도 회원가입이 가능하다. 아무것도 원하지 않는다면 Continue with Email로 진행하면 되지만, 나는 깃허브를 연결해줬다. 이메일 연동 후 이런 화면이 떴다면, 회원가입 완료! 2. VSCode 실행하기 Build가 완료된 프로젝트 파일에 Terminal을 켜준다..

개발자는 HTML, CSS, Javascript 파일 등을 작성해 웹페이지를 만든다. 웹페이지가 보여지는 브라우저는 해당 파일을 어떻게 불러와 화면에 띄우는 것 일까? 사실 개발자들이 만들어내는 파일들은 단순히 "Text"에 불과하다. 단순 텍스트였던 파일들을 브라우저가 웹 페이지로 예쁘게 그려내는데 이것을 렌더링(Rendering)이라고 한다. 왜 렌더링을 알아야 할까? 개발자들의 숙명인 "속도 개선"을 위해선 브라우저가 렌더링을 하는 과정에 대해서 꼭 알아야 한다. 렌더링 과정을 알면 우리의 어떤 코드가 브라우저가 웹페이지를 그려내는데 오랜 시간을 들이게 하는지 알 수 있기 때문에, 속도 개선이나 효율을 위해서 알아두면 좋은 개념이자 필수 개념이라고 할 수 있다. 브라우저의 렌더링(Rendering)..

렌더링(Rendering) : HTML-CSS-Javascript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정 브라우저의 렌더링 과정은 아래와 같다. 1. 서버로 부터 받은 HTML, CSS 등 웹사이트에 필요한 리소스를 다운로드 받는다. 2. HTML를 DOM, CSS를 CSSOM으로 생성한다. 3. Render Tree를 생성한다. 4. Layout을 계산한다. (Viewport내에서 각각의 노드들의 위치를 계산한다) 5. Paint한다. (요소들을 화면에 그린다) 위 단계를 거쳐 우리가 보는 웹페이지를 만들어낸다.그런데 단순히 이해하기엔.. Layout이나 Paint는 대충 예상이나 가지만 나는 DOM도, CSSOM도 Render Tree 몰?루 그래서 개념을 정리하고자, 나..