1. 컴포넌트 (Component)React는 컴포넌트(Component)를 기반으로 화면을 만드는 라이브러리이다.컴포넌트란 화면을 구성하는 독립적인 UI 단위(≒부품)를 의미한다.React에서는 웹 페이지를 하나의 거대한 구조로 만드는 대신 여러 개의 작은 컴포넌트를 결합하여 개발한다.예를 들어 블로그 페이지를 만든다면 다음과 같이 구성할 수 있다블로그 페이지├─ Header├─ Navigation├─ Content└─ Footer페이지 상단의 로고와 메뉴 영역은 Header 컴포넌트,카테고리 목록은 Navigation 컴포넌트,게시글 내용은 Content 컴포넌트,저작권 정보는 Footer 컴포넌트로 만들 수 있다.이처럼 각각의 영역을 하나의 컴포넌트로 만들어 조합하는 방식으로 화면을 구성한다. 새로..

26-27/React.js 2026. 11. 13. 10:00

이번주 키워드npmpackage.jsonDependenciespackage-lock.jsonSemVer 5장 패키지 매니저 5.1 npm 알아보기 npm이란? Node Package Manager의 약어로, 자바스크립트 프로그래밍 언어를 위한 세계에서 가장 큰 패키지 관리 도구입니다. 쉽게 말해서 다른 개발자들이 누구나 사용할 수 있도록 게시한 재사용 가능한 코드 조각(패키지/모듈)을 찾고설치 및 관리하는데 도움을 주는 도구입니다. 사용 시 패키지 버전의 각별한 관리가 필요한데, package.json이라는 파일이 이를 돕습니다.packge.json은 프로젝트의 정보와 사용하는 라이브러리를 관리하는 핵심 설정 파일입니다. 5.2 package.json으로 패키지 관리하기 packge.json 역할..

26-27/Node.js 1 2026. 11. 13. 10:00

5.1 npm 알아보기npm이란?Node Package Manager의 약어로, 이름 그대로 노드 패키지 매니저를 의미합니다.대부분의 자바스크립트 프로그램은 패키지라는 이름으로 npm에 등록되어 있으므로, 특정 기능을 하는 패키지가 필요하다면 npm에서 찾아 설치하면 됩니다.5.2 package.json으로 패키지 관리하기서비스에 필요한 패키지를 하나씩 추가하다 보면 어느샌가 패키지 수가 100개를 훌쩍 넘어버리게 됩니다. 그리고 사용할 패키지는 저마다 고유한 버전이 있으므로 어딘가에 기억해 둬야 합니다.따라서 노드 프로젝트를 시작하기 전에는 폴더 내부에 무조건 package.json부터 만들고 시작해야 합니다.npm init : package.json 파일을 만드는 명령어npm init을 실행하면 몇 ..

카테고리 없음 2026. 11. 13. 10:00

더보기 5장. 패키지 매니저 5-1. npm 이란? 5-1.1. npm을 사용하는 이유4장에서는 모듈을 사용하지 않고 필요한 기능을 직접 코드로 구현해 봄직접 코드를 작성하면서 프로그래밍의 재미를 느낄 수도 있지만, 모든 기능을 처음부터 직접 구현하기에는 시간과 노력이 많이 필요함실제로 세상에는 수많은 자바스크립트 프로그래머가 있으며, 이들이 미리 만들어 놓은 코드를 다른 사람들도 사용할 수 있도록 공개해 놓음다른 사람이 만들어 놓은 코드를 가져와 사용하면 직접 모든 기능을 구현하지 않아도 되므로 개발 시간을 줄일 수 있음 5-1.2. npm의 의미npm은 다른 개발자들이 만들어 놓은 코드를 쉽게 설치하고 관리할 수 있도록 도와주는 패키지 매니저패키지란 특정 기능을 수행하도록 미리 만들어 놓은..

26-27/Node.js 3 2026. 11. 13. 10:00

1. Node.js란?자바스크립트는 원래 웹 브라우저에 내장된 자바스크립트 엔진을 통해 실행되는 언어이다.Node.js는 웹 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있도록 해주는 런타임이다. *런타임(Runtime): 프로그램이 실제로 실행되는 환경 Node.js가 등장하면서 자바스크립트로 웹 서버, 모바일 애플리케이션 등 다양한 프로그램을 개발할 수 있게 되었다.Node.js는 서버 개발 기술 그 자체가 아니라 자바스크립트를 실행하는 환경이다.2. Node.js 환경 설정하기Node.js를 설치하면 웹 브라우저 없이도 컴퓨터에서 자바스크립트 코드를 직접 실행할 수 있다.Node.js를 설치할 때는 일반적으로 LTS(Long Term Support) 버전을 사용하는 것이 좋다.장..

26-27/React.js 2026. 11. 9. 18:12

📗 Node.js 교과서 3장3.1 REPL 사용하기한 줄 요약: Node.js에서 코드를 한 줄씩 바로 실행하는 기능입니다.node// 다음 줄은 Node 콘솔에서 입력const greeting = "안녕";console.log(greeting);코드 설명: node로 실행하고 console.log로 화면에 글자를 표시합니다. undefined가 떠도 오류는 아닙니다.3.2 JS 파일 실행하기한 줄 요약: 여러 줄의 코드를 .js 파일에 저장해서 실행합니다.// hello.jsconsole.log("안녕하세요");// 터미널: node hello.js코드 설명: 파일에 명령을 적고node 파일이름.js로 실행합니다. 코드를 한 줄씩 입력하지 않아도 됩니다.3.3 모듈로 만들기한 줄 요약: 코드를 파일..

