본문 바로가기

프론트엔드164

리액트 React | 프로젝트 구조 설계 패턴 ✅ 리액트 설계를 하는 원칙 우리는 확장성있고 재사용성 있는 코드를 만들어야 한다 관심사에 따라서 코드를 분리하고 단일 책임을 가지는 컴포넌트를 만들어야 한다 외부에 제어를 위임시키는 것을 고려 해야한다 깨끗하고 성능 좋은, 유지 보수가 쉬운 리액트 컴포넌트 만드는 법 배워보기 모든 프로그래머의, 적어도 나에게는 꿈같은 일이다. 나한테는 훌륭한 프로그래머와 좋은 프로그래머를 가르는 자질이기도 하다. 언제나 배워야 하고, 개선해야 할 점이 있기 때문에, 절대로 완벽해질 수 없다는 사실이 재미있는 지점이다. 아래 모범 사례를 따라가다 보면 팀원뿐만 아니라 자기 자신도 도움받을 수 있을 것이다. 스타일 가이드를 통해 어떻게 코드를 짜는지에 대한 중요한 내용을 정의해 둔 개발팀을 본 적이 있다. 어떻게 생각하느.. 2023. 7. 4.

리액트 React | Hook - useState, uesEffect, useRef, useCallback, useMemo ✅ Hook 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. 💡 useState 💡 useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. 💡 useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마다 특.. 2023. 7. 4.

리액트 React | React 엘리먼트(Element) ✅ React 엘리먼트(Element) 💡 React 엘리먼트(Element) 리액트 애플리케이션에서 엘리먼트(Element)는 가장 기본적인 구성 요소입니다. 엘리먼트는 JSX 문법을 사용하여 일반 JavaScript 객체로 생성할 수 있습니다. JSX 문법은 XML과 유사한 문법을 사용하여 리액트 컴포넌트를 작성하는 방식입니다. 엘리먼트는 사용자 인터페이스의 다양한 부분을 나타내기 위해 사용됩니다. const element = Hello, world; 이렇게 생성된 엘리먼트는 화면에 표시되기 위해 렌더링 되어야 합니다. 💡 가상 DOM(virtual DOM) 리액트에서는 가상 DOM(virtual DOM)을 사용하여 실제 DOM을 대신하여 UI를 관리합니다. 가상 DOM은 메모리 상에 존재하는 자바스.. 2023. 7. 3.

리액트 React | React란? ✅ 리액트 React 리액트(React)는 페이스북에서 개발된 자바스크립트 라이브러리로, 2013년에 처음 공개되었습니다. 동적인 웹사이트를 만들기 위해 자바스크립트를 효율적으로 활용할 수 있는 문법 모음집입니다. 리액트는 개발자가 재사용 가능한 컴포넌트를 만들고 최적화하는 기능을 제공하여 개발자들이 더욱 쉽게 웹 애플리케이션을 개발할 수 있도록 도와줍니다. 💡 라이브러리 Library 리액트(React)는 UI 컴포넌트를 만들고 관리하기 위한 강력한 라이브러리입니다. 이러한 리액트는 종종 프레임워크와 혼동될 수 있지만, 사실은 라이브러리로 분류됩니다. 기능의 범위: 프레임워크는 애플리케이션의 전체 구조와 흐름을 관리하는 많은 기능과 도구를 포함한다. 하지만 리액트(React)는 UI 컴포넌트를 만들고 .. 2023. 7. 3.

리액트 React | Link 컴포넌트 ✅ Link 컴포넌트 Link 컴포넌트는 React의 하이퍼링크 생성 컴포넌트로, 다른 페이지로 이동하기 위해 사용한다. react-router-dom 라이브러리에서 제공하며, 페이지 간 라우팅을 간편하게 처리할 수 있도록 한다. Link 컴포넌트를 사용하면 페이지를 전체적으로 새로고침하지 않고 필요한 부분만 업데이트하기 때문에 데이터 로딩이 줄어든다. 개발자 도구에서는 Link 컴포넌트가 태그로 표시된다. 💡 태그와 Link 컴포넌트의 차이점 태그 태그는 일반적인 HTML 태그로, 페이지 이동 시 전체 페이지를 다시 렌더링하고 브라우저의 주소를 변경한 후 페이지를 새로고침한다. 이러한 동작 방식으로 인해 상태 값이 유지되지 않으며 성능이 저하된다. // 태그 사용 function MyComponent(.. 2023. 6. 12.

