넥스트리

Growing Together, Creating New Days

Execution Context
blog

Execution Context

자바스크립트는 싱글 스레드 인터프리터 언어로, 각 브라우저는 자체 자바스크립트 엔진을 사용하여 코드를 스캔하고 해석합니다. 이 과정에서 중요한 역할을 하는 것이 바로 실행 컨텍스트(Execution Context) 입니다. 실행 컨텍스트는 코드의 변환과 실행을 담당하는 환경으로, 실행할 코드에 필요한 모든 정보를 담은 객체라고 할 수 있습니다. 🔎 Execution Context 실행 컨텍스트를 알아야하는 이유? * 자바스크립트를
15 min read
JPA 배치 인서트 vs JDBC배치 인서트
blog

JPA 배치 인서트 vs JDBC배치 인서트

들어가며 저번 게시글 대용량 데이터 등록에서는 JPA(Java Persistence API) 배치 인서트(Batch Insert)를 사용해서 대용량의 데이터를 등록했습니다. 하지만 프로젝트가 진행되면서 추가할 데이터의 수가 점점 더 많아져 홍수가 되었고 시간을 단축할 필요성이 생겼습니다. 그래서 방법을 찾아보니 JDBC(Java Database Connectivity) 를 이용한 배치 인서트 방식이 속도가 빠르다는 것을 알았습니다.
15 min read
GraphQL
blog

GraphQL

