Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

etc

1. 도커(Docker)란?컨테이너 기반의 오픈소스 가상화(실제 X) 플랫폼으로, 소프트웨어를 개발, 배포, 실행하기 위한 도구 여기서 컨테이너는 소프트웨어를 실행할 때 필요한 모든 것을 포함하는 격리된 환경을 제공한다.이 컨테이너는 라이브러리, 종속성, 설정 등을 포함하여 실행에 필요한 모든 것을 패키징하며패키징된 도커 컨테이너는 다른 환경에서도 쉽게 실행할 수 있어서, 개발환경과 실제 운영 환경을 일관성있게 유지하면서애플리케이션을 실행할 수 있다.또한, 호스트 운영체제(Window, MacOS, Linux)와 독립적으로 작동하기 때문에 호스트 환경에 영향을 주지 않고 실행할 수 있다. 쉽게 말해 소프트웨어를 한 덩어리로 모아서 실행할 수 있는 환경을 제공해주고, 모아진 소프트웨어는 실행을 위해 필요한..

2024. 4. 27.

JavaScript, TypeScript

ES6문법부터 그 이후의 최신 문법까지 정리하기 1. let / const 이전에 var를 사용해서 변수를 선언할 수 있었는데 let과 const는 블록 내에서만 유효한 변수를 생성할 수 있다. let은 재할당이 가능한 변수, const는 한 번 할당된 값이 재할당되지 않는 상수를 선언할 때 사용 let x = 10; x = 20; // 재할당 가능 const PI = 3.14; PI = 3.14159; // 에러 발생 [JS] var, let, const 차이점 2. 화살표함수 (Arrow function) function 키워드 대신 화살표 (=>)를 사용해서 함수를 정의할 수 있다. // 기존 함수 선언 방식 function add(a, b) { return a + b; } // 매개변수가 있는 화..

2024. 4. 8.

React, Next

원래는 React Query였으나 v4부터 Tanstack Query로 변경되었다고 함! 1. React Query(Tanstack Query)란? React Query는 서버에서 데이터 가져오기, 캐싱, 동기화, 업데이트 하는 것을 쉽게 만들어주는 라이브러리 일반적으로 사용하는 Redux, MobX와 같은 상태관리 라이브러리는 주로 클라이언트 상태에 초점을 맞추고 있는데 React Query는 서버 상태를 관리하여 서버에서 가져오거나, 업데이트 해야하는 데이터에 초점을 두며 클라이언트 상태 뿐 아니라 서버 상태도 효율적으로 관리할 수 있도록 도와준다. *클라이언트 상태(Client State)는 주로 UI와 관련된 상태, 서버 상태(Server State)는 DB에 저장되는 데이터 2. React Qu..

2024. 3. 17.

React, Next

React Hook Form이란? React에서 폼을 관리하기 위한 라이브러리 https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 공식문서 말을 빌리자면, 사용자 경험을 중요시 하는 라이브러리로 폼에 일관된 유효성 검사 전략을 구현. 라이브러리가 가벼워 패키지 크기를 최소화하며 성능면에서도 렌더링 횟수를 최소화하는 라이브러리 React Hook Form 왜 사용할까? 이 라이브러리를 사용하기 전에 왜 사용하면 좋은지 라이브러리..

2024. 3. 16.

React, Next

생명주기 (Life Cycle)이란? 일반적으로 생명주기라는 건 인간의 생애주기처럼 탄생부터 죽음까지 타임라인을 단계별로 나누어놓은 것을 말한다. 리액트 컴포넌트의 라이프사이클은 간단히 말하면 컴포넌트가 생성되고 제거되는 과정을 말하며 크게 Mount, Update, Unmount로 나눌 수 있다. Mount: 탄생. 컴포넌트가 화면에 렌더링 됨 Update: 변화. 컴포넌트가 리렌더 됨 Unmout: 죽음. 컴포넌트가 화면에서 제거됨 이 과정을 좀 더 자세하게 알아보기 위해 카운터 앱을 만들어보자! import { useState, useEffect } from "react"; function App() { // useState 훅을 사용해서 count 상태와 그 값을 업데이트 하는 setCount 함..

2024. 3. 3.

React, Next

Virtual DOM이란? 먼저 Virtual DOM을 이해하기 위해선 웹 브라우저가 어떻게 동작하는지를 알아야 하며 아래 글을 참고하면 좋다! DOM(Document Object Model) 이란? 문서 객체 모델은 브라우저가 HTML 코드를 읽어서 웹페이지 구조를 아래처럼 트리형태로 표현한다. 그렇다면 화면을 업데이트 하고 싶을 때 어떻게 동작할까? 웹 브라우저가 화면을 업데이트 하는 건, 자바스크립트가 DOM을 수정할 때 발생하게 된다. DOM이 변경되면 브라우저는 해당 변경 사항을 감지하고 다시 레이아웃을 계산하고 화면을 다시 그리게 된다. 하지만 이 레이아웃 계산과 페인팅 과정은 굉장히 오래 걸리는 작업이며 성능을 저하시킬 수 있다. 이런 문제를 해결하기 위해 Virtual DOM이 도입되었는데..

2024. 2. 27.