리액트 React | index.html ✅ index.html index.html 파일은 초기 HTML 구조를 정의하고, index.js 파일은 리액트 애플리케이션을 초기화하고 컴포넌트를 렌더링 한다. index.html 파일은 웹 브라우저에 직접 로드되며, index.js 파일은 index.html 파일에 의해 호출되어 애플리케이션을 동적으로 렌더링 한다. 💡 DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지를 선언한다. HTML5는 최신의 웹 표준이며, 구조적인 개선과 새로운 기능을 포함한다. // HTML5를 사용하는 문서 DOCTYPE 선언은 문서 유형 선언(Doctype declaration)의 약어로, 문서가 따르는 DTD, Document Type Defi.. 2023. 6. 8.

리액트 React | HTTP 클라이언트 데이터 통신: Ajax, Fetch, Axios ✅ HTTP 클라이언트(Client) 리액트(React)는 사용자 인터페이스를 구축하는데 초점을 두고 있어, 서버와 데이터를 주고받는 기능(HTTP 클라이언트)을 포함하지 않는다. 리액트(React)에서 서버와의 데이터 통신을 위해서는 별도의 HTTP 클라이언트를 사용해야 한다. 클라이언트와 서버는 개별적인 메시지 교환에 의하여 통신한다. HTTP 클라이언트는 HTTP 프로토콜을 사용하여 서버로부터 정보를 요청(requests)하고, 서버는 요청에 따라 적절한 응답(responses)을 반환한다. 리액트(React)에서 API 요청을 할 때 페이지를 새로고침하지 않고 데이터를 가져오기 위해 Axios나 Fetch 라이브러리를 사용한다. 💡 HTTP, HyperText Transfer Protocol HT.. 2023. 5. 19.

리액트 React | React-bootstrap: UI 컴포넌트 디자인 ✅ React-bootstrap React-Bootstrap은 UI 컴포넌트 라이브러리이다. Bootstrap 프레임워크의 디자인과 기능을 React 컴포넌트로 사용하는 것이다. React-Bootstrap 공식 문서를 통하여 자세한 정보와 사용 방법을 확인할 수 있다. 💡 React-bootstrap 사용하기 프로젝트에 React-Bootstrap 라이브러리를 설치하여 사용한다. 별도의 bootstrap.js 파일을 프로젝트에 추가하지 않아도 된다. npm 명령어를 실행하여 React-Bootstrap과 Bootstrap을 설치한다. npm install react-bootstrap bootstrap index.js 파일에서 Bootstrap의 CSS를 import 한다. 전체 애플리케이션에 Boots.. 2023. 5. 18.

리액트 React | 리액트 라우터: react-router-dom 패키지 ✅ 라우팅 Routing 라우팅은 사용자가 요청한 URL에 따라 해당 URL에 맞는 컴포넌트를 보여주는 것이다. 사용자가 애플리케이션에서 다른 페이지로 이동하려고 할 때, 라우터를 사용하여 해당 페이지 컴포넌트를 렌더링 한다. ✅ 리액트 라우터 React Router 리액트 라우터(React Router)는 리액트 기반의 싱글 페이지 애플리케이션(SPA)에서 라우팅을 구현하기 위한 라이브러리이다. 리액트 자체는 View만을 담당하는 라이브러리로 페이지의 URL에 따라 적절한 컴포넌트를 렌더링 하고 상태를 관리하기 위해 리액트 라우터(React Router)를 사용한다. 💡 react-router 패키지 react-router React 기반의 웹 및 앱 라우팅을 처리하는 라이브러리이다. react-rou.. 2023. 4. 24.

