Study Note266 728x90 Kubernetes #쿠버네티스 시각화 자료 모음 쿠버네티스 내가 이해하려고 모아둔 쿠버네티스 시각화 그림들 쿠버네티스 클러스터의 파드 실행 구조 디플로이먼트, 레플리카셋, 파드의 관계 같은 포트를 가진 컨테이너가 하나의 노드에서 여러 파드로 실행되는 모습 파드가 서비스를 통해 다른 파드를 호출하는 방식 서비스가 셀렉터를 통해 파드를 선택하는 방식 인그레스 (Ingress) 를 통한 경로 기반 요청 분배 emptyDir을 이용한 파드 내부 임시 저장공간 공유 hostPath를 이용한 노드 저장소 사용 참고도서: 쿠버네티스 개발 전략 2023. 4. 23. Error #self.processResponse is not a function Chrome의 WhatRuns extension 을 사용하는 중이라 충돌되어 생긴 에러였고, extention 삭제 후 해결되었다. 참고출처: https://github.com/vercel/next.js/discussions/33355#discussioncomment-2072168 2023. 2. 2. css #왼쪽 오른쪽만 배경 이미지 블러처리 왼쪽 오른쪽만 아래처럼 이미지 투명 or 블러 처리를 box-shadow를 활용하여 구현한 코드를 기록해둔다. Side blur only creates left and right. I used CSS's box-shadow. html css .background { width: 100%; max-width: 1000px; position: relative; margin: auto; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-color: #white; } .background:before, .background:after { content: " "; height: 100%; positio.. 2023. 1. 27. Swagger2 #영어 깨짐 현상 해결 Kotlin Spring 환경에 세팅된 Swagger2 화면에서 영어 깨짐 현상이 발견되었다. URI: http://localhost:8080/swagger-ui api/events/... => ​/api​/events​/... UTF-8 인코딩 문제로 의심되어 열심히 찾던 중 의외의 방법으로 해결되었다. URI: http://localhost:8080/swagger-ui/index.html URI에 index.html 를 추가하니 제대로 출력되었다. 참고자료 https://github.com/springfox/springfox/issues/3544 2023. 1. 12. Next.js #Image src - External CDN image is not visible Next.js src 에 외부 CDN(External) 정보를 넣으니 이미지 출력이 안되었다. 출력 방법은 간단하다. Image loader 를 사용하면 된다. import Image from 'next/image' const myLoader = ({ src, width, quality }) => { return `https://example.com/${src}?w=${width}&q=${quality || 75}` } const MyImage = (props) => { return ( ) } https://nextjs.org/docs/api-reference/next/image#loader next/image | Next.js Enable Image Optimization with the built-i.. 2022. 10. 6. React #Redux What Is Cross-Component / App-Wide State? Local State State that belongs to a single component E.g. listening to user input in a input field; toggling a "show more" details field Should be managed component-internal with useState() / useReduce() Cross-Component State State that affects multiple components E.g. open/ closed state of a modal overlay Requires "props chains" / "prop drilling" App-Wi.. 2022. 9. 24. React #Building Custom Hooks What are "Custom Hooks"? Outsource stateful logic into re-usable functions Unlike "regular functions", custom hooks can use other React hooks and React state The name must start with 'use' Sample Code src/hooks/use-http.js import { useState, useCallback } from 'react'; const useHttp = () => { const [isLoading, setIsLoading] useState(false); const [error, setError] useState(null); const sendReque.. 2022. 9. 24. React #Rules of Hooks React Rules of Hooks Only call React Hooks in React Functions React Component Functions Custom Hooks Only call React Hoos at the Top Level Don't call them in nested functions Don't call them in any block statements + extra, unoffical Rule for useEffect(): ALWAYS add everything you refer to inside of useEffect() as a dependency useEffect(() => { setFormIsValid(email && password) }, [email]); // (.. 2022. 9. 24. React #Understanding useReducer() useReducer() const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn); state: The state snapshot used in the component re-render/ re-evaluation cycle dispatchFn: A function that can be used to dispatch a new action (i.e. trigger an update of the state) reducerFn: (prevState, action) => new State / A function that is triggered automatically once an action is dispatched (via dispatc.. 2022. 9. 24. 프로그래머스 #2021 KAKAO BLIND -신규 아이디 추천 lv1 문제 풀이 function solution(new_id) { let answer = ''; answer = getAvailableId(new_id); return answer; } function getAvailableId(id) { let recommandId = '' const idInValidRe = /[^-_.a-z0-9]/g; const doubleDotRe = /\.{2,}/g; const startDotRe = /^\./; const endDotRe = /\.$/; // 1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. recommandId = id.toLowerCase(); // 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모.. 2022. 7. 4. 이전 1 2 3 4 ··· 27 다음