1. GraphQL란? 공식 홈페이지에 따르면 GraphQL은 API를 위한 쿼리 언어(Query Language, QL)입니다. SQL이 데이터베이스 시스템에서 데이터를 처리하는 역할을 한다면, GraphQL은 클라이언트와 서버 사이에서 데이터를 처리하는 용도로 사용됩니다. 2. GraphQL vs REST API REST API와 비교했을 때 GraphQL만의 두드러지는 특징은 다음과 같습니다. 1. One Endpoint REST API는 요청 형식(
7 min read
React Hook Form
blog

React Hook Form

프로젝트에서 useForm을 사용하면서 느꼈던 이점과 간단한 사용법, 그 외 React Hook Form의 기본 기능에 대해 공유해 보고자 한다. useForm이란? * 기존사용법 * useForm 사용해보기 Controller * Controller Component * useController 그 외 기능들 * useFieldArray * useFormContext useForm이란? 공식 홈페이지에서는 useForm에 대해 form을 쉽게 관리하기 위한 custom hook이라 설명하고 있다. 단순히 form을 관리한다면 사용자 입력에 대한
14 min read
쿠버네티스(Kubernetes)
blog

쿠버네티스(Kubernetes)

들어가며… 현대 사회에서 웹 애플리케이션은 우리 일상에서 빠질 수 없는 중요한 서비스로 자리 잡았습니다. 소셜 미디어, 온라인 쇼핑, 금융 거래 등 우리가 사용하는 수많은 온라인 서비스들이 웹 애플리케이션을 기반으로 동작하고 있지요. 그러나 이런 웹 애플리케이션들을 개발하고 운영하는 것은 결코 간단한 일이 아닌데요, 이러한 도전적인 상황에서 등장한 쿠버네티스는 웹 애플리케이션의 배포,
18 min read
리액트 상태관리 트렌드의 변화
blog

리액트 상태관리 트렌드의 변화

챗GPT에게 까지 소문난 리액트 상태관리의 악명.. 들어가며  리액트를 사용해 프론트엔드 개발을 하다보면 상태관리에 대한 이야기를 수도 없이 듣게 됩니다. 이는 상태관리가 중요하기뿐만 아니라 그만큼 어렵고 정해진 가이드라인도 없기 때문입니다. 수많은 상태관리 라이브러리가 존재하는 것 자체가 어쩌면 상태관리에 정답은 없다는 것을 보여주는 것일 수도 있습니다.  도대체 상태관리가 무엇이길래 우리들을 힘들게 하는
15 min read
메모리 누수의 개념과 방지 방법
blog

메모리 누수의 개념과 방지 방법

들어가며   이번 글에서는 메모리 누수의 개념과 메모리 누수를 방지할 수 있는 방법에 대해 살펴봅니다. 메모리 관리에 관심을 가지게 된 것은 최근 업무 도중 경험한 오류 때문이었습니다. 현재 넥스트리는 고객사 시스템의 MSA 전환을 위해 레거시 코드를 분석하는 도구를 개발하고 있습니다. 이 도구는 코드 분석을 위해 JGit으로 원격 저장소에 있는 리파지토리를 clone하고,
12 min read
대용량 데이터 등록
blog

대용량 데이터 등록

들어가며  현재 진행하는 프로젝트는 monolithic에 sql mapping으로 구성되어 있습니다. 그래서 .xml에 있는 sql을 파싱(Parsing)하고 메타데이터(MetaData)로 만들어서 저장하는 기능이 필요했습니다.  하지만 문제가 있었습니다. mysql에 물리적으로 입력되는 메타데이터의 로우(row)만 한 개 프로젝트에 5만개가 넘어가는 상황이라 클라우드(Cloud) 환경에서 등록시간이 10분이나 소요되는 것이었습니다. 심지어 추후 분석할 프로젝트에
27 min read
JavaParser
blog

JavaParser

목차 1. 들어가며 2. Parser 3. JavaParser 기능 4. 라이브러리를 사용하며 겪은 문제 및 해결 들어가며 Modular Monolithic 아키텍처 프로젝트에서 메소드 호출 관계를 추출하는 업무를 맡으며 JavaParser를 처음 사용하게 되었습니다. 메소드 호출 관계를 추출하기 위해서는 각 메소드를 식별할 수 있는 식별자가 우선으로 필요했습니다. 메소드 시그니처를 식별자로 설정하고, 메소드 시그니처를 추론하는
19 min read
클린 코드의 기초
blog

클린 코드의 기초

들어가며 좋은 코드란 무엇일까요? 이제 막 개발자로써 첫발을 내딛은 초심자부터 오랫동안 몸담아온 베테랑까지, 좋은 코드를 향한 열망과 고민은 개발자로 존재하는 이상 결코 멈출 수 없는 숙명이 아닐까 합니다. 세상 만사가 그렇듯이 코드 역시 무언가의 '좋음'을 판단하는 기준은 시기와 상황, 혹은 따르는 방법론에 따라 다양하게 정의될 것입니다. 하지만
15 min read
상태 관리 라이브러리 Zustand
blog

상태 관리 라이브러리 Zustand

Zustand는 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법 덕분에 Redux와 Mobx와 더불어 많은 개발자들로부터 선택받고 있습니다. Zustand는 일반적으로 위의 예시 코드처럼 사용합니다. 개발자가 할 일은 State의 타입을 선언하고, create 함수의 파라미터에 함수 형태로 state의 초기값과 state를 변경하는 함수를 선언하는 것뿐입니다. Zustand는 이 코드만으로 자동으로 state를 생성하고 state가
11 min read
React Query
blog

React Query

1. React Query란 React Query는 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리입니다. React에서 상태를 관리하기 위해 MobX, Redux 등 여러 라이브러리가 존재하지만, 현재 진행중인 프로젝트에서 접하게 된 React Query에 대해 간단히 알아보고자 합니다. 2. React Query의 장점 * MobX나 Redux를 사용하다 보면 BoilerPlate 형태의 코드가 많이
13 min read
리액트 퍼블리셔 가이드 3-1편 - CSS 소개
blog

리액트 퍼블리셔 가이드 3-1편 - CSS 소개

들어가는글 안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다. 해당 글이 도움이 되길 바랍니다. 이번 글은 CSS를 주제로 CSS에 대한 내용만 집중적으로 이야기하려고 합니다. 더불어 이전 내용을 읽어보지 않은 초심자라면 리액트 퍼블리셔 가이드 이전 편을 먼저 읽어보시고 오길 권장드립니다. 목차 목차는 이렇습니다. CSS는 3개의 글로 나뉘어 포스팅 됩니다. 1번째 글은
9 min read
자바스크립트 엔진
blog

자바스크립트 엔진

자바스크립트는 웹 브라우저에서 가장 많이 사용되는 프로그래밍 언어입니다. 자바스크립트 코드를 실행하여 웹 페이지의 동적인 기능을 제공하는 인터프리터가 바로 자바스크립트 엔진입니다. 자바스크립트 엔진에는 크롬의 V8, 사파리의 Webkit, 파이어폭스의 Spider Monkey 등이 있습니다. 오늘 글에서는 개발자가 가장 많이 사용하고 있는 구글 크롬의 V8을 기준으로 자바스크립트 엔진 구성과 동작 원리를 설명합니다. 메모리 관리
8 min read
리액트 퍼블리셔 가이드 2편 - HTML
blog

리액트 퍼블리셔 가이드 2편 - HTML

들어가는 글 안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다. 해당 글이 도움이 되길 바랍니다. 이번 글은 HTML을 주제로 HTML에 대한 내용만 집중적으로 이야기하려고 합니다. 더불어 이전 내용을 읽어보지 않은 초심자라면 리액트 퍼블리셔 가이드 이전 편을 먼저 읽어보시고 오길 권장드립니다. 목차 목차는 이렇습니다. HTML 소개부터 시작해, HTML에 대한 자세한 내용을
23 min read
MonoRepo & Yarn Berry
blog

MonoRepo & Yarn Berry

0. 개요 * 최근 들어 프론트엔드 프로젝트 형상관리에서 고전적 소프트웨어 개발 방식인 모놀리식 애플리케이션(Monolithic)의 한계점이 나오면서 다른 방식들이 많이 나오고 있다. * 해당 글은, 소스 형상 관리 시스템 상에서 소스 레파지토리를 관리하는 방법에 대한 전반적인 내용과 최근 트렌드로 자리 잡혀가고 있는 MonoRepo 에 관한 설명과 관련 툴(yarn berry)을
18 min read
Git basic
blog

Git basic

Git 이란 무엇일까? 도서관에서 책을 대여하기 위해선 어떻게 해야하는가? 도서관을 이용해본 적이 없더라도 조금만 고민을 해본다면 쉽게 대답할 수 있을 것이다. 여기 넥스트리 도서관이 있다. 넥스트리 도서관에는 방대한 양의 책들이 존재한다 이 중에서 나는 한 권의 책을 골라 대여를 하고 싶다. 그러기 위해선 먼저 도서관을 방문해야 한다. 어떤 책을 읽을지
27 min read
Code Splitting
blog

Code Splitting

1. 개요 코드 스플리팅은 왜 적용해야 할까요? 리액트와 같은 SPA로 개발된 프로젝트를 빌드해 보면 하나의 JS파일로 번들링되는 것을 볼 수 있습니다. 이렇게 하나의 파일로 번들링된 결과물로 배포된 웹페이지에 진입하면 사용자는 처음 진입 시 모든 페이지에 대한 정보를 불러오게 되고, 이는 초기 로딩을 느리게 만들어 사용자 경험을 나쁘게 합니다. 위와 같은
11 min read