26-27/Node.js 2 2026. 11. 6. 10:00

0. Node & VSCode 설치p.42쪽~ 참조 3장. 노드 기능 알아보기 3-1. REPL노드가 제공하는 콘솔은 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복(Loop).REPL은 한두 줄 짜리 코드를 테스트하는 용도로는 좋지만 여러 줄의 코드를 실행하기에는 불편함. 따라서 긴 코드는 코드를 JS 파일로 만들어 그 파일을 통째로 실행하는 것이 좋음. 3-2. JS 파일 실행보통 REPL에 직접 코드를 입력하지 않고 자바스크립트 파일을 만들어 사용함.JS 파일을 실행할 때는 REPL에 입력하는 것이 아니라 콘솔에 입력해야함.* REPL에 입력: node를 입력하여 프롬프트가 > 모양으로 바뀌어 있는 상태에서 입력** 콘솔에 입력: 터..

26-27/Node.js 3 2026. 11. 6. 10:00

이번 주 키워드1. 모듈2. 노드 내장 객체3. 쿠키와 세션4. HTTPS와 HTTP/25. cluster3장 노드 기능 3.1 REPL 사용하기 JavaScript는 스크립트 언어이므로 미리 컴파일을 하지 않아도 즉석에서 코드를 실행할 수 있다. 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복한다(Loop)고 해서 REPL(Read Eval Print Loop)이라고 불린다. ▶ 사용자가 코드를 입력하면 읽고 → 실행하고 → 결과를 보여주고 → 다시 입력을 기다리는 과정을 반복한다. 3.2 JS 파일 실행하기 긴 코드를 작성하고 저장한 뒤 실행할 때 편리하다.JS 파일을 만든 후 콘솔에서 명령어 node [JS 파일 경로]를 통해 실행할 수 있다..

26-27/Node.js 1 2026. 11. 6. 10:00

1. 객체: 자바스크립트의 객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다.객체 생성 방법객체 리터럴 방식: 중괄호 {...}를 사용하는 방식입니다.let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 2. 리터럴과 프로퍼티: 중괄호 {...} 안에서 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어갑니다. -> '콜론(:)'을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치합니다.let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30}; 프로퍼티 읽기, 추가, 삭제더보기 점 표기법을 이용해 프로퍼티 값을..

26-27/Node.js 2 2026. 10. 9. 10:00

이번 주에는 자바스크립트를 쓰면서 가장 자주 만나는 문법들을 정리했습니다. 이번 주 키워드객체와 배열구조 분해 할당과 전개 구문배열 메서드옵셔널 체이닝비동기 처리1. 객체와 배열객체: 키로 구분하는 데이터 묶음객체는 키: 값 쌍을 모아 둔 자료구조입니다. 값을 읽을 때는 점 표기법과 대괄호 표기법을 쓸 수 있습니다.let user = { name: "John", "likes birds": true };user.name; // 점 표기법user["likes birds"]; // 키에 공백이 있으면 대괄호가 필수입니다키를 변수에 담아서 쓰고 싶다면 대괄호를 써야 합니다. user[key]처럼 쓰고, 점 표기법인 user.key는 "key"라는 이름의 프로퍼티를 찾습니다.빈 프로퍼티를 읽..

26-27/Node.js 1 2026. 10. 9. 10:00

1. 객체(Object)자바스크립트의 데이터 대부분(숫자, 글자 등)은 한 번에 값 하나만 담을 수 있는 '원시형'이지만 객체는 여러 개의 데이터를 한 곳에 모아 담을 수 있는 바구니나 서랍장이라고 생각하면 쉽게 이해할 수 있다.서랍장 안에 여러 물건을 넣고 각각 이름표를 붙여두는 것처럼 객체 안에는 이름표(key) : 실제 데이터(Value) 형태로 짝을 지어 저장한다. 이 짝 하나를 프로퍼티(Property, 속성)라고 부른다.키(Key) : 데이터를 찾기 위한 이름표 (주로 문자열 사용)값(Value) : 이름표에 연결된 실제 데이터 (숫자, 문자, 불린 등 모든 자료형 가능)객체를 만들 때는 주로 중괄호 { }를 사용하며 이를 '객체 리터럴' 방식이라고 한다.let user = { name : "..

26-27/React.js 2026. 10. 9. 10:00

1. 객체 : 여러 데이터를 키와 값의 쌍으로 저장하는 자료형{}로 생성key: value 형태로 작성프로퍼티 = 키와 값의 쌍프로퍼티 접근점 표기법: user.name대괄호 표기법: user["name"]let user = { name: "Yen", // 이름 age: 20 // 나이 }; console.log(user.name); // Yenconsole.log(user["age"]); // 20 추가·수정·삭제user.city = "Seoul"; // 추가user.age = 21; // 수정delete user.city; // 삭제 2. 배열 : 여러 개의 데이터를 순서대로 저장하고 관리할 때 사용하는 자료구조인덱스는 0부터 시작함length로 배열의 길이를 확..

26-27/Node.js 3 2026. 10. 9. 10:00