본문 바로가기

전체 글278

리액트 라우터 개념과 설정 방법 지난 글(https://lifewithcoding.tistory.com/282)에서 리액트는 SPA(Single Page Application)를 위한 라이브러리라고 설명했다. 즉, 리액트로 개발한 앱은 하나의 페이지 내에서 자바스크립트로 실행되며, 다른 내용을 보기 위해 버튼을 클릭해도 페이지 전체가 새로고침되지 않고 필요한 요소들만 재렌더링된다. 이는 SPA의 주요 특징 중 하나로, 부드럽게 페이지 내용을 변경할 수 있다는 장점이 있다. 하지만 몇 가지 문제점도 존재한다. 첫 번째로, 새로고침 시 처음 화면으로 돌아간다. SPA는 하나의 앱으로 동작하기 때문에 새로고침은 앱을 처음부터 다시 시작하는 것과 같다. 따라서 사용자가 앱과 상호작용하며 변경한 상태는 새로고침 시 초기화되고, 모든 작업을 처음.. 2024. 11. 25.
[Node.js] Node.js 생태계의 필수 도구 npm, npx, yarn 비교 npm(Node Package Manager), npx(Node Package Executor), 그리고 yarn(Yet Another Resource Negotiator)은 Node.js 환경에서 자주 사용되는 도구들로, 각각의 역할과 특징이 다르다. 이 글에서는 세 도구를 비교하며, 어떤 상황에서 더 적합하게 사용할 수 있는지 알아본다. 특징npmnpxyarn설치 방식 및 명령어Node.js 설치 시 포함, 추가 설치 불필요별도로 설치해야 함 (npm install --global yarn)주요 역할패키지 설치 및 의존성 관리패키지 실행 (설치 없이도 가능)패키지 설치 및 의존성 관리 (npm 대비 성능 개선)속도최신 버전에서는 개선되어 안정적설치 없이 실행 시 속도는 네트워크에 의존병렬 다운로드로 .. 2024. 11. 17.
[React] 리액트 기초와 리액트 앱 생성 리액트를 한마디로 정의하자면, "컴포넌트 기반 UI 개발 자바스크립트 라이브러리"라고 할 수 있겠다. 1. 컴포넌트 기반 UI 개발 기본적으로, 리액트는 UI를 컴포넌트 단위로 나누어 설계하고 각 컴포넌트를 조합하여 개발한다. 2. 자바스크립트 라이브러리 리액트는 자바스크립트로 작성되어 있는 라이브러리이고, 작성된 컴포넌트를 사용하기 위해서 자바스크립트 코드를 작성해야 한다. 리액트는 기본적으로 SPA(Single Page Application) 개발에 최적화된 라이브러리이며, Next.js나 Gatsby 같은 프레임워크를 사용하면 서버 사이드 렌더링(Server Side Rendering, SSR)이나 정적 사이트 생성(Static Side Generation, SSG) 방식으로도 개발할 수 있다. 기.. 2024. 11. 16.
프로세스와 스레드 프로세스는 메모리에 적재되어 CPU에 의해 실행되고 있는 프로그램이다. 프로세스는 하나 이상의 스레드로 구성되며, 스레드는 프로세스 내의 실행 흐름의 단위이다. 프로세스는 생성 시에 독립적인 코드 영역(텍스트 영역), 데이터 영역, 힙 영역, 스택 영역을 할당받는다. 반면에 스레드는 프로그램 카운터 및 그 외 레지스터와 스택만을 할당받으며, 스레드 간에 같은 코드, 데이터, 힙 영역을 공유한다. 코드(텍스트) 영역: 프로그램 명령 코드 자체를 저장하는 메모리 영역. HEX, BIN 파일 저장 영역(정적 할당 영역)데이터 영역: 전역 변수, 매개 변수, 배열, 구조체 등이 저장되는 영역. 함수 호출 시 생성되고 함수가 끝나면 시스템에 반환됨. (정적 할당 영역)힙 영역: malloc(), new()와 같은.. 2024. 10. 16.
728x90