728x90 📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭26 No Image 📷 [React] How to use React ? - React를 사용하는 방법 Create React App 설치 - Create React App은 React 애플리케이션을 손쉽게 생성할 수 있도록 도와주는 도구입니다. 터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 Create React App을 설치합니다. npx create-react-app my-react-app 프로젝트 디렉토리 이동 cd my-react-app 애플리케이션 실행 npm start 2024. 2. 15. No Image 📷 [React] What is React ? What is React ? - React란 무엇인가? Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 목적으로 만들어진 라이브러리입니다. 재사용 가능한 UI 컴포넌트 를 구축하고, 이를 조합하여 복잡한 UI를 만드는 데 중점을 둡니다. 선언적이고 효율적인 방식으로 UI를 설계할 수 있도록 도와주며, 단일 페이지 애플리케이션(SPA) 개발을 쉽게 만들어줍니다. - React의 주요 특징과 개념 컴포넌트 기반 구조 React는 UI를 작은 독립적인 컴포넌트로 나누어 개발하는 컴포넌트 기반 구조를 가지고 있습니다. 각 컴포넌트는 자체적으로 상태(state)와 생명주기(lifecycle)를 관리하며, 필요에 따라 재사용이 가능합니다. 가상 DOM (Virtual D.. 2024. 2. 15. No Image 📷 [React] JSX 사용전 유의사항 주의사항 1. 하나의 태그만 반환해야한다 App.js import './App.css'; function App() { return Hello!; } export default App; 예를 들어서 위와같이 하나의 태그로만 이루어진걸 반환하는건 문제가 없다. 다만 App.js import './App.css'; function App() { return Hello!; hello!; } export default App; 위와같이 두개 이상의 태그를 반환하는것은 불가능하다 이런 경우에는 App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Hello! Hello! ); } export default App; i.. 2023. 7. 29. No Image 📷 [React] 초기세팅 CMD mkdir '프로젝트모음파일' //'프로젝트모음파일' 생성 혹은 이미 모음 파일이 있다면 cd '프로젝트모음파일' yarn create react-app '프로젝트 파일명' //yarn을 이용한 프로젝트 파일 기본 생성 yarn start //yarn을 이용해서 프로젝트 실행후 localhost 해줌 + 기본적으로 git init도 해줌. yarn add eslint eslint-config-react-app --dev //eslint 오류를 잡아줌. 2023. 7. 29. No Image 📷 [Express] REST API & RESTful API 1. REST API의 탄생 REST는 Representational State Transfer라는 용어의 약자 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 상황에 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 한다. 2. REST 구성 쉽게 말해 REST API는 다음의 구성으로 이루어져있습니다. 자세한 내용은 밑에서 설명하도록 하겠습니다. 자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations) 3. REST 의 특징 1) Uniform (유니폼 인터페이스) Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일을 말합니다. 2) Sta.. 2023. 2. 8. No Image 📷 [Express] HTTP 프로토콜 HTTP 요청 대상을 "리소스"라고 하며 리소스의 특성은 더 이상 정의되지 않음 HTTP 전체에서 사용되는 URI(Uniform Resource Identifier)로 식별 URL 우리에게 가장 잘 알려진 URI는 URL URL(Uniform Resource Locator) https://developer.mozilla.org https://developer.mozilla.org/en-US/docs/Learn/ https://developer.mozilla.org/en-US/search?q=UR 이러한 URL 중 하나를 브라우저의 주소 표시줄에 입력하여 URL과 연결되는 페이지(리소스)를 로드할 수 있도록 지시할 수 있 여러 부분으로 구성되는데, 일부는 필수 사항이고 나머지는 선택 사항 URN URN(U.. 2023. 2. 8. No Image 📷 [Express] 기본 용어 정리 Glossary application In general, one or more programs that are designed to carry out operations for a specific purpose. In the context of Express, a program that uses the Express API running on the Node.js platform. Might also refer to an app object. 일반적으로 특정 목적을 위한 작업을 수행하도록 설계된 하나 이상의 프로그램 Express의 경우 Node.js 플랫폼에서 실행되는 Express API를 사용하는 프로그램 앱 객체를 참조할수도 있음. API Application programming interfa.. 2023. 2. 7. No Image 📷 [Node.js] 02_Node.js란? [ Node.js 란 무엇인가? ] => Chrome V8 JavaScript engine으로 build된 JavaScript runtime입니다. => 이벤트 기반, None blocking I/O model을 사용해 가볍고 효율적. => Node.js의 package 생태계인 npm은 세계에서 가장 큰 Open source library 생태계 (Node.js를 굳이 사용해야 하는 이유가 뭘까?) => None-blocking I/O, Single Thread, Event Loop의 특성이 有 => Node-blocking 은 함수가 실행되는 중에도 다른작업을 동시에 진행할 수 있다. --> 장점 => Single Thread 는 스레드 하나를 사용하는 것, 동시에 하나의 작업만을 처리할 수 있다. .. 2023. 2. 3. No Image 📷 [Node.js] 01_JavaScript란? [ JavaScript란? ] => 정적이었던 웹사이트를 동적으로 변환하기 위해서 만들어졌다. => Ecma International에서 ECMAScript(ECMA-262)라는 이름으로 현재의 자바스크립트 표준을 제정 2023. 2. 3. No Image 📷 [Node js] Node js 에 대해서 알아보자 Node js 란? 우선 프론트엔드와 백엔드로 나눴을 때 프론트엔드는 디지털기기 ( ex. 핸드폰, 컴퓨터 ) 같은 전자기기에서 보여지는 시각적 요소를 다루는 것. 백엔드는 그 시각적 요소뒤에 돌아가는 여러 프로그램들을 다루는 것. ( ex. 돈이 보내지게되는 과정 ) 이 두개중에 Node js 는 백엔드에 속한다. 그렇다면 Node js에 대해서 좀 더 알아보자 Node js 의 장점 1. Node js는 자바스크립트 언어를 활용하여 Node js를 사용할 수 있다. 2. 주로 스타트업에서 사용한다. ( 빠른 개발이 가능하다. ) 3. 대기업에서도 많이 사용하는 추세 4. node js 공부하는 사람들 중에 포기하는 빈도는 적다. (Java 가 Javascript 보다 대게 어렵다고 느끼기 때문) Q .. 2023. 1. 10. 이전 1 2 다음 728x90
