본문 바로가기

💡 카테고리67

[React] React 이벤트 사용하기 1. onClick onClick 이벤트는 특정 element 가 클릭됐을 때 정의된 함수를 호출하는 방식으로 사용한다. 2. onChange onChange 이벤트는 특정 element 에 변화가 생겼을 때 정의된 함수를 호출하는 방식으로 사용한다. 3. mousemove mousemove 이벤트는 특정 tag 영역 안에서 마우스 커서가 움직일 때 발생한다. 4. onMouseOver onMouseOver 이벤트는 특정 tag 영역 안에 마우스 커서가 진입할 때 발생한다. 5. onMouseOut onMouseOut 이벤트는 특정 tag 영역 안에 마우스 커서가 진입했다가 벗어날 때 발생한다. 6. onKeyDown, onKeyPress, onKeyUp onKeyDown 과 onKeyPress 는 키를.. 2021. 10. 20.

[React] React 에서 bootstrap 사용하기(ReactStrap) 💡 bootstrap 이란? 프론트엔드 디자인을 쉽게 구현할 수 있도록 도아주는 html, css, js 프레임워크이다. 이런 부트스트랩을 react 에서 사용할 수 있도록 패키지로 만든 것이 reactstrap 이다. 01. Alert 사용하기 reactstrap 을 사용하기 위해서는 먼저 reactstrap 을 설치한다. 1. VSCode 로 작업을 하기 때문에 VSCode에서 react 작업을 하는 폴더 경로로 들어가서 터미널을 열고 reactstrap 을 설치하는 npm install --save reactstrap 명령과 bootstrap 을 설치하는 npm install --save bootstrap 을 실행한다. 2. App.js 에서 reactStrapTest.js 파일을 임포트해서 사용할.. 2021. 10. 20.

[React] HTTP 통신을 위한 방법 (Fetch, Axios, Promise) 웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받는다. http 에서 사용하는 방식은 여러가지가 있지만 GET 과 POST 가 가장 많이 사용된다. GET http://example.com?a=1&b=2 와 같이 url? 뒤에 파라미터명=값 형태로 필요한 데이터를 전달하며, 주로 데이터 조회나 검색 등의 기능에 사용된다. POST http body 에 데이터를 넣어서 전달하는 방식으로, url 뒤에 파라미터 값을 표시하지 않고 사용할 수 있다는 장점이 있다. 주로 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용된다. 🐥 HTTP 통신 방식 Fetch / Axios / Promise 💡 Fetch 란? 자바스크립트 내장 함수인 fetch 를 사용하면 쉽게 비동기 통신을 구현.. 2021. 10. 20.

[React] props 사용하기 #1 💡 Props 란? react 에서 props 는 전역변수로, component 간에 값을 전달하는 수단이다. app.js (부모 컴포넌트)에서 다른 컴포넌트(자식 컴포넌트)로 어떠한 값을 전달할 때 props 객체에 담아서 보내게 되는 것이다. 1. React props 자료형 선언하기 자식 컴포넌트에서 props 에 대한 자료형을 선언해놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교해서 자료형이 일치하지 않으면 경고 메세지를 알려주기 때문에 잘못된 데이터를 확인할 수 있다. 1. App.js 수정하기 import './App.css'; import PropsDatatype from './R018_PropsDatatype'; function App() { return ( Start.. 2021. 10. 13.

[React] React.js 시작하기 [ CONTENTS ] 1. Reac 실행 명령어 2. React 에서 Jquery 사용하기 3. React prop 사용하기 React 란? 리액트는 사용자 인터페이스를 만드는 데 사용하는 자바 스크립트 라이브러리이며, 오직 View 만 신경 쓰는 라이브러리이다. React 특징 리액트의 주요 특징 중 하나는 Virtual DOM 을 사용한다. DOM(Document Object Model) 은 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다. 웹 브라우저는 DOM 을 활용해서 객체에 자바스크립트와 CSS 를 적용하고 DOM 은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. 왜 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸주어야 할.. 2021. 10. 13.

[Docker] Docker 명령어 정리 💡 Container Command 컨테이너 실행 docker start 컨테이너 컨테이너 재실행 docker restart 컨테이너 컨테이너 중지 docker stop 컨테이너 컨테이너 접속 docker attach 컨테이너 docker exec -it 컨테이너 /bin/bash 컨테이너 삭제 docker rm 컨테이너 작동중인 컨테이너 중지 및 삭제 docker rm -f 컨테이너 작동중인 컨테이너 확인 docker ps 모든 컨테이너 확인 docker ps -a 💡 Image Command Docker Hub 에 올라와있는 이미지 찾기 docker search 이미지 이미지 다운 docker pull 이미지:태그 이미지 삭제 docker rmi 이미지 이미지 확인 docker images 이미지 히.. 2021. 10. 10.

[HTML] HTML 알아보기 💡 HTML(Hyper Text Markup Language) 이란? 웹 페이지를 만들기 위한 표준 마크업 언어로, 웹 페이지의 구조를 설명한다. 💡 HTML 구조 ... : 이 문서는 HTML5 라는 것을 정의 : HTML 의 루트 요소 : HTML 페이지에 대한 메타 정보를 포함 : 문서의 본문, 모든 가시적인 컨텐츠에 대한 컨테이너 💡 HTML 에서 요소란? 요소 시작 태그에서 종료 태그까지의 모든 것 태그 안에 있는 내용 태그는 대소문자를 구분하지 않으나, 소문자로 작성할 것을 권장한다. This is heading 1 This is heading 2 This is heading 3 This is heading 3 This is heading 3 This is heading 3 ~ 은 제목을 정의.. 2021. 10. 10.

[Git] Github 명령어 정리 🦔 Git 명령어 git init : git 생성하기 git clone git_path : github 프로젝트 받아 오기 git branch branch_name : 브랜치 생성하기 git branch -m branch_name : 메인 브랜치 생성하기(그 전에 있던 main branch 는 삭제된다.) git checkout branch_name : 브랜치 선택하기 git checkout -t remote_path/branch_name : 원격 브랜치 선택하기 git branch -r : 원격 브랜치 목록보기 git branch -a : 로컬 브랜치 목록보기 git branch -m branch_name : 브랜치 이름 바꾸기 git branch -d branch_name : 브랜치 삭제하기 (현재 .. 2021. 10. 8.

[AWS] AWS 웹 서버 구축하기 (with VPC, EC2, RDS) 이번 포스팅에서는 AWS 의 VPC 네트워크 (서브넷, 라우팅 테이블, 인터넷 게이트웨이, 보안 그룹) 와 EC2 인스턴스, RDS 데이터베이스 설정을 통해 웹 서버를 구축하는 과정을 정리해보았다. 💡 AWS 용어 정리 AWS public cloud : 땅 VPC (virtual private cloud) : 집 IP : 집 주소 Subnet : 방 EC2 (서버) : 책상(에서 작업) Route table / routing : 현관문(지문 도어락) Internetgateway : 바깥세상과 연결되는 문(집문) security group : 금고 [SG] Load Balancing : 서비스 간 부하를 분산하기 위해 서버 분산 API Gateway : 클라이언트 접근 요청을 일원화 Auto Scaling.. 2021. 10. 8.

이전 1 2 3 4 5 6 7 8 다음

티스토리툴바