리액트 React | 노마스 코더 영화 평점 웹서비스 | 로딩 현상 구현 ✅ Movie 컴포넌트 구성하기 💡 App 컴포넌트 작성 import React from 'react'; // App 컴포넌트 정의 class App extends React.Component { // render 메소드 정의 render() { return ( {/* 컴포넌트 내용을 추가 */} ); } } // App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄 export default App; 💡 isLoding state React 애플리케이션에서 데이터를 불러오거나 처리한다. 로딩 중일 때 사용자에게 로딩 중임을 알리기 위해 UI를 업데이트하는 데 사용한다. isLoading 변수는 true 또는 false 값으로 설정한다. import React from 'react'; // App 컴.. 2023. 4. 4.

리액트 React | 노마스 코더 영화 평점 웹서비스 | 컴포넌트 생명주기 함수: 마운트, 업데이트, 언마운트, 에러 처리 ✅ 생명주기 함수 컴포넌트가 생성, 업데이트, 소멸될 때 호출되는 일련의 메서드이다. 생명 주기 함수를 통해 컴포넌트의 동작을 제어하고, 상태를 갱신하거나 데이터를 가져온다. 함수 실행 순서 constructor() 함수: 컴포넌트가 생성될 때 호출되며, 초기화 작업을 수행한다. static getDerivedStateFromProps() 함수: 컴포넌트가 생성될 때와 업데이트될 때 호출되며, 프로퍼티 값을 상태 값으로 변환을 수행한다. render() 함수: 컴포넌트의 UI를 생성하고 반환을 수행한다. componentDidMount() 함수: 컴포넌트가 마운트 된 후에 호출되며, 초기화 및 네트워크 요청 등의 작업을 수행한다. shouldComponentUpdate() 함수: 컴포넌트가 업데이트될 때.. 2023. 4. 3.

리액트 React | 컴포넌트 간 데이터 전달을 위한 속성(props) ✅ 속성(Props) React는 컴포넌트 간에 데이터를 전달하는 메커니즘으로 속성(Props)을 제공합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이므로 하위 컴포넌트에서는 Props 값을 수정할 수 없습니다. 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐르기 때문에 Props를 사용하여 컴포넌트에 필요한 데이터와 이벤트 핸들러를 전달할 수 있습니다. 💡 속성(Props)의 읽기 전용성 React 컴포넌트에서 함수형 컴포넌트나 클래스형 컴포넌트 모두 Props는 읽기 전용입니다. 함수형 컴포넌트에서는 Props를 함수의 매개변수로 받아와 사용하며, 클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다. Props는 항.. 2023. 3. 26.

리액트 React | 컴포넌트(Components) ✅ 컴포넌트(Components) 컴포넌트(Component)는 React 애플리케이션을 구성하는 최소한의 단위입니다. React에서는 UI를 재사용 가능한 개별적인 조각으로 분리하여 컴포넌트로 만들고, 각 조각을 개별적으로 살펴볼 수 있습니다 과거의 웹 프레임워크들은 일반적으로 MVC, Model-View-Controller 방식으로 구성되어 있어 각 요소의 의존성이 높아 재사용이 어려웠습니다. 그러나 React에서는 컴포넌트를 독립적으로 구성하여 재사용성을 높일 수 있습니다. 이를 통해 우리는 새로운 컴포넌트를 쉽게 만들 수 있습니다. 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM 노드를 출력하는 함수로 볼 수 있습니다. 💡 React 컴포넌트 네이밍 규칙 Reac.. 2023. 3. 26.

