본문 바로가기

공부 정리/웹(Web)39

CSR vs SSR 비교 CSR => Client Side Rendering SSR => Sever Side Rendering CSR 말 그대로 클라이언트에서 렌더링이 됩니다. 브라우저가 서버에게 최초 요청 시에 HTML, CSS , JS 같은 리소스를 불러옵니다. 그 후 브라우저는 해당 리소스를 다운받습니다. (유저는 흰 화면만 보게 됨) 렌더링이 완료되면 유저에게 화면을 보여줍니다. SSR CSR과는 반대로, 서버에서 렌더링 준비를 모두 마친 파일을 클라이언트에게 보내 줍니다. 클라이언트에서는 즉시 렌더링 되어서 흰색 화면이 CSR보다 덜 합니다 그러나 js를 완전히 받기 전까지는 페이지와 상호작용은 불가능합니다. 주요 차이점 CSR은 클라이언트에서 렌더링 하고, SSR은 서버에서 렌더링 한다! CSR를 사용한다면.... S.. 2022. 4. 21.

JS 배열 필수함수 (Array Function) 글 작성 동기? 최근에 프로그래밍 공부법에 관한 책을 읽고 있는데,,, 그 책에서 무언가를 인출하는 과정이 프로그래밍 학습에서 매우 중요하다고 설명하고 있었습니다. 자바스크립트에는 여러 배열함수가 많고, 막상 눈으로만 보고 인출 과정을 거쳐보지 않았음을 느껴서, 글을 작성하며 공부하였습니다 1. map() const num = [1, 2, 3, 4]; //num배열을 2배로 const numx2 = num.map((el) => el * 2); console.log(numx2); //[ 2, 4, 6, 8 ] 원소를 하나하나 꺼내서 재구성 2.filter() const num = [1, 2, 3, 4]; //num배열을 2이상 값만 const numGrater2 = num.filter((el) => el .. 2022. 3. 25.

JS this 글 작성 동기? this의 작동방식이 java와 다르다는 것은 알고 있었지만, 쓰다보면 익숙해질거라 생각하고 그냥 넘어갔지만, 한번 확실히 정리해두는게 좋겠다 싶어서 공부하여 글을 작성했습니다. 핵심 this바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 즉 this를 어떻게 어디에 쓰느냐에 따라 다름!! 1.그냥 this 그냥 this를 사용할경우 전역객체인 window가 출력됩니다. 2.함수 안의 this var val = 10; var fun = function () { let val = 5; console.log(this.val); }; fun(); 해당 값은 결과가 10이 나옵니다. 즉 그냥 함수안에 쓰이면 전역객체에 연결됩니다. ("use strict" 사용하면 undefined) 3.메서.. 2022. 3. 18.

JS preventDefault(); 글 작성 동기 js 미니 프로젝트를 하는 중, 서버에서 값을 받아오는데 페이지가 강제로 갱신되는 일이 있었습니다. 이를 preventDefault()로 해결할 수 있었는데, 이를 사용할 일이 앞으로도 많을 것 같아서 기록하였습니다. preventDefault()란? 이벤트의 기본 행동을 막을 수 있습니다. 예시 1) html hah js const a = document.querySelector(".testb"); a.addEventListener("click", (event) => { event.preventDefault(); }); 버튼을 누르면 type이 submit이기 때문에 페이지가 새로고침이 되어야 하지만, preventDefault()를 사용할 경우 새로고침이 되지 않습니다. 예시 2) ht.. 2022. 3. 16.

JS .js 와 .mjs 공부 동기? javascript module 공부하는 도중.. Cannot use import statement outside a module 라는 에러를 마주쳤습니다. 이 에러를 해결하기 위해서 .js파일을 .mjs파일로 변경하라는 해결책이 있었는데, 실제로 이를 적용하니 해결되었습니다. 해결되고나니 .mjs파일 와 .js파일의 차이점이 궁금해서 공부했습니다. .mjs Vs .js 원래 Node.js의 모듈 시스템은 commonjs를 사용했습니다(require과 module.exports를 사용하는..) 그러다가 ECMAscript 모듈 시스템이 표준이 되었고, Node.js는 이를 지원하게 되었습니다. Node.js 는 .cjs 파일로 commonjs 모듈 시스템을 지원했고, .mjs파일로 ECMAs.. 2022. 3. 13.

JS Primitive type checking 공부 동기? if (typeof "1" === String) { console.log("'1' === String"); } else { console.log("'1' !== String"); } 해당 코드를 보고 true가 나올 것이라 생각했는데, false가 나왔기 때문입니다. 내용 "1"의 타입은 string이니까 당연히 String과 비교하면 참이라고 생각하였지만, console.log(typeof "1"); //string console.log(typeof String); //function 위 코드를 작성해보니 "1"은 원시 타입 string이고, String은 function이었습니다. String()은 String 객체를 만들어주는 함수이니 당연한 결과였습니다. primitive string.. 2022. 3. 10.

이전 1 2 3 4 5 6 7 다음

티스토리툴바