728x90

2024/11 17

NextJS: page router와 app router(1)

Page Router와 App Router의 가장 큰 차이점은 서버 컴포넌트이다. 서버 컴포넌트란?서버 컴포넌트는 서버에서만 실행되며, 클라이언트에 JavaScript를 전달하지 않는다. JavaScript 번들 크기를 줄이고 초기 로딩 속도를 개선하는데 도움이 된다. 단, 클라이언트에서 직접 상호작용하는 이벤트 핸들러는 사용할 수 없고, 서버에서 렌더링된 HTML만 클라이언트로 전달한다. page router에서는 페이지 전체를 SSR로 처리할지, SSG로 처리할지, 혹은 CSR으로 처리할지 결정할 수 있었지만 app router에서는 컴포넌트 단위로 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다. 만약 서버 컴포넌트가 클라이언트 컴포넌트의 자식으로 있다면 클라이언트에서 서버 컴포넌트가 렌더링되는 것이..

💻웹(Web)/NextJS 2024.11.10

React hook: useEffect, useState, useMemo, useCallback

useEffect컴포넌트가 렌더링될 때 특정 작업을 수행하거나, 상태가 props가 변경될 때마다 특정 작업을 수행할 수 있도록 한다. useStatestate의 값이 변경되면 컴포넌트가 리렌더링 된다. useState: 상태가 업데이트되면 컴포넌트가 다시 렌더링된다. 렌더링에 반영되어 UI에 영향을 미치는 상태를 관리할 때 사용한.useRef: 값이 변경되더라도 컴포넌트가 다시 렌더링되지 않는다. 즉, useRef는 값이 변경되더라도 화면에 영향을 미치지 않는 상태를 관리할 때 사용한다.따라서 입력 값이 화면에 즉시 반영되거나 다른 컴포넌트가 해당 상태를 참고해야 하는 경우가 아니라면 useRef를 사용하여 리렌더링을 방지할 수 있다.  useMemouseMemo는 여러 개의 state가 있을 때 불필..

💻웹(Web)/React 2024.11.10

빌드 도구 비교: Webpack과 Vite의 차이 / 컴파일과 빌드

📌빌드란?웹 개발에서 소스 코드를 최적화하고 변환하여 프로덕션 환경에서 사용할 수 있는 형태로 만드는 것을 말한다. 널리 사용되는 빌드 도구로는 Webpack, Vite 등이 있다. ✔👀 Webpack가장 널리 사용되는 자바스크립트 모듈 번들러 중 하나다. Webpack은 CommonJS와 ES 모듈을 모두 지원하며, 별도의 변환 없이도 require와 module.exports를 인식하고 처리할 수 있다. 반면 모든 모듈을 분석하고 의존성을 파악하며 이로인해 프로젝트의 규모가 커질수록 빌드 시간이 길어질 수 있다. ✔👀 ViteVite는 빠른 빌드 속도와 즉각적인 모듈 업데이트를 제공한다. ES 모듈을 기반으로 동작하여 브라우저가 ES모듈을 직접 해석할 수 있다. 이로 인해 초기 빌드 없이 필요한..

💻웹(Web)/React 2024.11.10

제로 트러스트

제로 트러스트전통적인 환경의 보안 아키텍처인 경계 중심의 보안 아키텍처에서는 방화벽과 같은 경계를 기준으로 신뢰와 비신뢰를 나누어서 운영했다. 제로 트러스트란 고정된 네트워크 경계를 방어하는 것에서 사용자, 자산, 자원 중심의 방어로 변경하는 발전적인 사이버 보안 패러다임이다. 즉, 제로 트러스트는 물리적 위치, 네트워크 위치, 자산 소유권을 기준으로 사용자 계정에 부여된 암묵적인 신뢰는 없다고 가정한다. 모바일, IoT, 클라우드의 확산으로 원격재택 근무환경이 조성되었고, 코로나 19로 비대면사회가 가속되어 기업망 보호를 위한 전통적인 사이버보안 체계의 변화가 필요하다. 최근 발생한 수많은 해킹 및 랜섬웨어 공격 사례는 경계 기반 보안모델의 한계점을 드러내고 있으며, 최근 등장하는 보안 솔루션만으로는 ..

📕CS 2024.11.04

[알고리즘]백준 1757: 달려달려

풀이 과정memo[n][m]에 저장할 값은 시간 n에 지침 정도 m일 때 가질 수 있는 최댓값이다. 쉬는 경우 (memo[n][0] = memo[n-1][0]): 이전 시간의 최대 거리를 그대로 유지.뛰는 경우 (memo[n][m] = memo[n-1][m-1] + D[n]): 이전 시간까지 뛴 거리에서 현재 거리를 더하여 최대 거리 갱신.마지막으로 최대 연속 시간 M 이내에서 쉬는 경우를 비교하여, 특정 시간에 쉬었을 때의 최대 거리를 갱신.  코드import java.io.*;import java.util.*;// dppublic class Main_1757_G4_달려달려 { public static int N,M; public static int[] D; public static i..

알고리즘/백준 2024.11.03

기술면접 질문 모음 / 면접 CS 질문 모음

📌웹의 기본 개념1. 인터넷과 웹의 차이점은 무엇인가요?인터넷이 고속도로라면 웹은 자동차? ㅎㅎ... 2. HTTP와 HTTPS의 차이점은 무엇인가요?HTTPS는 HTTP에 보안성이 추가된 개념입니다. HTTP에 SSL/TLS 암호화를 추가한 프로토콜으로 데이터 전송 중에 보안을 보장합니다. 브라우저와 서버 간 통신이 암호화되므로 도청이나 데이터 변조를 방지합니다. 3. HTTP의 주요 메서드(GET, POST, PUT, DELETE 등)에 대해 설명하세요.GET: 데이터를 조회POST: 데이터를 등록PUT: 데이터 대체PATCH: 데이터를 일부 수정DELETE: 데이터 삭제*멱등성멱등성이란 동일한 요청을 여러 번 반복해도 결과가 동일하게 유지되는 성질을 의미합니다.멱등성O: GET, PUT, DELE..

📕CS 2024.11.03

ES6+

ES6+는 모던 자바스크립트로 더 간결하고 효율적인 코드 작성을 가능하게 한다. ES6의 주요 변화는 다음과 같다. 1.템플릿 문자열: 템플릿 문자열을 통해 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용할 수 있게 한다.`${name}`; 2. const, let: JavaScript 엔진은 코드를 실행하기 전에 선언문을 위로 끌어올리는 작업을 한다.(Heap에 메모리를 할당해 놓는 것) 3. 화살표 함수: 일반 함수는 호출 방법에 따라 this가 다르게 맵핑된다. 반면 화살표 함수의 this는 상위 스코프의 this를 가리킨다. 이를 통해 콜백 함수에서 일관된 this를 가리킬 수 있다. 가독성 측면에서도 간결하게 작성할 수 있어서 더 좋다.// 일반 함수를 사용한 예시const perso..

728x90