서버 사이드 렌더링은 서버에 HTML 파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화되어 있습니다. 반면, 클라이언트 사이드 렌더링은 서버에서 HTML 파일을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하는 방식입니다. 클라이언트 사이드 렌더링은 초기 로딩 이후 서버 사이드 렌더링에 비해 빠르다는 장점이 있습니다. 서버 사이드 렌더링(SSR): 클라이언트 사이드 또는 유니버셜 앱 HTML을 서버를 통해 렌더링 클라이언트 사이드 렌더링: 주로 DOM을 사용하여 브라우저에서 렌더링 서버 사이드 렌더링 설명 서버 사이드 렌더링은 정보를 화면에 표시하는 가장 일반적인 방법입니다. 이는 서버 내 HTML 파일을 변환하여 브라우저에서 출..

Node를 통해 서버를 실행할 경우, 파일의 변경 사항이 발생하여도 서버가 실행 중일 경우에는 자동으로 새로고침 되어 변경 사항이 반영되지 않습니다. 따라서, 커맨드 라인에서 실행 중인 서버를 종료하고 다시 노드를 실행하고, 새로고침해서 확인해야 하는 번거로움이 있는데요. 변경 사항을 자동으로 반영하도록 할 수는 없을까요? 노드에서 자동으로 서버 새로고침하기 파일에 변경 사항이 발생했을 때, 노드에서 자동으로 서버를 새로고침하려면 다음과 같이 새로운 NPM 인 nodemon을 설치해야 합니다. npm install -g nodemon nodemon 을 설치한 다음에는 이를 사용하기 위해 node server.js와 같이 파일을 실행하지 않고, nodemon server.js 와 같이 파일을 실행합니다. ..

모든 npm 패키지는 package.json 파일을 프로젝트 루트에 포함하고 있습니다. package.json 파일은 무엇이며 또 어떤 역할을 할까요? pacakage.json이란? package.json 파일에는 프로젝트와 관련된 메타데이터가 담깁니다. 앞서 npm을 패키지를 주고 받는 장소라고 설명했는데요. package.json 은 주고 받는 패키지에 대한 상세 설명서라고 할 수 있습니다. 즉, 패키지의 이름, 버전, 데이터 등이 담긴 파일이 바로 package.json입니다. 이러한 정보들은 모두 npm 뿐만 아니라 패키지의 최종 사용자에게 무척 중요한 것들입니다. 이러한 package.json 파일은 보통 Node.js 프로젝트의 루트 디렉토리에 위치해 있으며, npm 은 이를 통해 프로젝트를 ..

NPM이란? NPM은 Node Package Manager의 약자로 유용한 패키지를 빠르고 쉽게 공유할 수 있게 하는 패키지 매니저입니다. 패키지란 개발자들이 만든 일련의 유용한 도구 및 프레임워크를 의미하는데요. NPM이란 이러한 패키지를 관리하는 장소이자 도구 및 방법입니다. 오늘날 NPM은 자바스크립트 런타임 Node.js의 기본 패키지 매니저로 사용되고 있습니다. NPM은 다음 두 가지 주된 요소로 구성됩니다. 패키지 출시 및 다운로드를 위한 CLI(Command-Line Interface) 도구 자바스크립트 패키지 호스팅을 위한 온라인 저장소 정리하자면 NPM이란 Node.js에서 사용되는 기본 패키지 매니저로 개발자들이 만든 유용한 패키지들을 함께 공유하는 장소 및 도구입니다. 다양한 NPM ..

웹 스토리지 API 메커니즘은 브라우저에 키/값 쌍을 저장하는 방법입니다. 웹 스토리지는 세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)로 나뉩니다. 웹 스토리지의 개념 스토리지(Storage)는 브라우저 내에서 키/값 쌍을 저장할 수 있는 작은 저장 공간이며, 모든 키와 값은 문자열로 저장됩니다(예를 들어, 숫자는 자동으로 문자열로 치환). 웹 스토리지는 크게 두 가지 유형으로 나뉩니다. 세션 스토리지(sessionStorage): 페이지 세션이 종료되지 않을 때까지 키와 값을 보유합니다. 즉, 페이지 세션이 종료되면 저장된 데이터가 함께 삭제됩니다. 로컬 스토리지(localStorage): 브라우저가 종료되고, 이를 다시 열어도 계속해서 키와 값이 존재합니다. 즉,..

자바스크립트 indexOf()와 lastIndexOf()를 활용하여 문자열과 배열의 중복 요소를 확인할 수 있습니다. indexOf() 메소드 설명 자바스크립트 indexOf() 메소드는 자바스크립트 lastIndexOf() 메소드는 호출하는 문자열 내 특정 값이 등장하는 첫 인덱스를 리턴하며, 값이 발견되지 않으면 -1을 리턴합니다. const paragraph = 'Show me the money, big money.'; const searchTerm = 'money'; console.log(paragraph.indexOf(searchTerm)); // 12물론, 이를 배열에도 사용할 수 있습니다. const words = ['dash', 'apple..

문제 문자열을 "(" 또는 ")"로 변환하기. 특정 문자가 한 번만 등장할 경우 "("로, 두 번 이상 등장할 경우 ")"로 치환하기. 문제 주소: www.codewars.com/kata/54b42f9314d9229fd6000d9c/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이(못 풂) function duplicateEncode(word){ const words = word...

문제 RGB 숫자 값을 16진수로 변경하기. RGB 숫자는 0에서 255사이이며, 16진수는 반드시 여섯 자리여야함. RGB 숫자 값이 해당 범위 밖에 있는 경우 가장 가까운 유효 숫자로 전환되어야 함. 문제 주소: www.codewars.com/kata/513e08acc600c94f01000001/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이 function rgb(r, g,..