반응형 전체 글 목록571 [쿠버네티스] 서비스 유형별 정리 1. ClusterIP용도: 파드 간 통신서비스가 생성되면 k8s 내부 DNS 서버에 서버 IP 주소가 등록됨 사실 서비스가 없어도 파드의 IP를 직접 알아내어 파드 간 통신을 할 수 있음. 하지만 이러면 재생성된 파드에 대해 대응을 못함(IP가 바뀌어서) name: api-serviceport 80targetPort 80selector: numbers_api 2. LoadBalancer용도: 외부 트래픽 전달 spec: ports: - port: 8080 # 서비스가 주시하는 포트 - targetPort: 80 # 트래픽이 전달될 파드의 포트 selector: app: numbers-web 3. NodePort용도: 외부 트래픽을 전달하는 또다른 방법(실제론 잘.. 2024. 7. 22. [Nextjs] SSR vs CSR CSR의 장점:더 나은 상호작용성: 클라이언트 측에서 UI 갱신이 빠르고 반응적이므로 사용자 상호작용에 대한 응답성이 향상됩니다.자원 효율성: 서버 측에서 렌더링을 처리하지 않으므로 서버 부하가 줄어듭니다.CSR의 단점:검색 엔진 최적화 (SEO) 문제: 초기 페이지 로드 시에는 빈 페이지가 표시되고, 검색 엔진 크롤러가 페이지 콘텐츠를 이해하는 데 어려움이 있을 수 있습니다.초기 로딩 속도: 자바스크립트 파일 다운로드와 실행 시간이 필요하므로 초기 로딩 속도가 SSR에 비해 느릴 수 있습니다. SSR의 장점:SEO 개선: 서버에서 완전한 HTML을 생성하므로 검색 엔진이 페이지 콘텐츠를 쉽게 파악할 수 있습니다.더 빠른 초기 로딩: 완전한 HTML이 서버에서 제공되므로 초기 로딩이 빠릅니다.SSR의 단.. 2024. 7. 20. [React] 재렌더링 최적화 1. 재렌더링이 발생하는 경우컴포넌트의 state 업데이트컴포넌트의 props 변경재렌더링된 컴포넌트의 모든 하위 컴포넌트 2. 재렌더링 최적화 - 컴포넌트 메모이제이션메모이제이션: 이전 처리 결과를 저장해둠으로써 처리 속도 향상 및 불필요한 처리 실행xconst Component = memo(()=>{});위와 같이 함수를 memo로 감싸주면 해당 컴포넌트는 props에 변경이 있을때만 재렌더링된다. 3. 재렌더링 최적화 - 함수 메모이제이션근데 props로 함수를 넘겨주는 경우에는 코드가 실행될 때마다 함수가 항상 새롭게 생성되기 때문에 이를 props가 변했다고 간주하여 재렌더링이 된다. 이때는 함수를 메모이제이션 해주어야 재렌더링이 발생하지 않는다.함수의 메모이제이션은 useCallback을 사용.. 2024. 7. 20. [React] 다양한 CSS 적용 방법 1. Inline Styles기본적인 방법이지만, 앱이 복잡해질수록 사용하기 어려움// 방식 1: 직접 기술return ( )// 방식 2: 사전 정의const containerStyle = { width: "100%", padding: "16px",};return ( ) 2. CSS Modules.css 또는 .scss 파일을 정의하는 방법*.scss 파일 작성을 위해선(npm install node-sass)가 필요scss 파일 작성.container { border: solid 1px #aaa; border-radius: 20px; padding: 8px; margin: 8px;}사용import classes from "./CssModules.module.scss"; // 임의의 이름 지정 가능ex.. 2024. 7. 20. [React] 리액트 기본 개념 1. JSX 표기법함수의 반환값으로 HTML 태그 사용, 그것을 컴포넌트화하여 화면을 구성반환값은 무조건 하나의 태그로 감싸져있어야함여러 줄일 때는 괄호()를 활용import ReactDOM from "react-dom";const App = () =>{ return 안녕하세요!;}ReactDOM.render(, document.getElementById("root"));컴포넌트화 예시src 하위에 App.js 파일 작성export const App = () => { return 안녕하세요!;} 임포트하여 사용import { App } from "./App"; 2. Props함수에 넘겨주는 인자와 같은 역할을 한다.export const ColoredMsg = (props) => { const conte.. 2024. 7. 20. [Typescript] 타입스크립트 알아보기 1. 타입스크립트란?자바스크립트에서 타입(형)을 다루도록 한것. 자바스크립트의 문법 및 표기법을 그대로 사용할 수 있다.create-react-app에서 타입스크립트 시작하기npx create-react-app [프로젝트명] --template typescript 2. 타입 지정 방법콜론을 붙여서 타입 지정.예시) 문자열 타입 지정let str: string = "a";str = "10"; // okstr = 10 // invalid 그 외 기본 자료형 지정numberbooleanArraynull(null만 대입 가능)undefined(undefined만 대입 가능)any 함수 타입 지정함수 타입은 인자와 반환값의 타입을 각각 지정한다.const funcA = (num: number): void => {.. 2024. 7. 20. 이전 1 ··· 3 4 5 6 7 8 9 ··· 96 다음 반응형
