-
제네릭 이해하기front-end 2024. 2. 27. 15:56
제네릭의 등장 배경 코드의 안정성과 재사용성을 높이기 위해 여러 종류의 객체를 다룰 수 있는 유연한 코드를 작성하기 위해 이해되나요? ㅋㅋ 저는 이해가 안 됩니다. ㅋㅋ 제네릭을 이해하기 위한 이야기 우리가 배열을 만들어야 한다고 생각해 보면, 배열에는 어떤 타입의 데이터가 들어올까요? 문자열, 숫자, boolean ... 어떤 데이터도 들어올 수 있습니다. 해결방안으로는 우리는 각각 모든 타입별로 제공하는 배열들을 만들어줘야 합니다. 예를 들면 다음과 같습니다. string일 때 사용하는 배열 - stringarray number일 때 사용하는 배열 - numberarray boolean일 때 사용하는 배열 - boolarray string이랑 number를 모두 사용하는 배열 - stringAndNu..
-
[알고리즘]나머지 연산(모듈러 연산)알고리즘/정수론 2024. 2. 27. 14:37
목표 나머지 연산에 대해 알아보자 나머지 연산을 이용한 문제 풀이 나머지 연산의 등장 배경 31 mod 4는 무엇일까? 너무 쉽다. '3'! 3^31 mod 12는 무엇일까? 😓 계산기를 두드려서라도 구해보자. 3^31는 617673396283947이다. 이 숫자의 mod 12는? 머리의 한계가 온다. 컴퓨터의 도움을 받아보자 3^200 mod 12는 무엇일까? 😒 장난하나 너무 큰 숫자다. 이렇게 큰 나머지 숫자를 어떻게 구 할 수있을까? 나머지 연산 나머지 연산은 3가지 특징을 가진다. 나머지 연산의 특징을 활용하여 문제를 해결해 보자. 3^200 mod 12 = ( 3^200 mod 12 ) * ( 3^200 mod 12 ) mod 12 = ( 3^100 mod 12 ) * ( 3^100 mod 1..
-
웹페이지 버벅임의 원인이 템플릿리터럴 때문이라고?프로그래밍 2024. 2. 23. 07:50
회사에서 채팅 UI개편이 있었다. 얼마 지나지 않아 많은 유저 문의가 올라왔는데. 채팅이 심하게 버벅거린다는 문의였다. 채팅 출력에 부하가 발생했다. 문제 발생 채팅이 많은 방송에서 부하가 심해지면서 유저들의 문의가 쏟아지기 시작했다. 비즈니스의 로직의 문제였을까? 개편할때 비즈니스 로직은 건들지 않고 UI만 변경했다. 변경점으로 DOM의 구조, CSS, + 연산자로 Domstring을 그려준던 것을 ``(템플릿 리터럴)로 변경했다. 원인 분석 채팅을 출력하는 DOM의 Children을 보면 이상한 점이 없다. 그러나 ChildNodes를 살펴보자. text Node가 사라지지 않고 남아 있는 것을 볼 수 있다. 남아있는 Text Node는 개행문자였다. nodevalue의 값을 보니 "\n " 으로 들..
-
개발자를 위한 AI 검색엔진 - Phind프로그래밍 2024. 2. 21. 23:17
크롬 확장 프로그램을 서칭 하다가 우연히 AI를 모두 모아 놓은 확장 프로그램을 발견했다. 확장 프로그램 설명란에 🚀 Export your Phind, Perplexity and MaxAI-Google search threads into markdown files! ( Phind, Perplexity, MaxAI-Google의 검색 결과를 마크다운으로 추출!) 3개다 처음 보는 단어였기에 구글 검색창에 검색해 보았다. Phind는 소프트웨어 개발 과정에서 필요한 정보를 빠르고 쉽게 찾을 수 있도록 도와주는 AI 검색엔진이라고 해서 사이트에 들어가 보았다. https://www.phind.com/search?home=true S OOP의 핵심에 대해 물어보았다. CHAT CPT랑 별반 다를 게 없다고 생각..
-
타입스크립트 도입 시도 실패, 그리고 다시 시작하기 위한 여정front-end 2024. 2. 8. 23:02
나는 프론트앤드 개발자이다. 작년에 시니어로 승진한 후로 벌써 2년이 지난다. 프로젝트를 오랫동안 다뤄오면서 코드 구조에 대한 문제를 점점 느끼고 있다. 요즘에 널리 사용되는 프레임워크(React, vue)가 없이 오로지 vanilaJS만으로 프로젝트를 진행하고 있다. 코드들은 대부분 객체 지향적으로 작성되어 있으며, class 문법을 통해 상속 구조로 이루어져 있다. 한 개의 클래스가 모든 역할을 감당하다 보니 코드가 5000줄이 넘는 클래스들도 많았다. 주로 수정이 이루어지는 곳이며, 하나의 수정이 있으면 5000줄에 영향은 없는지 확인을 해야 하는 문제도 있었다. 무엇보다 큰 문제는 5000 줄이나 되는 클래스를 상속받는 자식 클래스도 있었다. 부모 클래스를 수정하게 되면 자연스럽게 자식 클래스도 ..
-
안전한 코드 확장을 위한 OCP 원칙의 중요성에 대해Design Pattern 2024. 2. 4. 22:11
특정 프로젝트를 오랫동안 작업하다 보니 기능추가가 되면 어떻게 코드를 작성해야 할지 예상이 된다. 그러나 어떻게 코드를 작성해야 할지 예상이 되지 않는 경우가 있다. 최근에 제공되는 서비스에 일부만 제공해야만 하는 작업이 있었다. 일부만 제공하기 위해서는 서로 의존성으로 묶여있는 부분들을 제거하고 제공해야 하는데, "어떻게 작업해야 사이드 이슈 없이 안전하게 그리고 빠르게 작업을 진행할 수 있을까?" 고민하며 정리한 내용을 공유해보고자 한다. 안전하게 소스를 분리하기 소스를 안전하게 분리한다는 것. 좋다. 서비스를 분리하기 위해서는 기존의 로직들을 더체크해서 분리를 해야 한다. 그러나 문제는 서비스를 분리함으로써 기존에 잘 동작하던 기능도 확인해야 한다. 왜냐하면 분리라는 게 기존에 서비스에도 수정이 있..
-
FE개발자 k8s를 알아야하는가?front-end 2024. 1. 29. 19:38
K8s"는 "Kubernetes"라는 용어의 약어로, "8"은 "ubernete"라는 부분의 8개의 문자를 대체한 것이다. kubernetes는 무엇일까? 어원은 그리스어인데. 해적, 배를 관리하는 사람으로 사용되다 나중에는 관리자라는 의미로 사용되었다. 즉 k8s는 무언가를 관리하는 관리자로써의 역할을 하고 있다. 컨테이너 오케스트레이션 및 관리 시스템으로, 컨테이너화된 응용 프로그램을 자동으로 배포, 확장, 관리하는 역할을 수행한다. 여전히 와닿진 않는다. 직접 경험해 봐야 우리는 알 수 있다. 컨테이너화된 응용 프로그램이 뭘까? 응용 프로그램이 컨테이너처럼 되어야 한다는 의미인데. 여기서 컨테이너는 무엇일까? 컨테이너는 소프트웨어 응용 프로그램과 그 의존성을 패키지화하고 격리된 환경에서 실행하기 위..
-
[알고리즘] 순열알고리즘 2024. 1. 27. 18:46
목표 순열에 대해 알아보자 순열을 이용한 문제 풀이 순열 배경 다양한 조합 문제를 해결하기 위해 등장 요소들의 배열과 선택에 대한 방법의 필요성 순열이란? 수학적 관점 - 순서대로 나열 한 것, 나열한 경우의 수 알고리즘 관점 - 서로 다른 요소들을 모든 가능한 방법으로 배열 예를 들면 "ABC"의 경우 가능한 순열은 "ABC, ACB, BAC, BCA, CAB, CBA" 이다. 즉 ABC의 모든 조합, 경우의 수를 알 수 잇음 순열 활용하기 다양한 모든 순서를 고려해보고 싶다면. 순열을 활용해보자. 다양한 모든 순서가 몇번인지가 궁금하면 수학적으로 접근해보자. n P c = n! / (n - c)! n은 총 개수 c는 선택할 요소의 수 !는 팩토리얼 "ABC"의 순열의 수는 3P2 즉 3! / ( 3 ..