기술 블로그

[React] chapter_05

더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창) : http://localhost:3000 // TODO : App.css import (기본 : 중앙정렬) import "./App.css"; // TODO : 자식 컴포넌트 가져오기(import) import A_Accommodate from "./pages/A_Accommodate"; import A_Accommodate_Exam from "./pages/A_Accommodate_Exam.js"; import A_Accommodate_Exam2 from "./pages/A_Accommodate_Exam2.js"; impor..

[React] chapter_04

빈 이미지와 함께 화면에 출력해보기 import css파일 가져오기 set변수 : setter 함수 (변수 값 저장 용도 함수) 사용해 보기 화면 바인딩 용도 : useState() 함수 (훅(hook) 함수 : useXXX()) 사용해 보기 더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창) : http://localhost:3000 // TODO : App.css import (기본 : 중앙정렬) import "./App.css"; // TODO : 자식 컴포넌트 가져오기(import) import A_Comment from "./pages/A_Comment"; functio..

[React] chapter_03

리액트 컴포넌트의 생명주기(라이프사이클) : 생성/수정 변수 정의 : 바인딩 변수 set변수명 사용법 : let [변수명, TODO:set변수명] = useState(초기값) 함수 정의 : 컴포넌트 생성 함수 : 자동 실행(또는 Mount함수라고 불림) 1) 생명주기 생성 함수(컴포넌트 생성) : 화면이 뜰 때 자동 실행 사용법 : useEffect(()=>{실행문}, []); 2) 생명주기 생성 -> 수정 함수 : 1) 생성 함수에 변수 값이 바뀔 때 자동 실행 사용법 : useEffect(()=>{실행문}, [감시할변수명]); 더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창..

[React] 04_chapter 02

변수 및 함수 정의하여 웹브라우저 화면에 모든 자료형 출력해보기 화면에 출력 되는 것 - 1) 문자열 출력 - 2 숫자 출력 - 3) 문자열 붙이기 - 4) JSX 표현식 - 5) 배열 출력 - 6) 변수명(배열)으로 출력 - 7) 함수 출력 - 8) 3항 연산자 : 조건식(축약형) - 9) html 태그 속성의 값으로 {} - 10) 버튼 태그 속성의 값으로 {} - 11) 자바스크립트 내장함수 - 12) 오늘 요일(1 ~ 7) : new Date() ※ 화면에 출력 안되는 것 - 1) 참/거짓(bool/boolean) - 2) 객체 출력 : X, 에러 발생 - 3) 조건문 : if문 : X - 4) 반복문 : for문 : X */} 더보기 // TODO: 부모 컴포넌트 메인 : App.js // TO..

[React] chapter_01

리액트(React)는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 페이스북에서 개발하였으며, 웹 및 모바일 애플리케이션의 UI를 구축하는 데 주로 사용됩니다. 리액트는 컴포넌트 기반 아키텍처를 기반으로 하며, 재사용 가능하고 구조적으로 정리된 UI 요소를 만들기 쉽게 해줍니다. 리액트 프로젝트 생성을 위한 라이브러리 설치 방법 # (최초1번) npm install -g create-react-app # react프로젝트 만들기 : npx create-react-app 프로젝트명 # react 프로젝트 실행하기 :cd 프로젝트명 (프로젝트명 폴더로 들어가기) npm start (react 서버 가동 명령어) # react 프로젝트 중단하기 : vscode 터미널 창에서 :..

[Bootstrap] chapter_01

부트트랩(Bootstrap)은 브라우저에서 실행됩니다. 웹 페이지의 프론트엔드 부분, 즉 HTML, CSS, 그리고 JavaScript를 사용하여 사용자 인터페이스를 구현할 때 주로 사용됩니다. 사용자의 브라우저에서 실행되며, 반응형 웹 디자인을 통해 다양한 디바이스와 화면 크기에서 잘 작동하도록 디자인되어 있습니다. 01_hello_bootstap 더보기 DOCTYPE html> 1st 부트스트랩 클래스 div { background-color: aqua; } Hello, world! 안녕하세요 홍길동입니다. 02_layout_grid 부트스트랩 레이아웃 그리드 시스템 사용법 bootstrap 키워드 사용법 1 class="container" : 가상 페이지 중앙정렬 class="text-center"..

[Modern JavaScript] chapter_01

모던 자바스크립트(Modern JavaScript)는 브라우저에서 실행되는 클라이언트 측 JavaScript 코드와, 서버 측 JavaScript 환경에서 실행되는 노드.js(Node.js) 코드로 구분됩니다. 브라우저에서 실행되는 클라이언트 측 JavaScript는 웹 페이지 내에서 동작하며, 사용자 인터페이스를 개선하거나 다양한 작업을 수행합니다. 서버 측 JavaScript는 Node.js 환경에서 실행되며, 백엔드 서버 개발, 데이터베이스 액세스, API 호출 등과 같은 서버 측 작업을 처리합니다. 01_object 01_object_array 객체 배열 : 배열 안에 객체가 들어가 있는 형태 만들기 let object = {}; // 객체 let array = []; // 배열 let objec..

[Node] chapter_01

node 노트(Node.js)는 서버 측 JavaScript 런타임 환경으로, 컴퓨터의 운영체제 위에서 실행된다. 서버 사이드에서 JavaScript를 실행하기 위한 환경으로, Chrome V8 JavaScript 엔진을 기반으로 하며, 비동기식 I/O 처리와 이벤트 기반 모델을 통해 높은 성능을 제공한다. 노드의 패키지 매니저인 npm을 통해 다양한 모듈과 라이브러리를 활용할 수 있다. 노드는 웹 애플리케이션의 백엔드 부분을 다루는 데 사용되며 데이터 처리, 데이터베이스 연동, 로직 처리 등을 담당한다. 리액트와 노드는 서로 다른 영역에서 활용되는 기술이기 때문에, 주로 프론트엔드 개발에서 리액트를 사용하여 사용자 인터페이스를 구축하고, 백엔드 개발에서 노드를 사용하여 서버를 구성하고 데이터 처리를 수..