티스토리

시간이 멈추는 장소
검색하기

블로그 홈

시간이 멈추는 장소

narup.tistory.com/m

기은P의 블로그 일상과 개발 관련 포스팅 #React #Typescript #Next #Nest https://github.com/kimdongjang

구독자
34
방명록 방문하기
공지 공지사항/포스팅 예정 항목 모두보기

주요 글 목록

  • [AWS] 로드밸런서의 SSL를 EC2 스프링부트와 연동하기 개요프론트 사이트(https)에서 API 서버(http)로 연결하려면 Mixed Content Block 정책으로 인해 연결이 되지 않음Selfed Sign SSL을 이용하면 PC에서는 연결이 되지만 모바일에서는 API 호출이 안되는 문제가 발생기존 Nginx를 프록시 서버로 사용해서 https의 요청을 http로 사용했었는데, Selfed Sign SSL문제로 인해 다시 nginx를 제거.AWS의 로드밸런서에서 사용중인 SSL 인증서가 있다는 것을 관리자에게 들음따라서 AWS의 로드밸런서를 사용해서 nginx의 역할을 대체하기로함 조치 방법http(80)요청이 오면 443으로 리다이렉트https(443)요청이 오면 EC2가 포함된 그룹의 리스너로 리다이렉트리스너 규칙은 아래와 같이 API에서 사용중인 .. 공감수 1 댓글수 1 2024. 12. 20.
  • [Next.js] Antd es module 사용시 이슈(nextjs antd syntaxerror cannot use import statement outside a module) 01. Antd es module 사용시 이슈antd의 es라고 붙은 컴포넌트를 사용할때  cannot use import statement outside a module 이런 이슈가 발생했다.처음에 고치다가 잘 안되서 포기했는데, 다시 잘 찾아보니 해결 방법이 굉장히 간단했다.   02. 해결방법1) yarn add next-transpile-modules 설치2) next.config.mjs에 코드 추가/** @type {import('next').NextConfig} */import withTM from 'next-transpile-modules'; ...// antd는 무조건 들어가야하고, 나머지는 옵션export default withTM(['antd', 'rc-picker', 'rc-util'.. 공감수 0 댓글수 0 2024. 6. 27.
  • [Kafka] Docker compose 설치 백엔드 로직에 최적화가 필요해서 메시지 큐를 써야할 것 같은 상황에, Kafka를 쓰면 어떨까해서 고민해보다가 시간이 생겨 구현을 해보았습니다!쉽게 구현이 될줄 알았는데, 생각보다 카프카 쪽 설정이 신경쓸 것들이 많더라구요. 1. 구성환경  배포를 같은 환경에서 자유롭게 진행하고자 카프카 컨테이너를 도커 안에 배치하도록 구성환경을 짰습니다. 모든 환경이 저랑 같을 수는 없겠지만, 저는 이런 시퀀스 구조로 카프카를 사용하도록 했어요.1) 웹 사용자가 요청하면 Next.js 서버 사이드 단에서 Kafkajs를 호출2) kafkajs는 도커 컨테이너에 있는 kafka broker에 publish3) 같은 도커 컨테이너에 있는 Express.js에서 kafka를 subcribe하고 있는 상황에서 퍼블리싱이 일어.. 공감수 0 댓글수 0 2024. 4. 30.
  • [리눅스] docker, docker-compose 설치 리눅스(우분투) 설치 버전입니다. 1. 도커 설치 리눅스에 도커를 설치하려면 아래 명령어를 따라가야합니다. 1. 리눅스 SSH 접속 2. 패키지 최신 업데이트 sudo apt update 3. 도커 다운로드를 위한 https 관련 패키지 설치 sudo apt install apt-transport-https ca-certificates curl software-properties-common 4. 도커 레포지토리 접근을 위한 GPG Key 설정 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - 5. 도커 레포지토리 등록 sudo add-apt-repository "deb [arch=amd64] https://downl.. 공감수 1 댓글수 0 2024. 2. 21.
  • [알고리즘] 구간 합, 누적 합 코드보다는 알고리즘 접근 방법에 대해 정리합니다! 1. 누적 합이란? 배열에서 0번째 인덱스부터 N번째 인덱스까지 탐색을 진행하면서 누적해서 값을 더한 결과를 말합니다. array[1,3,5,6,7,9,13]가 있으면 1부터 13까지 순차적으로 탐색하면서 값을 더한 것을 말하는데, 다만 값을 단순하게 더하는 것이 아닌 누적해서 더한다는 것이 포인트입니다. 1+, (1+3), (1+3+5), (1+3+5+6), ... 이런식으로 더해 나가야하는 거죠! 코드로 단순하게 구현해 보면 아래와 같은 모습이 됩니다. for(int i = 0; i 공감수 0 댓글수 1 2023. 10. 20.
  • [알고리즘] 투 포인트(Two Point) 코드보다는 알고리즘 접근 방법에 대해 정리합니다! keypoint. 리스트에 순차적으로 접근해야할 때 2개의 점의 위치를 기록하면서 처리하는 알고리즘 순차적, 일방향으로 되어있는 선형적인 구조에서 사용 1. 투 포인트란? 리스트에 순차적으로 접근해야할 때 2개의 점의 위치를 기록하면서 처리하는 알고리즘입니다. 구간을 설정하는 시작점과 끝점을 지정하는 방법이라고 생각하면 되는데, 순차적, 일방향으로 되어있는 선형적인 구조에서 사용할 수 있는 방법입니다! 예를 들어, 특정한 합을 가지는 부분 연속 수열을 찾는 문제가 있다고 합니다. 양의 정수로만 구성된 리스트[1,2,3,2,5]가 있을 때, 부분적으로 선택한 정수들의 합이 m(5)가 되는 수열의 개수를 출력해야 할때 위 투 포인트 알고리즘을 사용할 수 있습.. 공감수 0 댓글수 1 2023. 10. 17.
  • [알고리즘] 소수판별, 에라토스테네스의체 코드보다는 알고리즘 접근 방법에 대해 정리합니다! keypoint. 자연수는 가운데 약수를 기준으로 각 등식이 대칭적인 형태를 보인다 제곱근이란 어떤 수를 두번 곱하여나오는 수에 대해, 그 수가 나오도록 두번 곱하는 수 소수에 2를 곱할 경우 그 수는 소수가 아니게 된다 1. 소수란? 2보다 큰 자연수 중 1과 자기 자신을 제외한 자연수로는 나누어 떨어지지않는 자연수를 말한다. 보통 1부터 N까지의 모든 소수를 출력해야 하는 문제가 나올 수가 있습니다. 2. 소수 판별 방법 1) X를 2부터 X-1까지의 모든 수로 나누어 보기 예를 들어, 16이라는 수가 있다면 16을 2로 나누고, 3으로 나누고, 4로 나누고, ... 15까지 나누어 보는 방법입니다. 이때 나머지가 0일 경우에는 소수가 아니게 되어서,.. 공감수 0 댓글수 0 2023. 10. 17.
  • [React] HOC(고차 컴포넌트) 함수형 예제 1. 개요 기술면접을 보았을때 HOC란 무엇인가?라고 물었을때 잘 모른다고 대답을 했었는데요, 살짝 찾아보니까 메인 다큐먼트에서는 클래스형 컴포넌트에서 사용되는 것이 있었습니다. 기술면접에서 물어볼 정도면 뭔가 중요한 내용이 있는게 아닐까 싶어서 HOC를 함수형으로 사용할 수 있는 방법을 찾아보았고, 어째서 HOC에서 물어보셨는지에 대해 깨닳게 되었습니다! 예제로 사용한 깃허브 주소입니다. https://github.com/kimdongjang/hoc_test GitHub - kimdongjang/hoc_test Contribute to kimdongjang/hoc_test development by creating an account on GitHub. github.com 2. HOC(Higher Or.. 공감수 0 댓글수 0 2022. 11. 15.
  • [React] useMemo와 useCallback의 차이 1. 개요 useMemo와 useCallback이라고 하는 hook 함수가 있지만 둘의 개념을 살펴보면 두 함수다 비슷한 역할을 가지고 있는 것 같아, 언제 어느 상황에 useMemo 또는 useCallback을 써야할지 판단을 하기 위해 정리를 해보려고 합니다. (심지어 useCallback 안에 useMemo를 쓰는 경우도 있었음) 2. Memoization 먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다. 3. useMemo useMe.. 공감수 22 댓글수 5 2022. 11. 3.
  • [React] 렌더링(리렌더링) 1. 개요 React를 공부하면서 어떻게 보면 가장 기초이고, 가장 중요한 부분인데 사실 이제야 포스팅한다는 것은 이제까지 리액트를 잘못 사용해왔다는 반증이기도 한데... 조금 더 심도있게 리액트를 알아보기 위해서 렌더링이란 무엇이고, 렌더링의 조건이 어떻게 되는 건지 확인차 적어보려고 합니다. 2. 렌더링이란? 아래의 Welcome을 컴포넌트라고 부릅니다. (정확히는 함수 컴포넌트) function Welcome(props) { return Hello, {props.name}; } 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미합니다. 3. 렌더링 과정 3-1. React의 렌더링 기본적인 리액트의 렌더링 개념.. 공감수 1 댓글수 0 2022. 11. 3.
  • [Typescript] Utility Type 정리(ReturnType, Required 등) 1. Partial Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성해줍니다. 그리고 이 유틸리티는 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있습니다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 interface Product { id: number; name: string; price: number;.. 공감수 0 댓글수 0 2022. 11. 3.
  • [Javascript] 고차 함수 정리(array, reduce, filter 등) 1. 개요 고차함수는 외부 상태 변경이나 mutable(가변적인) 데이터를 피하고, 불변성(Immutability)를 지향하는 함수형 프로그래밍에 기반을 두고 있습니다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거해 복잡성을 해결하고, 변수의 사용을 억제해 상태 변경을 피하려고 하는 프로그래밍 패러다임 입니다. -> 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 해 가독성을 해치고, 변수의 값을 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적인 원인이 될 수 있기 때문입니다. 이러한 함수형 프로그래밍은 순수 함수를 통해 side effect를 최대한 억제해 오류를 피하고 프로그램의 안정성을 높이는 방향으로 이어갑니다. 2. Array... 공감수 1 댓글수 0 2022. 11. 1.
  • [알고리즘] 깊이우선탐색(dfs) / 넓이우선탐색(bfs) (feat.javascript) 1. 깊이우선탐색(dfs) const graph = { A: ["B", "C"], B: ["A", "D"], C: ["A", "G", "H", "I"], D: ["B", "E", "F"], E: ["D"], F: ["D"], G: ["C"], H: ["C"], I: ["C", "J"], J: ["I"] }; const DFS = (graph, startNode) => { const visited = []; // 탐색을 마친 노드들 let needVisit = []; // 탐색해야할 노드들 needVisit.push(startNode); // 노드 탐색 시작 while (needVisit.length !== 0) { // 탐색해야할 노드가 남아있다면 const node = needVisit.shift();.. 공감수 0 댓글수 1 2022. 10. 25.
  • [React] 불변성이란? 불변성을 지켜야 하는 이유 1. 개요 React를 빠르게 배울 때 값을 변경할 때 useState를 사용해야 한다, 불변성을 유지해야 한다, immer를 사용해야 한다, spread 연산자를 사용해야 한다, 공식처럼 생각하고 있었는데 javascript의 메모리 구조에 대해 알아보면서 react의 리렌더링이 일어나는 과정이나 불변성의 진짜 의미는 무엇일지 찾아보다가 괜찮은 블로그를 발견해 요점만 정리해보려고 합니다. 2. javascript 메모리 구조 자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고 있습니다. 콜스택: 실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간입니다. 이곳에 원시 타입들이 저장됩니다. 힙 메모리: 참조 타입들이 할당되는 곳입니다. 메모리 누수를 방.. 공감수 5 댓글수 1 2022. 10. 24.
  • [Node.js] for 동기 처리(Promise, Mysql) 1. 개요 A 데이터베이스에서 데이터를 가지고 B 데이터베이스에 가공해서 Insert하는 프로그램을 짜는 과정에서 node.js 기반으로 프로그램을 짜보았습니다. 평소에는 자바로 짯지만 node.js로 코드를 짜면 npm 패키지로 쉽게 의존성이 필요한 라이브러리를 다운받을 수 있고, Linux에서도 쉽게 배포할 수 있어서 node.js를 사용해보았습니다. *필요했던 의존성 라이브러리는 데이터베이스 커넥터와 스케쥴러 2개였습니다. 하지만 java와 다르게 node.js는 대부분 비동기 처리가 되어버려서 데이터를 가공하는데 순서를 맞추기가 굉장히 곤란했습니다. A function output -> B function execute(x10) 이렇게 순차적으로 실행이 되는 로직으로 코드를 작성했고, java 기.. 공감수 2 댓글수 0 2022. 10. 21.
  • [Javascript] this 정리 1. this의 정의 자바스크립트의 this는 현재 실행 문맥이라고 합니다. 여기서 현재 실행 문맥이라는 건 호출자를 뜻하는데, 호출자는 크게 세 가지로 나뉘어집니다. 객체의 메소드 함수 생성자 함수 만약 this가 나온다면 세 가지 경우 중 하나인 함수호출방식에 따라 누가 호출했는지 보고 this가 어떤 의미를 가지는지를 따져보면 됩니다. 이를 함수 호출 패턴이라고 하며, 자바스크립트의 this 는 함수 호출 패턴에 따라 this 가 어떤 객체의 this 가 될 지 정해지고, 이것을 this 바인딩이라고 합니다. 2. 사용방법 2-1) 객체의 메소드 호출할 때의 this 바인딩 var obj = { name: ‘test’ sayName: function() { console.log(this.name);.. 공감수 0 댓글수 0 2022. 10. 20.
  • [React] SEO 처리 하기 1. 개요 React는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)으로 동작합니다. 이때 React에서는 HTML 파일이 딱 1개뿐이고, 그 내용조차 서버에서 javascript를 받아서 렌더링하기 전까지는 빈 껍데기인 상태이기 때문에 검색 엔진에 노출되기가 어렵습니다. 따라서 SEO에 노출시키기 위해 html 내용을 미리 만들어야합니다. 2. pre-rendering pre-rendering이란, 빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말합니다. 빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 됩니다. 다만, 빌드 시에는 정적 파일만 가져.. 공감수 0 댓글수 0 2022. 10. 19.
  • [React] SSR과 CSR(SPA) 차이 1. 개요 먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다. 이러한 렌더링을 하는 방식이 SSR과 CSR이 있는데, 이 두 가지 렌더링 방법에 대한 차이를 이해해보려고 합니다. 2. SSR(Server Side Rendering) https://narup.tistory.com/235 [Next.js] SSG, SSR 개념 정리 1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. React: CSR(Client-Si.. 공감수 3 댓글수 0 2022. 10. 19.
  • [Javascript] 브라우저 동작 원리, 렌더링 트리 1. 브라우저 기본 구조 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 웹페이지가 보여지는 창 등 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 : 요청한 콘텐츠를 표시하기 위해 요청된 HTML과 CSS를 파싱해 화면에 표시합니다. 통신 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 독립적인 인터페이스로 각 플랫폼 하부에서 실행됩니다. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행합니다. 자료 저장소 : 자료를 저장하는 계층으로 로컬 스토리지, 쿠키와 같이 모든 종류의 자원을 하드디스크에 저장합니다. 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 인스턴스를 유지해서 독립된 프로세스로 처리합니다(이래서 메모리를 많이 먹는 걸수도?) 2... 공감수 0 댓글수 0 2022. 10. 19.
  • [Javascript] 이벤트 버블링 1. 이벤트 등록 이벤트 버블링에 알기 전에 앞서 이벤트 등록에 대해 알아봅니다. var button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 웹 개발을 하셨던 분이라면 익숙한 코드지요? 버튼을 클릭했을 경우 addItem 함수를 실행시키는 코드입니다. 버튼을 클릭하면 addItem함수가 실행되고, event 인자가 넘어오며, console.log를 통해 event에 관련된 정보를 알 수 있게 됩니다. 동작 원리는 이러한데, 브라우저는 어떻게 이벤트를 감지할까요? 2. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이.. 공감수 0 댓글수 0 2022. 10. 18.
  • [Javascript] 이벤트 루프와 태스크 큐 1. Javascript 이벤트 루프 자바스크립트는 기본적으로 싱글 스레드로 한번에 하나의 작업만 할 수 있는 특징이 있습니다. One thread == one call stack == one thing at a time Call stack(호출 스택)은 우리가 어떤 순서로 작업을 수행하는지 기록하는 작업 스케쥴링과 관련된 도구입니다. 특정 함수를 실행하면 그 함수를 호출 스택의 맨 위에 놓는데 이것을 push 과정이라고 합니다. 만약에 함수가 어떤 값을 리턴하거나 실행을 종료하면, 호출 스택 맨 위에서 그 함수를 꺼내는데 이 과정을 pop이라고 합니다. 이와 같은 코드가 있으면 스택에 순서대로 main() -> printSquare() -> square() -> multiply()로 push가 되고, .. 공감수 0 댓글수 0 2022. 10. 18.
  • [Javascript] 호이스팅이란? 1. 호이스팅이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 2. 자바스크립트 함수 동작 원리 1) 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는다. 2) 함수안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행한다. (함수 블록 {} 안에서만.) 3) 함수를 실행할 때, 호출한 위치보다 해당 함수가 하단부에 있을 경우 자바스크립트 Parser가 내부적으로 함수 위치를 끌어올려서 처리한다. -> 호이스팅 * 실제 메모리에서는 변화가 없습니다. Why? 자바스크립트에서 함수를 선언하는 방식이 함수선언식과 함수표현식이 있습니다. // 함수선언식 function test1() { return 1; } // 함수표현식 var .. 공감수 0 댓글수 0 2022. 10. 17.
  • [Jenkins] Linux EC2에서 Jenkins 설치하기(Java 11버전 설치) 1. 개요 새로 ec2 인스턴스에 jenkins를 설치하려고 하니 java version 이슈가 있어서 설치가 곤란했었던 터라, EC2 인스턴스의 Linux 환경에서 Jenkins를 설치하는 과정을 정리해보려고 합니다. 2. Jenkins 구동 실패 jenkins.service - Jenkins Continuous Integration Server Loaded: loaded (/usr/lib/systemd/system/jenkins.service; disabled; vendor preset: disabled) Active: failed (Result: start-limit) since 목 2022-06-30 08:32:00 KST; 7s ago Process: 7079 ExecStart=/usr/bin/.. 공감수 0 댓글수 3 2022. 9. 23.
  • [React] 콜백에서의 useState, useEffect 사용 이슈 1. 개요 위 아래로 스크롤 할 때, 섹션별로 스크롤이 이동하는 기능을 구현하는 과정에서 scroll event를 사용하게 되었는데, 이때 event가 발생할 때 콜백으로 scroll section index 값을 변경하려고 했습니다. 이때, 스크롤 인덱스가 무조건 변경되는 것이 아니라, 인덱스가 특정 범위를 넘지 않도록 필터링을 하는 조건을 추가하였는데요. useEffect의 dependency로 등록한 scrollIndex의 console은 잘 찍히는 반면, 필터링하는 부분에서의 scrollIndex 값은 1로 고정이 되어 있었습니다. 사용된 코드 const outerDivRef = useRef(); const windowSize = useRef(getWindowDimensions()); const .. 공감수 1 댓글수 1 2022. 9. 22.
  • [React] Redux Toolkit 에서의 비동기 처리(createAsyncThunk, extraReducers) 1. 개요 앞서서 Redux Toolkit의 상태관리를 위한 기본적인 사용법에서 알아보았는데요, createSlice()를 통해 Slice라는 것을 생성하며, 여기에 초기 default 값과 dispatch를 통해 호출할 reducer 함수를 지정했었습니다. 프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에,.. 공감수 1 댓글수 0 2022. 9. 19.
  • [React] Redux Toolkit 사용법 1. 개요 React에서 상태관리 툴로 Redux를 사용하는데, Redux를 사용하기가 상당히 까다롭고 진입장벽이 높습니다. 액션 함수, 액션 생성 함수, 리듀서, 스토어... 또 타입스크립트를 쓰게 되면 해당 타입을 또 일일히 지정해주어야 하고 관리할 상태값이 1개가 생길 때마다 작성하는 코드도 많아집니다. 가독성도 안좋아지고요... 이러한 문제 때문에 상태관리를 도와주는 라이브러리가 등장하게 되었는데, 사실 Redux Toolkit보다 더 직관적이고 좋은 라이브러리는 많습니다. 다만 상태관리라는 개념에 대해 정확하게 알고 사용하는 것이 좋을 것이라고 생각이 되어 Redux를 먼저 사용해보고 그 Redux를 편리하게 만든 Redux Toolkit에 알아보려고 합니다! 2. 설치 공식사이트는 아래와 같습.. 공감수 5 댓글수 1 2022. 9. 19.
  • [CSS] 자주 쓰는 CSS 정리 1. img, video 등 오브젝트 요소에는 object-fit: cover 속성을 사용 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다. 2. 반응형 css 작업 우선순위 레이아웃을 작성할 때 반응형으로 작업하고 있고, 반응형을 나누는 기준이 min-width라면 모바일 크기부터 데스크탑으로, 작은 화면에서 큰 화면으로 우선순위를 맞춰서 작업한다. 3. display: flex 사용 되도록이면 flex를 사용하되 flex를 아무 이유 없이 남발하지 말것. flex 밑의 자식은 flex-item이 된다. flex-item이 1일 경우 flex: 1 1 0이 된다. grow: 늘어남 / shrink 줄어듬 flex-grow가 .. 공감수 0 댓글수 0 2022. 9. 16.
  • [Typescript] 자주 쓰는 문법 정리 1. 배열 // default let list: number[] = [1,2,3]; // or let list: Array = [1,2,3]; // interface array interface EnumServiceItem { id: number; label: string; key: any } interface EnumServiceItemList extends Array{} // using var result: EnumServiceItem[] = [ { id: 0, label: 'CId', key: 'contentId' }, { id: 1, label: 'Modified By', key: 'modifiedBy' }, ]; 2. 인터페이스 상속이 가능하다. interface PeopleInterface {.. 공감수 2 댓글수 1 2022. 9. 8.
  • [ElasticSearch] Logstash No configuration found in the configured sources. [에러해결] 1. 개요ElasticSearch에 Logstash의 배치 스케쥴러를 사용하려고 했는데 configuration을 못찾는다는 오류가 발생했습니다.config폴더에 pipelines.yml과 logstash.conf 파일은 바꾼적이 없는데 말이죠.  2. 에러해결구글링을 해본 결과...<p data-k.. 공감수 1 댓글수 0 2022. 8. 2.
  • [Git] 변경된 내용 삭제(git reset) 1. 개요 서버에서 서비스 중인 프로그램에 대해 업데이트를 진행할 때, 우연찮게 서버 내부에서 수정사항이 발생하고, 이 수정사항에 대해 git에 반영하지 않고 변경된 내용을 삭제하고 단순하게 pull만 받고 싶을 때가 있습니다. 2. 코드 git reset git checkout . git clean -fdx 1번째 줄 : 모든 staged된 파일이 unstage됩니다(실수로 커밋했을 경우, 로컬에서 unstage) 2번째 줄 : 모든 변경 사항을 취소합니다. 3번째 줄 : 추적할 수 없는 모든 파일 제거(추적된 파일만 남습니다) 이후에 git pull로 변경된 내용을 받고 서비스를 진행하면 됩니다. 참고 https://extbrain.tistory.com/83 [git] 커밋되지 않았거나 저장되지 않은.. 공감수 0 댓글수 0 2022. 7. 26.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.