분류 전체보기 52

Babel , Webpack

1. Babel 1.2  Babel  개념 과 사용법1.3  Babel 로 문법 바꾸기2. Webpack 2.2 Webpack 개념 과 사용법2.3 Webpack 로 번들링  1. Babel  Babel은 javascript 의 코드를 구형 브라우저에서도 실행해주도록 변환해주는 도구입니다. javascript는 빠르게 발전하는데 비하여 브라우저는 최신 문법을 바로 적용시키지 못하기에 브라우저가 코드를 지원하지 못하고 화면을 못뿌려주는 상황이 발전했습니다. Babel은 이러한 상황을 해결하기 위하여 javascript 문법을 구형 버전으로 다운그레이드 하여 브라우저가 지원하는 문법에 따라서 사용할 수 있게 만들어줍니다. 2014년: Babel(구 6to5) 등장 → 최신 ES6 문법을 ES5로 변환하는 역..

카테고리 없음 2025.04.14

React Class형 컴포넌트

목차1. Class 형 컴포넌트 부모,자식 구조 2. 컴포넌트를 활용한 구조분리 댓글 구현 실습 1 . Class 형 컴포넌트 부모,자식 구조  컴포넌트란(Component) 는 프로그래밍에서 재사용이 가능한 모듈을 뜻합니다. Class 형 컴포넌트는 Class 형태를 따라서 부모와 자식으로 구조를 나누어서 활용을하는데 props 를 사용합니다props 부모 => 자식 데이터는 항상 부모 => 자식 방향으로만 전달됨 부모에서 자식으로 데이터를 넘겨준다는 뜻으로 부모 요소에서 자식Class 컴포넌트에게 인자로 데이터를 넘겨주기 위해 활용합니다.  이는 리엑트의 단방향성 구조 때문인데 부모에서 자식으로 최소한의 State 관리를 위한 것인데 부모 Class 컴포넌트에서 State를 선언하고 자식 컴포넌트는 ..

카테고리 없음 2025.04.14

Node.js multe

