뚠뚜 개발일지

쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요. 이벤트는 계속 일어나지만 함수는 한번만 호출되는 경우가 있는데 이처럼 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay) 로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것을 쓰로틀링이라고 합니다. 예를 들어 버튼을 막 누르는데 누르는대로 동작하지 않는 경우가 쓰로틀링에 해당한다고 볼 수 있습니다. 이러한 쓰로틀링 방식을 사용하는 이유는 특정 동작이 자주 발생하는 경우 이를 일정 주기로 제한하여 브라우저의 부하를 줄이고 성능을 최적화 하기 위해 사용합니다. 이와 달리 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간(delay)이 경과한 후에 한..

Server Side Rendering, Client Side Rendering, Static Site Generation 의 장단점을 설명해주실 수 있을까요? SSR은 서버에서 페이지 전체 내용을 렌더링하여 클라이언트에게 HTML을 전송하는 렌더링 방법입니다. 이 방법의 첫 번째 장점은 자바스크립트 파일을 해석하지 않아도 되기 때문에 초기 페이지 로딩 속도가 빠르다는 점입니다. 두 번째는 크롤러가 완전히 렌더링 된 페이지의 내용을 쉽게 파악할 수 있기 때문에 SEO에 유리한 점입니다. 단점으로는 첫 번째로 각 요청마다 서버에서 렌더링을 수행해야 하므로 부하가 증가할 수 있다는 점입니다. CSR은 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링하는 방법입니다. 이 방법의 장점은 첫 번째로 서버에서 정..

라이프사이클 메소드에 대해 설명해주세요. 라이프사이클 메소드는 특정 객체나 컴포넌트가 생성, 업데이트, 파기되는 생명주기 과정에서 특정 시점에 자동으로 호출되는 메소드입니다. 이는 대부분의 프런트엔드 프레임워크 (예: React)에서 중요한 개념으로 사용됩니다. 라이프사이클 메소드의 예시는 다음과 같습니다. 생성 단계: constructor: 컴포넌트가 생성될 때 실행되는 메소드로, 초기 상태 설정 등을 수행합니다. componentDidMount: 컴포넌트가 DOM에 마운트된 후 실행되는 메소드로, 필요한 데이터 로딩 등을 수행합니다. 업데이트 단계: shouldComponentUpdate: 상태나 속성 변경 시 리렌더링 여부를 결정하는 메소드입니다. componentDidUpdate: 업데이트가 이루..

VanillaJS와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요? 1. 컴포넌트 기반 개발 React는 컴포넌트라는 재사용 가능한 코드 블록을 사용하여 UI를 구성합니다. 이 방식은 코드를 효율적으로 관리하고 유지 관리하기 쉬우며, UI 변경 시 영향을 받는 코드 영역을 명확하게 파악할 수 있도록 합니다. VanillaJS에서는 이러한 코드 재사용 및 관리 기능을 직접 구현해야 하며, 이는 코드 복잡도를 높이고 유지 관리 어려움으로 이어질 수 있습니다. 2. 가상 DOM 사용 React는 가상 DOM이라는 기술을 사용하여 DOM 트리를 효율적으로 업데이트합니다. 가상 DOM은 실제 DOM 트리에 직접 변화를 가하기 전에 변경 사항을 메모리에 저장한 후 필요한 부분만 업데이트합니다. 이는..

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념과 장/단점을 설명해주세요. 클라이언트 렌더링과 서버 렌더링은 웹 페이지를 구성해서 사용자에게 전달하고 표시하는 방식의 차이입니다. 클라이언트 사이드 렌더링 (CSR): 개념: 브라우저에서 HTML을 직접 렌더링합니다. JavaScript가 브라우저에서 실행되어 페이지를 구성하며, 초기 로드 후 추가 데이터는 AJAX요청을 통해 받습니다. 장점: 사용자와의 상호작용이 빠르고 매끄럽습니다 서버 부하가 적으며, 캐싱이 용이 합니다. SPA(Single Page Application)에 적합합니다. 단점: 초기 로딩 속도가 느릴 수 있습니다. 검색 엔진 최적화(SEO)가 어려울 수 있습니다. 서버 사이드 렌더링 (SSR): 개념: HTML을..

GET, POST 방식의 차이점에 대해서 설명해주세요. GET 방식은 URL에 데이터를 포함하여 서버에 요청하며 데이터가 URL의 쿼리 매개변수로 전송되기 때문에 주소창에 노출됩니다. 따라서 보안에 취약하며 비밀번호와 같은 데이터들은 전성하지 않는 것이 좋습니다. 보통 검색어 전달이나 페이지 링크 클릭등에 사용됩니다.POST 방식은 HTTP 요청의 본문에 데이터를 포함하여 서버에 요청하여 URL에 노출되지 않고 요청의 본문에 포함되므로 비교적 안전한 편입니다. GET에 비해 상대적으로 보안이 높아서 민감한 정보를 안전하게 전달할 수 있습니다. 로그인 정보나, 폼에 작성된 데이터를 전송등에 사용됩니다. GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요. GET과 POST는 웹 서버와 클라이..