분류 전체보기 104

이진트리 - 1

1단계: 이진트리가 뭔지부터 이해하기이진트리를 일상에 비유해보면,가계도: 한 사람(부모)이 최대 2명의 자녀를 가질 수 있는 구조토너먼트 대진표: 각 경기에서 2팀이 만나서 1팀이 올라가는 구조 코드로 표현하기(javascript)class TreeNode { constructor(val) { this.val = val; // 노드의 값 this.left = null; // 왼쪽 자식 this.right = null; // 오른쪽 자식 }} 실제로 트리 만들어보기// 간단한 트리 만들기// 1// / \// 2 3// /// 4const root = new TreeNode(1);root.left = new TreeN..

알고리즘/개념 2025.06.29

이진트리

1단계: 기본 개념 이해하기이진트리의 기본 구조각 노드는 최대 2개의 자식 (left, right) 을 가짐루트 노드부터 시작해서 계층적 구조리프 노드는 자식이 없는 노드 기본 용어높이(height): 루트에서 가장 깊은 노드까지의 거리깊이(depth): 루트에서 특정 노드까지의 거리완전 이진트리, 포화 이진트리 등의 특수한 형태 2단계: 기본 순회 방법 마스터하기이진트리 문제의 90%는 순회가 핵심전위 순회(Preorder): 루트 -> 왼쪽 -> 오른쪽중위 순회(Inorder): 왼쪽 -> 루트 -> 오른쪽후위 순회(Postorder): 왼쪽 -> 오른쪽 -> 루트레벨 순회(Level-order): BFS 방식으로 레벨별로 순회각 순회를 재귀와 반복문 두 가지 방식으로 모두 구현할 수 있어야 함3단계..

알고리즘/개념 2025.06.29

[React] JSX로 UI 표현하기

리액트에서 UI를 만들 때 사용하는 JSX는, 얼핏 보면 HTML과 비슷하지만 자바스크립트와 섞여 있는 특별한 문법이다.이 문법을 제대로 이해하면 더 깔끔하고 실수 없는 컴포넌트를 만들 수 있다. ✅ JSX에서 값 렌더링하기JSX에서는 중괄호 {}를 이용해 자바스크립트 값을 태그 안에 넣을 수 있다.const name = '댕주';const Hello = () => 안녕하세요, {name}입니다!;이렇게 하면 name 변수에 들어있는 값이 화면에 그대로 렌더링된다.1. 중괄호 안에는 표현식만 쓸 수 있다.표현식 = 값을 생성하는 코드✔️ 가능: 변수, 숫자 계산, 삼항 연산자 등❌ 불가: if, for, while 같은 문장(statement){user.age > 20 ? '성인' : '미성년자'} //..

Node.js/React 2025.05.05

[React] 리액트 컴포넌트란? 함수로 만드는 UI 조각

리액트는 UI를 컴포넌트 단위로 구성한다.컴포넌트는 쉽게 말해 "화면을 구성하는 작은 조각"이다. 버튼 하나, 헤더 하나, 목록 하나도 모두 컴포넌트다.✅ 함수 컴포넌트란?가장 일반적인 방식은 "함수(function)"을 이용해서 컴포넌트를 만드는 것이다.예를 들어, 헤더 컴포넌트를 만든다면 다음과 같이 작성할 수 있다.// 함수 선언식function Header() { return 헤더 입니다}// 화살표 선언식const Header = () => { return 헤더 입니다}; 함수 선언식, 화살표 선언식 모두 기능은 동일하기 때문에 익숙한 방식으로 사용하면 된다.클래스를 이용해서 선언할 수 있지만 코드가 복잡해져서 함수 방식이 일반적으로 사용된다.✅ 함수 컴포넌트의 return 문법 - ..

Node.js/React 2025.05.05

[React] React App 구동원리 알아보기

React 앱은 어떻게 작동할까?우리는 npm run dev 한 줄로 앱을 실행하지만, 그 내부에서는 많은 일이 일어난다.React 앱이 브라우저에 렌더링되기까지의 흐름을 따라가보자 1. 브라우저는 어디부터 읽을까?React 앱은 결국 HTML, CSS, JavaScript로 동작한다.npm run dev를 실행하면 개발 서버가 열리고, 브라우저는 루트 HTML 파일인 index.html을 불러온다. 여기서 핵심은 두 가지다:div#root : React가 실제 DOM에 렌더링될 자리main.jsx : 앱의 진입점 (entry point)2. 진입점(main.jsx) 에서는 무슨 일이?main.jsx 는 App.jsx 를 ReactDOM 을 통해 #root에 렌더링한다.import React fr..

Node.js/React 2025.05.04

[React] React App 생성하기

리액트로 프론트엔드 개발을 시작하기 위해서는 React 앱을 생성하는 것이 선행되어야 하는데,어떻게 리액트 앱을 생성해야 하는지 그리고 어떻게 구동해야하는지 단계별로 살펴보자 1. 왜 리액트 앱(애플리케이션)이라고 부를까?웹 페이지는 보통 하나의 HTML로 구성되어 있지만,리액트는 여러 개의 컴포넌트로 구성된 SPA(Single Page Application)이다.각 컴포넌트가 하나의 기능 단위로 묶여 있고, 이를 조합해서 하나의 애플리케이션을 만든다.즉, 단순한 HTML 페이지가 아니라 구조화된 프로그램에 가깝기 때문에 앱(App)혹은 애플리케이션이라고 부른다 2. 리액트 앱을 생성하는 방법Node.js 패키지 생성 -> React 라이브러리 설치 -> 기타 도구 설치 및 설정 기타 도구 설치하고 설정..

Node.js/React 2025.05.04

[React] 리액트란 무엇인가?

1. 컴포넌트 기반 UIReact는 컴포넌트(Component) 단위로 화면을 구성한다.말 그대로 “화면을 이루는 구성 요소”를 하나하나 모듈처럼 나눠서 만드는 방식이다. 예시:Header.js – 상단 메뉴Main.js – 본문Footer.js – 하단 영역이렇게 컴포넌트로 나누면,중복 코드 제거유지보수 편리재사용 가능덕분에 대규모 UI를 체계적으로 관리할 수 있다.2. 선언형 프로그래밍 방식React는 UI를 “선언형(Declarative)” 방식으로 정의한다. 선언형 vs 명령형선언형(React): "무엇을 원하는지"만 명확하게 선언예: “이 버튼을 누르면 이 화면을 보여줘”명령형(JavaScript 등): "어떻게 할 것인지" 일일이 지시예: 버튼 클릭 → DOM 선택 → 속성 수정 → 재랜더..

Node.js/React 2025.05.04

[Node.js] 라이브러리 사용하기

라이브러리란?라이브러리(Library)는 프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화한 것을 의미한다.개발자는 이미 만들어진 라이브러리를 사용함으로써 개발 시간을 절약하고 효율적으로 작업할 수 있다. 예를 들면,날짜 라이브러리 (day.js)수학 라이브러리그래픽 라이브러리등 다양한 기능을 제공하는 라이브러리가 존재한다.라이브러리 설치Node.js의 라이브러리는 주로 npmjs.com 사이트에 등록되어 있다.터미널에서 라이브러리를 설치할 수 있으며, 설치 후 프로젝트 폴더에 여러 변화가 생긴다.npm install dayjspackage.json과 package-lock.jsonpackage.json설치한 라이브러리의 정보를 기록하는 파일이다.dependencies 항목에 설치된 라이브..

Node.js 2025.05.04

[Node.js] Node.js 모듈 시스템

모듈 시스템이란?Node.js에서 모듈(Module)은 프로그램의 기능을 독립적으로 관리하기 위한 코드의 묶음이다.즉, 모듈 시스템은 코드를 효율적으로 관리하기 위해 코드를 분리하고, 이를 불러와 사용할 수 있도록 지원하는 시스템을 말한다.왜 모듈 시스템이 필요할까?예를 들어 쇼핑몰을 개발한다고 가정해보자.회원 관리 기능장바구니 기능결제 기능이 모든 기능을 하나의 파일에 작성하면 코드가 지나치게 길어지고 복잡해진다.이렇게 되면 버그 수정이나 기능 추가가 어려워지고 생산성도 떨어진다.따라서 기능별로 파일을 분리하여 관리할 필요가 있다.user.jscart.jspayment.js 이렇게 분리된 파일들을 효율적으로 관리하고 재사용하기 위한 것이 바로 모듈 시스템이다.대표적인 자바스크립트 모듈 시스템자바스크립트..

Node.js 2025.05.04

[Node.js] Node.js란?

Node.js란 무엇인가?Node.js는 웹 브라우저가 아닌 환경에서도 JavaScript를 실행할 수 있게 해주는 자바스크립트 런타임(Runtime)이다.런타임(Runtime)이란 코드를 실행할 수 있도록 환경을 제공하는 프로그램을 뜻한다. 쉽게 말해, 자바스크립트 코드를 동작시키는 구동 엔진이라고 할 수 있다.왜 Node.js가 필요할까?원래 JavaScript는 웹페이지 내에서 간단한 기능을 만들기 위해 탄생한 언어이다.C나 Java 같은 기존의 언어들과는 다르게 문법이 유연하고 간결해서 개발 생산성이 뛰어나다.이렇게 웹 브라우저 내에서만 사용되던 JavaScript는 점점 더 많은 개발자들이 웹 브라우저 외부에서도 사용하기를 원하면서 변화가 필요해졌다. 그 결과 등장한 것이 바로 Node.js다...

Node.js 2025.05.03