코딩정비소 코딩정비소

들어가기 FSD 아키텍처가 무엇인지 아는가? Feature-Sliced Design의 줄임말로 애플리케이션을 Feature(기능) 단위로 조직화하여 관리하는 방법을 말한다. 끊임없이 변화하는 비즈니스 요구 사항에 맞서서 프로젝트를 더 이해하기 쉽고 체계적으로 만든다는 점에서 매우 흥미롭게 다가왔다. 개발은 변화에 민감하다. 각 기능들은 다른 기능들에 대해 격리되어 있어야 한다. 왜냐하면 하나의 변화로 인해서 다른 기능들이 고장 나는 경우가 너무 빈번했기 때문에. 어떻게 격리벽을 세워 코드를 안전하게 작성할 수 있을지에 대한 고민이 많았다. 그리고 유지보수와 확장성에도 좋은 코드를 작성하여 팀원분들에게도 좋은 코드리뷰를 하고 싶은 마음, 그러한 기준을 찾고 있었다. 클린 아키텍처, 실전주의 프로그래머 등 ..

BFS란? BFS(Breadth-First Search, 너비 우선 탐색 )은 그래프 탐색 알고리즘이다. 시작 정점에서 가장 가까운 정점을 방문하고 멀리 떨어진 정점을 나중에 방문하는 방식으로 탐색한다 BFS 탐색 과정? A를 탐색하고 B와 C를 탐색 리스트에 넣는다. 탐색 리스트 = [B, C] 탐색리스트에서 첫 번째 요소 B를 탐색하고 D를 탐색 리스트에 넣는다. = [ C, D ] 탐색리스트에서 첫번째 요소 C를 탐색하고 E를 탐색 리스트에 넣는다. = [ D, E ] 탐색리스트에서 첫번째 요소 D를 탐색하고 탐색 결과가 없어서 넘어간다. = [ E ] 탐색리스트에서 첫번째 요소 E를 탐색하고 탐색 결과가 없어서 넘어간다. = [] BFS의 등장 배경 A에서 E까지 가는 최단 경로를 찾고 싶다면 어..

제네릭의 등장 배경 코드의 안정성과 재사용성을 높이기 위해 여러 종류의 객체를 다룰 수 있는 유연한 코드를 작성하기 위해 이해되나요? ㅋㅋ 저는 이해가 안 됩니다. ㅋㅋ 제네릭을 이해하기 위한 이야기 우리가 배열을 만들어야 한다고 생각해 보면, 배열에는 어떤 타입의 데이터가 들어올까요? 문자열, 숫자, boolean ... 어떤 데이터도 들어올 수 있습니다. 해결방안으로는 우리는 각각 모든 타입별로 제공하는 배열들을 만들어줘야 합니다. 예를 들면 다음과 같습니다. string일 때 사용하는 배열 - stringarray number일 때 사용하는 배열 - numberarray boolean일 때 사용하는 배열 - boolarray string이랑 number를 모두 사용하는 배열 - stringAndNu..

목표 나머지 연산에 대해 알아보자 나머지 연산을 이용한 문제 풀이 나머지 연산의 등장 배경 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..

회사에서 채팅 UI개편이 있었다. 얼마 지나지 않아 많은 유저 문의가 올라왔는데. 채팅이 심하게 버벅거린다는 문의였다. 채팅 출력에 부하가 발생했다. 문제 발생 채팅이 많은 방송에서 부하가 심해지면서 유저들의 문의가 쏟아지기 시작했다. 비즈니스의 로직의 문제였을까? 개편할때 비즈니스 로직은 건들지 않고 UI만 변경했다. 변경점으로 DOM의 구조, CSS, + 연산자로 Domstring을 그려준던 것을 ``(템플릿 리터럴)로 변경했다. 원인 분석 채팅을 출력하는 DOM의 Children을 보면 이상한 점이 없다. 그러나 ChildNodes를 살펴보자. text Node가 사라지지 않고 남아 있는 것을 볼 수 있다. 남아있는 Text Node는 개행문자였다. nodevalue의 값을 보니 "\n " 으로 들..

크롬 확장 프로그램을 서칭 하다가 우연히 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랑 별반 다를 게 없다고 생각..

나는 프론트앤드 개발자이다. 작년에 시니어로 승진한 후로 벌써 2년이 지난다. 프로젝트를 오랫동안 다뤄오면서 코드 구조에 대한 문제를 점점 느끼고 있다. 요즘에 널리 사용되는 프레임워크(React, vue)가 없이 오로지 vanilaJS만으로 프로젝트를 진행하고 있다. 코드들은 대부분 객체 지향적으로 작성되어 있으며, class 문법을 통해 상속 구조로 이루어져 있다. 한 개의 클래스가 모든 역할을 감당하다 보니 코드가 5000줄이 넘는 클래스들도 많았다. 주로 수정이 이루어지는 곳이며, 하나의 수정이 있으면 5000줄에 영향은 없는지 확인을 해야 하는 문제도 있었다. 무엇보다 큰 문제는 5000 줄이나 되는 클래스를 상속받는 자식 클래스도 있었다. 부모 클래스를 수정하게 되면 자연스럽게 자식 클래스도 ..

특정 프로젝트를 오랫동안 작업하다 보니 기능추가가 되면 어떻게 코드를 작성해야 할지 예상이 된다. 그러나 어떻게 코드를 작성해야 할지 예상이 되지 않는 경우가 있다. 최근에 제공되는 서비스에 일부만 제공해야만 하는 작업이 있었다. 일부만 제공하기 위해서는 서로 의존성으로 묶여있는 부분들을 제거하고 제공해야 하는데, "어떻게 작업해야 사이드 이슈 없이 안전하게 그리고 빠르게 작업을 진행할 수 있을까?" 고민하며 정리한 내용을 공유해보고자 한다. 안전하게 소스를 분리하기 소스를 안전하게 분리한다는 것. 좋다. 서비스를 분리하기 위해서는 기존의 로직들을 더체크해서 분리를 해야 한다. 그러나 문제는 서비스를 분리함으로써 기존에 잘 동작하던 기능도 확인해야 한다. 왜냐하면 분리라는 게 기존에 서비스에도 수정이 있..