Web

서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR)

서버에서 페이지 html을 완성해 클라이언트에 전달하면 서버사이드 렌더링, 클라이언트에서 페이지HTML을 완성해 클라이언트에 전달하면 클라이언트 사이드 렌더링입니다. 구체적으로 뜯어봅시다. 서버사이드 렌더링 (SSR) 서버에 HTML 파일을 저장해두었다가 요청이 발생할 때마다 전체 파일을 브라우저에 전달하는 방식 과정 웹사이트를 방문했을 때 1. 브라우저가 서버에 웹사이트 내용 요청 2. 이 요청을 서버가 처리 (랜더링) 3. 요청처리 완료되면 브라우저는 랜더링된 HTML을 가져와서 화면에 표시 특징 HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달 초기화면 로딩이 빠르되, 모든 콘텐츠를 리로딩하므로 정적인 사이트에 좋습니다. 관련기술 : JSP, 타임리프 ➡️ 백엔드 개발자 문제는 요청 발생할..

[개념] Routing

라우팅 express에서 라우팅이라는 개념은 클라이언트로부터 요청받은 URL과 뷰를 매칭시키는 것이라고 할 수 있습니다. 우리가 웹 브라우저에 google.com 이라고 입력하면 해당 구글 웹서버가 응답하여 매칭되는 화면을 띄우는 것이라고 할 수 있죠. 아래 예시를 보면 , 같은 도메인 주소(www.naver.com) 에서 path에 따라 다른 페이지를 보여주는 역할을 라우터가 해주는 것입니다. 여기서 path는 webtoon과 blog 이네요. https://www.naver.com/webtoon https://www.naver.com/blog //예시를 들고자 편하게 적은 것이며 실제와 다릅니다. 웹을 제작할 때 초기에 해당 코드를 많이 볼 수 있습니다. 페이지가 있어야 그 페이지를 구성하고 꾸미겠죠..

[개념] 비동기 처리를 위한 문법 (ES6)

비동기 처리를 위한 문법의 "역사" 이런 말이 맞을 지 모르겠지만 거창하게 역사 라는 말을 붙여보았다..ㅋㅋ비동기 처리를 위해 ES6에서 여러 문법이 추가되는 과정을 공부하고 나니 괜히 하나의 "역사"를 본 것 같아서ㅎㅎ Promises ES6의 새로운 문법 javascript에서 비동기를 처리할 때 주로 사용되는 문법 콜백 지옥(callback hell, 프로미스가 나오기 전에는 콜백을 사용해서 비동기를 처리하였는데, 콜백이 점점 쌓이면서 깊이가 점점 깊어지는 문제)을 해결하였다!! 용어 정리 비동기 처리 동기와 비동기에 대해 먼저 알아야 한다. 동기 (synchronus : 동시에 일어나는) 동시에 일어난다. 요청과 동시에 응답이 주어져야한다. 즉, 요청을 보냈을 때 응답을 받아야지만 다음 동작이 이..

[개념] JS와 ES6 문법

Node.js란? 구글에서 만든 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 (V8은 구글이 만들었지만 node는 'Ryan Lienhart' 님이 만들었다는 사실) javascript는 기존에 브라우저 내에서만 실행할 수 있는 언어였지만, 브라우저가 없이 로컬에서 혹은 서버에서 실행할 수 있도록 만든 것이다. 서버 환경으로 유명한 Node.js에서는 express 모듈을 사용해서 웹 서버를 구축할 수 있다. 쉽게 말해서, Node.js란 자바스크립트를 브라우저가 아닌 컴퓨터에서 로컬 혹은 서버에서 실행하도록 도와주는 환경이라 생각하면 된다. npm이란? 나중에 실습할 때 나올 아이로, 웹 개발을 진행하는데 필요한 여러 라이브러리를 설치해야할 때 'npm' 을 사용하게..

[HTML] 자동재생되는 유튜브 영상 넣기(음소거)

이번 글에서는 Web에서 자동 재생되는 유튜브 영상을 보여주는 방법에 대해 작성하겠습니다! 방법은 간단합니다. 1. 특정 Youtube 영상의 '공유'버튼을 클릭하여 퍼가기 버튼을 클릭하여 코드를 복사한다. (특정 부분만 사용!) 2. Youtube 영상을 표시할 html 파일에서 내에 아래 코드를 적는다. 가로, 크기는 자신이 나타내고 싶은 크기로 지정해주고, 위에서 복사한 주소를 영상키값에 넣어주면 됩니다. 여기서 중요한 것은 autoplay=1&mute=1 입니다! autoplay=1만 해줄 경우, 신기하게도 먹히지가 않아요.. 그래서 음소거 기능을 켜주는 mute=1 을 추가해줘야 자동 재생이 됩니다. 예를 들면) 위의 유튜브영상의 주소는 'J08a3_dGtmo' 이었으니, 아래와 같이 적어줄 수..