코딩정비소 코딩정비소

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

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

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

K8s"는 "Kubernetes"라는 용어의 약어로, "8"은 "ubernete"라는 부분의 8개의 문자를 대체한 것이다. kubernetes는 무엇일까? 어원은 그리스어인데. 해적, 배를 관리하는 사람으로 사용되다 나중에는 관리자라는 의미로 사용되었다. 즉 k8s는 무언가를 관리하는 관리자로써의 역할을 하고 있다. 컨테이너 오케스트레이션 및 관리 시스템으로, 컨테이너화된 응용 프로그램을 자동으로 배포, 확장, 관리하는 역할을 수행한다. 여전히 와닿진 않는다. 직접 경험해 봐야 우리는 알 수 있다. 컨테이너화된 응용 프로그램이 뭘까? 응용 프로그램이 컨테이너처럼 되어야 한다는 의미인데. 여기서 컨테이너는 무엇일까? 컨테이너는 소프트웨어 응용 프로그램과 그 의존성을 패키지화하고 격리된 환경에서 실행하기 위..

// test.js console.log(‘@@TEST’, userId); // test2.js console.log(‘@@TEST2’, userId); 위 코드는 어떻게 동작할 것으로 예상하는가? test.js에서 userId가 선언되기도 전에 접근해서 에러가 날것처럼 보이지만 에러는 나지 않는다. 결과는 다음과 같다 undefined 늘푸른개발자​ 왜일까? 왜 에러가 나지 않고 정상적으로 동작했는가? 변수가 선언되기도 전에 호출했는데 어째서 동작하는가? 라는 질문이 나온다. 그게 정상이다. 그럼 자바스크립트가 비정상인가? 그렇다 자바스크립트의 var가 비정상적이다. 일반적이지 않게 즉 예상하지 않게 동작하기 때문에 var를 사용해서는 안된다. 개념적으로 자바스크립트에는 호이스팅이라는 개념이 있어서 저..

오랜만에 개념정리 차원에서 React 기술 용어 모음집을 읽었다. 익숙하지만 애매하게 개념이 잡히지 않는 두 개념이 있었다. 바로 컴파일러와 번들러이다. 사내에서는 거의 건들일이 없기 때문에. 알고는 있지만, 크게 수정해본적이 없는 친구들이라 그런지, 개념이 잡히지 않았다. 이참에 개념을 잡아보는 시간을 가져보려고한다. 컴파일러 Compiler는 특정 프로그래밍 언어로 쓰여있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 말한다. 원래의 문서를 소스 코드(원시 코드)라고 부르고, 출력된 문서를 목적 코드라 하고 부른다- wiki 참고 대표적인 예로 C++코드를 기계어로 바꿔주는 것이다. 컴파일러는 언어 번역 프로그램이다. 즉 파파고나, 구글 번역기 처럼 특정 대상이 이해할수 있도록 번역해주..

웹 사이트의 성능을 개선하기 위한 여러 가지 방법 중 하나로 코드 스플리팅이 있다. 코드 스플리팅은 뭘까? 코드(code) + 스플리팅(splittin) 의 합성어로 직역하면 코드의 파편화, 코드를 파편화한다. 왜 코드를 파편화할까? React 생각해보자. React는 CSR으로 클라이언트에서 모든 페이지를 기억하고 있다. 즉 모두 자바스크립트로 페이지가 생성되고 만들어진다고 봐도 무방하다. 이 말은 다시 말하면 최초 진입 시에 모드 페이지의 정보를 로딩하여 생성하기 때문에 초기 진입속도가 굉장히 느리다. 그래서 이러한 초기 진입속도를 해결하기 위해서 등작한 것이 바로 코드 파편화 코드 스플리팅이다. 코드 스플리팅은 사용한 소스만 로드해서 사용하는 것을 의미하는데. React에서는 이러한 기능을 컨포넌트..

https://www.npmjs.com/package/react-icons react-icons SVG React icons of popular icon packs using ES6 imports www.npmjs.com react icon는 리엑트에서 사용하는 많이 사용하는 icon들을 쉽게 사용할 수 있도록 모아둔 패키지이다. 이 패키지를 사용하면 쉽게 다양한 아이콘들을 사용할 수 있다. 1. 설치하기 npm install react-icons --save 설치가 잘되었는지 확인해보기 npm ls --depth=0 설치가 제대로 되었음을 확인할 수 있다. 2. 사용해보기 import { FaBeer } from 'react-icons/fa'; class Question extends React.Com..