반응형

전체 글 118

[ React ] 02. props , PropTypes, map , events, useState

props , PropTypes, map , events,  useState  1. props props 는 Properties 의 줄임말 부모 컴포넌트에서자식 컴포넌트에 값을 전달할때 자식 컴포넌트에서 부모의 값을 받아올때  JSX 문법에서  컴포넌트를 작성할 때 컴포넌트에 속성을 지정할 수 있음 , 속성을 지정해주면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달 React 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트로 데이터(props)가 흐릅니다. 하위 컴포넌트는 전달 받은 props를 읽기만 가능하고, 쓸 수 없습니다. (READONLY)  https://react.dev/learn/passing-props-to-a-component Passing Props to ..

React 2024.05.09

[ Node.js ] 04. crud , HTTP method, MySQL 연동

CRUD란 CRUD는 소프트웨어 개발에서 기본적인 데이터 조작 작업을 설명하는 약어로, Create, Read, Update, Delete의 첫 글자를 따서 만든 용어입니다. 이 네 가지 작업은 대부분의 데이터베이스 애플리케이션에서 필수적인 기능으로, 데이터를 생성하고, 조회하고, 수정하고, 삭제하는 작업을 의미합니다.  CRUD (서버의 기본)POST : CREATE - 요청된 자원을 생성GET : READ - 요청된 자원을 읽음PUT : UPDATE - 요청된 자원을 수정DELETE : DELETE - 요청된 자원을 삭제  Create: POST - 새로운 리소스 생성Read: GET - 기존 리소스 조회Update: PUT (전체 업데이트) 또는 PATCH (부분 업데이트) - 기존 리소스 수정De..

Node.js 2024.04.30

[ Node.js ] 03. express 서버 만들기

express 서버 만들기 Express는 웹 애플리케이션 및 API를 빠르고 간편하게 구축할 수 있는 웹 프레임워크입니다. Express는 Node.js의 핵심 모듈인 HTTP 모듈을 기반으로 만들어졌으며, 라우팅, 미들웨어, 템플릿 엔진과 같은 다양한 기능을 제공합니다.  express 사이트설치바로가기서버만들기바로가기  # Express의 주요 특징과 기능 미들웨어(Middleware) 지원:Express는 미들웨어를 사용하여 요청과 응답을 처리합니다. 미들웨어는 요청 처리에 필요한 작업을 수행하고, 요청과 응답 객체를 조작하거나 다음 미들웨어로 전달할 수 있습니다. 이를 통해 로깅, 인증, 세션 관리 등 다양한 작업을 처리할 수 있습니다.라우팅(Routing):Express는 HTTP 요청에 대한..

Node.js 2024.04.28

[ Node.js ] 02. 노드(Node.js) 내장모듈 - OS, path, url , dns, crypto, util, Console

내장모듈   OS, path, url , dns, crypto, util # os 운영 체제와 관련된 정보에 접근할 수 있는 기능을 제공합니다. 이 모듈을 사용하여 운영 체제의 정보를 가져오거나 조작할 수 있습니다.  메서드 설명 os.userInfo([options])현재 사용자에 대한 정보를 제공하는 메서드입니다. 기본적으로 현재 사용자의 이름, UID, 그룹 ID, 홈 디렉토리 및 쉘을 반환합니다.os.hostname()호스트 이름을 반환합니다.os.platform()현재 운영 체제 플랫폼을 반환합니다. os.totalmem() 및 os.freemem() 시스템의 총 메모리 및 사용 가능한 메모리를 바이트 단위로 반환합니다. os.cpus() 시스템의 CPU 정보를 반환합니다. os.net..

Node.js 2024.04.28

[ Node.js ] 01. 노드(node.js)의 정의

Node.js의 정의 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경입니다. 이것은 JavaScript를 서버 측 애플리케이션 개발에 사용할 수 있도록 해주는 오픈 소스, 이벤트 기반, 비동기식 JavaScript 런타임입니다. 기존에는 JavaScript가 주로 클라이언트 측 웹 개발을 위해 사용되었지만, Node.js의 등장으로 JavaScript를 사용하여 서버 측 애플리케이션을 개발할 수 있게 되었습니다. Node.js는 단일 스레드 이벤트 루프를 기반으로 하고 있으며, 이러한 아키텍처는 비동기식 및 이벤트 기반 프로그래밍을 가능하게 합니다. 이는 대규모 네트워크 애플리케이션의 확장성과 성능에 이점을 제공합니다. Node.js의 특징 비동기식 ..

Node.js 2024.04.28

[ React ] 01. react 개념

react 시작 react 개념 컴포넌트컴포넌트종류컴포넌트 이름JSX란JSX 규칙 vscode : 확장프로그램 Reactjs code snippetsCodeSnap   공식문서바로가기바로가기 리액트란리액트(React)는 페이스북에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 리액트는 웹 애플리케이션의 UI를 구성하는 데 사용되며, 단일 페이지 애플리케이션(SPA)부터 모바일 애플리케이션, 데스크톱 애플리케이션까지 다양한 플랫폼에서 사용될 수 있습니다.  리액트의 특징과 장점 컴포넌트 기반 아키텍처(Component-based Architecture): 리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 작성합니다. 각 컴포넌트는 독립적이고 재사용 가능한 모듈로서 ..

React 2024.04.23

[ API ] 카카오 주소 , 카카오 지도

카카오 api https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 주소 api https://postcode.map.daum.net/guide#usage Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 카카오 맵 API https://apis.map.kakao.com/ data api https://ww..

플러그인 외 2024.04.23

[ javascript ] 29. TDZ , 호이스팅( hoisting) , 스코프(Scope)

스코프  , 호이스팅( hoisting)  , TDZ  스코프( Scope )호이스팅( hoisting )TDZ(Temporal Dead Zone)  1.  스코프(Scope)   스코프(Scope)는 변수 및 함수의 유효 범위를 나타냅니다. 스코프는 코드에서 변수 및 함수에 접근할 수 있는 범위를 결정 하고 변수 및 함수의 충돌을 방지하고 코드의 가독성과 유지 보수성을 향상합니다. 주요한 스코프 유형에는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)가 있습니다. 전역 스코프(Global Scope):전역 스코프는 코드의 어느 곳에서든 접근할 수 있는 스코프입니다.전역 스코프에서 선언된 변수 및 함수는 스크립트의 어디서든 사용할 수 있습니다.전역 스코프에서 선언된 변수는 전역..

javascript+es6 2024.04.23

[ javascript ] 28. 예외처리, 비동기 , Promise, async/await

예외처리, 비동기, Promise, async/await try ~ catch ~ finally 동기 / 비동기 비동기 콜백 Promise async/await fetch axios 명령어 mdn 예외처리 try ~ catch mdn 동기 / 비동기 mdn promise mdn try ~ catch mdn throw mdn ajax mdn , mdn XMLHttpRequest mdn mdn jQuery.ajax() jquery Element.insertAdjacentHTML() mdn fetch mdn axios axios 1. try ~ catch ~ finally try 블록: 예외가 발생할 수 있는 코드를 포함하는 블록입니다. 예외가 발생할 가능성이 있는 코드를 이 블록에 넣습니다. catch 블록..

javascript+es6 2024.04.17
반응형