1. 서버와 클라이언트 요청방식과 응답방식  2. Content-Type2.1 multipart/form-data 3. multer   1. 서버와 클라이언트 요청방식과 응답방식  서버와 클라이언트는 각각 한번의 요청과 응답을 보내는데  Request  = 클라이언트가 서버에 요청을 보냄Response = 서버가 클라이언트에게 응답을 줌 이때 클라이언트에서 서버에게 요청을 보낼때 클라이언트가 보내는 데이터 타입과 서버가 받는 데이터 타입이 맞아야 요청과 응답이 일어나게 됩니다. 이에 HTTP 통신에서는 헤더와 바디 영역을 나누어서 헤더부분에서는 데이터 타입 이나 어떤요청인지 등을 받고 바디에는요청에 대한 본문 내용을 담는 식으로 나누게 되었습니다. 요청에 대한 구성 Request  Header ( 요청에..

카테고리 없음 2025.01.30

Node.js ruter 와 디렉토리 역할분리

1. 디렉토리 구조의 역할과 분리2.ruter2.2 ruter 중첩라우터    1. 디렉토리 구조의 역할과 분리 일상생활에서의 물건 분류를 해두면 편한것처럼 코드에서도 디렉토리(폴더) 별로의 역할분리가 필요하다. 오류가 터진 지점마다. 해당기능이 하는곳의 코드만 수정하면되고. 수정이나 삭제등 유지보수에도 편하다는 장점이 있습니다.  코드에서의 예시    server.js 서버에서는 서버만 담당    미들웨어폴더에서는 미들웨어역할 담당(해당은 쿠키값을 보여주는 미들웨어)    컨트롤러 폴더에서는 유저가 필요한 기능을 담은 역할  라우터는 해당 기능을 수행할 라우터만 담당 이처럼 역할별로 분리구조를 잘 해두면 유지보수에도 용의하다.   2. ruter  핸들러 함수  핸들러 함수는 이벤트가 실행되거나 요청..

카테고리 없음 2025.01.20

Node.js 미들웨어

1. Express 미들웨어 1.1 미들웨어의 기본 흐름 2. 미들웨어의 종류    1. Express 미들웨어 클라이언트와 서버간의 요청과 응답사이에 위치하여 그 사이에서 실행이 되는 함수입니다. 사이에서 역할을 하며 오류를 일으킬 법한 요청이나 응답을 걸러네거나 조작하는 기능을 합니다.   1.1 미들웨어의 기본 흐름 미들웨어는 req 응답 res 요청 2개의 인자를 받는게 아니라 next 라는 콜백함수 인자를 하나 더 받아서 미들웨어 함수가 실행후 next()를 호출하여 다음함수를 콜백시키는 형태를 가집니다.   req 요청의 값을 가지고 검증을 하거나 필요한 모듈을 사용후에 다음 next 함수를 실행   미들웨어의 기본 사용 use  기본적인 미들웨어의 사용은 express 의 메서드인 use를 ..

카테고리 없음 2025.01.20

Node.js cookie

1. HTTP 쿠키(HTTP cookie)란 2. 쿠키 만들어서 사용해보기        1. HTTP 쿠키(HTTP cookie)란 나 자신을 알리는 행위의 자동화를 하기위해 만들어졌습니다.웹 서버 에 의해 사용자의 클라이언트(브라우저)에 저장되는, '이름을 가진 작은 크기의 데이터'이다. 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 일컫는다. 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 이 수단은 넷스케이프의 프로그램 개발자였던 루 몬틀리가 고안한 뒤로 오늘날 많은 서버 및 웹사이트들이 브라우..

카테고리 없음 2025.01.15

Node.js 데이터 베이스

1. DBMS 의 개념 1.1 RDBMS , MySQL 의 차이점2. SQL 기본 개념 2.1 SQL 조작어 1. DBMS 데이터베이스 관리 시스템(Database Management System)데이터 베이스 (Database) 데이터의 저장소.로서 데이터를 공유할 수 있도록 윤영에 필요한 모든 데이터를 통합하여 컴퓨터에 저장한 데이터를 의미하는데데이터베이스는 많은 인원, 다수의 시스템 또는 다수의 프로그램이 사용할 목적으로 통합하여 관리되는 자료의 집합입니다. 데이터 베이스의 기능여러 사용자 간의 데이터를 공유할 수 있다.데이터의 중복성을 통제할 수 있다.사용자들에게 다양한 인터페이스를 제공할 수 있다.권한 없는 사용자의 데이터 접근을 통제할 수 있다.데이터 간에 존재하는 복잡한 관련성을 쉽게 표현할..

카테고리 없음 2025.01.09

Node.js 서버와 클라이언트의 통신

1. OSI 7계층 1.1 TCP/IP 4계층2. TCP 통신2.1 HTTP2.2 TCP 연결을 설정하는 과정  3-way-handShake2.3 TCP 연결을 종료하는 과정  4-way-handShake    1. OSI 7계층 OSI 7계층(Open Systems Interconnection Model)은 네트워크 통신을 구조화하고 이해하기 위해 국제 표준화 기구(ISO)가 정의한 참조 모델입니다.각 계층은 특정한 역할을 담당하며, 통신 과정에서 계층 간의 상호작용을 정의합니다.OSI 모델OSI 모델은 1980년대에 처음 제안되었고, 네크워크 통신을 일곱 개의 계층으로 나누어서 각 계층이 담당하는 역할을 명확히 정의함. 1. 물리적 계층데이터의 물리적 전송, 랜선 등 물리적인 전송단순히 데이터를 전달..

카테고리 없음 2025.01.06

Node.js 모듈

1. 모듈    1. 1내장 모듈 , 외장 모듈2. 내장 객체  1. 모듈Node.js 에서 모듈이란 특정 기능을 수행하게 짜여진 코드 묶음으로서 독립적인 함수등의  코드 블록입니다. 내장모듈과 외장모듈로 나뉘어져있으며 파일의 접근이나 네크워크의 통신 HTTP 요청 처리등 다양한 기능을 쉽게 사용이 가능하게 모듈 형태로 제공하여 개발자가 쉽게 사용 할 수 있도록 도와줍니다.  1.1내장 모듈 , 외장 모듈 내장모듈  node.js 에  기본적으로 포함된 모듈로서 fs : 파일 시스템 접근http : 네크워크 통신os : 운영체제 정보 외장모듈 개발자가 필요할 때 , 직접 설치해서 사용하는 추가 모듈 express (외장모듈로서 서버를 열수 있게 도와주는 모듈) 과같이 사용자가 필요에 의해 추가가 가능하다..

카테고리 없음 2025.01.05

Node.js

1. 동기,비동기       1.1 서버의 필요성과 프로세스 스레드2. Node.js 란3. Node.js nvm, npm    1. 동기 비동기node.js 를 들어가 앞서서 동기와 비동기 를 알아야하는데우리가 앞에서 해온 코드들은 대부분 동기적으로  이루어지고 실행을 했습니다. ex)  해당 코드를 실행 시키면 위에서부터 아래로 평가와 실행을 하는 js 특성상 a 라는 변수를 먼저 파악하고 b 변수 파악 후 실행단계시 log라는 함수를 실행시켜서 a = 1 b = 2 값을 차례대로 보여줍니다. 이처럼 예상이가능하게 움직이는 형태를 동기 라고합니다. 동기(Synchronous)동기는 사전적으로 '동시에 일어난다'는 의미를 갖고 있습니다.하나의 작업이 끝날 떄까지 다른 작업을 하지 않고 기다리는 방식 한..

카테고리 없음 2025.01.04