리액트 React | JSX와 Babel: JavaScript의 확장된 문법과 변환 도구 ✅ JSX, JavaScript XML JSX는 리액트에서 사용되는 자바스크립트의 확장 문법입니다. 이를 통해 XML과 유사한 형태로 UI를 작성할 수 있습니다. JSX는 리액트 컴포넌트 파일에서 UI를 표현하는 데 주로 사용됩니다. JSX는 XML과 비슷한 구문으로 UI 구성 요소를 작성하며, 자바스크립트 코드 내에서 시각적으로 UI를 표현하는 데 도움을 줍니다. 개발자들은 주로 JSX를 활용하여 UI를 작성하고 유지보수하는 것을 선호합니다. .JSX 코드를 브라우저에서 직접 실행할 수는 없기 때문에, Babel과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환해야 합니다. 💡 JSX를 이용한 방법 JSX를 이용하면 HTML과 비슷한 형태로 코드를 작성할 수 있습니다. JSX 코드는 실제로.. 2023. 3. 25.

Git & GitHub | 깃(Git)과 깃허브(GitHub) ✅ 깃 Git 분산형 버전 관리 시스템(DVCS, Distributed Version Control System)이다. 파일의 변화를 추적하고, 변경 내용을 기록한다. 여러 명이 함께 작업할 때 파일의 충돌을 방지할 수 있다. 이전에 작성한 코드나 파일 버전으로 돌아갈 수 있다. ✅ 깃허브 GitHub 깃(Git)을 기반으로한 프로젝트를 호스팅(저장)하는 웹 기반 호스팅 서비스이다. 깃(Git)으로 관리하는 코드나 파일을 클라우드 상에 저장하고, 다른 사람과 협업한다. 이슈 관리, 프로젝트 관리, 코드 리뷰 등의 기능을 제공하여 소프트웨어 개발 과정을 보다 효율적으로 관리한다. 깃(Git)은 버전 관리 도구이고, 깃허브(GitHub)는 깃을 이용한 프로젝트 관리 플랫폼이다. 형상 관리 시스템(Verson.. 2023. 3. 10.

리액트 React | CRA, Create React App: 리액트 애플리케이션 개발을 위한 보일러플레이트 - 폴더 구조 ✅ CRA, Create React App CRA, Create React App는 리액트(React) 애플리케이션을 개발할 때 사용하는 보일러플레이트(Boilerplate)입니다. 보일러플레이트는 개발자들이 프로젝트를 빠르게 시작하고, 일관된 구조와 설정을 가진 애플리케이션을 개발할 수 있도록 도와줍니다. CRA를 사용하면 바벨(Babel)이나 웹팩(Webpack)과 같은 빌드 도구 없이도 간편하게 리액트 프로젝트를 설정할 수 있습니다. 💡 CRA 설치하기 React 앱을 생성할 폴더를 만듭니다. VSCode나 다른 텍스트 편집기에서 해당 프로젝트 폴더를 엽니다. 터미널을 열고 다음 명령어를 입력하여 React 앱을 생성합니다. npx create-react-app . 터미널에서 명령어 [npm sta.. 2023. 3. 8.

리액트 React | React 웹 개발 환경 구축: Node.js, npm, npx ✅ React 웹 개발 환경 React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. React를 개발하기 위한 환경을 구축하는 것은 프로젝트를 시작하는 첫 단계입니다. 이러한 환경을 구성하기 위해 다음과 같은 도구들이 사용됩니다. 💡 Node.js Node.js는 Chrome V8 JavaScript 엔진으로 구동되는 오픈소스 자바스크립트 런타임 환경입니다. Node.js는 서버 측 자바스크립트 실행을 위한 플랫폼으로 사용되며, React 개발에서는 바벨(Babel)과 웹팩(Webpack)과 같은 도구들을 사용하기 위해 필요합니다. Node.js는 비동기 이벤트 기반의 입출력 모델을 사용하여 가볍고 효율적인 네트워크 애플리케이션 개발을 가능하게 합니다. Babel: B.. 2023. 3. 7.

웹 구조 WEB | 스타일 시트 CSS, Cascading Style Sheets ✅ 스타일 시트 CSS, Cascading Style Sheets스타일 시트 CSS, Cascading Style Sheets는 웹 페이지의 외관을 표현한다.웹 페이지의 디자인으로써 레이아웃, 텍스트 장식, 배경 등을 표현한다. CSS는 페이지 수가 많은 HTML 파일 코드를 간소화하는 데 유용하다.각 페이지마다 스타일을 정의할 경우 번거롭다. HTML 파일에서 CSS 파일을 참조하는 태그를 사용하여 연결한다. CSS 대신 Bootstrap 프레임워크나 Sass를 이용하기도 한다. 2023. 2. 9.

웹 구조 WEB | HTML, Hyper Text Markup Language | 하이퍼텍스트, 하이퍼링크, 태그 예시 ✅ HTML, Hyper Text Markup Language웹 페이지는 하이퍼텍스트로 작성되고는 하이퍼링크를 사용하여 이동한다. 💡 하이퍼텍스트HTML은 하이퍼텍스트를 기술하기 위한 언어이다.HTML은 태그라는 마크를 사용한다.마크로 문서 구조를 표현하기 때문에 HTML을 마크업 언어로 부른다. 태그 예시a: 하이퍼링크br: 줄 바꿈h: 표제header: 도입부hr: 밑줄img: 이미지 삽입meta: 페이지 설명p: 문장section: 페이지 각각table: 테이블 구조title: 타이틀 HTML로 작성한 페이지의 확장자는 html이나 htm이다. 💡 하이퍼링크 hypertext reference 약자 herf로 부른다. 2023. 2. 9.

웹 구조 WEB | 웹 디자이너 | UX 디자인, UI 디자인, 웹 디자인 ✅ 웹 디자인 웹 사이트는 코드로 구성되어 있다. 웹 사이트를 이용하는 시스템에서는 웹 디자인은 필요하다. UX, User eXperience 디자인: 사용자가 얻을 수 있는 만족하는 체험을 설계한다. UI 디자인: 최적의 외관, 편리한 사용을 설계한다. 웹 디자인: 언어와 도구로 외관을 표현한다. 2023. 2. 9.

웹 구조 WEB | 정보 시스템 SoR과 SoE ✅ 정보 시스템 SoR과 SoE 💡 정보 시스템 SoR 시스템에서 SoE 시스템으로 바뀌고 있다. 열람 중심 웹 사이트에서 다양한 정보를 수집하여 활용하는 웹 앱, 웹 시스템으로 변화함에 따름이다. 기록 시스템 SoR, System of Record: 과거에 사용, 조직 관리 중심 연결되는 시스템 SoE, System of Engagement: 현재에 사용, 다양한 조직과 개인의 연계 중심 💡 개발 스킬 디바이스나 네트워크가 급속히 다양해짐에 따라 과거와 현재의 개발 스킬이 변화한다. 제로 베이스에서 개발했던 과거에서, 프레임워크를 이용하고 API를 활용하는 현재가 되었다. 독자성이나 전용성을 중시하는 과거에서, 범용성이나 가용성을 중시하는 현재가 되었다. 프로그래밍에 구애받지 않고 코드를 최대한 적지 .. 2023. 2. 9.

웹 구조 WEB | 웹 사이트 규모 | site: 명령어, 웹 페이지 수 카운트 ✅ 웹 사이트 규모 웹 사이트 규모는 웹 페이지 수로 측정한다. 총 페이지 수의 기준은 액티브한 페이지를 전제로 한다. 소규모: 100 페이지 이하 중규모: 1,000 페이지 이하 대규모: 10,000 페이지 이하 초대규모: 10,000 페이지 이상 대규모 이상이 되면 유지 보수가 까다롭게 된다. 💡 웹 페이지 수 카운트 site: 명령어로 페이지 수를 카운트한다. site: 명령어는 구글이 인식하고 있는 페이지 수이므로 실제 페이지 수와 오차는 있지만 대략적인 규모는 짐작할 수 있다. 2023. 2. 9.

웹 구조 WEB | 해외 웹 사이트 접속 구조 | ISP 네트워크, 인터넷 익스체인지 IX ✅ 해외 웹 사이트 접속 구조 해외 웹 사이트는 국외에 서버가 설치되어 있다. ISP(KT, SKT, LG) 네트워크를 거친다. ISP 상위 계층 인터넷 익스체인지 IX 네트워크 사업자 설비를 통하여 해외로 나간다. 인터넷 익스체인지 IX는 인터넷 상호 접속점으로 부르기도 한다. 💡 인터넷 익스체인지 IX 한국에서 해외 웹 사이트에 접속하기 위해서는 해저 케이블을 경유하여야 한다. 인터넷 익스체인지 IX는 해저 케이블의 네트워크에 연결되어 있다. 인터넷 익스체인지 IX는 대기업 통신사 중심으로 운영되고 있다. 안전 보장상의 이유로 구체적 소재지는 알려지지 않았다. 인터넷 익스체인지 IX 시스템이 다운되면 ISP 간의 교신이나 해외 웹 사이트 접근이 불가능해진다. 2023. 2. 9.

웹 구조 WEB | 웹 시스템 관리 | 클라서버 시스템, 온프레미스 On-Premises, 클라우드 서비스 ✅ 웹 시스템 웹 시스템은 브라우저, API, 애플리케이션이 설치된 디바이스로 웹 서버에 접근하는 구성이다. 💡 웹 시스템 관리 타사 웹 서버를 사용하는 것이 대부분이다. 자사 웹 서버 관리 자사 정보 시스템 센터, 데이터 센터에 서버를 설치하고 접근한다. 인트라넷: 내부 내트워크를 사용하는 것이다. 타사 웹 서버 위임, 대여 웹 서버, 메일 서비스 전용 인터넷 서비스 프로바이더 ISP 서비스, 클라우드 서비스, 데이터 센터 사업자의 호스팅 서비스를 이용한다. 💡 기업 업무 시스템 클라서버 시스템 클라이언트에서 LAN 네트워크를 통하여 시스템 서버에 접근한다. 온프레미스 On-Premises 클라서버 시스템 IT 기기가 기업이 관리하는 환경 내에 있는 것이다. 클라우드 서비스 서버를 클라우드 사업자가 관.. 2023. 2. 8.

웹 구조 WEB | API, Application Programming Interface ✅ API, Application Programming Interface 웹 시스템에 연결하는 방법에는 브라우저, API, 애플리케이션 등이 있다. API는 소프트웨어가 송수신할 때의 인터페이스를 의미한다. 💡 웹 시스템 API, WEB Application Programming Interface 웹 시스템 API는 하이퍼텍스트가 아닌 시스템 간의 데이터 송수신을 시행하는 구조이다. 스마트폰에서 애플리케이션을 통하여 웹서버에 데이터를 송수신하는 것이 예시이다. 웹 시스템 API는 위치 정보, 날씨 정보, 금융 거래, 이미지 인식, 언어 처리 등이 패턴화 되어 있다. 2023. 2. 8.

웹 구조 WEB | 브라우저 종류 | 요청과 응답의 렌더링 과정 ✅ 브라우저 브라우저는 하이퍼텍스트를 보여준다. HTML로 기술되어 있는 웹 페이지는 웹 사이트를 구성하고 브라우저에서 본다. 브라우저 종류 구글 Chrome 마이크로소프트 Microsoft Edge Internet Explorer 💡 브라우저 렌더링 Rendering Path 브라우저가 요청하고, 응답받는 과정을 렌더링 Rendering Path라고 한다. 요청, 리퀘스트 브라우저는 웹 서버에 요청을 한다. 응답, 리스폰스 웹 서버는 브라우저에 응답을 한다. HTML, CSS, JavaScript가 응답이다. 2023. 2. 8.

웹 구조 WEB | 웹 서버 구조 종류 | 랙 마운트형, 리눅스 Linux, Window Server, 유닉스 UNIX ✅ 웹 서버 💡 웹 서버 물리적 구조 웹 서버는 서비스 규모, 사용자 수에 따라 다른 구조를 가진다. 웹 서버 구조 종류 타워형: 오피스에서 주로 사용한다. 랙 마운트형: 정보 시스템 센터, 데이터 센터에서 주로 사용한다. Linux 사용이 늘어나고 있다. 리눅스 Linux: 필요한 기능위주로 추가하여 디스크 절약, 안정성 향상, 비용 절감이 가능하다. 구현이 어렵다. 윈도우 서버 Window Server: 많은 기능이 구현되어 있다. 유지 보수에 비용이 쓰인다. 범용기(메인 프레임): 대규모 업무 시스템에서 사용한다. 유닉스 UNIX: 대규모 업무 시스템에서 사용한다. 대규모 업무 시스템에서 범용기(메인 프레임), UNIX 계열 서버를 사용하기도 하지만 랙 마운트형을 여러 대 사용하기도 한다. 2023. 2. 8.

웹 구조 WEB | URL 구성 | 도메인명 종류, 프로토콜, 스키마명, FQDN ✅ URL 💡 URL이란 URL은 웹 페이지, 웹사이트의 파일이다. 구성 스키마(프로토콜)명 FQDN, Fully Qualified Domain Name: 완전 수식 도메인명, 호스트명 + 도메인명 경로명: 생략하여도 웹 서버 기능으로 보완한다. 💡 도메인명 도메인명은 IP 주소에 대응하는 이름이다. IP 주소를 알고 있는 사이트는 IP 주소를 입력하여 페이지를 찾을 수 있다. 하지만 숫자로 구성된 IP 주소는 어느 사이트인지 쉽게 알기 어렵기 때문에 도메인명을 사용한다. 도메인명 종류 gTLD, Generic Top Level Domain .com: 누구나 등록 가능, 상업 조직 대상, 10500원 .net: 누구나 등록 가능, 네트워크 대상, 11000원 .org: 법인(단체, 협회) .edu: 교육.. 2023. 2. 8.

웹 구조 WEB | 웹 페이지 열람 방법 | URL, 전용 애플리케이션 App ✅ 웹 페이지 열람 방법 💡 URL, Uniform Resource Locator 사용 PC, 스마트폰, 태블릿은 디바이스다. 웹 사이트에 가장 접근하기 쉬운 디바이스는 스마트폰인 것 같다. 디바이스에 설치된 브라우저를 사용하여 사용자는 웹 페이지에 접근한다. URL, Uniform Resource Locator을 입력, 클릭, 탭 한다. 💡 전용 애플리케이션 App 사용 디바이스 전용 애플리케이션을 사용하여 접근하는 경우도 늘고 있다. 전용 애플리케이션에 URL을 삽입하여 애플리케이션을 시작하면 바로 접근가능하다. 다른 서버와 자동적으로 특정 데이터를 주고받을 수 있다. 2023. 2. 7.

웹 구조 WEB | 웹 시스템 구조 | 웹 페이지, 웹 사이트, 웹 앱, 웹 시스템 ✅ 웹 시스템 브라우저 소프트웨어를 사용하여 URL을 입력하면 원하는 웹 사이트로 접근한다. 브라우저가 인터넷을 통하여 도착하는 곳은 웹 서버이다. 디바이스(브라우저), 인터넷, 웹 서버가 기본 구성이다. 물리적으로 클라서버 시스템과 같다. 💡 웹 사이트 문서 정보 중심의 웹 페이지로 구성되는 집합체이다. 💡 웹 앱, 애플리케이션 쇼핑 등의 동적인 구조를 가진다. 웹 서버에 애플리케이션 AP 서버, 데이터베이스 DB 서버 등을 추가한 형태이다. 💡 웹 시스템 웹 사이트, 웹 앱에 추가로 API 등 개별 서비스를 제공한다. 다소 복잡하고 규모가 큰 구조이다. 2023. 2. 7.

이전 1 2 3 4 5 6 다음

티스토리툴바