분류 전체보기 (78) 썸네일형 리스트형 VSCode 확장 프로그램 만들기 (3) - VSCode 코드 품질 측정 확장 프로그램(VSCode 익스텐션) Style Rank 프로젝트 소개코드를 작성하다 보면 "이 코드가 잘 작성된 건가?" 하는 의문이 들 때가 있다. 주로 ESlint와 같은 도구를 활용하여 코드 컨벤션에 대한 검사를 하곤 하지만, 해당 코드가 얼마나 복잡하게 짜여있는지, 구조적으로 문제가 없어도 클린 코드로써 좋은 코드인지에 대한 검사에는 어려움이 있다. 리뷰를 해주는 입장에서 읽기에 가독성 등의 측면에서 문제가 없는지에 대한 의문이 든 경우가 많을 것이다. Style Rank는 이러한 의문에 답하기 위해 만든 VSCode 익스텐션이다. 파일을 저장하는 순간 코드 품질을 자동으로 분석하고, S/A/B/C/D/F 등급을 실시간으로 보여준다. 아래는 관련 깃허브 url과 vscode 익스텐션 마켓의 url이다. Github: https://.. VSCode 확장 프로그램 만들기 (2) - AST와 코드 복잡도 측정 코드 품질을 객관적으로 측정하려면 어떻게 해야 할까?이번 글에서는 AST(Abstract Syntax Tree)와 순환 복잡도, 인지 복잡도 등 이번 프로젝트에서 주요하게 다른 코드 분석 내용을 다룰 것이다. AST(Abstract Syntax Tree)란?AST는 소스 코드의 구조를 트리 형태로 표현한 자료구조다. 코드의 문법적 구조를 추상화하여 컴파일러나 분석 도구가 이해할 수 있는 형태로 변환한다. 예를 들어,const add = (a, b) => a + b; 이 코드는 AST로 다음과 같이 표현된다. { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type.. VSCode 확장 프로그램 만들기 (1) - 확장 프로그램 시작하기 VSCode 확장 프로그램 개발 시작하기VSCode는 개발자들에게 가장 사랑받는 에디터 중 하나다. 그 이유 중 하나는 바로 확장 프로그램(Extension) 생태계 덕분이다. 이번 글에서는 VSCode 확장 프로그램을 만드는 방법과 개발 과정에서 겪은 경험을 공유한다. 개발 환경 구축VSCode 확장 프로그램을 만들기 위해서는 먼저 개발 환경을 구축해야 한다. Yeoman과 generator-code를 사용하면 확장 프로그램의 기본 템플릿을 쉽게 생성할 수 있다.npm install -g yo generator-codeyo code 템플릿 생성 시 여러 옵션을 선택할 수 있는데, 나는 TypeScript와 esbuild를 선택했다. Webpack 대신 esbuild를 선택한 이유는 빌드 속도가 월등히 .. [우테코 8기] 프리코스 2주차 회고 2주차2주차에는 이전 주차에 고민하고 리뷰를 받았던 부분들을 중점적으로 다루었다.불필요한 코드는 최소화 하고 클린한 코드를 작성하도록 신경쓰며, 각 역할에 맞도록 분리하는데에 집중하였다.2주차 미션은 자동차 경주 프로그램 구현이었다. n대의 자동차 이름을 입력받고, 원하는 이동 시도 횟수를 입력하여 우승자를 가려내는 프로그램을 만드는 것이다.이번 주차 역시 지난 주차에 비해 난이도가 크게 상이하지 않다고 생각되어, 익숙해지고자 하는 포인트에 집중하고자 하였다. 역할 분리이번 주차에는 MVC 패턴이라는 것에 집착하기 보단, 함수의 이름만으로 어떤 역할을 하는지 쉽게 파악할 수 있도록 하고, 코드가 읽히는 흐름이 명료하도록 함수를 나누며, 하나의 함수가 여러 개의 논리를 담지 않도록 하였다. async r.. [우테코 8기] 프리코스 1주차 회고 지난주에 우아한 테크코스 프리코스 1주차를 경험해보았다.그 과정에서 얻은 것을 기록하고 공유하고자 5주차까지의 여정을 회고글로 남기려한다. 1주차이번 주차에는 일정이 많아 시간을 오래 투자하지 못할 것 같았다.그래서 첫 주차에 내가 하고자 하는 목표를 명확히 설정하기로 하였다.우선, 1주차 미션 내용을 살펴보았다.1주차 미션은 문자열 덧셈 계산기 구현이었다. '구분자'를 이용해서 문자열에서 양수를 걸러내어 덧셈 결과를 반환하는 프로그램을 만드는 것이다.언뜻 보니 미션 내용이 복잡하지 않았다.공식적으로 "미션 수행 외에도 여러 가지를 함께 익혀야 하는 시기"라고 언급한 만큼, 구현에 필요한 최소한의 시간을 제외하고 나머지에 집중하기로 하였다.집중한 4가지이번 미션에서는 README, 코드 컨벤션, 예외처리.. [JavaScript] Serial Number 날짜 데이터 사용하기(with Excel Online) 1. Serial Number란?Excel에서 날짜는 우리가 흔히 생각하는 "YYYY-MM-DD" 형태가 아니라, 숫자(Serial Number) 로 저장된다. 이 숫자는 특정 기준일로부터 며칠이 지났는지를 나타내며, 소수점 아래는 시간 비율을 의미한다. - 기준일기준일은 1899-12-30 을 기준(0일)으로 하는 날짜 형식이다.즉, `45809.36366`를 예로 든다면 `45809`은 1899년 12월 30일로부터 지난 일 수(45809일 지남), `.36366`는 하루 24시간 중 흘러간 비율(36.366% 지남 약 08:43:40)을 의미한다.45809.36366 = 2025-10-24T08:43:40 왜 변환이 필요할까? Excel에서 받은 날짜는 Serial Number(숫자)이고,API.. [Next.js] 페이지 이동을 위한 Link와 useRouter(), 그리고 form submit 이번에 페이지 이동을 위해 useRouter() 훅을 자연스럽게 사용하다가, 문득 Vite 같은 환경에서 사용하는 useNavigate() 훅과 비슷하게 쓰고 있지는 않은지 생각하게 되었다. Link 와 같은 방식도 존재하는데 과연 useRouter()를 사용하는 방식이 최선인가에 대한 고민을 하게 되었다. 고민하게 된 이유는 다음과 같다.단순히 페이지 이동을 위한 버튼 하나 때문에 클라이언트 컴포넌트로 선언해야 하는가?클라이언트 컴포넌트로 선언함에는 DOM 조작이나 api, 혹은 react 훅을 사용한 상태 관리, 이벤트 처리 등이 근거가 되어야 하는데, 단순히 “로그인하기”와 같은 페이지 링크 버튼은 어떤 조건에도 부합하지 않음.즉, 어떤 근거도 없이 페이지 이동 = useRouter()로 착각하며.. [React] 가상화, react-virtualized 가상화란 다수의 항목을 화면에 보이는 요소만 렌더링하고 그 외에는 렌더링 하지 않는 기술이다. 예를 들어, 2500개의 리스트 항목이 있을 때, 2500개의 항목에 대해 브라우저다 전부 DOM으로 만들어 렌더링 하려면 렌더링 시간이 오래 걸리게 된다. 이를 해결하기 위해 가상화를 사용하는데, 사용자가 현재 보고 있는 화면의 영역(뷰포트)의 항목만 렌더링하고 스크롤 시에 보이는 항목만 동적으로 추가/제거한다. 설치&사용npm install react-virtualizedyarn add react-virtualized 위의 명령어를 통해 react-virtualized를 설치해준다. 기본적으로 List , Table , Grid 등의 컴포넌트가 제공된다. ( Item #{index} .. [React] 메모이제이션 / useMemo(), useCallback(), React.memo에 대하여 React의 메모이제이션은 성능 최적화를 위한 개념이다.결과나 함수 등을 캐싱하여 동일한 입력에 대해 이전 결과를 재사용하는 방식으로 특히 계산 비용이 높은 작업을 반복하지 않기 위해서 사용한다.React의 메모이제이션 도구React.memo컴포넌트 자체를 메모이제이션해 전달받는 props가 변하지 않으면 리렌더링 방지const ListComponent = ({ value }) => { return {value};}export default React.memo(ListComponent);props를 기준으로 리렌더링 여부를 결정하므로 props가 변경되지 않으면 리렌더링 되지 않음.다만, shallow comparison으로 props를 비교하므로 몇가지 주의할 점이 있다.배열의 인덱스가 순차일 경우: .. [NextJS] 서버 컴포넌트와 클라이언트 컴포넌트 NextJS 13버전부터는 서버 컴포넌트와 클라이언트 컴포넌트 두 가지 개념을 통해 렌더링 방식을 규정했다.일단 기본적으로 서버 컴포넌트와 클라이언트 컴포넌트가 무엇인지 이해해보자.server component서버 컴포넌트는 서버에서만 실행되고 렌더링 되는 React의 컴포넌트이다.여기서 말하는 서버 는 애플리케이션이 실행되는 NodeJS 등의 런타임 환경을 의미한다. 서버 컴포넌트는 애플리케이션의 일부 UI를 서버에서 처리하고 완성된 HTML을 브라우저에 전달해준다. 이 방식 덕분에 브라우저에서는 별도의 자바스크립트 실행 없이 즉시 화면을 볼 수 있으며, 서버 측에서 데이터 패칭 및 비즈니스 로직이 모두 처리된 상태의 최종 결과물만 전송된다는 점이 특징이다. 이를 통해 다음과 같은 장점이 있다:번들 크.. 이전 1 2 3 4 ··· 8 다음
