728x90 반응형 전체 글86 클라이언트 사이드 렌더링 vs. 서버 사이드 렌더링 (CSR vs. SSR) CSR과 SSR이란 CSR과 SSR은 클라이언트-서버 아키텍처 상 웹페이지를 렌더링할 수 있는 두가지 다른 방법을 뜻한다. CSR의 경우, 페이지 렌더링의 대다수는 클라이언트 쪽에서 React, Angular, Vue.js와 같은 자바스크립트 프레임워크를 사용해 진행된다. 클라이언트의 브라우저는 자바스크립트 코드를 다운로드 하고, 그 이후 브라우저에 컨텐츠를 동적으로 렌더링하기 위해 API 호출 등을 한다. 이러한 접근법은 더욱 인터렉티브하고 다이나믹한 유저 경험을 만들 수 있다는 장점이 있으며, 페이지 전체를 로딩할 필요 없이 특정 부분만 업데이트 된다는 장점이 있다. 반면, SSR의 경우엔 서버가 HTML 컨텐츠의 렌더링을 완성하여 클라이언트의 브라우저로 보낸다. 브라우저는 완전히 렌더링된 HTML을.. 2023. 8. 3. 이벤트 버블링(Event Bubbling)이란? 이벤트 버블링(event bubbling)은 웹 개발에서 사용되는 필수 개념 중 하나다. 이벤트가 발생했을 때, 해당 이벤트가 DOM 구조를 통해 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 특정 요소에서 버튼 클릭과 같은 이벤트가 발생하면, 그 이벤트는 그 특정 엘리먼트에서만 트리거되는게 아니라 이벤트가 발생한 요소의 부모 요소들과 document의 루트까지 트리거된다. 이벤트 버블링에 대한 이해는 효과적이면서 유지하기 쉬운 프론트엔드 앱을 개발하는데 필수적이다. 특히나 유저 인터페이스가 복잡하고 인터렉션 가능한 요소가 많은 프로젝트일 수록 그 효과가 더 커지기 때문에 미리미리 공부해두면 좋다. 이벤트 전파(Propagation)의 3단계 이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3.. 2023. 7. 27. 레이지로딩(lazy loading)이란? 레이지로딩 (lazy loading)이란? 레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술을 의미한다. 레이지 로딩의 목적은 (1) 최초 페이지 로딩 시간을 개선하고 당장 화면에 표시되지 않는 이미지, 영상 등의 리소스를 나중에 로딩하면서 (2) 최초 데이터 전달 양을 감소시키는 것이다. 웹페이지를 로딩하는 기존 방식은 모든 리소스들을 한번에 받는 것이다. 이렇게하면 최초 로딩 시간이 더 커지게 되는데, 이러한 로딩 시간 증가는 인터넷 연결 속도가 느린 지역이나 디바이스를 사용할 때 특히 더 두드러지게 체감된다. 이러한 문제를 해결하기 위해 사용할 수 있는 테크닉이 레이지 로딩인 것이다. 레이지 로딩을 적용.. 2023. 7. 27. [JS] 이벤트룹 (Event loop), 힙(Heap), 콜 스텍(Call stack) * 본 포스팅은 이벤트 룹이 무엇인지 공부하고 정리한 내용을 재작성한 것입니다. 자바스크립트 런타임 환경의 동작 원리를 이해할 때 빼놓을 수 없는 주제가 바로 이벤트룹(event loop)이다. 이 이벤트룹의 존재로 인하여 자바스크립트 엔진이 싱글 스레드(single-thread)임에도 불구하고 브라우저 또는 Node.js와 같은 환경에서 마치 멀티 스레드로 동작하는 것과 같은 효과를 낼 수 있게 되는 것이다. 이벤트룹(Event loop)이란? 이벤트룹(Event loop)은 자바스크립트 런타임 환경에 포함되어 있는 기능 중 하나로, (1) 자바스크립트 엔진 내 콜 스택(Call stack)이 비어있고(2) 런타임 환경 내 이벤트큐(Event queue(task queue 또는 message queue.. 2021. 11. 18. HTTP/1.1 vs. HTTP/2 이전 포스팅에 HTTP에 관한 전반적인 개요를 공부하고 정리하였으나, HTTP의 발전 중 큰 변화가 있었던 HTTP/2가 이전 버전과 어떻게 다른지에 대하여선 공부하지 않았었다. 그래서 이번 포스팅엔 HTTP/2가 HTTP/1.1과 비교해서 어떤 점들이 다른지 돌아보고 정리한 내용을 담으려고 한다. 이전글: 2021.10.01 - [Learn to Code] - HTTP란? HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생 seo-tory.tistory.com 개요 HTTP/1.1은 90년대에 나온 버전으로, 20년도 더 된 아주 .. 2021. 10. 24. [JS] apply, call, bind apply(), call(), 그리고 bind()는 모두 함수의 프로토타입 메소드이다. apply, call, 그리고 bind... 함수 프로토타입 메소드로 존재한다는 것은 알고 있었지만 실상 많이 써보지 못해서 사용법을 숙지하지 못하고 있던 함수들이었다. 그나마 bind 같은 경우엔 리액트의 class component에서 필수로 사용해줘야 하는 메소드라서 몇 번 사용해봤지만, 그 리액트에서 마저도 class component가 아닌 function component만 계속 사용해왔기에 사용법을 잊고 있었다. 🥲 그렇게 어느덧 이 셋은 나의 기억 속에서 잊혀진 메소드들이 되어버렸다... 하지만 최근 이 셋을 다시 돌아봐야겠다는 굳은 결심(!!!)이 들었고, 다시 한번 이들을 활용할 수 있는 능력을 각성.. 2021. 10. 21. [JS] 클래스(class): 정적 메소드(static method)와 프로토타입 메소드(prototype method)의 차이 클래스(Class)는 ES6에서 도입된 기능이다. class 키워드를 사용하여 정의하며, 내부 몸체에 3가지 종류의 메소드를 사용할 수 있다. 이 세가지 종류가 바로 생성자, 프로토타입 메소드, 그리고 정적 메소드이다. class Character { // 1. 생성자 constructor(name) { this.name = name this.level = 1 this.job = "adventurer" } // 2. 프로토타입 메소드 introduce() { return `Hello, I'm ${this.name} and my level is ${this.level}.` } // 3. 정적 메소드 static complain() { return `Oh man! What is that smell?` } }.. 2021. 10. 4. [TIL] 갑자기 달력이 만들고 싶어졌다 (바닐라JS) 오늘도 Pinterest에서 예쁜 UI가 없나 찾아보다가 캘린더를 봤다. 그리고 갑자기 달력이 만들고 싶어졌다! 그래서 바닐라 자바스크립트로 달력을 만들었다. 🌱 Github Vanilla Javascript Calendar 위 핀터레스트 이미지와 비슷하게 아래와 같이 만들었다: 회색과 핑크의 조합은 진리이기 때문에 오늘의 날짜는 핑크색으로 표시되도록 했다. 날짜 위에 마우스를 올리면 핑크색으로 표시가 된다. prev와 next를 클릭하면 이전 달 또는 다음 달의 캘린더를 볼 수 있다. 추가하고 싶은 사항들 - 달별 컬러 적용 - 투두리스트와 합치기 2021. 10. 3. [JS] 정규표현식 (2) 최근에 코딩테스트를 보았는데, 이메일 유효성 검사를 구현해야했었다. 그런데 문제는... 정규표현식을 안써본지 너무 오래되서 도대체 기억이 나지 않는다는 것이었다 ㅠ_ㅠ.... 시간은 흐르지, 기억은 안나지, 게다가 시험 시작하고 15분 이후부터 왜 그렇게 화장실은 가고 싶은지 ㅠ_ㅠ... 총체적 난국에 그냥 코드로 길게 풀어서 구현하고 얼른 submit한 뒤 화장실로 달려갔었다. (코딩테스트 과정을 녹화해야 했는데 나의 시급함이 정말 말그대로 15분부터 영상에 그대로 나왔다...ㅋㅋㅋ....ㅋㅋㅜㅜ...🥲) 그래서 이번 기회에, 다음에 비슷한 문제를 또 겪게 되더라도 화장실 급함의 정도가 얼마나 위대한지에 영향받지 않고 정규표현식을 예쁘게 작성할 수 있게 되기 위해 다시 한번 정규 표현식을 되돌아보려고 .. 2021. 10. 2. 이전 1 2 3 4 5 ··· 10 다음 728x90 반응형
