웹 시스템 개발 #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

웹 시스템 개발 #Asynchronous Programming 중급편(2)

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번편은 JavaScript:Asynchronous Programming 1편에 이은 2편입니다. 이전 1편을 읽고오시는 것을 추천드립니다. 웹 시스템 개발 #Asynchronous Programming 중급편(1) 학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Asynchronous(비동기) Programming란? JavaScript에 wlsdn629.tistory.com 이번 포스팅에서는 async function과 await에 대한 설명을 해보고자 합니다..

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

웹 시스템 개발 #JavaScript: Functions and Classes 고급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번편은 JavaScript:Functions and Classes 초급편에 이은 고급편입니다. 더 심화된 기초를 다루므로 이전 초급편을 읽고오시는 것을 추천드립니다. 웹 시스템 개발 #JavaScript: Functions and Classes 초급편 학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JavaScript의 함수(Functions) 함수란 무엇인가 wlsdn629.tistory.com Closure 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조..

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

웹 시스템 개발 #JavaScript: Functions and Classes 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JavaScript의 함수(Functions) 함수란 무엇인가요? 함수는 코드의 "재사용성"을 높이고 모듈화를 가능하게 하는 프로그래밍 구조 중 하나입니다. JavaScript에서 함수는 'Single Unit'으로 취급되며, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다. function helloWorld() { console.log("Hello, 세상~!"); } 함수 선언(Function Declaration) Function Invocation은 함수를 일반적인 방법으로 호출하는 것을 의미하며 함수의 이름, 매개변수, 그리고 실행할 코드 블..

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

웹 시스템 개발 #JavaScript:Fundamentals 고급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번편은 JavaScript:Fundamentals 초급편에 이은 고급편입니다. 더 심화된 기초를 다루므로 이전 초급편을 읽고오시는 것을 추천드립니다. 2023.10.26 - [학교 공부/웹 개발] - 웹 시스템 개발 #JavaScript:Fundamentals 초보편 Objects 객체(Object)는 "키-값" 쌍의 집합으로, 자바스크립트에서 복잡한 데이터 구조를 표현하는 데 사용됩니다. 객체는 어떤 형태의 데이터든 담을 수 있고, 함수를 통해 그 데이터를 조작하는 로직을 포함할 수 있습니다. 사용 예시 const person = { name: "John"..

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

웹 시스템 개발 #JavaScript:Fundamentals 초보편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JavaScript란 무엇인지 JavaScript는 웹 브라우저에서 작동하는 인터프리터 언어로, 동적 웹 페이지를 생성하기 위해 사용됩니다. HTML은 구조를, CSS는 스타일을, JavaScript는 기능을 추가합니다. 주석 사용방법 주석은 코드의 일부를 무시하게 만들거나, 설명을 추가하는 데 사용됩니다. 한 줄 주석: 코드 뒤에 //를 삽입합니다. // 이 줄은 주석입니다. 여러 줄 주석: /*로 시작하고 */로 끝납니다. /* 이것은 여러 줄 주석입니다. */ Character Set JavaScript는 Unicode Character Set를 사용합니..

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

웹 시스템 개발 # CSS초보편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. CSS란? CSS (Cascading Style Sheets)는 마크업 언어의 문서를 "꾸미기 위한" 스타일시트 언어입니다. 다양한 디자인과 레이아웃을 적용하여 웹 페이지의 외관을 제어(꾸밈)합니다. 외부 스타일 시트 (External Style Sheet) 외부 스타일 시트는 .css 파일에 스타일을 정의하고 HTML 문서에서 참조합니다. 여러 HTML 문서에서 동일한 스타일을 재사용할 수 있습니다. This is a paragraph. Syntax CSS 문법은 선택자(Selector)와 중괄호("{ }") 안에 속성: 값; 형식으로 작성됩니다. p { c..

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

웹 시스템 개발 #HTML 초보편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. HTML 배우기 시작~! HTML5란? HTML5는 웹 페이지를 만들기 위한 가장 최신의 웹 기술입니다. HTML5 문서의 기본 구조는 다음과 같습니다. 먼저, 문서의 첫 줄에는 선언이 와야 합니다. 이 선언은 HTML5 문서임을 선언해주는 역할입니다. 다음에는 최상위 요소인 태그가 와야 합니다. 이 태그는 Header 1 Header 2 Header 3 Header 4 Header 5 Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data HyperLink Tag: Descript..

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