React Router While developing with React, a framework for Single Page Applications (SPA), I had a question. React detects changes on a single page and updates the Virtual DOM, rendering only the
React State 1. What is State? In React, state is a way to manage data that can change over time, and it is specific to each component. Unlike props (which are immutable
React Props Props In React, the flow of data is unidirectional: it flows from the parent (higher-level) component to the child (lower-level) component. In this flow, data passed from the parent to
React Component & Lifecycle A ReactElement is an implementation of the concept called the Virtual DOM (VDOM). The VDOM is a JavaScript object that exists in memory and can be created using the React.
Getting Started with GitHub 1. Environment Setup 1-1. JAVA: 1.7 1-2. Eclipse: Kepler - Install Eclipse EGit Plugin The EGit plugin integrates Git with Eclipse. There are two ways to install the EGit
Building an SSO Environment Using OAuth 2 (2/2) In the previous post, we explored the concept of OAuth 2 and the considerations for its implementation. In this post, we will discuss how to extend OAuth 2 to configure
Building an SSO Environment Using OAuth 2 (1/2) In some companies, multiple systems are operated, and separate accounts are managed for each system. Users who use these systems need to remember the accounts for all the systems they
HTML5 / CSS3 Horizontal and Vertical Alignment This article covers how to align sentences, paragraphs, and boxes containing paragraphs in a visually pleasing way using HTML and CSS. We will look at two methods for centering alignment
React Material-UI React is an open-source JavaScript library used for creating user interfaces. There are various React-based UI libraries that help in building beautiful user interfaces. Some of the most popular ones
React Fragment 1. React Component Element Rendering class CorrectComponent extends React.Component { // React Component is rendering only a single element. render() { return ( <h4> Hello React </h4> ) } } class WrongComponent
React Testing What is Unit Testing? Unit testing refers to testing an application by separating it into the smallest possible units and testing them individually. Through unit tests performed on the smallest
Hooks There are two types of components in React. 1. Class Component – This is the method of creating a component using a class. It is the default way of building components
React Context Through this post, we will briefly look at the concept of React's Context and its usage, and then create a simple component using Context in practice. 1. What
JSX Syntax and Conditional Rendering Conditional Rendering React components render content based on their state, and by combining multiple React components, you can create complex UIs. To create such complex UIs, React components need to
React Handling Event In React, the way events are handled differs slightly from how they are handled in HTML. 1. How to Use Events * In HTML, when defining events, all event names are
Location [NEXTREE Head Office] Located in Gasan-dong, Geumcheon-gu, Seoul, it is a 5-minute walk from Gasan Digital Complex Station (Line 1, Exit No 11 and Line 7, Exit No 9). * Address
Execution Context 자바스크립트는 싱글 스레드 인터프리터 언어로, 각 브라우저는 자체 자바스크립트 엔진을 사용하여 코드를 스캔하고 해석합니다. 이 과정에서 중요한 역할을 하는 것이 바로 실행 컨텍스트(Execution Context) 입니다. 실행 컨텍스트는 코드의 변환과
대용량 JSON 대용량 JSON 이번 프로젝트를 진행하면서 대용량 JSON 을 어떻게 처리했는지 간략하게 정리해보려고 합니다. 데이터 처리 방식 Request : JSON 을 받아서 Attribute 별로 Parsing 하여 DB 에 저장 Response : Attribute 별로
JPA 배치 인서트 vs JDBC배치 인서트 들어가며 저번 게시글 대용량 데이터 등록에서는 JPA(Java Persistence API) 배치 인서트(Batch Insert)를 사용해서 대용량의 데이터를 등록했습니다. 하지만 프로젝트가 진행되면서 추가할 데이터의 수가 점점 더 많아져 홍수가 되었고
GraphQL 1. GraphQL란? 공식 홈페이지에 따르면 GraphQL은 API를 위한 쿼리 언어(Query Language, QL)입니다. SQL이 데이터베이스 시스템에서 데이터를 처리하는 역할을 한다면, GraphQL은 클라이언트와 서버 사이에서 데이터를 처리하는 용도로 사용됩니다. 2.
React Hook Form 프로젝트에서 useForm을 사용하면서 느꼈던 이점과 간단한 사용법, 그 외 React Hook Form의 기본 기능에 대해 공유해 보고자 한다. useForm이란? * 기존사용법 * useForm 사용해보기 Controller * Controller Component * useController 그 외 기능들 * useFieldArray
쿠버네티스(Kubernetes) 들어가며… 현대 사회에서 웹 애플리케이션은 우리 일상에서 빠질 수 없는 중요한 서비스로 자리 잡았습니다. 소셜 미디어, 온라인 쇼핑, 금융 거래 등 우리가 사용하는 수많은 온라인 서비스들이 웹 애플리케이션을 기반으로 동작하고
리액트 상태관리 트렌드의 변화 챗GPT에게 까지 소문난 리액트 상태관리의 악명.. 들어가며 리액트를 사용해 프론트엔드 개발을 하다보면 상태관리에 대한 이야기를 수도 없이 듣게 됩니다. 이는 상태관리가 중요하기뿐만 아니라 그만큼 어렵고 정해진 가이드라인도 없기 때문입니다. 수많은
메모리 누수의 개념과 방지 방법 들어가며 이번 글에서는 메모리 누수의 개념과 메모리 누수를 방지할 수 있는 방법에 대해 살펴봅니다. 메모리 관리에 관심을 가지게 된 것은 최근 업무 도중 경험한 오류 때문이었습니다. 현재 넥스트리는 고객사 시스템의
대용량 데이터 등록 들어가며 현재 진행하는 프로젝트는 monolithic에 sql mapping으로 구성되어 있습니다. 그래서 .xml에 있는 sql을 파싱(Parsing)하고 메타데이터(MetaData)로 만들어서 저장하는 기능이 필요했습니다. 하지만 문제가 있었습니다. mysql에 물리적으로 입력되는 메타데이터의
JavaParser 목차 1. 들어가며 2. Parser 3. JavaParser 기능 4. 라이브러리를 사용하며 겪은 문제 및 해결 들어가며 Modular Monolithic 아키텍처 프로젝트에서 메소드 호출 관계를 추출하는 업무를 맡으며 JavaParser를 처음 사용하게 되었습니다.
MongoDB와 Transaction 환경 * Java 11 * Spring boot (v.2.7.10) * MongoDB (v.6.0.5) * Docker 트랜잭션(Transaction)이란? 트랜잭션은 데이터베이스 작업의 논리적인 단위로, 단일 작업들의 그룹을 의미한다. 단일 작업은 쉽게
TPO별 오피스 에티켓 TPO의 유래 TPO는 Time(시간), Place(장소), Occasion(상황)의 앞 글자만 의미하며 그 유래는 일본의 의류 브랜드 VAN으로 보고 있습니다. 1954년 VAN JACKET이라는 의류 브랜드가 일본에 론칭했습니다. 당시 우리나라와
클린 코드의 기초 들어가며 좋은 코드란 무엇일까요? 이제 막 개발자로써 첫발을 내딛은 초심자부터 오랫동안 몸담아온 베테랑까지, 좋은 코드를 향한 열망과 고민은 개발자로 존재하는 이상 결코 멈출 수 없는 숙명이 아닐까 합니다. 세상 만사가
상태 관리 라이브러리 Zustand Zustand는 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법 덕분에 Redux와 Mobx와 더불어 많은 개발자들로부터 선택받고 있습니다. Zustand는 일반적으로 위의 예시 코드처럼 사용합니다. 개발자가 할 일은 State의 타입을
AWS로 서버 구성 시 고려해 볼 만한 것들 목차 1. 개요 2. 도메인/SSL 3. Elastic Load Balancer 4. Auto Scaling Grouop 5. EC2 Template 6. S3 7. CI/CD 8. 기타 * CORS * 리눅스 세팅 * 테스트 서버 개요
비즈니스 이메일 작성법 이메일은 회사에서 가장 많이 사용하는 의사소통 중 하나입니다. 이메일을 주로 사용하는 이유는 메신저와 같은 커뮤니케이션 수단보다 격식있게 대화할 수 있고, 정확한 정보 전달이 쉽기 때문입니다. 오늘은 실무에서 이메일을 작성하는 방법에
React Query 1. React Query란 React Query는 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리입니다. React에서 상태를 관리하기 위해 MobX, Redux 등 여러 라이브러리가 존재하지만, 현재 진행중인 프로젝트에서
리액트 퍼블리셔 가이드 3-1편 - CSS 소개 들어가는글 안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다. 해당 글이 도움이 되길 바랍니다. 이번 글은 CSS를 주제로 CSS에 대한 내용만 집중적으로 이야기하려고 합니다. 더불어 이전 내용을 읽어보지 않은 초심자라면
Spring Event 먼저 응집도와 결합도가 무엇인가에 대한 이해가 필요합니다. 해당 내용을 먼저 알아보는 이유는 위의 내용을 이해하기 전에 본문을 읽을 경우 "굳이 왜 사용을 해야하나?"와 같은 의문이 생길 수
자바스크립트 엔진 자바스크립트는 웹 브라우저에서 가장 많이 사용되는 프로그래밍 언어입니다. 자바스크립트 코드를 실행하여 웹 페이지의 동적인 기능을 제공하는 인터프리터가 바로 자바스크립트 엔진입니다. 자바스크립트 엔진에는 크롬의 V8, 사파리의 Webkit, 파이어폭스의 Spider Monkey 등이
리액트 퍼블리셔 가이드 2편 - HTML 들어가는 글 안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다. 해당 글이 도움이 되길 바랍니다. 이번 글은 HTML을 주제로 HTML에 대한 내용만 집중적으로 이야기하려고 합니다. 더불어 이전 내용을 읽어보지 않은
MonoRepo & Yarn Berry 0. 개요 * 최근 들어 프론트엔드 프로젝트 형상관리에서 고전적 소프트웨어 개발 방식인 모놀리식 애플리케이션(Monolithic)의 한계점이 나오면서 다른 방식들이 많이 나오고 있다. * 해당 글은, 소스 형상 관리 시스템 상에서 소스
Местоположение [Номадиан Офис] * Адрес 31-A, Oq Qurghon street, Tashkent, Uzbekistan [Головной офис NEXTREE] Расположен в районе Гасан-донг, Кымчхон-гу, Сеул. В 5 минутах ходьбы от станции Gasan Digital Complex (линия 1, выход
넥스트리 오시는 길 [넥스트리 본사] 서울 금천구 가산동에 위치하고 있으며, 지하철 가산디지털단지역 1호선 11번 출구, 7호선 9번 출구에서 도보 5분거리에 있습니다. 주소 : (08503) 서울 금천구 가산디지털2로 144 현대테라타워가산DK 914호 [넥스트리 개발센터] 서울 송파구
Manzil [Nomadian Bosh Ofisi] * Manzil 31-A, Oq Qurghon street, Tashkent, Uzbekistan [NEXTREE Bosh Ofisi] Geumcheon-gu, Seoul, Gasan-dongda joylashgan bo'lib, Gasan Digital Complex stansiyasidan (1-liniya, 11-chi chiqish va 7-liniya, 9-chi
Namoosori Coaching Dasturi Namoosori Coaching Dasturi, o'z faoliyatini yuqori darajada olib borishni istagan dasturchilar uchun mukammal loyihalangan kursdir. An'anaviy ta'lim ko'pincha kompaniyalarning darhol kerak bo&
VIZEND Platformasi Muqimiy tashkilot Tizim korxonalar, bo‘limlar va jamoalarni bitta dastur bilan xizmat ko‘rsatish imkoniyatini taqdim etadi. Bu ko‘p foydalanuvchi muhitida samarali resurslarni taqsimlashni va mantiqiy izolyatsiya orqali yuqori
Namoosori (namoosori.io) Biznes Ta'rifi Nextree dasturchilardan dasturchilar uchun ta'limni qo'llab-quvvatlab, KOSTA'ning Gasan ta'lim markazida besh yil davomida dasturchilarni o'qitdi. Bu davrda biz taxminan o&
Namoosori Coaching Program The Namoosori Coaching Program is a meticulously designed course for aspiring software developers who aim to excel in their careers. Conventional education often focuses on immediate job skills that align
Программа коучинга Namoosori Программа коучинга Namoosori предназначена для тех, кто стремится стать выдающимися разработчиками программного обеспечения. Традиционное образование часто нацелено на навыки, необходимые для немедленного трудоустройства, соответствующие требованиям компаний. К сожалению, даже университетское
나무소리(namoosori) 코칭 프로그램 멋진 소프트웨어 개발자의 길을 가고 싶은 분들을 위한 과정을 특별히 기획하였습니다. 현실에서 학습자들이 만나는 교육은 내일 당장 취업하여 회사가 원하는 일을 하는 역량에 맞춰져 있기 때문입니다. 안타깝게도 대학 교육조차도 기반을
VIZEND Platform Multi-Tenant 하나의 애플리케이션만으로도 전 계열사, 부서, 팀 단위로 서비스 할 수 있는 환경을 제공합니다. 다중 사용자 환경에서 리소스의 효율적인 배분과 논리적으로 격리된 높은 수준의 보안성을 제공합니다. 클라우드는 이미 대부분의 비즈니스
VIZEND Platform Multi-Tenant The environment provides the ability to serve the entire group of companies, departments, and teams with a single application. It offers efficient resource allocation in a multi-user environment, along
Платформа VIZEND Многопользовательская система Платформа предоставляет возможность обслуживать всю группу компаний, отделов и команд с помощью одного приложения. Она предлагает эффективное распределение ресурсов в многопользовательской среде, а также высокий уровень безопасности через
나무소리(namoosori.io) 사업 소개 넥스트리는 개발자에 의한 개발자 교육을 표방하며 KOSTA의 가산 교육장에서 5년간 개발자 교육을 진행하였습니다. 5년간 1만 7천 명의 재직자를 대상으로 대략 서른 과목을 준비하여 강의를 진행했습니다. 그 이후 집합 교육 부분은
Namoosori (namoosori.io) Introduction Nextree has been advocating developer education by developers, conducting developer training at KOSTA's Gasan training center for five years. During this period, we offered approximately thirty courses, educating
Введение бизнеса Namoosori (namoosori.io) Nextree пропагандирует обучение разработчиков разработчиками и в течение пяти лет проводил обучение разработчиков в учебном центре KOSTA в Гасане. За этот период мы предложили около тридцати курсов и обучили 17
넥스트리가 가는 길 옛 사람들이 인재를 표현하는 말로 즐겨 사용하던 동량지재(棟樑之材, 기둥과 들보로 쓸 만한 재목이라는 뜻으로 한 집안이나 조직, 나라를 이끌어 갈 인재를 뜻함)라는 표현이 있습니다. 우렁우렁 자란 소나무는 모든
인재상 인재상 넥스트리는 "올바른 성장과 따뜻한 나눔"을 함께할 전문성과 인성이 조화롭게 균형을 이룬 인재를 찾고 있습니다. NEXTREE Nextrian 넥스트리는 긍정적인 자세로 주변과 소통하며 도전적인 자세로 IT기술을 선도하고자 하는
채용절차 지금의 기업은 클라우드 개념을 도입한 이후부터 하드웨어 인프라를 서비스로 제공하는 IaaS 시대를 지나 PaaS 시대에 직면하고 있습니다. PaaS로 진행됨에 따라 기업들이 하드웨어(서버 스토리지, 네트워킹 등) 준비 없이도 클라우드 서비스를
Nextrian, 넥스트리안 소프트웨어 개발을 잘하고, 개발을 잘하고 싶은 사람들이 모인 회사가 되고 싶은 넥스트리에서 "올바른 성장과 따뜻한 나눔" 을 함께 할 전문성과 인성이 조화롭게 균형을 이룬 인재를 찾고 있습니다. 개인은
Git basic Git 이란 무엇일까? 도서관에서 책을 대여하기 위해선 어떻게 해야하는가? 도서관을 이용해본 적이 없더라도 조금만 고민을 해본다면 쉽게 대답할 수 있을 것이다. 여기 넥스트리 도서관이 있다. 넥스트리 도서관에는 방대한 양의 책들이
Code Splitting 1. 개요 코드 스플리팅은 왜 적용해야 할까요? 리액트와 같은 SPA로 개발된 프로젝트를 빌드해 보면 하나의 JS파일로 번들링되는 것을 볼 수 있습니다. 이렇게 하나의 파일로 번들링된 결과물로 배포된 웹페이지에 진입하면 사용자는
리액트 퍼블리셔 가이드 1편 - 웹 퍼블리셔란? 리액트 퍼블리셔 로드맵 시작 안녕하세요. 이 글은 퍼블리셔 초심자 분들을 위한 가이드입니다. 해당 글은 로드맵에 관련된 글로 전체 맥락을 파악하기 위해 자세하거나 세세한 글은 어느정도 생략이 되었습니다. 리액트 퍼블리셔는 어떤 과정을 통해 될
리액트 렌더링 및 최적화 요약 이 글을 요약하면 다음과 같다. 1. props의 변화로 인해 렌더링이 이루어지는 것이 아니라, 렌더링이 이루어진 후 props의 변화를 가지고 화면을 그린다. 따라서 렌더링 추적 및 최적화는 철저히 state기반으로 이루어져야
Mockito를 활용하여 테스트 코드 작성하기 Mockito 란? Mockito란 Java 오픈소스 테스트 프레임워크입니다. Mockito를 사용하면 실제 객체를 모방한 가짜 객체, Mock 객체 생성이 가능해집니다. 개발자는 이 Mock 객체를 통해 테스트를 보다 간단하고 통일성있게 구현할 수 있습니다.
React 디자인 패턴 디자인 패턴이란 프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다. 과거의 웹사이트와 비교했을 때 현재는 화면 작업이 훨씬 복잡해졌고 React, Vue와 같은 개발 프레임워크를 활용하여 컴포넌트 단위로 웹 페이지를 개발하고
Generic 이해하기 주제 선정 이유 개발을 하다보면 이미 작성된 코드를 분석해야할 상황에 자주 놓이게 됩니다. 가장 쉽게 이런 상황에 놓이는 경우는 보통 라이브러리를 사용해야 할 때 일 것입니다. 라이브러리에서 원하는 기능의 API를
Cloud Native 앱 개발 역량 (이 글은 클라우드 네이티브 앱을 개발하고 운영하는 팀을 대상으로 하되, [개발 역량]에 초점을 두고 작성하였습니다. 따라서, 클라우드 인프라, DevOps 영역에 대한 내용은 없습니다. 참고하시고 읽어주시면 고맙겠습니다.) 클라우드 환경은 지원하는
