Dev/Web 10

[Javascript] CSR vs SSR

CSRCSR은 웹 페이지의 렌더링을 클라이언트, 즉 사용자의 브라우저에서 수행하는 방식입니다. 서버는 최소한의 HTML과 필요한 JavaScript 파일을 전송하고, 브라우저는 이 JavaScript를 실행하여 동적으로 페이지를 구성합니다. 사용자가 웹 페이지를 요청하면, 서버는 기본적인 HTML과 JavaScript 파일을 클라이언트에 전송합니다.브라우저는 수신한 JavaScript를 실행하여 필요한 데이터를 서버의 API로부터 가져옵니다.가져온 데이터를 사용하여 브라우저에서 동적으로 HTML을 생성하고 화면에 표시합니다.장점부드러운 사용자 경험: 페이지 전환 시 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트하므로, 애플리케이션이 더 빠르고 부드럽게 동작합니다.서버 부하 감소: 클라이언트에서..

Dev/Web 2025.01.24

[Javascript] 반복문-3탄 (map, forEach, reduce)

이번 글에서는 Array를 반복문으로 다룰때 사용하는 세가지 함수에 대해서 다룰 예정이다 1탄과 2탄은 다음 글들에 있다. forEach와 map, reduce에는 아주 큰 차이점이 있는데 바로 return값의 존재여부이다. forEach로 사용할 경우 return값이 존재하지 않으며 단순 시행만을 목적으로 두고 있습니다. 그러나 map과 reduce의 경우 데이터를 재포장하는 함수라고 생각하시면 될것 같습니다. [Javascript] 반복문-1탄 (For, For..in) [Javascript] 반복문-2탄 (For..of, while, do while) // a에 1, 2, 3으로 이루어진 배열 선언 const a = [1, 2, 3]; const b = a.forEach((value, idx) =>..

Dev/Web 2023.12.14

[Javascript] 반복문-2탄 (For..of, while, do while)

이번 글에서는 for..of, while, do while에 대해 다루겠다. (do while은 잘 안쓰기는 한다..) 1탄은 다음 링크에 있다. [Javascript] 반복문-1탄 (For, For..in) // a에 1,2,3으로 이루어진 배열 할당 const a = [1, 2, 3] // for of의 경우 반복가능한 값에만 사용이 가능하기 때문에 object에서는 사용이 불가능하다. // for in의 경우는 키를 받아오지만 for of의 경우에는 값을 받아온다. for (const value of a) { console.log(value) } // 결과 // 1 // 2 // 3 // while문은 작성해둔 조건이 만족하는 한 계속 작업을 실행한다. // 코드를 잘못 작성하는 경우 무한루프가 되..

Dev/Web 2023.11.09

[Javascript] 반복문-1탄 (For, For..in)

Javascript에서 For문은 반복문이다. 심플하게 설명해보자면 어떤 동작을 반복해서 시행한다고 생각하면 된다. ex) 평일 내내 학교 내지 회사를 감(반복됨) -> 반복문 Javascript의 반복문에서는 For, For..Of, For..in, while, do while(do while은 어지간하면 안쓴다)이 있다. (물론 이거 말고도 array에 붙여쓰는 map이라던지, foreach, reduce등등 더 있긴 하지만 이번글에서는 위 세가지 함수에 대해만 다룰 예정이다.) for..of와 while, do while에 대해서는 다음 글에서 다루겠다. // a에 1, 2, 3으로 이루어진 배열을 할당 const a = [1, 2, 3] // for 반복문의 구조이다. // 우선 반복문의 인덱스를..

Dev/Web 2023.11.09

[JavaScript] Map vs Object

Javascript에는 키-값으로 데이터를 저장하는 방식이 두가지가 있다. 바로 Map과 Object인데 오늘은 이 두가지에 대해 소개해보고자 한다. 우선 Object는 매우 대중적인 방식이다. Map보다 가볍고 사용하기도 쉬워 아마 많은 사람이 사용하리라 생각된다. Object는 구조가 단순한 대신 직속의 key-value들을 마음대로 뒤섞을수 있기 때문에 사용할때 주의가 많이 필요하다. // a object에 b key값에 1이라는 value를 할당 const a = { b: 1 } console.log(a['b']) // 1 console.log(a.b) // 1 // a를 const로 선언했기에 a에 새로운 값을 재할당하는것은 불가능하다. // a에 새로운 값을 할당하는것은 불가능하지만 a의 키에..

Dev/Web 2023.11.09