웹 시스템 개발 #Microservice Architecture

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Monolithic Architecture란? 모놀리틱 구조는 사용자 인터페이스, 데이터 베이스, 애플리케이션 로직과 같은 모든 요소를 단일 서버 내에 결합하는 것이 특징인 웹 애플리케이션의 일반적인 디자인 형태입니다. 모놀리틱 구조를 사용할 때의 장점은 간단한 구조덕에 개발이 쉬워지며, 확장성이 용이하다는 점입니다. 단점으로는 사소한 변경이 생길 때마다 시스템을 재구축하고 재배포해야하는 번거로움과, 애플리케이션이 너무 복잡해지는 등 문제가 발생할 수 있습니다. 이러한 문제점을 해결하기 위해 로직, 데이터 엑세스 레이어를 포함하여 별개의 레이어로 분류합니다. ..

• format_list_bulleted 웹 개발
• · 2023. 12. 28.
• textsms

웹 시스템 개발 #React UseEffect

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. ref React의 ref는 실제로 변경 시 추가 렌더링을 발생시키지 않고 구성 요소를 다시 렌더링하는 사이에 지속되는 값을 저장할 수 있습니다. DOM 요소에 직접 액세스하거나 업데이트 시 다시 렌더링을 트리거할 필요가 없는 값을 추적하는 데 자주 사용됩니다. import React, { useRef } from 'react'; export default function Counter() { const ref = useRef(0); const handleClick = () => { ref.current = ref.current + 1; alert('You c..

• format_list_bulleted 웹 개발
• · 2023. 12. 27.
• textsms

웹 시스템 개발 #React Context

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. React의 Context API는 React 애플리케이션 전체에서 전역적으로 상태를 관리하는 방법입니다. 이를 통해 구성 요소 계층의 각 수준을 통해 수동으로 props을 전달할 필요 없이 React 구성 요소의 전체 트리에서 값(데이터 또는 함수)을 공유할 수 있습니다. 즉, 깊게 중첩된 구성 요소를 처리하거나 여러 구성 요소가 동일한 데이터에 액세스해야 할 때 Context를 사용할 수 있습니다. Prop Drilling의 문제점 각 Heading 구성 요소에는 렌더링할 HTML 제목 태그(, 등)를 결정하기 위해 level prop이 필요합니다. 구성 ..

• format_list_bulleted 웹 개발
• · 2023. 12. 26.
• textsms

웹 시스템 개발 #React State(2)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 렌더링과 커밋 복습 트리거: 초기 렌더링(앱 시작)과 컴포넌트 상태 업데이트. 렌더링: 트리거 후, React는 화면에 무엇을 표시할지 결정하기 위해 컴포넌트를 호출합니다. "렌더링"은 React가 컴포넌트를 호출하는 과정입니다. 초기 렌더링 시, React는 root 컴포넌트를 호출합니다. 상태 업데이트가 발생한 후의 재렌더링에서는 해당 상태 업데이트를 트리거한 함수 컴포넌트를 호출합니다. 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면, React는 그 다음 컴포넌트를 렌더링합니다. 이 과정은 더 이상 중첩된 컴포넌트가 없을 때까지 계속됩니다. 커밋: Rea..

• format_list_bulleted 웹 개발
• · 2023. 12. 25.
• textsms

웹 시스템 개발 #React State(1)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Event Handling 이벤트 핸들러는 JavaScript의 이벤트 처리와 유사하지만 구문과 동작에 몇 가지 주요 차이점이 있습니다. React에서는 camelCase 명명 규칙(예: onClick, onSubmit)을 사용하여 요소에 이벤트 핸들러를 연결하며, 컴포넌트에 props로 전달됩니다. function Button() { const handleClick = () =>{ alert('안녕'); } return 이벤트 } function App() { return ( ); } form의 예시 form 및 해당 요소에 이벤트 핸들러를 추가하는 작업도 ..

• format_list_bulleted 웹 개발
• · 2023. 12. 22.
• textsms

웹 시스템 개발 #React 기초편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JSX 또는 JavaScript XML은 UI가 어떻게 보여야 하는지 설명하기 위해 React에서 사용되는 JavaScript의 구문 확장입니다. JSX를 사용하면 JavaScript 코드와 동일한 파일에 HTML 구조를 작성할 수 있는 방법을 제공합니다. JSX 소개 JSX를 사용하면 JavaScript 코드에 HTML과 유사한 태그를 작성할 수 있습니다. 이러한 태그는 뒤에서 React.createElement 호출로 변환됩니다. JavaScript로 컴파일되는 구문으로, 중괄호 {}로 묶어서 사용할 수 있습니다. JSX는 선택사항이며 React를 사용하기..

• format_list_bulleted 웹 개발
• · 2023. 12. 21.
• textsms

웹 시스템 개발 #React 이론편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JavaScript 프런트엔드 개발의 짧은 역사 시장에 최초로 등장한 다양한 기술을 기반으로 정렬된 JavaScript 프런트엔드 개발의 짧은 역사는 다음과 같이 요약할 수 있습니다. jQuery: 프런트엔드 개발 세계에서 가장 초기이자 가장 인기 있는 도구 중 하나였습니다. jQuery는 DOM, 이벤트 처리 및 Ajax 호출과의 상호 작용을 단순화하여 개발자가 순수 JavaScript의 복잡성을 몰라도 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있게 해주었습니다. Backbone.js: Backbone.js는 웹 애플리케이션 구축에 대한 보다 구조화된 접..

• format_list_bulleted 웹 개발
• · 2023. 12. 20.
• textsms

웹 시스템 개발 #Mongoose

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Mongoose란? Mongoose는 Node.js의 MongoDB용으로 널리 사용되는 ODM(Object Document Mapper) 라이브러리입니다. Mongoose 는 애플리케이션 데이터를 모델링하기 위한 간단한 스키마 기반 솔루션을 제공하며MongoDB 데이터베이스의 문서를 Node.js 프로그램의 개체로 변환하여 데이터 작업을 더 쉽게 만듭니다. 몽구스의 주요 기능 문서 매핑 Mongoose는 MongoDB의 문서를 프로그램의 JavaScript 개체에 매핑합니다. 이를 통해 일반 JavaScript 개체로 작업하는 것처럼 데이터와 상호 작용할 수 ..

• format_list_bulleted 웹 개발
• · 2023. 12. 19.
• textsms

웹 시스템 개발 #MongoDB

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Scaling Vertical Scaling 정의: 시스템의 성능을 향상시키기 위해 메모리, CPU, 디스크와 같은 하드웨어 자원을 증가시키는 방법입니다. Horizontal Scaling 정의: 시스템을 여러 부분으로 나누고, 각 부분을 서로 다른 서버나 시스템에서 처리하는 방법입니다. 이 방법은 시스템의 확장성을 높이고 부하를 분산시키는데 효과적입니다. NoSQL vs RDBMS 데이터 저장소를 선택할 때, 주로 고려되는 두 가지 옵션은 NoSQL과 관계형 데이터베이스 관리 시스템(RDBMS)입니다. 전통의 RDBMS 데이터 무결성 지원 : RDBMS는 A..

• format_list_bulleted 웹 개발
• · 2023. 12. 18.
• textsms

웹 시스템 개발 #ExpressJS

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이전 포스팅을 보지 않으셨다면 보고 오시는 것을 추천드립니다. 웹 시스템 개발 #NodeJS 학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Node.js 생성 및 목적 Node.js는 Ryan Dahl이 Joye wlsdn629.tistory.com npm (Node Package Manager) npm은 JavaScript 패키지 및 모듈을 설치, 관리, 공유 및 실행하는 것을 담당하는 패키지 관리자입니다. 패키지는 JavaScript 코드의 모음으로, 모듈,..

• format_list_bulleted 웹 개발
• · 2023. 12. 17.
• textsms

웹 시스템 개발 #NodeJS

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.Node.js 생성 및 목적Node.js는 Ryan Dahl이 Joyent에서 개발자로 근무하던 2009년에 만들어졌습니다. 웹브라우저에서도 사용되는 Google의 V8 JavaScript 엔진을 활용한 서버사이드 환경으로 설계되었으며, 브라우저의 클라이언트 측 환경과 일치하는 서버 측 환경을 제공하여 사용 언어의 일관성을 만드는 것이 목표였습니다. Node.js의 이점Node.js를 사용하면 개발자가 서버에서 JavaScript를 작성할 수 있으므로 다른 언어 간 컨텍스트 전환이 필요하지 않습니다. 이를 통해 전통적으로 서버 측에서 작업했던 전문가에 대한 의존..

• format_list_bulleted 웹 개발
• · 2023. 12. 16.
• textsms

React 새로 설치하는 방법 및 기존 프로젝트에 설치하는 방법!

이번 포스팅에는 React를 사용하기 위해 설치해야 하는 (환경)요소들을 준비하는 방법에 대해 공유하고자 합니다. 준비물 Node.js nodejs.org LTS 버전을 다운받으시면 됩니다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 본인 OS에..

• format_list_bulleted 웹 개발
• · 2023. 11. 10.
• textsms

웹 시스템 개발 #Responsive Web 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번 포스팅에서는 반응형 웹에 대해 알아보는 시간을 갖고자 합니다. 반응형 웹 (Responsive Web)이란? 반응형 웹 (Responsive Web)은 웹 디자인 및 개발 기술의 한 형태로, 다양한 사용자 기기 및 "화면 크기에 맞춰" 웹 페이지를 최적화하는 방법입니다. 이를 통해 웹 페이지는 모바일 기기, 태블릿, 데스크탑, TV, 웨어러블 디바이스와 같은 다양한 플랫폼에서 잘 작동하고 보기 좋게 표시됩니다. 여기서 잘 작동하고 보기 좋게 표시된다는 의미는 앞서 언급한 "화면 크기에 맞춰" 볼 수 있다는 것을 뜻합니다. 화면 크기에 맞지 않는다면 어떻게..

• format_list_bulleted 웹 개발
• · 2023. 11. 3.
• textsms

웹 시스템 개발 #FORM 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번 포스팅에서는 Form이란 무엇이며, 왜 사용하고, 어떻게 사용하는지에 대해 알아보고자 합니다. Form이란? HTML 요소는 웹 페이지에서 상호 작용하고 데이터를 입력하며 웹 애플리케이션과 상호 작용할 수 있는 "대화형 영역을 정의"하는 데 사용됩니다. Form은 사용자가 웹 페이지에서 데이터를 입력하고 제출할 때 사용되며 일반적으로 이 데이터는 웹 서버로 전송되어 처리됩니다. Form 요소는 다양한 입력 필드와 제출(Submit) 버튼을 포함할 수 있으며, 이러한 입력 필드는 사용자로부터 정보를 수집하고 처리하는 데 사용됩니다. 즉, Form을 사용하는..

• format_list_bulleted 웹 개발
• · 2023. 11. 2.
• textsms

웹 시스템 개발 #DOM 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번 포스팅에서는 DOM에 대해 알아보는 시간을 갖고자 합니다. DOM이란? DOM은 "Document Object Model"의 약어로, HTML 문서의 구조를 나타내고 브라우저와 상호작용하기 위한 프로그래밍 인터페이스입니다. DOM은 웹 페이지의 구조, 스타일 및 내용을 변경할 수 있도록 프로그램에서 HTML 문서 데이터에 액세스할 수 있는 방법을 제공합니다. DOM의 주요 특징은 다음과 같습니다. 객체 지향 표현: DOM은 웹 페이지를 완전한 객체 지향 방식으로 나타냅니다. HTML 문서의 각 요소(element)들은 브라우저에서 로딩되면서 객체화됩니다...

• format_list_bulleted 웹 개발
• · 2023. 11. 1.
• textsms