개발자의 자기계발 블로그( ੭ ･ᴗ･ )੭

📌 Domain (도메인)도메인이란 인터넷에서 웹사이트의 주소를 나타내는 고유한 이름이다.예를 들어, 'www.google.com'에서 google.com 이 도메인이 된다.도메인은 쉽게 기억할 수 있는 형태로 웹사이트를 방문할 수 있도록 만들어진 개념이며, 이를 통해 사용자는 IP주소를 입력하지 않고도 쉽게 웹사이트에 접근할 수 있다. 🔽 도메인 구조최상위 도메인 (TLD) : 'com', 'org', 'net'과 같은 부분으로, 도메인의 최상위 계층을 나타냄2차 도메인 (Second-Level Domain) : 'google'과 같은 부분으로, 주로 기업이나 조직의 이름을 포함함서브 도메인 (Subdomain) : 'www'와 같은 부분으로, 메인 도메인 앞에 위치하며, 특정한 서비스나 하위 사이..

목차✅ 리액트 훅 (Hook)함수형 컴포넌트에서 상태(state)와 생명주기(Lifecycle) 기능을 사용할 수 있게 해주는 기능이다.원래 있던 기능은 아니고 리액트 16.8에서 도입되었는데,이를 통해 클래스형 컴포넌트의 필요성을 줄이고 코드의 가독성과 재사용성을 높일 수 있게 되었다. ✅ 주요 훅 소개1. useState상태 변수를 선언하고 관리하는 훅함수형 컴포넌트 내에서 상태를 사용할 수 있게 해줌import React, {useState} from "react";function Counter(){ const [count, setCount] = useState(0); return ( You clicked {count} times s..

목차✅ State (상태)상태는 리액트 컴포넌트에서 관리되는 동적인 데이터상태는 컴포넌트가 동작하고 변하는 방식을 정의하며, 상태가 변경되면 컴포넌트는 다시 렌더링된다!! ✔ 상태의 정의상태는 컴포넌트 내부에서 정의되며, 클래스형 컴포넌트와 함수형 컴포넌트에서 다르게 처리된다. 1. 클래스형 컴포넌트에서 상태상태는 constructor 메서드에서 초기화되며, 객체 형태로 저장된다.상태를 변경하려면 this.setState 메서드를 사용해야함.class Counter extends React.Component { constructor(props){ super(props); this.state={ count : 0 }; } increm..

목차✅ Components와 Props의 정의🍀 Components리액트는 컴포넌트 기반의 구조이다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 각각이 특정한 부분의 UI를 담당함.ex) 레고 블록 조립하듯 컴포넌트들을 조립하여 개발React Component는 개념적으로 JavaScript의 함수와 비슷하다.=> React Component를 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있음 하지만 React component에서의 입력과 출력은 자바스크립트의 함수와는 조금 다르다.위 사진과 같이 리액트 컴포넌트에서의 입력은 Porps, 출력은 React e..

목차✅ Elements의 정의와 생김새element : 어떠한 물체를 구성하는 성분 => 리액트 앱을 구성하는 가장 작은 블록들 - ReactElements와 DOMElements의 차이: ReactElement는 리액트의 virtual DOM에 존재하는 것이고,DOMElement는 실제 브라우저 DOM에 존재하는 것이다. // jsx를 이용하여 작성된 코드const element = Hello, world ; 리액트 Elements는 자바스크립트 객체 형태로 존재한다. // button을 나타내기 위한 element 코드{ type : 'button', props : { className: 'bg-green', children: { type: '..

목차✅ JSX 정의와 역할 JSX = JavaScript + XML / HTMLJSX : A synatax extension to JavaScript직역하면 "자바스크립트의 확장 문법"  🔽 JSX 코드const element = Hello, world! ; 🍀 JSX 의 역할JSX는 내부적으로  XML과 HTML코드를 자바스크립트 코드로 변환하는 과정을 거치게 된다.따라서 JSX코드로 작성을 해도 최종적으로는 자바스크립트 코드가 나오게 되는 것!  🔽 JSX코드를 JavaScript코드로 변환하는 React의 createElement 함수React.createElement( type, // element의 유형 (html 태그나 리액트 컴포넌트 등이 들어갈 수 있음) [props], ..

HTML웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어웹사이트의 뼈대를 구성하는 태그들   하나의 사이트에서 여러개의 페이지를 이동하게 되는데, 각 페이지 별로 html이 따로 존재하며 페이지를 이동하게 될 경우 브라우저에서는 해당 페이지의 html파일을 받아와서 보여준다.그러면 수많은 페이지가  존재하는 복잡한 웹 사이트의 경우 html파일의 양이 상당히 늘어나게 될텐데 이걸 어떻게 관리하는가? ==> 이를 해결하기 위해 나온 SPA (Single Page Application) : 하나의 페이지만 존재하는 웹애플리케이션   JavaScript정식 명칭은 ECMAScript이다. => ES5, ES6 등이 자바스크립트의 버전 이름인 이유 JavaScript 문법 - 자..

https://www.youtube.com/watch?v=dvQMbg7n6mY&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=2유튜브 코딩앙마 강의를 보고 공부했습니다  Visual Studio Code를 다운받고 C드라이브에 reactSample 이라는 폴더 만들고 vscode에서 File - OpenFolder - reactSample 열기 그 다음 vsCode에서 터미널 열어서 npx create-react-app voca (여기서 voca는 본인이 생성할 프로젝트 명)를 입력했더니에러가 뜸!!!!!!!!!!😡😡😡ㅠㅠ.. 왜그러지 검색해보다가 해결한 방법은파일탐색기 - C:\users\\AppData\Roaming 에 들어갔더니 이 위치에 npm이 없어서 난..

목차    Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.- Node.js 공식 홈페이지*런타임 : 특정 언어로 만든 프로그램들을 실행할 수 있는 환경 JavaScript란?HTML에 종속되어 있는 언어로, HTML 조작과 변경을 위해 사용됩니다.정적 언어인 HTML을 조작해서 동적으로 바꿔주는 기능을 해줍니다.HTML은 JavaScript가 조작하고, JavaScript의 해석은 브라우저가 합니다.브라우저에는 자바스크립트 해석 엔진이 존재하여 기존에는 자바스크립트는 인터넷 브라우저 위에서만 실행할 수 있었습니다.Node.js의 등장은 JavaScript를 웹 브라우저로부터 독립시켜 서버 구현을 가능케 했습니다.과거 JavaScript의 런타임이 웹 ..

React는 2013년 페이스북에 의해 출시되어 페이스북에서 제공해주는 프론트엔드 라이브러리 이다.리액트는 기존 뷰를 날려버리고 Virtual DOM을 사용하여 처음부터 새로 랜더링하는 방식으로 좀 더 빠른 속도로 뷰를 변경시켜 준다. 리액트의 장점Virtual DOM 사용으로 인해 속도가 빠름캐치프라이즈, 자바스크립트와 리액트의 간단한 개념만 알면 웹, 앱 모두 개발 가능자바스크립트 친화적이며, 불변성 관리에 초점을 두고 있는 도구이다이미 많이 사용되고 있기에 다양한 라이브러리가 존재하고, 질문과 답변이 활발하게 이루어짐 리액트의 특징1. 컴포넌트 (Component) 구조리액트는 모든 것이 컴포넌트.컴포넌트는 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발할 수 있게 해줌=> 캡슐화,..