분류 전체보기 102

[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

[Programmers/Python] 완전범죄

1. 문제 파악하기모든 물건을 훔쳐야 한다.각 물건은 훔칠 때마다 a/b 두 도둑 중 하나가 흔적을 남긴다.a의 흔적 합이 n 이상이면 a가, b의 흔적이 m이상이면 b가 잡힌다.목표는 "둘 다 잡히지 않으면서" a의 흔적 합을 최소화하는 것각 물건마다 선택(a가 훔칠까, b가 훔칠까)을 해야하고,전체 선택 결과에 대해 두 변수(=a의 흔적, b의 흔적)가 제약(그 중 a의 흔적을 최소화 해야한다=> 전형적인 DP(동적 계획법) 문제 형태2. DP 상태(메모이제이션) 설계dp[k] = 지금까지 b 의 흔적 합이 정확히 k 일 때, a의 흔적 합의 최소값배열 길이는 m (b가 잡히지 않으려면 k 초기값INF = 10**9dp = [INF]*mdp[0] = 0 # b가 0 흔적일 때 a도 0 이제 물건을 하..

[Python] 파이썬으로 입력, 출력, 데이터 세팅하기

알고리즘 문제 사이트마다 입력과 출력 방식이 조금씩 다른데,프로그래머스는 로직만 작성하고 백준에서는 문제에 나와있는대로 입력과 출력까지 작성해야 한다.다양한 문제 풀이 환경에 대비해서 입력과 출력 방법을 알아두면 좋을 것 같다1. 입력 받기입력 값이 큰 경우를 대비해서input() 대신 sys.stdin.readline() 을 사용하는 것이 유리하다📌 기본 입력 처리import sysinput_func = sys.stdin.readlinen = int(input_func()) # 정수 하나 입력 받기arr = list(map(int, input_func().split())) # 한 줄에 여러 정수 입력 받기 sys.stdin.readline()은 개행 문자 (\n)도 같이 입력받기 때문에,strip()..

Python/알고리즘 2025.04.06